feat: isThreshold as part of LegendItem [MA-3442]

Kong · Dec 4, 2024 · e6ee577 · e6ee577
1 parent 6008472
commit e6ee577
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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
@@ -192,6 +192,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
@@ -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
@@ -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',