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 4b26b42d2f..80257131ec 100644 --- a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue +++ b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue @@ -12,30 +12,28 @@ ref="legendItemsRef" @click="handleLegendItemClick(datasetIndex, index)" > - + + + class="label" + :class="{ 'truncate-label' : shouldTruncate }" + :title="text" + > + {{ text }} + - - {{ text }} - - - {{ value.formatted }} - + {{ value.formatted }} - + @@ -46,9 +44,6 @@ import { Chart, type LegendItem } from 'chart.js' import { inject, onBeforeUnmount, onMounted, ref, watch, type PropType, computed } from 'vue' import { KUI_SPACE_100, KUI_SPACE_80, KUI_SPACE_110 } from '@kong/design-tokens' import { debounce } from '../../utils' -import composables from '../../composables' - -const { i18n } = composables.useI18n() const props = defineProps({ id: { diff --git a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue index f63df36ddb..8a6bc4b34c 100644 --- a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue +++ b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue @@ -188,6 +188,7 @@ const htmlLegendPlugin = { // @ts-ignore - ChartJS types are incomplete legendItems.value = chart.options.plugins.legend.labels.generateLabels(chart) .map(e => ({ ...e, value: props.legendValues && props.legendValues[e.text] })) + .filter(e => !e.value.isThreshold) .sort(props.chartLegendSortFn) }, } diff --git a/packages/analytics/analytics-chart/src/composables/useChartLegendValues.ts b/packages/analytics/analytics-chart/src/composables/useChartLegendValues.ts index bf2e60981d..e67a9b33d8 100644 --- a/packages/analytics/analytics-chart/src/composables/useChartLegendValues.ts +++ b/packages/analytics/analytics-chart/src/composables/useChartLegendValues.ts @@ -30,7 +30,14 @@ export default function useChartLegendValues(chartData: Ref, chartTy })) || `${approxNum(raw, { capital: true, ...(metricUnit.value === 'usd' && { prefix: '$' }) })} ${metricUnit.value}` } - return { ...a, [v.label as string]: { raw, formatted } } + return { + ...a, + [v.label as string]: { + raw, + formatted, + isThreshold: v.isThreshold, + }, + } }, {}) }) diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts index cb4d953de5..511d3a8cec 100644 --- a/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts +++ b/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts @@ -167,6 +167,7 @@ export default function useExploreResultToTimeDataset( return { rawDimension: dimension, rawMetric: metric, + isThreshold: false, // @ts-ignore - dynamic i18n key label: (i18n && i18n.te(`chartLabels.${dimension}`) && i18n.t(`chartLabels.${dimension}`)) || dimension, borderColor: baseColor, @@ -192,6 +193,7 @@ export default function useExploreResultToTimeDataset( datasets.push({ type: 'line', rawMetric: key, + isThreshold: true, label: i18n.t('chartLabels.threshold'), borderColor: KUI_COLOR_BACKGROUND_NEUTRAL, borderWidth: 1.25, diff --git a/packages/analytics/analytics-chart/src/types/chart-data.ts b/packages/analytics/analytics-chart/src/types/chart-data.ts index ed9a84a142..395d9a0902 100644 --- a/packages/analytics/analytics-chart/src/types/chart-data.ts +++ b/packages/analytics/analytics-chart/src/types/chart-data.ts @@ -5,7 +5,13 @@ import type { ChartType, SimpleChartType } from './chart-types' import type { ExploreAggregations } from '@kong-ui-public/analytics-utilities' // Chart.js extendend interfaces -export type Dataset = ChartDataset & { rawDimension: string, rawMetric?: string, total?: number, lineTension?: number, fill?: boolean } +export type Dataset = ChartDataset & { rawDimension: string, + rawMetric?: string, + total?: number, + lineTension?: number, + fill?: boolean, + isThreshold?: boolean +} export interface KChartData extends ChartData { datasets: Dataset[] @@ -32,7 +38,8 @@ export interface AnalyticsChartColors { export interface LegendValueEntry { raw: number, - formatted: string + formatted: string, + isThreshold?: boolean, } /** diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue index a527df00f5..9787c00a31 100644 --- a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue +++ b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue @@ -165,7 +165,9 @@ const dashboardConfig: DashboardConfig = { chart: { type: 'timeseries_line', chartTitle: 'Timeseries line chart of mock data', - threshold: { 'request_count': 3200 } as Record, + threshold: { + 'request_count': 3200, + } as Record, }, query: { datasource: 'basic',