@gravity-ui/chartkit 5.0.0 → 5.2.0

package/build/plugins/d3/renderer/components/Chart.js

@@ -13,6 +13,7 @@ import { Tooltip, TooltipTriggerArea } from './Tooltip';
 import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {
+    var _a, _b;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const dispatcher = React.useMemo(() => {
@@ -60,6 +61,15 @@ export const Chart = (props) => {
         yScale,
         svgContainer: svgRef.current,
     });
+    const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
+    React.useEffect(() => {
+        if (clickHandler) {
+            dispatcher.on('click-chart', clickHandler);
+        }
+        return () => {
+            dispatcher.on('click-chart', null);
+        };
+    }, [dispatcher, clickHandler]);
     const boundsOffsetTop = chart.margin.top;
     const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({ preparedAxis: yAxis });
     return (React.createElement(React.Fragment, null,

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.js

@@ -101,7 +101,7 @@ export const TooltipTriggerArea = (args) => {
         });
         return sort(result, (item) => item.y);
     }, [shapesData]);
-    const handleMouseMove = (e) => {
+    const getShapeData = (point) => {
         var _a, _b;
         const { left: ownLeft, top: ownTop } = ((_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
             left: 0,
@@ -111,9 +111,9 @@ export const TooltipTriggerArea = (args) => {
             left: 0,
             top: 0,
         };
-        const [pointerX, pointerY] = pointer(e, svgContainer);
-        const hoverShapeData = [];
-        hoverShapeData === null || hoverShapeData === void 0 ? void 0 : hoverShapeData.push(...getBarXShapeData({
+        const [pointerX, pointerY] = point; //pointer(e, svgContainer);
+        const result = [];
+        result === null || result === void 0 ? void 0 : result.push(...getBarXShapeData({
             shapesData,
             point: [pointerX, pointerY],
             left: ownLeft - containerLeft,
@@ -127,6 +127,11 @@ export const TooltipTriggerArea = (args) => {
             data: barYData,
             point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
         }));
+        return result;
+    };
+    const handleMouseMove = (e) => {
+        const [pointerX, pointerY] = pointer(e, svgContainer);
+        const hoverShapeData = getShapeData([pointerX, pointerY]);
         if (hoverShapeData.length) {
             const position = [pointerX, pointerY];
             dispatcher.call('hover-shape', e.target, hoverShapeData, position);
@@ -137,5 +142,12 @@ export const TooltipTriggerArea = (args) => {
         throttledHandleMouseMove.cancel();
         dispatcher.call('hover-shape', {}, undefined);
     };
-    return (React.createElement("rect", { ref: rectRef, width: boundsWidth, height: boundsHeight, fill: "transparent", onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave }));
+    const handleClick = (e) => {
+        const [pointerX, pointerY] = pointer(e, svgContainer);
+        const shapeData = getShapeData([pointerX, pointerY]);
+        if (shapeData.length) {
+            dispatcher.call('click-chart', undefined, { point: get(shapeData, '[0].data'), series: get(shapeData, '[0].series') }, e);
+        }
+    };
+    return (React.createElement("rect", { ref: rectRef, width: boundsWidth, height: boundsHeight, fill: "transparent", onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleClick }));
 };

package/build/plugins/d3/renderer/d3-dispatcher.js

@@ -1,4 +1,4 @@
 import { dispatch } from 'd3';
 export const getD3Dispatcher = () => {
-    return dispatch('hover-shape');
+    return dispatch('hover-shape', 'click-chart');
 };

package/build/plugins/d3/renderer/hooks/useSeries/prepare-area.js

@@ -54,6 +54,7 @@ export function prepareArea(args) {
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
             },
             marker: prepareMarker(series, seriesOptions),
+            cursor: get(series, 'cursor', null),
         };
         return prepared;
     }, []);

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-x.js

@@ -30,6 +30,7 @@ export function prepareBarXSeries(args) {
                 allowOverlap: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.allowOverlap) || false,
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
             },
+            cursor: get(series, 'cursor', null),
         };
     }, []);
 }

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.js

@@ -40,6 +40,7 @@ export function prepareBarYSeries(args) {
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: prepareDataLabels(series),
+            cursor: get(series, 'cursor', null),
         };
     }, []);
 }

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line.js

@@ -72,6 +72,8 @@ export function prepareLineSeries(args) {
             marker: prepareMarker(series, seriesOptions),
             dashStyle: dashStyle,
             linecap: prepareLinecap(dashStyle, series, seriesOptions),
+            opacity: get(series, 'opacity', null),
+            cursor: get(series, 'cursor', null),
         };
         return prepared;
     }, []);

package/build/plugins/d3/renderer/hooks/useSeries/prepare-pie.js

@@ -52,6 +52,8 @@ export function preparePieSeries(args) {
                 },
             },
             renderCustomShape: series.renderCustomShape,
+            opacity: get(dataItem, 'opacity', null),
+            cursor: get(series, 'cursor', null),
         };
         return result;
     });

package/build/plugins/d3/renderer/hooks/useSeries/prepare-scatter.js

@@ -39,6 +39,7 @@ export function prepareScatterSeries(args) {
             },
             data: s.data,
             marker: prepareMarker(s, seriesOptions, index),
+            cursor: get(s, 'cursor', null),
         };
         return prepared;
     }, []);

package/build/plugins/d3/renderer/hooks/useSeries/prepare-treemap.js

@@ -10,7 +10,7 @@ export function prepareTreemap(args) {
         const id = getRandomCKId();
         const name = s.name || '';
         const color = s.color || colorScale(name);
-        return {
+        const preparedSeries = {
             color,
             data: s.data,
             dataLabels: {
@@ -29,6 +29,8 @@ export function prepareTreemap(args) {
             },
             levels: s.levels,
             layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
+            cursor: get(s, 'cursor', null),
         };
+        return preparedSeries;
     });
 }

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -53,6 +53,7 @@ type BasePreparedSeries = {
         enabled: boolean;
         symbol: PreparedLegendSymbol;
     };
+    cursor: string | null;
 };
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
@@ -130,6 +131,7 @@ export type PreparedPieSeries = {
         };
     };
     renderCustomShape?: PieSeries['renderCustomShape'];
+    opacity: number | null;
 } & BasePreparedSeries;
 export type PreparedLineSeries = {
     type: LineSeries['type'];
@@ -161,6 +163,7 @@ export type PreparedLineSeries = {
     };
     dashStyle: DashStyle;
     linecap: LineCap;
+    opacity: number | null;
 } & BasePreparedSeries;
 export type PreparedAreaSeries = {
     type: AreaSeries['type'];
@@ -204,7 +207,7 @@ export type PreparedTreemapSeries = {
         allowOverlap: boolean;
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
-} & BasePreparedSeries & TreemapSeries;
+} & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
 export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;

package/build/plugins/d3/renderer/hooks/useShapes/area/index.js

@@ -25,7 +25,8 @@ export const AreaSeriesShapes = (args) => {
             .selectAll('shape')
             .data(preparedData)
             .join('g')
-            .attr('class', b('series'));
+            .attr('class', b('series'))
+            .attr('cursor', (d) => d.series.cursor);
         shapeSelection
             .append('path')
             .attr('class', b('line'))

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/index.js

@@ -27,7 +27,9 @@ export const BarXSeriesShapes = (args) => {
             .attr('y', (d) => d.y)
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.data.color || d.series.color);
+            .attr('fill', (d) => d.data.color || d.series.color)
+            .attr('opacity', (d) => d.opacity)
+            .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
         if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
             dataLabels = filterOverlappingLabels(dataLabels);

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/prepare-data.js

@@ -117,6 +117,7 @@ export const prepareBarXData = (args) => {
                     y: y - stackHeight,
                     width: rectWidth,
                     height,
+                    opacity: get(yValue.data, 'opacity', null),
                     data: yValue.data,
                     series: yValue.series,
                 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/types.d.ts

@@ -6,6 +6,7 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     y: number;
     width: number;
     height: number;
+    opacity: number | null;
     series: PreparedBarXSeries;
     label?: LabelData;
 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/index.js

@@ -23,7 +23,9 @@ export const BarYSeriesShapes = (args) => {
             .attr('y', (d) => d.y)
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.color);
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => d.data.opacity || null)
+            .attr('cursor', (d) => d.series.cursor);
         const dataLabels = preparedData.filter((d) => d.series.dataLabels.enabled);
         const labelSelection = svgElement
             .selectAll('text')

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/prepare-data.js

@@ -104,6 +104,7 @@ export const prepareBarYData = (args) => {
                     width,
                     height: barHeight,
                     color: data.color || s.color,
+                    opacity: get(data, 'opacity', null),
                     data,
                     series: s,
                 });

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/types.d.ts

@@ -6,5 +6,6 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     width: number;
     height: number;
     color: string;
+    opacity: number | null;
     series: PreparedBarYSeries;
 };

package/build/plugins/d3/renderer/hooks/useShapes/line/index.js

@@ -31,7 +31,9 @@ export const LineSeriesShapes = (args) => {
             .attr('stroke-width', (d) => d.width)
             .attr('stroke-linejoin', (d) => d.linecap)
             .attr('stroke-linecap', (d) => d.linecap)
-            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width));
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width))
+            .attr('opacity', (d) => d.opacity)
+            .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);

package/build/plugins/d3/renderer/hooks/useShapes/line/prepare-data.js

@@ -63,6 +63,7 @@ export const prepareLineData = (args) => {
             id: s.id,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
+            opacity: s.opacity,
         };
         acc.push(result);
         return acc;

package/build/plugins/d3/renderer/hooks/useShapes/line/types.d.ts

@@ -25,4 +25,5 @@ export type PreparedLineData = {
     labels: LabelData[];
     dashStyle: DashStyle;
     linecap: LineCap;
+    opacity: number | null;
 };

package/build/plugins/d3/renderer/hooks/useShapes/marker.js

@@ -36,7 +36,14 @@ export function renderMarker(selection) {
 }
 export function getMarkerVisibility(d) {
     const markerStates = d.point.series.marker.states;
-    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
+    let enabled;
+    if (d.hovered) {
+        enabled = markerStates.hover.enabled && d.hovered;
+    }
+    else {
+        enabled =
+            markerStates.normal.enabled || get(d.point.data, 'marker.states.normal.enabled', false);
+    }
     return enabled ? '' : 'hidden';
 }
 export function getMarkerHaloVisibility(d) {

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.js

@@ -32,7 +32,8 @@ export function PieSeriesShapes(args) {
             return `translate(${x}, ${y})`;
         })
             .style('stroke', (pieData) => pieData.borderColor)
-            .style('stroke-width', (pieData) => pieData.borderWidth);
+            .style('stroke-width', (pieData) => pieData.borderWidth)
+            .attr('cursor', (pieData) => pieData.series.cursor);
         // Render halo appearing outside the hovered slice
         shapesSelection
             .selectAll('halo')
@@ -68,7 +69,8 @@ export function PieSeriesShapes(args) {
             return arcGenerator(d);
         })
             .attr('class', b('segment'))
-            .attr('fill', (d) => d.data.color);
+            .attr('fill', (d) => d.data.color)
+            .attr('opacity', (d) => d.data.opacity);
         shapesSelection
             .selectAll('text')
             .data((pieData) => pieData.labels)
@@ -114,17 +116,20 @@ export function PieSeriesShapes(args) {
                 nodes[index].append(customShape);
             }
         });
+        const getSelectedSegment = (element) => {
+            const datum = select(element).datum();
+            const seriesId = get(datum, 'data.series.id', get(datum, 'series.id'));
+            return preparedData.reduce((result, pie) => {
+                var _a;
+                return result || ((_a = pie.segments.find((s) => s.data.series.id === seriesId)) === null || _a === void 0 ? void 0 : _a.data);
+            }, undefined);
+        };
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
         svgElement
             .on('mousemove', (e) => {
-            const datum = select(e.target).datum();
-            const seriesId = get(datum, 'data.series.id', get(datum, 'series.id'));
-            const currentSegment = preparedData.reduce((result, pie) => {
-                var _a;
-                return (result || ((_a = pie.segments.find((s) => s.data.series.id === seriesId)) === null || _a === void 0 ? void 0 : _a.data));
-            }, undefined);
+            const currentSegment = getSelectedSegment(e.target);
             if (currentSegment) {
                 const data = {
                     series: {
@@ -132,13 +137,19 @@ export function PieSeriesShapes(args) {
                         type: 'pie',
                         name: currentSegment.series.name,
                     },
-                    data: currentSegment.series,
+                    data: currentSegment.series.data,
                 };
                 dispatcher.call('hover-shape', {}, [data], pointer(e, svgContainer));
             }
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
+        })
+            .on('click', (e) => {
+            const selectedSegment = getSelectedSegment(e.target);
+            if (selectedSegment) {
+                dispatcher.call('click-chart', undefined, { point: selectedSegment.series.data, series: selectedSegment.series }, e);
+            }
         });
         dispatcher.on(eventName, (data) => {
             const selectedSeriesId = data === null || data === void 0 ? void 0 : data[0].series.id;

package/build/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.js

@@ -45,6 +45,7 @@ export function preparePieData(args) {
             return {
                 value: item.value,
                 color: item.color,
+                opacity: item.opacity,
                 series: item,
                 hovered: false,
                 active: true,

package/build/plugins/d3/renderer/hooks/useShapes/pie/types.d.ts

@@ -5,6 +5,7 @@ import { PreparedPieSeries } from '../../useSeries/types';
 export type SegmentData = {
     value: number;
     color: string;
+    opacity: number | null;
     series: PreparedPieSeries;
     hovered: boolean;
     active: boolean;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -22,10 +22,15 @@ export function ScatterSeriesShape(props) {
             .data(preparedData, shapeKey)
             .join('g')
             .call(renderMarker)
-            .attr('fill', (d) => d.point.data.color || d.point.series.color || '');
+            .attr('fill', (d) => d.point.data.color || d.point.series.color || '')
+            .attr('opacity', (d) => d.point.opacity)
+            .attr('cursor', (d) => d.point.series.cursor);
+        const getSelectedPoint = (element) => {
+            return select(element).datum();
+        };
         svgElement
             .on('mousemove', (e) => {
-            const datum = select(e.target).datum();
+            const datum = getSelectedPoint(e.target);
             if (!datum) {
                 return;
             }
@@ -42,6 +47,12 @@ export function ScatterSeriesShape(props) {
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
+        })
+            .on('click', (e) => {
+            const datum = getSelectedPoint(e.target);
+            if (datum) {
+                dispatcher.call('click-chart', undefined, { point: datum.point.data, series: datum.point.series }, e);
+            }
         });
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.js

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import { getXValue, getYValue } from '../utils';
 const getFilteredLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
@@ -15,6 +16,7 @@ export const prepareScatterData = (args) => {
                     series: s,
                     x: getXValue({ point: d, xAxis, xScale }),
                     y: getYValue({ point: d, yAxis, yScale }),
+                    opacity: get(d, 'opacity', null),
                 },
                 hovered: false,
                 active: true,

package/build/plugins/d3/renderer/hooks/useShapes/scatter/types.d.ts

@@ -3,6 +3,7 @@ import { PreparedScatterSeries } from '../../useSeries/types';
 type PointData = {
     x: number;
     y: number;
+    opacity: number | null;
     data: ScatterSeriesData;
     series: PreparedScatterSeries;
 };

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.js

@@ -18,7 +18,8 @@ export const TreemapSeriesShape = (props) => {
             .selectAll('g')
             .data(leaves)
             .join('g')
-            .attr('transform', (d) => `translate(${d.x0},${d.y0})`);
+            .attr('transform', (d) => `translate(${d.x0},${d.y0})`)
+            .attr('cursor', series.cursor);
         const rectSelection = leaf
             .append('rect')
             .attr('id', (d) => d.id || d.name)
@@ -44,17 +45,24 @@ export const TreemapSeriesShape = (props) => {
             .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
             .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; })
             .call(setEllipsisForOverflowTexts, (d) => d.width);
-        const eventName = `hover-shape.pie`;
+        const getSelectedPart = (node) => {
+            const hoveredRect = select(node);
+            return hoveredRect.datum();
+        };
+        const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
         svgElement
             .on('mousemove', (e) => {
-            const hoveredRect = select(e.target);
-            const datum = hoveredRect.datum();
+            const datum = getSelectedPart(e.target);
             dispatcher.call('hover-shape', {}, [{ data: datum.data, series }], pointer(e, svgContainer));
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
+        })
+            .on('click', (e) => {
+            const datum = getSelectedPart(e.target);
+            dispatcher.call('click-chart', undefined, { point: datum.data, series }, e);
         });
         dispatcher.on(eventName, (data) => {
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.d.ts

@@ -7,4 +7,5 @@ export declare const withSplitPane: <ComposedComponentProps extends {}>(Composed
 } & {
     current: any;
     forwardedRef: React.Ref<ComposedComponentProps>;
+    callback?: Highcharts.ChartCallbackFunction | undefined;
 }> & React.RefAttributes<ComposedComponentProps>>;

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.js

@@ -110,8 +110,10 @@ export const withSplitPane = (ComposedComponent) => {
                 }
             };
             this.afterCreateCallback = (chart) => {
+                var _a, _b;
                 chart.tooltip.splitTooltip = true;
                 chart.tooltip.getTooltipContainer = this.getTooltipContainer;
+                (_b = (_a = this.props).callback) === null || _b === void 0 ? void 0 : _b.call(_a, chart);
             };
             this.setInitialPaneSize = (callback) => {
                 if (!this.tooltipContainerRef.current || !this.rootRef.current) {

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/build/types/widget-data/area.d.ts

@@ -19,6 +19,21 @@ export type AreaSeriesData<T = any> = BaseSeriesData<T> & {
     y?: string | number;
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
+    /** Individual marker options for the point. */
+    marker?: {
+        /** States for a single point marker. */
+        states?: {
+            /** The normal state of a single point marker. */
+            normal?: {
+                /**
+                 * Enable or disable the point marker.
+                 *
+                 * @default false
+                 * */
+                enabled: boolean;
+            };
+        };
+    };
 };
 export type AreaMarkerSymbol = 'circle' | 'square';
 export type AreaMarkerOptions = PointMarkerOptions & {

package/build/types/widget-data/bar-x.d.ts

@@ -25,6 +25,8 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     category?: string;
     /** Data label value of the bar-x column. If not specified, the y value is used. */
     label?: string | number;
+    /** Individual opacity for the bar-x column. */
+    opacity?: number;
 };
 export type BarXSeries<T = any> = BaseSeries & {
     type: typeof SeriesType.BarX;

package/build/types/widget-data/bar-y.d.ts

@@ -19,6 +19,8 @@ export type BarYSeriesData<T = any> = BaseSeriesData<T> & {
     y?: string | number;
     /** Data label value of the bar. If not specified, the x value is used. */
     label?: string | number;
+    /** Individual opacity for the bar. */
+    opacity?: number;
 };
 export type BarYSeries<T = any> = BaseSeries & {
     type: typeof SeriesType.BarY;

package/build/types/widget-data/base.d.ts

@@ -22,6 +22,8 @@ export type BaseSeries = {
          * */
         allowOverlap?: boolean;
     };
+    /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
+    cursor?: string;
 };
 export type BaseSeriesData<T = any> = {
     /**

package/build/types/widget-data/chart.d.ts

@@ -6,4 +6,10 @@ export type ChartMargin = {
 };
 export type ChartKitWidgetChart = {
     margin?: Partial<ChartMargin>;
+    events?: {
+        click?: (data: {
+            point: unknown;
+            series: unknown;
+        }, event: PointerEvent) => void;
+    };
 };

package/build/types/widget-data/line.d.ts

@@ -19,6 +19,13 @@ export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     y?: string | number;
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
+    marker?: {
+        states?: {
+            normal?: {
+                enabled: boolean;
+            };
+        };
+    };
 };
 export type LineSeries<T = any> = BaseSeries & {
     type: typeof SeriesType.Line;
@@ -42,4 +49,6 @@ export type LineSeries<T = any> = BaseSeries & {
     dashStyle?: `${DashStyle}`;
     /** Option for line cap style */
     linecap?: `${LineCap}`;
+    /** Individual opacity for the line. */
+    opacity?: number;
 };

package/build/types/widget-data/pie.d.ts

@@ -11,6 +11,8 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     visible?: boolean;
     /** Initial data label of the pie segment. If not specified, the value is used. */
     label?: string;
+    /** Individual opacity for the pie segment. */
+    opacity?: number;
 };
 export type ConnectorShape = 'straight-line' | 'polyline';
 export type ConnectorCurve = 'linear' | 'basic';

package/build/types/widget-data/scatter.d.ts

@@ -22,7 +22,10 @@ export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
      * @deprecated use `x` or `y` instead
      */
     category?: string;
+    /** Individual radius for the point. */
     radius?: number;
+    /** Individual opacity for the point. */
+    opacity?: number;
 };
 export type ScatterSeries<T = any> = BaseSeries & {
     type: typeof SeriesType.Scatter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -48,18 +48,19 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^2.1.0",
+    "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/yagr": "^4.2.3",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
-    "react-split-pane": "^0.1.92"
+    "react-split-pane": "^0.1.92",
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.6",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@gravity-ui/eslint-config": "^3.1.1",
-    "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",