feat(Yagr plugin): update lib, use legendColorKey from yagr lib

package.json

@@ -50,7 +50,7 @@
     "@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"

src/plugins/yagr/__stories__/Yagr.stories.tsx

@@ -3,7 +3,7 @@ import React, {useEffect, useState} from 'react';
 import {dateTime} from '@gravity-ui/date-utils';
 import {Button} from '@gravity-ui/uikit';
 import placement from '@gravity-ui/yagr/dist/YagrCore/plugins/tooltip/placement';
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 
 import {CustomTooltipProps, TooltipHandlerData, YagrPlugin} from '../';
 import {ChartKit} from '../../../components/ChartKit';
@@ -19,7 +19,7 @@ export default {
     component: ChartKit,
 } as Meta;
 
-const LineTemplate: Story<any> = () => {
+const LineTemplate: StoryFn = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef<ChartKitRef>();
 
@@ -35,7 +35,7 @@ const LineTemplate: Story<any> = () => {
     );
 };
 
-const UpdatesTemplate: Story<any> = () => {
+const UpdatesTemplate: StoryFn = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef<ChartKitRef>();
 
@@ -107,7 +107,7 @@ function Tooltip({yagr}: CustomTooltipProps) {
     );
 }
 
-const CustomTooltipImpl: Story<any> = () => {
+const CustomTooltipImpl: StoryFn = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef<ChartKitRef>();
 
@@ -132,7 +132,7 @@ const CustomTooltipImpl: Story<any> = () => {
     );
 };
 
-const AreaTemplate: Story<any> = () => {
+const AreaTemplate: StoryFn = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef<ChartKitRef>();
 

src/plugins/yagr/__stories__/mocks/line10.ts

@@ -1,4 +1,4 @@
-import type {AreaSeriesOptions, YagrSeriesData, YagrWidgetData} from '../../types';
+import type {AreaSeriesOptions, RawSerieData, YagrWidgetData} from '../../types';
 
 export const line10: YagrWidgetData = {
     data: {
@@ -118,7 +118,7 @@ function colorHexToRGBA(htmlColor: string, opacity: number) {
     return `rgba(${[red, green, blue, opacity].join(',')})`;
 }
 
-const graphs: YagrSeriesData<AreaSeriesOptions>[] = [
+const graphs: RawSerieData<AreaSeriesOptions>[] = [
     {
         id: '0',
         name: 'Serie 1',
@@ -189,7 +189,9 @@ export const line10WithGrafanaStyle: YagrWidgetData = {
             show: true,
             tracking: 'sticky',
         },
-        legend: {},
+        legend: {
+            show: true,
+        },
         processing: {},
     },
 };

src/plugins/yagr/renderer/tooltip/renderTooltip.ts

@@ -13,31 +13,9 @@ const calcOption = <T>(d: T | {[key in string]: T} | undefined) => {
         : d;
 };
 
-const getSeriesColorProperty = (args: {
-    data: TooltipRenderOptions;
-    userData: YagrWidgetData['data'];
-    row: TooltipRow;
-    rowIndex: number;
-}) => {
-    const {data, userData, row, rowIndex} = args;
-    const userSeries = userData.graphs[rowIndex];
-    const lineColor = data.yagr.getSeriesById(row.id)?.lineColor;
-    let seriesColor = row.color;
-
-    switch (userSeries?.legendColorKey) {
-        case 'lineColor': {
-            if (lineColor) {
-                seriesColor = lineColor;
-            }
-            break;
-        }
-        case 'color':
-        default: {
-            seriesColor = row.color;
-        }
-    }
-
-    return seriesColor;
+const getSeriesColorProperty = ({data, rowId}: {data: TooltipRenderOptions; rowId: string}) => {
+    const series = data.yagr.getSeriesById(rowId);
+    return data.yagr.getSerieLegendColor(series);
 };
 
 /*
@@ -88,7 +66,7 @@ export const getRenderTooltip =
                     ({
                         ...row,
                         seriesName: row.name || 'Serie ' + (i + 1),
-                        seriesColor: getSeriesColorProperty({data, userData, row, rowIndex: i}),
+                        seriesColor: getSeriesColorProperty({data, rowId: row.id}),
                         selectedSeries: row.active,
                         seriesIdx: row.seriesIdx,
                         percentValue:

src/plugins/yagr/types.ts

@@ -1,4 +1,4 @@
-import type {MinimalValidConfig, RawSerieData, SeriesOptions, YagrConfig} from '@gravity-ui/yagr';
+import type {MinimalValidConfig, RawSerieData, YagrConfig} from '@gravity-ui/yagr';
 import type Yagr from '@gravity-ui/yagr';
 
 import {ChartKitProps} from 'src/types';
@@ -15,20 +15,9 @@ export type YagrWidgetProps = ChartKitProps<'yagr'> & {
     id: string;
 };
 
-export type YagrSeriesData<T = Omit<SeriesOptions, 'type'>> = RawSerieData<T> & {
-    /**
-     * Determines what data value should be used to get a color for tooltip series. Does not work in case of using custom tooltip rendered via `tooltip` property.
-     * - `lineColor` indicates that lineColor property should be used
-     * - `color` indicates that color property should be used
-     *
-     * @default 'color'
-     */
-    legendColorKey?: 'color' | 'lineColor';
-};
-
 export type YagrWidgetData = {
     data: {
-        graphs: YagrSeriesData[];
+        graphs: RawSerieData[];
         timeline: number[];
         /**
          * Allow to setup timezone for X axis and tooltip's header.