fix(MetricChart): draw area charts (#764)

Author: artemmufazalov

package-lock.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@gravity-ui/axios-wrapper": "^1.4.1",
-    "@gravity-ui/chartkit": "^4.20.1",
+    "@gravity-ui/chartkit": "^4.23.0",
     "@gravity-ui/components": "^2.12.0",
     "@gravity-ui/date-utils": "^1.4.2",
     "@gravity-ui/i18n": "^1.2.0",
@@ -24,6 +24,7 @@
     "@reduxjs/toolkit": "^2.2.1",
     "axios": "^1.6.7",
     "bem-cn-lite": "^4.1.0",
+    "colord": "^2.9.3",
     "copy-to-clipboard": "^3.3.3",
     "crc-32": "^1.2.2",
     "history": "^4.10.1",

package.json

@@ -1,13 +1,12 @@
 import {useCallback, useEffect, useReducer, useRef} from 'react';
 
-import {RawSerieData, YagrPlugin, YagrWidgetData} from '@gravity-ui/chartkit/yagr';
+import {YagrPlugin, YagrSeriesData, YagrWidgetData} from '@gravity-ui/chartkit/yagr';
 import ChartKit, {settings} from '@gravity-ui/chartkit';
 
 import type {IResponseError} from '../../types/api/error';
 import type {TimeFrame} from '../../utils/timeframes';
 import {useAutofetcher} from '../../utils/hooks';
 
-import {COLORS} from '../../utils/versions';
 import {cn} from '../../utils/cn';
 
 import {Loader} from '../Loader';
@@ -30,6 +29,7 @@ import {
     setChartDataWasNotLoaded,
     setChartError,
 } from './reducer';
+import {colorToRGBA, colors} from './colors';
 import i18n from './i18n';
 
 import './MetricChart.scss';
@@ -47,13 +47,19 @@ const prepareWidgetData = (
 
     const isDataEmpty = !data.metrics.length;
 
-    const graphs: RawSerieData[] = data.metrics.map((metric, index) => {
+    const graphs: YagrSeriesData[] = data.metrics.map((metric, index) => {
+        const lineColor = metric.color || colors[index];
+        const color = colorToRGBA(lineColor, 0.1);
+
         return {
             id: metric.target,
             name: metric.title || metric.target,
-            color: metric.color || COLORS[index],
             data: metric.data,
             formatter: defaultDataFormatter,
+
+            lineColor,
+            color,
+            legendColorKey: 'lineColor',
         };
     });
 
@@ -71,7 +77,8 @@ const prepareWidgetData = (
                     padding: isDataEmpty ? [10, 0, 10, 0] : undefined,
                 },
                 series: {
-                    type: 'line',
+                    type: 'area',
+                    lineWidth: 1.5,
                 },
                 select: {
                     zoom: false,
@@ -209,7 +216,7 @@ export const MetricChart = ({
                 dispatch(setChartError(err as IResponseError));
             }
         },
-        [metrics, timeFrame, width],
+        [database, metrics, timeFrame, width],
     );
 
     useAutofetcher(fetchChartData, [fetchChartData], autorefresh);

src/components/MetricChart/MetricChart.tsx

@@ -0,0 +1,23 @@
+import {colord} from 'colord';
+
+// Grafana classic palette
+export const colors = [
+    '#7EB26D', // 0: pale green
+    '#EAB839', // 1: mustard
+    '#6ED0E0', // 2: light blue
+    '#EF843C', // 3: orange
+    '#E24D42', // 4: red
+    '#1F78C1', // 5: ocean
+    '#BA43A9', // 6: purple
+    '#705DA0', // 7: violet
+    '#508642', // 8: dark green
+    '#CCA300', // 9: dark sand
+];
+
+export function colorToRGBA(initialColor: string, opacity: number) {
+    const color = colord(initialColor);
+    if (!color.isValid()) {
+        throw new Error('Invalid color is passed');
+    }
+    return color.alpha(opacity).toRgbString();
+}