feat: pipe through dashboard tile def [MA-3442]

packages/analytics/analytics-chart/README.md

@@ -54,6 +54,8 @@ yarn add @kong-ui-public/analytics-chart
 - `stacked` option applies to timeseries charts as well as vertical/horizontal bar charts.
 - `fill` only applies to time series line chart
 - `chartTypes` defined [here](https://github.com/Kong/public-ui-components/blob/main/packages/analytics/analytics-utilities/src/types/chart-types.ts)
+- `threshold` is optional
+  - A key / value pair of type `Record<ExploreAggregations: number>` will draw a dotted threshold line on a timeseries chart at the provided Y-axis value.
 - `chartDatasetColors` are optional
   - If no colors are provided, the default color palette will be used
   - If custom colors are needed you may provide a custom color palette in the form of:

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

@@ -258,8 +258,8 @@ import {
   CsvExportModal,
   CsvExportButton,
 } from '../../src'
-import type { AnalyticsExploreRecord, ExploreResultV4, QueryResponseMeta } from '@kong-ui-public/analytics-utilities'
-import type { AnalyticsChartColors, AnalyticsChartOptions, ChartType, MetricThreshold } from '../../src/types'
+import type { AnalyticsExploreRecord, ExploreAggregations, ExploreResultV4, QueryResponseMeta } from '@kong-ui-public/analytics-utilities'
+import type { AnalyticsChartColors, AnalyticsChartOptions, ChartType } from '../../src/types'
 import { isValidJson, rand } from '../utils/utils'
 import { lookupDatavisColor } from '../../src/utils'
 import { lookupStatusCodeColor } from '../../src/utils/customColors'
@@ -324,9 +324,9 @@ const serviceDimensionValues = ref(new Set([
   'service1', 'service2', 'service3', 'service4', 'service5',
 ]))
 
-const threshold:MetricThreshold = {
+const threshold = {
   'request_count': 1250,
-} as any as MetricThreshold
+} as Record<ExploreAggregations, number>
 
 const exportModalVisible = ref(false)
 const setModalVisibility = (val: boolean) => {
@@ -383,6 +383,7 @@ const analyticsChartOptions = computed<AnalyticsChartOptions>(() => {
   return {
     type: chartType.value,
     stacked: stackToggle.value,
+    threshold,
     // chartDatasetColors: colorPalette.value,
   }
 })

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

@@ -111,7 +111,7 @@
 
 <script setup lang="ts">
 import composables from '../composables'
-import type { AnalyticsChartOptions, EnhancedLegendItem, MetricThreshold, TooltipEntry } from '../types'
+import type { AnalyticsChartOptions, EnhancedLegendItem, TooltipEntry } from '../types'
 import { ChartLegendPosition } from '../enums'
 import StackedBarChart from './chart-types/StackedBarChart.vue'
 import DoughnutChart from './chart-types/DoughnutChart.vue'
@@ -185,7 +185,7 @@ const props = defineProps({
     default: true,
   },
   threshold: {
-    type: Object as PropType<MetricThreshold>,
+    type: Object as PropType<Record<ExploreAggregations, number>>,
     required: false,
     default: undefined,
   },
@@ -213,7 +213,7 @@ const computedChartData = computed(() => {
       {
         fill: props.chartOptions.stacked,
         colorPalette: props.chartOptions.chartDatasetColors || defaultStatusCodeColors,
-        threshold: props.threshold || undefined,
+        threshold: props.chartOptions.threshold || undefined,
       },
       toRef(props, 'chartData'),
     ).value

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

@@ -8,6 +8,8 @@ import { isNullOrUndef } from 'chart.js/helpers'
 import composables from '../composables'
 import { KUI_COLOR_BACKGROUND_NEUTRAL } from '@kong/design-tokens'
 
+type MetricThreshold = Record<ExploreAggregations, number>
+
 const range = (start: number, stop: number, step: number = 1): number[] =>
   Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step)
 
@@ -184,7 +186,7 @@ export default function useExploreResultToTimeDataset(
         // Draw threshold lines, if any
         if (deps.threshold) {
           for (const key of Object.keys(deps.threshold)) {
-            const thresholdValue = deps.threshold[key as keyof ExploreAggregations]
+            const thresholdValue = deps.threshold[key as keyof MetricThreshold]
 
             if (thresholdValue) {
               datasets.push({

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

@@ -6,7 +6,6 @@ import useExploreResultToTimeDataset from './useExploreResultToTimeDatasets'
 import { BORDER_WIDTH, NO_BORDER, defaultStatusCodeColors } from '../utils'
 import { addHours } from 'date-fns'
 import type { MockInstance } from 'vitest'
-import type { MetricThreshold } from 'src/types'
 
 const START_FOR_DAILY_QUERY = new Date(1672560000000)
 const END_FOR_DAILY_QUERY = new Date(1672646400000)
@@ -760,7 +759,7 @@ describe('useVitalsExploreDatasets', () => {
     const result = useExploreResultToTimeDataset(
       {
         fill: false,
-        threshold: { 'request_count': 320 } as any as MetricThreshold,
+        threshold: { 'request_count': 320 } as Record<ExploreAggregations, number>,
       },
       exploreResult,
     )

packages/analytics/analytics-chart/src/types/chart-data.ts

@@ -35,10 +35,6 @@ export interface LegendValueEntry {
   formatted: string
 }
 
-export type MetricThreshold = {
-  [K in keyof ExploreAggregations]: number
-}
-
 /**
  * Legend item with enhanced value
  */
@@ -88,6 +84,10 @@ export interface AnalyticsChartOptions {
    * Sort tooltip entries
    */
   chartTooltipSortFn?: ChartTooltipSortFn,
+  /**
+   * A static or dynamic metric threshold to be displayed on a timeseries chart
+   */
+  threshold?: Record<ExploreAggregations, number>,
 }
 
 /**

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

@@ -1,5 +1,5 @@
 import type { AnalyticsChartColors } from './chart-data'
-import type { MetricThreshold } from '../types'
+import type { ExploreAggregations } from '@kong-ui-public/analytics-utilities'
 
 /**
  * Interace representing the various options
@@ -14,5 +14,5 @@ import type { MetricThreshold } from '../types'
 export interface ExploreToDatasetDeps {
   colorPalette?: AnalyticsChartColors | string[]
   fill?: boolean
-  threshold?: MetricThreshold
+  threshold?: Record<ExploreAggregations, number>
 }

packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue

@@ -46,6 +46,7 @@ import type { DashboardConfig, DashboardRendererContext, TileConfig, TileDefinit
 import { DashboardRenderer } from '../../src'
 import { inject, ref } from 'vue'
 import { ChartMetricDisplay } from '@kong-ui-public/analytics-chart'
+import type { ExploreAggregations } from '@kong-ui-public/analytics-utilities'
 import type { SandboxNavigationItem } from '@kong-ui-public/sandbox-layout'
 import { SandboxLayout } from '@kong-ui-public/sandbox-layout'
 import '@kong-ui-public/sandbox-layout/dist/style.css'
@@ -164,6 +165,7 @@ const dashboardConfig: DashboardConfig = {
         chart: {
           type: 'timeseries_line',
           chartTitle: 'Timeseries line chart of mock data',
+          threshold: { 'request_count': 3200 } as Record<ExploreAggregations, number>,
         },
         query: {
           datasource: 'basic',

packages/analytics/dashboard-renderer/src/components/BaseAnalyticsChartRenderer.vue

@@ -58,6 +58,7 @@ const options = computed((): AnalyticsChartOptions => ({
   type: props.chartOptions.type,
   stacked: props.chartOptions.stacked ?? false,
   chartDatasetColors: props.chartOptions.chartDatasetColors,
+  threshold: props.chartOptions.threshold,
 }))
 
 const exploreLink = computed(() => {

packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts

@@ -115,6 +115,14 @@ export const timeseriesChartSchema = {
     stacked: {
       type: 'boolean',
     },
+    threshold: {
+      type: 'object',
+      properties: Object.fromEntries(
+        exploreAggregations.map((key) => [key, { type: 'number' }]),
+      ),
+      required: exploreAggregations,
+      additionalProperties: false,
+    },
     chartDatasetColors: chartDatasetColorsSchema,
     syntheticsDataKey,
     chartTitle,