feat(MetricChart): add legend to some charts (#1893)

Author: artemmufazalov

package-lock.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",

package.json

@@ -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,
+            },
         },
     };
 };

src/components/MetricChart/MetricChart.tsx

@@ -38,6 +38,7 @@ export interface ChartOptions {
         min?: number;
         max?: number;
     };
+    showLegend?: boolean;
 }
 
 export type ChartDataStatus = 'loading' | 'success' | 'error';

src/components/MetricChart/types.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,
         },
     },
 ];

src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig.ts

@@ -22,6 +22,7 @@ export const cpuDashboardConfig: ChartConfig[] = [
                 min: 0,
                 max: 1,
             },
+            showLegend: true,
         },
     },
 ];