From bedd064967c4a0825ecc9667a8c5cb4826954496 Mon Sep 17 00:00:00 2001 From: Filip Date: Fri, 29 Nov 2024 10:37:23 -0800 Subject: [PATCH] feat: enable support for timeseries_bar chart (#1822) --- .../src/types/chart-types.ts | 1 + .../sandbox/pages/RendererDemo.vue | 26 ++++++++++++++++++- .../sandbox/sandbox-query-provider.ts | 13 +++++----- .../src/components/DashboardTile.vue | 1 + .../src/types/dashboard-renderer-types.ts | 3 ++- 5 files changed, 36 insertions(+), 8 deletions(-) diff --git a/packages/analytics/analytics-utilities/src/types/chart-types.ts b/packages/analytics/analytics-utilities/src/types/chart-types.ts index ab2d8e6ae7..6590d5566d 100644 --- 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 index 6ff03ac5b4..3f0675d90b 100644 --- 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 index f676ebbb7c..3be04a866e 100644 --- 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 = (response: T): Promise => { return new Promise((resolve) => { @@ -11,9 +12,9 @@ const delayedResponse = (response: T): Promise => { }) } -const queryFn = async (query: ExploreQuery): Promise => { +const queryFn = async (query: DatasourceAwareQuery): Promise => { 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' }, @@ -21,14 +22,14 @@ const queryFn = async (query: ExploreQuery): Promise => { ), ) } - 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 index 21d04ff602..95ff163031 100644 --- 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 = { '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 index f8defe9178..d9a71a6591 100644 --- 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',