From 5bbcfac0796530304dbd9b44611ad93fec16d1ee Mon Sep 17 00:00:00 2001 From: Rocky Fischer Date: Fri, 10 Jan 2025 10:33:13 -0500 Subject: [PATCH] Apply styling for empty color --- .../src/components/chart-plugins/ChartLegend.vue | 1 + .../src/components/chart-plugins/ChartTooltip.vue | 2 +- .../useExploreResultToDatasets.spec.ts | 2 +- .../src/composables/useExploreResultToDatasets.ts | 6 ++---- .../composables/useExploreResultToTimeDatasets.ts | 12 ++++++++---- .../useExploreResultToTimedDatasets.spec.ts | 4 ++-- .../analytics/analytics-chart/src/utils/colors.ts | 15 +++++++++++++++ 7 files changed, 30 insertions(+), 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 index 55db870340..4b729fa18f 100644 --- 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 index 1e87137774..35a13fec1c 100644 --- 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 index fdd1d4deea..115e91cbe9 100644 --- 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 index 9d984fd75e..a460dbf449 100644 --- 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 index bdcf9560a5..7be3746319 100644 --- 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 index 99be855bd6..a7f736d5b9 100644 --- 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 index 9f4ad82e6f..a8776f6448 100644 --- 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 +}