@gravity-ui/chartkit 4.22.1 → 4.23.1

package/build/plugins/d3/renderer/D3Widget.js

@@ -28,9 +28,9 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     }, [handleResize]);
     React.useImperativeHandle(forwardedRef, () => ({
         reflow() {
-            handleResize();
+            debuncedHandleResize();
         },
-    }), [handleResize]);
+    }), [debuncedHandleResize]);
     React.useEffect(() => {
         const selection = select(window);
         // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
@@ -43,8 +43,8 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     }, [debuncedHandleResize]);
     React.useEffect(() => {
         // dimensions initialize
-        handleResize();
-    }, [handleResize]);
+        debuncedHandleResize();
+    }, [debuncedHandleResize]);
     if (validatedData.current !== data) {
         validateData(data);
         validatedData.current = data;

package/build/plugins/d3/renderer/components/styles.css

@@ -1,3 +1,7 @@
+.chartkit-d3 {
+  position: absolute;
+}
+
 .chartkit-d3-axis .domain {
   stroke: var(--g-color-line-generic-active);
 }

package/build/plugins/yagr/renderer/tooltip/renderTooltip.d.ts

@@ -1,2 +1,2 @@
-import type { TooltipRenderOptions } from '../../types';
-export declare const getRenderTooltip: (timeZone?: string) => (data: TooltipRenderOptions) => string;
+import type { TooltipRenderOptions, YagrWidgetData } from '../../types';
+export declare const getRenderTooltip: (userData: YagrWidgetData['data']) => (data: TooltipRenderOptions) => string;

package/build/plugins/yagr/renderer/tooltip/renderTooltip.js

@@ -7,12 +7,33 @@ const calcOption = (d) => {
         })
         : d;
 };
+const getSeriesColorProperty = (args) => {
+    var _a;
+    const { data, userData, row, rowIndex } = args;
+    const userSeries = userData.graphs[rowIndex];
+    const lineColor = (_a = data.yagr.getSeriesById(row.id)) === null || _a === void 0 ? void 0 : _a.lineColor;
+    let seriesColor = row.color;
+    switch (userSeries === null || userSeries === void 0 ? void 0 : userSeries.legendColorKey) {
+        case 'lineColor': {
+            if (lineColor) {
+                seriesColor = lineColor;
+            }
+            break;
+        }
+        case 'color':
+        default: {
+            seriesColor = row.color;
+        }
+    }
+    return seriesColor;
+};
 /*
  * Default tooltip renderer.
  * Adapter between native Yagr tooltip config and ChartKit
  * tooltip renderer.
  */
-export const getRenderTooltip = (timeZone) => (data) => {
+export const getRenderTooltip = (userData) => (data) => {
+    const { timeZone } = userData;
     const cfg = data.yagr.config;
     const timeMultiplier = cfg.chart.timeMultiplier || 1;
     const opts = data.options;
@@ -41,7 +62,7 @@ export const getRenderTooltip = (timeZone) => (data) => {
         activeRowAlwaysFirstInTooltip: rows.length > 1,
         tooltipHeader: dateTime({ input: x / timeMultiplier, timeZone }).format('DD MMMM YYYY HH:mm:ss'),
         shared: true,
-        lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: row.color, selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
+        lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: getSeriesColorProperty({ data, userData, row, rowIndex: i }), selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
         withPercent: calcOption(opts.percent),
         hiddenRowsNumber: hiddenRowsNumber,
         hiddenRowsSum,

package/build/plugins/yagr/renderer/utils.js

@@ -111,7 +111,7 @@ export const shapeYagrConfig = (args) => {
     config.chart = chart;
     if ((_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.show) {
         config.tooltip = config.tooltip || {};
-        config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || getRenderTooltip(timeZone);
+        config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || getRenderTooltip(data);
         if (!config.tooltip.className) {
             // "className" property prevent default yagr styles adding
             config.tooltip.className = 'chartkit-yagr-tooltip';

package/build/plugins/yagr/types.d.ts

@@ -1,4 +1,4 @@
-import type { MinimalValidConfig, RawSerieData, YagrConfig } from '@gravity-ui/yagr';
+import type { MinimalValidConfig, RawSerieData, SeriesOptions, YagrConfig } from '@gravity-ui/yagr';
 import type Yagr from '@gravity-ui/yagr';
 import { ChartKitProps } from 'src/types';
 export type { default as Yagr } from '@gravity-ui/yagr';
@@ -10,9 +10,19 @@ export interface CustomTooltipProps {
 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: RawSerieData[];
+        graphs: YagrSeriesData[];
         timeline: number[];
         /**
          * Allow to setup timezone for X axis and tooltip's header.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.22.1",
+  "version": "4.23.1",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",