From 51eb1bf2a37805012630907774bee8f9b00affff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D1=80=D1=82=D1=91=D0=BC=20=D0=9C=D1=83=D1=84=D0=B0?= =?UTF-8?q?=D0=B7=D0=B0=D0=BB=D0=BE=D0=B2?= <67755036+artemmufazalov@users.noreply.github.com> Date: Sat, 23 Mar 2024 12:09:09 +0300 Subject: [PATCH] fix(MetricChart): draw area charts (#764) --- package-lock.json | 16 +++++++-------- package.json | 3 ++- src/components/MetricChart/MetricChart.tsx | 19 ++++++++++++------ src/components/MetricChart/colors.ts | 23 ++++++++++++++++++++++ 4 files changed, 46 insertions(+), 15 deletions(-) create mode 100644 src/components/MetricChart/colors.ts diff --git a/package-lock.json b/package-lock.json index 5dad0b59d..c2ae4a7bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "5.3.0", "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", @@ -22,6 +22,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", @@ -3073,9 +3074,9 @@ } }, "node_modules/@gravity-ui/chartkit": { - "version": "4.20.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-4.20.1.tgz", - "integrity": "sha512-peROiAZ1ExVe0PJ9dNWnu23GqRDugHy7vp17fNu7pY0SfQk50xBpLd+4lmYXgnNYfd4hT7z5qb2BIqjWKm+e5g==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/chartkit/-/chartkit-4.23.0.tgz", + "integrity": "sha512-lshwcFKf8u5WvL2d2A+UFZ2XEYVF3XDlh5dfn+ui5h4x2Odapz6jC7bWvLU8zP1/ovmgbH4lUwJw2gSiIhmyQg==", "dependencies": { "@bem-react/classname": "^1.6.0", "@gravity-ui/date-utils": "^1.4.2", @@ -7934,10 +7935,9 @@ } }, "node_modules/colord": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz", - "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==", - "dev": true + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" }, "node_modules/colorette": { "version": "2.0.16", diff --git a/package.json b/package.json index 2e18918f4..04ffde116 100644 --- a/package.json +++ b/package.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", diff --git a/src/components/MetricChart/MetricChart.tsx b/src/components/MetricChart/MetricChart.tsx index 54812cce5..06f1c6977 100644 --- a/src/components/MetricChart/MetricChart.tsx +++ b/src/components/MetricChart/MetricChart.tsx @@ -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); diff --git a/src/components/MetricChart/colors.ts b/src/components/MetricChart/colors.ts new file mode 100644 index 000000000..0fc2bcdf5 --- /dev/null +++ b/src/components/MetricChart/colors.ts @@ -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(); +}