From 3e14d7c32be70a679858ba4026e45dacf751325e Mon Sep 17 00:00:00 2001
From: mihai-peteu <mihai.peteu@konghq.com>
Date: Tue, 3 Dec 2024 14:50:44 -0800
Subject: [PATCH] feat: isThreshold as part of LegendItem [MA-3442]

---
 .../components/chart-plugins/ChartLegend.vue  | 41 ++++++++-----------
 .../chart-types/TimeSeriesChart.vue           |  1 +
 .../src/composables/useChartLegendValues.ts   |  9 +++-
 .../useExploreResultToTimeDatasets.ts         |  2 +
 .../analytics-chart/src/types/chart-data.ts   | 11 ++++-
 .../sandbox/pages/RendererDemo.vue            |  4 +-
 6 files changed, 41 insertions(+), 27 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 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)"
     >
-      <template v-if="text !== i18n.t('chartLabels.threshold')">
+      <div
+        class="square-marker"
+        :style="{ background: fillStyle, 'border-color': strokeStyle }"
+      />
+      <div
+        class="label-container"
+        :class="{ 'strike-through': !isDatasetVisible(datasetIndex, index) }"
+      >
         <div
-          class="square-marker"
-          :style="{ background: fillStyle, 'border-color': strokeStyle }"
-        />
+          class="label"
+          :class="{ 'truncate-label' : shouldTruncate }"
+          :title="text"
+        >
+          {{ text }}
+        </div>
         <div
-          class="label-container"
-          :class="{ 'strike-through': !isDatasetVisible(datasetIndex, index) }"
+          v-if="value && showValues"
+          class="sub-label"
         >
-          <div
-            class="label"
-            :class="{ 'truncate-label' : shouldTruncate }"
-            :title="text"
-          >
-            {{ text }}
-          </div>
-          <div
-            v-if="value && showValues"
-            class="sub-label"
-          >
-            {{ value.formatted }}
-          </div>
+          {{ value.formatted }}
         </div>
-      </template>
+      </div>
     </li>
   </ul>
 </template>
@@ -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<KChartData>, 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<ExploreAggregations, number>,
+          threshold: {
+            'request_count': 3200,
+          } as Record<ExploreAggregations, number>,
         },
         query: {
           datasource: 'basic',