Apply styling for empty color

Kong · Jan 10, 2025 · 5bbcfac · 5bbcfac
1 parent 74fc7fd
commit 5bbcfac
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 12 deletions.
diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -305,6 +305,7 @@ const positionToClass = (position: `${ChartLegendPosition}`) => {
       margin-top: 0;
       .label {
         line-height: $kui-line-height-40;
+        padding-right: $kui-space-10;  // Ensure italics text doesn't get cut off.
         white-space: nowrap;
       }
     }

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue
@@ -260,9 +260,9 @@ ul.tooltip {
   }
 
   li {
+    align-items: center;
     display: flex;
     font-size: var(--kui-font-size-30, $kui-font-size-30);
-    line-height: 1;
     margin: var(--kui-space-40, $kui-space-40);
   }
 

diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToDatasets.spec.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToDatasets.spec.ts
@@ -242,7 +242,7 @@ describe('useVitalsExploreDatasets', () => {
           { label: 'ThenBy1', backgroundColor: '#a86cd5', data: [null, 100], isSegmentEmpty: false },
           { label: 'ThenBy3', backgroundColor: '#6a86d2', data: [200, null], isSegmentEmpty: false },
           { label: 'ThenBy4', backgroundColor: '#00bbf9', data: [250, null], isSegmentEmpty: false },
-          { label: 'ThenBy2', backgroundColor: '#00c4b0', data: [null, 150], isSegmentEmpty: true },
+          { label: 'ThenBy2', backgroundColor: '#afb7c5', data: [null, 150], isSegmentEmpty: true },
         ],
         isLabelEmpty: [false, true],
       },

diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToDatasets.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToDatasets.ts
@@ -1,5 +1,5 @@
 import type { AnalyticsExploreRecord, ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
-import { lookupDatavisColor, datavisPalette } from '../utils'
+import { lookupDatavisColor, datavisPalette, determineBaseColor } from '../utils'
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 import type { Dataset, ExploreToDatasetDeps, KChartData, BarChartDatasetGenerationParams, DatasetLabel } from '../types'
@@ -35,9 +35,7 @@ function generateDatasets(dataSetGenerationParams: BarChartDatasetGenerationPara
       return []
     }
 
-    const baseColor = Array.isArray(colorPalette)
-      ? lookupDatavisColor(i, colorPalette)
-      : colorPalette[dimension.name] || lookupDatavisColor(i) // fallback to default datavis palette if no color found
+    const baseColor = determineBaseColor(i, dimension.name, dimension.id === 'empty', colorPalette)
 
     // The label here matters for the title in the tooltip and legend.  It doesn't impact axes.
     return {

diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts
@@ -1,5 +1,11 @@
 import type { ExploreAggregations, ExploreResultV4, AnalyticsExploreRecord } from '@kong-ui-public/analytics-utilities'
-import { defaultLineOptions, lookupDatavisColor, datavisPalette, BORDER_WIDTH, NO_BORDER } from '../utils'
+import {
+  defaultLineOptions,
+  datavisPalette,
+  BORDER_WIDTH,
+  NO_BORDER,
+  determineBaseColor,
+} from '../utils'
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 import type { Dataset, KChartData, ExploreToDatasetDeps, DatasetLabel } from '../types'
@@ -156,9 +162,7 @@ export default function useExploreResultToTimeDataset(
             colorPalette = datavisPalette
           }
 
-          const baseColor = Array.isArray(colorPalette)
-            ? lookupDatavisColor(i, colorPalette)
-            : colorPalette[dimension] || lookupDatavisColor(i) // fallback to default datavis palette if no color found
+          const baseColor = determineBaseColor(i, dimension, isSegmentEmpty, colorPalette)
 
           return {
             rawDimension: dimension,

diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToTimedDatasets.spec.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToTimedDatasets.spec.ts
@@ -619,8 +619,8 @@ describe('useVitalsExploreDatasets', () => {
           rawDimension: 'emptyConsumer',
           rawMetric: 'request_count',
           label: 'emptyConsumer',
-          borderColor: '#a86cd5',
-          backgroundColor: '#a86cd5',
+          borderColor: '#afb7c5',
+          backgroundColor: '#afb7c5',
           data: [
             {
               x: START_FOR_DAILY_QUERY.getTime(),

diff --git a/packages/analytics/analytics-chart/src/utils/colors.ts b/packages/analytics/analytics-chart/src/utils/colors.ts
@@ -111,6 +111,7 @@ export const latencyColors: AnalyticsChartColors = {
 }
 
 export const OTHERS_COLOR = '#dad4c7'
+export const EMPTY_COLOR = '#afb7c5'
 
 /**
  * Maps the first character of a dataset's label to a predefined list of colors
@@ -120,3 +121,17 @@ export const lookupColor = (label: string) => {
 
   return (found && found[1]) || kongManangerColorPalette.standard
 }
+
+export const determineBaseColor = (i: number, dimensionName: string, isEmpty: boolean, colorPalette: string[] | AnalyticsChartColors): string => {
+  let baseColor
+
+  if (isEmpty) {
+    baseColor = EMPTY_COLOR
+  } else if (Array.isArray(colorPalette)) {
+    baseColor = lookupDatavisColor(i, colorPalette)
+  } else {
+    baseColor = colorPalette[dimensionName]
+  }
+
+  return baseColor || lookupDatavisColor(i) // fallback to default datavis palette if no color found
+}