feat: enable support for timeseries_bar chart (#1822)

Kong · Nov 29, 2024 · bedd064 · bedd064
1 parent 8cf2887
commit bedd064
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
diff --git a/packages/analytics/analytics-utilities/src/types/chart-types.ts b/packages/analytics/analytics-utilities/src/types/chart-types.ts
@@ -3,6 +3,7 @@ export const reportChartTypes = [
   'vertical_bar',
   'timeseries_line',
   'choropleth_map',
+  'timeseries_bar',
 ] as const
 
 export type ReportChartTypes = typeof reportChartTypes[number]
diff --git a/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue b/packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue
@@ -61,7 +61,7 @@ const context: DashboardRendererContext = {
 const dashboardConfig: DashboardConfig = {
   gridSize: {
     cols: 6,
-    rows: 5,
+    rows: 7,
   },
   tileHeight: 167,
   tiles: [
@@ -163,6 +163,7 @@ const dashboardConfig: DashboardConfig = {
       definition: {
         chart: {
           type: 'timeseries_line',
+          chartTitle: 'Timeseries line chart of mock data',
         },
         query: {
           datasource: 'basic',
@@ -245,6 +246,29 @@ const dashboardConfig: DashboardConfig = {
         },
       },
     } satisfies TileConfig,
+    {
+      definition: {
+        chart: {
+          type: 'timeseries_bar',
+          chartTitle: 'Timeseries bar chart of mock data',
+          stacked: true,
+        },
+        query: {
+          datasource: 'basic',
+          dimensions: ['time'],
+        },
+      },
+      layout: {
+        position: {
+          col: 0,
+          row: 5,
+        },
+        size: {
+          cols: 3,
+          rows: 2,
+        },
+      },
+    } satisfies TileConfig,
   ],
 }
 

diff --git a/packages/analytics/dashboard-renderer/sandbox/sandbox-query-provider.ts b/packages/analytics/dashboard-renderer/sandbox/sandbox-query-provider.ts
@@ -1,7 +1,8 @@
 import type { Plugin } from 'vue'
 import { nonTsExploreResponse, routeExploreResponse } from './mock-data'
 import { INJECT_QUERY_PROVIDER } from '../src'
-import { generateSingleMetricTimeSeriesData, type AnalyticsBridge, type AnalyticsConfigV2, type ExploreQuery, type ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
+import { generateSingleMetricTimeSeriesData } from '@kong-ui-public/analytics-utilities'
+import type { AnalyticsBridge, AnalyticsConfigV2, DatasourceAwareQuery, ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
 
 const delayedResponse = <T>(response: T): Promise<T> => {
   return new Promise((resolve) => {
@@ -11,24 +12,24 @@ const delayedResponse = <T>(response: T): Promise<T> => {
   })
 }
 
-const queryFn = async (query: ExploreQuery): Promise<ExploreResultV4> => {
+const queryFn = async (query: DatasourceAwareQuery): Promise<ExploreResultV4> => {
   console.log('Querying data:', query)
-  if (query.dimensions && query.dimensions.includes('time')) {
+  if (query.query.dimensions && query.query.dimensions.includes('time')) {
     return await delayedResponse(
       generateSingleMetricTimeSeriesData(
         { name: 'requests', unit: 'count' },
         { status_code: ['200', '400', '500'] },
       ),
     )
   }
-  if (query.dimensions && query.dimensions.findIndex(d => d === 'route') > -1) {
+  if (query.query.dimensions && query.query.dimensions.findIndex(d => d === 'route') > -1) {
     return await delayedResponse(routeExploreResponse)
   }
 
-  if (query.limit) {
+  if (query.query.limit) {
     return {
       ...nonTsExploreResponse,
-      data: nonTsExploreResponse.data.slice(0, query.limit),
+      data: nonTsExploreResponse.data.slice(0, query.query.limit),
     }
   }
 

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue b/packages/analytics/dashboard-renderer/src/components/DashboardTile.vue
@@ -148,6 +148,7 @@ const canShowKebabMenu = computed(() => hasKebabMenuAccess && !['golden_signals'
 
 const rendererLookup: Record<DashboardTileType, Component | undefined> = {
   'timeseries_line': TimeseriesChartRenderer,
+  'timeseries_bar': TimeseriesChartRenderer,
   'horizontal_bar': BarChartRenderer,
   'vertical_bar': BarChartRenderer,
   'gauge': SimpleChartRenderer,

diff --git a/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts b/packages/analytics/dashboard-renderer/src/types/dashboard-renderer-types.ts
@@ -37,6 +37,7 @@ export const dashboardTileTypes = [
   'vertical_bar',
   'gauge',
   'timeseries_line',
+  'timeseries_bar',
   'golden_signals',
   'top_n',
   'slottable',
@@ -109,7 +110,7 @@ export const timeseriesChartSchema = {
   properties: {
     type: {
       type: 'string',
-      enum: ['timeseries_line'],
+      enum: ['timeseries_line', 'timeseries_bar'],
     },
     stacked: {
       type: 'boolean',