feat(MetricChart): add legend to some charts

Author: artemmufazalov

src/components/MetricChart/MetricChart.tsx

@@ -29,7 +29,7 @@ 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;
@@ -91,6 +91,9 @@ const prepareWidgetData = (
                 show: true,
                 tracking: 'sticky',
             },
+            legend: {
+                show: showLegend,
+            },
         },
     };
 };

src/components/MetricChart/types.ts

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

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,
         },
     },
 ];

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.ts

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