feat: add threshold line to timeseries charts [MA-3442]

packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue

@@ -207,6 +207,7 @@
         :legend-position="legendPosition"
         :show-annotations="showAnnotationsToggle"
         :show-legend-values="showLegendValuesToggle"
+        :threshold="1250"
         :timeseries-zoom="timeSeriesZoomToggle"
         tooltip-title="tooltip title"
         @zoom-time-range="eventLog += 'Zoomed to ' + JSON.stringify($event) + '\n'"

packages/analytics/analytics-chart/src/components/AnalyticsChart.vue

@@ -72,6 +72,7 @@
         :metric-unit="computedMetricUnit"
         :stacked="chartOptions.stacked"
         :synthetics-data-key="syntheticsDataKey"
+        :threshold="threshold"
         :time-range-ms="timeRangeMs"
         :tooltip-title="tooltipTitle"
         :type="(chartOptions.type as ('timeseries_line' | 'timeseries_bar'))"
@@ -183,6 +184,11 @@ const props = defineProps({
     required: false,
     default: true,
   },
+  threshold: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
   timeseriesZoom: {
     type: Boolean,
     required: false,
@@ -207,6 +213,7 @@ const computedChartData = computed(() => {
       {
         fill: props.chartOptions.stacked,
         colorPalette: props.chartOptions.chartDatasetColors || defaultStatusCodeColors,
+        threshold: props.threshold || undefined,
       },
       toRef(props, 'chartData'),
     ).value

packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts

@@ -6,6 +6,7 @@ import type { Dataset, KChartData, ExploreToDatasetDeps, DatasetLabel } from '..
 import { parseISO } from 'date-fns'
 import { isNullOrUndef } from 'chart.js/helpers'
 import composables from '../composables'
+import { KUI_COLOR_BACKGROUND_NEUTRAL } from '@kong/design-tokens'
 
 const range = (start: number, stop: number, step: number = 1): number[] =>
   Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step)
@@ -180,6 +181,22 @@ export default function useExploreResultToTimeDataset(
         // sort by total, descending
         datasets.sort((a, b) => (Number(a.total) < Number(b.total) ? -1 : 1))
 
+        // Draw an optional threshold line
+        if (deps.threshold) {
+          datasets.push({
+            type: 'line',
+            borderColor: KUI_COLOR_BACKGROUND_NEUTRAL,
+            borderWidth: 3,
+            borderDash: [12, 8],
+            fill: false,
+            order: -1, // Display above all other datasets
+            borderJoinStyle: 'miter',
+            stack: 'custom', // Never stack this dataset
+            data: zeroFilledTimeSeries.map(ts => {
+              return { x: ts, y: deps.threshold }
+            }),
+          } as Dataset)
+        }
         return {
           datasets,
           colorMap,

packages/analytics/analytics-chart/src/composables/useExploreResultToTimedDatasets.spec.ts

@@ -726,4 +726,57 @@ describe('useVitalsExploreDatasets', () => {
     expect(result.value.datasets[3].backgroundColor).toEqual('#ffd5b1')
     expect(result.value.datasets[4].backgroundColor).toEqual('#ffb6b6')
   })
+
+  it('displays a static threshold line on timeseries charts', () => {
+    const exploreResult: ComputedRef<ExploreResultV4> = computed(() => ({
+      data: [
+        {
+          timestamp: START_FOR_DAILY_QUERY.toISOString(),
+          event: {
+            metric1: 2,
+            metric2: 1,
+          },
+        } as GroupByResult,
+        {
+          timestamp: END_FOR_DAILY_QUERY.toISOString(),
+          event: {
+            metric1: 2,
+            metric2: 1,
+          },
+        } as GroupByResult,
+      ],
+      meta: {
+        start_ms: Math.trunc(START_FOR_DAILY_QUERY.getTime()),
+        end_ms: Math.trunc(END_FOR_DAILY_QUERY.getTime()),
+        granularity_ms: 86400000,
+        metric_names: ['metric1', 'metric2'] as any as ExploreAggregations[],
+        display: {},
+        query_id: '',
+        metric_units: { metric1: 'units' } as MetricUnit,
+      },
+    }))
+
+    const staticThreshold = 1.24
+
+    const result = useExploreResultToTimeDataset(
+      {
+        fill: false,
+        threshold: staticThreshold,
+      },
+      exploreResult,
+    )
+
+    expect(result.value.datasets[2].data).toEqual(
+      [
+        {
+          x: START_FOR_DAILY_QUERY.getTime(),
+          y: staticThreshold,
+        },
+        {
+          x: END_FOR_DAILY_QUERY.getTime(),
+          y: staticThreshold,
+        },
+      ],
+    )
+  })
 })

packages/analytics/analytics-chart/src/types/explore-to-dataset-deps.ts

@@ -13,4 +13,5 @@ import type { AnalyticsChartColors } from './chart-data'
 export interface ExploreToDatasetDeps {
   colorPalette?: AnalyticsChartColors | string[]
   fill?: boolean
+  threshold?: number
 }