From 5c71c7add279e083454da5b1b9a12639c900c30e Mon Sep 17 00:00:00 2001 From: mufazalov Date: Fri, 31 Jan 2025 12:11:21 +0300 Subject: [PATCH] feat(MetricChart): add legend to some charts --- package-lock.json | 16 ++++++++-------- package.json | 2 +- src/components/MetricChart/MetricChart.tsx | 9 ++++++--- src/components/MetricChart/types.ts | 1 + .../defaultDashboardConfig.ts | 17 +++++------------ .../TenantCpu/cpuDashboardConfig.ts | 1 + 6 files changed, 22 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index b996288da..07afc62fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@bem-react/classname": "^1.6.0", "@ebay/nice-modal-react": "^1.2.13", "@gravity-ui/axios-wrapper": "^1.5.1", - "@gravity-ui/chartkit": "^5.19.2", + "@gravity-ui/chartkit": "^5.20.0", "@gravity-ui/components": "^3.13.2", "@gravity-ui/date-components": "^2.11.0", "@gravity-ui/date-utils": "^2.5.6", @@ -3018,15 +3018,15 @@ "dev": true }, "node_modules/@gravity-ui/chartkit": { - "version": "5.19.2", - "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-5.19.2.tgz", - "integrity": "sha512-vxasCPEKZbbvBxz6HED3rkAinPH1xXMEMFHIgvEyNEqdAf8L6dxEZeoxDwJVnP1x59AJejyeyNb21LeYHRAH1Q==", + "version": "5.20.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-5.20.0.tgz", + "integrity": "sha512-02Jca+p27mOsdzzazAXt2DNP1G93EwL6ntVpkiZgBOonArU5M+EeNfphbffPalJSxKJUrTgFvZyLmOplnUSaLg==", "dependencies": { "@bem-react/classname": "^1.6.0", "@gravity-ui/charts": "^0.5.0", "@gravity-ui/date-utils": "^2.1.0", "@gravity-ui/i18n": "^1.0.0", - "@gravity-ui/yagr": "^4.4.0", + "@gravity-ui/yagr": "^4.5.0", "afterframe": "^1.0.2", "lodash": "^4.17.21", "tslib": "^2.6.2" @@ -3288,9 +3288,9 @@ } }, "node_modules/@gravity-ui/yagr": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/yagr/-/yagr-4.4.0.tgz", - "integrity": "sha512-N/kg0zBeUnYmMciC8WSG9DfpgIX2gajJz5EsKaAnOSA38xlIIVeyXfXUGqauNU4IOX9tkEIK1UGjx0rfkT2zqw==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/yagr/-/yagr-4.5.0.tgz", + "integrity": "sha512-xmXAA8bw0J+kgsqKzr4Xl94gvNd5+y/DOKGMXibFo8a7xwTa7hbiynJAfjAvr1h7a/7KfsMfPbkEMJgMokBH4A==", "dependencies": { "uplot": "1.6.31" }, diff --git a/package.json b/package.json index c63d888b9..25e590424 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@bem-react/classname": "^1.6.0", "@ebay/nice-modal-react": "^1.2.13", "@gravity-ui/axios-wrapper": "^1.5.1", - "@gravity-ui/chartkit": "^5.19.2", + "@gravity-ui/chartkit": "^5.20.0", "@gravity-ui/components": "^3.13.2", "@gravity-ui/date-components": "^2.11.0", "@gravity-ui/date-utils": "^2.5.6", diff --git a/src/components/MetricChart/MetricChart.tsx b/src/components/MetricChart/MetricChart.tsx index 2846b7b4e..f961b576f 100644 --- a/src/components/MetricChart/MetricChart.tsx +++ b/src/components/MetricChart/MetricChart.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ChartKit, {settings} from '@gravity-ui/chartkit'; -import type {YagrSeriesData, YagrWidgetData} from '@gravity-ui/chartkit/yagr'; +import type {YagrWidgetData} from '@gravity-ui/chartkit/yagr'; import {YagrPlugin} from '@gravity-ui/chartkit/yagr'; import {cn} from '../../utils/cn'; @@ -29,12 +29,12 @@ const prepareWidgetData = ( data: PreparedMetricsData, options: ChartOptions = {}, ): YagrWidgetData => { - const {dataType, scaleRange} = options; + const {dataType, scaleRange, showLegend} = options; const defaultDataFormatter = getDefaultDataFormatter(dataType); const isDataEmpty = !data.metrics.length; - const graphs: YagrSeriesData[] = data.metrics.map((metric, index) => { + const graphs: YagrWidgetData['data']['graphs'] = data.metrics.map((metric, index) => { const lineColor = metric.color || colors[index]; const color = colorToRGBA(lineColor, 0.1); @@ -91,6 +91,9 @@ const prepareWidgetData = ( show: true, tracking: 'sticky', }, + legend: { + show: showLegend, + }, }, }; }; diff --git a/src/components/MetricChart/types.ts b/src/components/MetricChart/types.ts index 3bca97734..beea68789 100644 --- a/src/components/MetricChart/types.ts +++ b/src/components/MetricChart/types.ts @@ -38,6 +38,7 @@ export interface ChartOptions { min?: number; max?: number; }; + showLegend?: boolean; } export type ChartDataStatus = 'loading' | 'success' | 'error'; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig.ts b/src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig.ts index b4dcbd255..78c916b83 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig.ts +++ b/src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig.ts @@ -16,31 +16,24 @@ export const defaultDashboardConfig: ChartConfig[] = [ metrics: [ { target: 'queries.latencies.p50', - title: i18n('charts.transaction-latency', { - percentile: 'p50', - }), + title: 'p50', }, { target: 'queries.latencies.p75', - title: i18n('charts.transaction-latency', { - percentile: 'p75', - }), + title: 'p75', }, { target: 'queries.latencies.p90', - title: i18n('charts.transaction-latency', { - percentile: 'p90', - }), + title: 'p90', }, { target: 'queries.latencies.p99', - title: i18n('charts.transaction-latency', { - percentile: 'p99', - }), + title: 'p99', }, ], options: { dataType: 'ms', + showLegend: true, }, }, ]; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.ts b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.ts index be4e870bd..ff0f67a73 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.ts +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.ts @@ -22,6 +22,7 @@ export const cpuDashboardConfig: ChartConfig[] = [ min: 0, max: 1, }, + showLegend: true, }, }, ];