@gravity-ui/charts 1.38.5 → 1.38.7

package/dist/cjs/components/AxisX/prepare-axis-data.d.ts

@@ -8,6 +8,6 @@ export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetR
     height: number;
     scale: ChartScale;
     series: PreparedSeries[];
-    split: PreparedSplit;
+    split: PreparedSplit | undefined;
     yAxis: PreparedAxis[];
 }): Promise<AxisXData[]>;

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -70,19 +70,20 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
 }
 // eslint-disable-next-line complexity
 export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const xAxisItems = [];
-    for (let plotIndex = 0; plotIndex < split.plots.length; plotIndex++) {
-        const plot = split.plots[plotIndex];
+    const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
+    for (let plotIndex = 0; plotIndex < splitPlots.length; plotIndex++) {
+        const plot = splitPlots[plotIndex];
         const axisTop = plot.top;
         const axisHeight = plot.height;
         const axisWidth = boundsWidth;
-        const isBottomPlot = plotIndex === split.plots.length - 1;
+        const isBottomPlot = plotIndex === splitPlots.length - 1;
         const plotYAxes = yAxis.filter((a) => a.plotIndex === plotIndex);
-        const yDomainLeftPosition = ((_a = plotYAxes.find((a) => a.position === 'left')) === null || _a === void 0 ? void 0 : _a.visible)
+        const yDomainLeftPosition = ((_b = plotYAxes.find((a) => a.position === 'left')) === null || _b === void 0 ? void 0 : _b.visible)
             ? 0
             : null;
-        const yDomainRightPosition = ((_b = plotYAxes.find((a) => a.position === 'right')) === null || _b === void 0 ? void 0 : _b.visible)
+        const yDomainRightPosition = ((_c = plotYAxes.find((a) => a.position === 'right')) === null || _c === void 0 ? void 0 : _c.visible)
             ? axisWidth
             : null;
         let domain = null;
@@ -90,7 +91,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             domain = {
                 start: [0, axisTop + axisHeight],
                 end: [axisWidth, axisTop + axisHeight],
-                lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
+                lineColor: (_d = axis.lineColor) !== null && _d !== void 0 ? _d : '',
             };
         }
         const ticks = [];
@@ -255,7 +256,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 axisScale,
                 axis: 'x',
             });
-            const halfBandwidth = ((_e = (_d = axisScale.bandwidth) === null || _d === void 0 ? void 0 : _d.call(axisScale)) !== null && _e !== void 0 ? _e : 0) / 2;
+            const halfBandwidth = ((_f = (_e = axisScale.bandwidth) === null || _e === void 0 ? void 0 : _e.call(axisScale)) !== null && _f !== void 0 ? _f : 0) / 2;
             const startPos = halfBandwidth + Math.min(from, to);
             const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
             const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
@@ -279,7 +280,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                         text: plotBand.label.text,
                         style: plotBand.label.style,
                         x: plotBand.label.padding,
-                        y: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _f !== void 0 ? _f : 0),
+                        y: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _g !== void 0 ? _g : 0),
                         rotate: -90,
                         qa: plotBand.label.qa,
                     }

package/dist/cjs/components/AxisY/prepare-axis-data.d.ts

@@ -2,7 +2,7 @@ import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '..
 import type { AxisYData } from './types';
 export declare function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }: {
     axis: PreparedAxis;
-    split: PreparedSplit;
+    split: PreparedSplit | undefined;
     scale: ChartScale;
     top: number;
     width: number;

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -110,8 +110,8 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
 }
 export async function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
     var _a, _b, _c;
-    const axisPlotTopPosition = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-    const axisHeight = ((_b = split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
+    const axisPlotTopPosition = ((_a = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+    const axisHeight = ((_b = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
     let domain = null;
     if (axis.visible) {

package/dist/cjs/components/ChartInner/index.js

@@ -63,12 +63,14 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
         rangeSliderState,
         updateZoomState,
         zoomState }));
+    const prevWidth = usePrevious(width);
+    const prevHeight = usePrevious(height);
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,
         delay: DEBOUNCED_VALUE_DELAY,
@@ -237,7 +239,7 @@ export const ChartInner = (props) => {
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
         preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { chartWidth: width })),
-        React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
+        React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
         React.createElement("g", { className: b('content'), width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
@@ -253,7 +255,10 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
+        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
+            preparedLegend &&
+            debouncedAllPreparedSeries &&
+            preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
+import type { ChartScale, LegendItem, OnLegendItemClick, PreparedChart, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -14,26 +14,12 @@ type Props = ChartInnerProps & {
     rangeSliderState?: RangeSliderState;
 };
 export declare function useChartInnerProps(props: Props): {
-    allPreparedSeries: import("../../hooks").PreparedSeries[];
-    boundsHeight: number;
+    preparedSeries: PreparedSeries[];
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
+    boundsHeight: number;
     boundsWidth: number;
-    handleLegendItemClick: import("../../hooks").OnLegendItemClick;
-    isOutsideBounds: (x: number, y: number) => boolean;
-    legendConfig: LegendConfig | undefined;
-    legendItems: import("../../hooks").LegendItem[][];
-    preparedLegend: PreparedLegend | null;
-    preparedSeries: import("../../hooks").PreparedSeries[];
-    preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
-    preparedSplit: import("../../hooks").PreparedSplit;
-    prevHeight: number | undefined;
-    prevWidth: number | undefined;
-    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    shapesData: import("../../hooks").ShapeData[];
-    shapesReady: boolean;
-    xAxis: import("../../hooks").PreparedXAxis | null;
-    xScale: import("../../hooks").ChartScale | undefined;
+    xAxis: PreparedXAxis | null;
     yAxis: (Omit<import("../../types").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
         type: import("../../types").ChartAxisType;
         labels: Omit<import("../../types").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../../types").ChartAxisLabels, "margin" | "html" | "enabled" | "rotation" | "padding">> & {
@@ -71,6 +57,19 @@ export declare function useChartInnerProps(props: Props): {
         plotBands: import("../../hooks").PreparedAxisPlotBand[];
         crosshair: Required<import("../../types").AxisCrosshair>;
     })[];
-    yScale: (import("../../hooks").ChartScale | undefined)[] | undefined;
+    shapesData: ShapeData[];
+    shapesReady: boolean;
+    handleLegendItemClick: OnLegendItemClick;
+    isOutsideBounds: (x: number, y: number) => boolean;
+    allPreparedSeries?: PreparedSeries[] | undefined;
+    legendConfig?: LegendConfig | undefined;
+    legendItems?: LegendItem[][] | undefined;
+    preparedLegend?: PreparedLegend | undefined;
+    preparedSeriesOptions?: import("../../constants").SeriesOptionsDefaults | undefined;
+    preparedSplit?: PreparedSplit | undefined;
+    shapes?: React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+    xScale?: ChartScale | undefined;
+    yScale?: (ChartScale | undefined)[] | undefined;
+    activeLegendItems?: string[] | undefined;
 };
 export {};

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
-import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
+import { createScales, getAxes, getChartDimensions, getNormalizedXAxis, getNormalizedYAxis, getPreparedSeries, getShapes, getSplit, getVisibleSeries, recalculateYAxisLabelsWidth, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
+import { getLegendComponents, getPreparedLegend } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
-import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
-import { useLegend } from './useLegend';
+import { getActiveLegendItems, getAllLegendItems } from '../../hooks/useSeries/utils';
+import { getEffectiveXRange, getSortedSeriesData, getZoomedSeriesData, isAxisRelatedSeries, } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -34,111 +36,235 @@ function getBoundsOffsetLeft(args) {
     }, 0);
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
+// eslint-disable-next-line complexity
 export function useChartInnerProps(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
-    const prevWidth = usePrevious(width);
-    const prevHeight = usePrevious(height);
-    const colors = React.useMemo(() => {
-        var _a;
-        return (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
-    }, [data.colors]);
-    const { normalizedSeriesData, normalizedXAxis, normalizedYAxis } = useNormalizedOriginalData({
-        seriesData: data.series.data,
-        xAxis: data.xAxis,
-        yAxis: data.yAxis,
-    });
-    const preparedSeriesOptions = React.useMemo(() => {
-        return getPreparedOptions(data.series.options);
-    }, [data.series.options]);
-    const { preparedSeries: allPreparedSeries, preparedLegend, handleLegendItemClick, } = useSeries({
-        colors,
-        legend: data.legend,
-        originalSeriesData: normalizedSeriesData,
-        seriesData: normalizedSeriesData,
-        seriesOptions: data.series.options,
-    });
-    const effectiveZoomState = React.useMemo(() => {
-        const result = {};
-        const effectiveX = getEffectiveXRange(zoomState.x, rangeSliderState);
-        if (effectiveX !== undefined) {
-            result.x = effectiveX;
-        }
-        if (zoomState.y !== undefined) {
-            result.y = zoomState.y;
-        }
-        return result;
-    }, [zoomState, rangeSliderState]);
-    const { preparedSeries, preparedShapesSeries } = React.useMemo(() => {
-        return getZoomedSeriesData({
-            seriesData: allPreparedSeries,
-            xAxis: normalizedXAxis,
-            yAxis: normalizedYAxis,
-            zoomState: effectiveZoomState,
-        });
-    }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, effectiveZoomState]);
-    const { legendConfig, legendItems } = useLegend({
-        width,
-        height,
-        preparedChart,
-        preparedSeries,
-        preparedLegend,
-    });
-    const { xAxis, yAxis, setAxes } = useAxis({
+    const [selectedLegendItems, setSelectedLegendItems] = React.useState(null);
+    const [chartState, setState] = React.useState(null);
+    const prevStateValue = React.useRef(chartState);
+    const previousChartData = React.useRef(null);
+    const currentRunRef = React.useRef(0);
+    React.useEffect(() => {
+        currentRunRef.current++;
+        const currentRun = currentRunRef.current;
+        (async function () {
+            var _a, _b, _c;
+            const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
+            const colors = (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
+            const normalizedSeriesData = getSortedSeriesData({
+                seriesData: data.series.data,
+                xAxis: data.xAxis,
+                yAxis: data.yAxis,
+            });
+            const normalizedXAxis = getNormalizedXAxis({ xAxis: data.xAxis });
+            const normalizedYAxis = getNormalizedYAxis({ yAxis: data.yAxis });
+            const preparedSeriesOptions = getPreparedOptions(data.series.options);
+            const preparedLegend = await getPreparedLegend({
+                legend: data.legend,
+                series: normalizedSeriesData,
+            });
+            let allPreparedSeries;
+            if (chartDataChanged) {
+                allPreparedSeries = await getPreparedSeries({
+                    seriesData: normalizedSeriesData,
+                    seriesOptions: data.series.options,
+                    preparedLegend,
+                    colors,
+                });
+            }
+            else {
+                allPreparedSeries = (_c = (_b = prevStateValue.current) === null || _b === void 0 ? void 0 : _b.allPreparedSeries) !== null && _c !== void 0 ? _c : [];
+            }
+            const activeLegendItems = selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : getActiveLegendItems(allPreparedSeries);
+            const visiblePreparedSeries = getVisibleSeries({
+                preparedSeries: allPreparedSeries,
+                activeLegendItems,
+            });
+            const effectiveZoomState = {};
+            const effectiveX = getEffectiveXRange(zoomState.x, rangeSliderState);
+            if (effectiveX !== undefined) {
+                effectiveZoomState.x = effectiveX;
+            }
+            if (zoomState.y !== undefined) {
+                effectiveZoomState.y = zoomState.y;
+            }
+            const { preparedSeries, preparedShapesSeries } = getZoomedSeriesData({
+                seriesData: visiblePreparedSeries,
+                xAxis: normalizedXAxis,
+                yAxis: normalizedYAxis,
+                zoomState: effectiveZoomState,
+            });
+            const { legendConfig, legendItems } = await getLegendComponents({
+                chartWidth: width,
+                chartHeight: height,
+                chartMargin: preparedChart.margin,
+                series: preparedSeries,
+                preparedLegend,
+            });
+            const axes = await getAxes({
+                height,
+                preparedChart,
+                legendConfig,
+                preparedLegend,
+                preparedSeries,
+                preparedSeriesOptions,
+                width,
+                xAxis: normalizedXAxis,
+                yAxis: normalizedYAxis,
+            });
+            const xAxis = axes.xAxis;
+            let yAxis = axes.yAxis;
+            let preparedSplit = { plots: [], gap: 0 };
+            let xScale;
+            let yScale;
+            let boundsWidth = 0;
+            let boundsHeight = 0;
+            const calculateAxisBasedProps = () => {
+                const chartDimensions = getChartDimensions({
+                    height,
+                    margin: preparedChart.margin,
+                    preparedLegend,
+                    preparedSeries: preparedSeries,
+                    preparedYAxis: yAxis,
+                    preparedXAxis: xAxis,
+                    width,
+                    legendConfig,
+                });
+                boundsHeight = chartDimensions.boundsHeight;
+                boundsWidth = chartDimensions.boundsWidth;
+                preparedSplit = getSplit({ split: data.split, boundsHeight, chartWidth: width });
+                if (preparedSeries.some(isAxisRelatedSeries)) {
+                    ({ xScale, yScale } = createScales({
+                        boundsWidth,
+                        boundsHeight,
+                        isRangeSlider: false,
+                        rangeSliderState,
+                        series: preparedSeries,
+                        split: preparedSplit,
+                        xAxis,
+                        yAxis,
+                        zoomState,
+                    }));
+                }
+            };
+            calculateAxisBasedProps();
+            const newYAxis = await recalculateYAxisLabelsWidth({
+                seriesData: preparedSeries,
+                yAxis,
+                yScale,
+            });
+            if (!isEqual(yAxis, newYAxis)) {
+                yAxis = newYAxis;
+                calculateAxisBasedProps();
+            }
+            const isOutsideBounds = (x, y) => {
+                return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+            };
+            const { shapes, shapesData } = await getShapes({
+                boundsWidth,
+                boundsHeight,
+                clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
+                dispatcher,
+                series: preparedShapesSeries,
+                seriesOptions: preparedSeriesOptions,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+                split: preparedSplit,
+                htmlLayout,
+                clipPathId,
+                isOutsideBounds,
+                zoomState: effectiveZoomState,
+            });
+            const boundsOffsetTop = getBoundsOffsetTop({
+                chartMarginTop: preparedChart.margin.top,
+                preparedLegend,
+                legendConfig,
+            });
+            // We need to calculate the width of each left axis because the first axis can be hidden
+            const boundsOffsetLeft = getBoundsOffsetLeft({
+                chartMarginLeft: preparedChart.margin.left,
+                preparedLegend,
+                yAxis,
+                getYAxisWidth,
+                legendConfig,
+            });
+            //end
+            const newStateValue = {
+                allPreparedSeries,
+                boundsHeight,
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                boundsWidth,
+                isOutsideBounds,
+                legendConfig,
+                legendItems,
+                preparedLegend,
+                preparedSeries,
+                preparedSeriesOptions,
+                preparedSplit,
+                shapes,
+                shapesData,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+                activeLegendItems,
+            };
+            if (currentRunRef.current === currentRun) {
+                if (!isEqual(prevStateValue.current, newStateValue)) {
+                    setState(newStateValue);
+                    prevStateValue.current = newStateValue;
+                }
+                previousChartData.current = data;
+            }
+        })();
+    }, [
         height,
-        preparedChart,
-        legendConfig,
-        preparedLegend,
-        preparedSeries,
-        preparedSeriesOptions,
         width,
-        xAxis: normalizedXAxis,
-        yAxis: normalizedYAxis,
-    });
-    const { boundsWidth, boundsHeight } = useChartDimensions({
-        height,
-        margin: preparedChart.margin,
-        preparedLegend,
-        preparedSeries: preparedSeries,
-        preparedYAxis: yAxis,
-        preparedXAxis: xAxis,
-        width,
-        legendConfig,
-    });
-    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
-    const { xScale, yScale } = useAxisScales({
-        boundsWidth,
-        boundsHeight,
-        rangeSliderState,
-        series: preparedSeries,
-        split: preparedSplit,
-        xAxis,
-        yAxis,
+        data,
+        selectedLegendItems,
         zoomState,
-    });
-    useYAxisLabelWidth({ seriesData: preparedSeries, setAxes, yAxis, yScale });
-    const isOutsideBounds = React.useCallback((x, y) => {
-        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
-    }, [boundsHeight, boundsWidth]);
-    const { shapes, shapesData, shapesReady } = useShapes({
-        boundsWidth,
-        boundsHeight,
-        clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
+        rangeSliderState,
+        preparedChart,
         dispatcher,
-        series: preparedShapesSeries,
-        seriesOptions: preparedSeriesOptions,
-        xAxis,
-        xScale,
-        yAxis,
-        yScale,
-        split: preparedSplit,
         htmlLayout,
         clipPathId,
-        isOutsideBounds,
-        zoomState: effectiveZoomState,
-    });
-    const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
+    ]);
+    // additional start
+    const preparedSeries = React.useMemo(() => { var _a; return (_a = chartState === null || chartState === void 0 ? void 0 : chartState.preparedSeries) !== null && _a !== void 0 ? _a : []; }, [chartState === null || chartState === void 0 ? void 0 : chartState.preparedSeries]);
+    const activeLegendItems = React.useMemo(() => { var _a; return (_a = chartState === null || chartState === void 0 ? void 0 : chartState.activeLegendItems) !== null && _a !== void 0 ? _a : []; }, [chartState === null || chartState === void 0 ? void 0 : chartState.activeLegendItems]);
+    const boundsHeight = (_a = chartState === null || chartState === void 0 ? void 0 : chartState.boundsHeight) !== null && _a !== void 0 ? _a : 0;
+    const boundsWidth = (_b = chartState === null || chartState === void 0 ? void 0 : chartState.boundsWidth) !== null && _b !== void 0 ? _b : 0;
+    const handleLegendItemClick = React.useCallback(({ id, metaKey }) => {
+        const allItems = getAllLegendItems(preparedSeries);
+        const onlyItemSelected = (selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : []).length === 1 && activeLegendItems.includes(id);
+        let nextActiveLegendItems;
+        if (metaKey && activeLegendItems.includes(id)) {
+            nextActiveLegendItems = activeLegendItems.filter((item) => item !== id);
+        }
+        else if (metaKey && !activeLegendItems.includes(id)) {
+            nextActiveLegendItems = activeLegendItems.concat(id);
+        }
+        else if (onlyItemSelected && allItems.length === 1) {
+            nextActiveLegendItems = [];
+        }
+        else if (onlyItemSelected) {
+            nextActiveLegendItems = allItems;
+        }
+        else {
+            nextActiveLegendItems = [id];
+        }
+        setSelectedLegendItems(nextActiveLegendItems);
+    }, [preparedSeries, selectedLegendItems, activeLegendItems]);
+    const xAxis = (_c = chartState === null || chartState === void 0 ? void 0 : chartState.xAxis) !== null && _c !== void 0 ? _c : null;
+    const yAxis = (_d = chartState === null || chartState === void 0 ? void 0 : chartState.yAxis) !== null && _d !== void 0 ? _d : [];
+    const handleAttemptToSetZoomState = (nextZoomState) => {
+        var _a;
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({
-            seriesData: preparedSeries,
+            seriesData: (_a = chartState === null || chartState === void 0 ? void 0 : chartState.preparedSeries) !== null && _a !== void 0 ? _a : [],
             xAxis,
             yAxis,
             zoomState: nextZoomState,
@@ -147,54 +273,22 @@ export function useChartInnerProps(props) {
         if (hasData) {
             updateZoomState(nextZoomState);
         }
-    }, [xAxis, yAxis, preparedSeries, updateZoomState]);
+    };
     useZoom({
         node: plotNode,
         onUpdate: handleAttemptToSetZoomState,
         plotContainerHeight: boundsHeight,
         plotContainerWidth: boundsWidth,
-        preparedSplit,
+        preparedSplit: chartState === null || chartState === void 0 ? void 0 : chartState.preparedSplit,
         preparedZoom: preparedChart.zoom,
         xAxis,
-        xScale,
+        xScale: chartState === null || chartState === void 0 ? void 0 : chartState.xScale,
         yAxis,
-        yScale,
-    });
-    const boundsOffsetTop = getBoundsOffsetTop({
-        chartMarginTop: preparedChart.margin.top,
-        preparedLegend,
-        legendConfig,
+        yScale: chartState === null || chartState === void 0 ? void 0 : chartState.yScale,
     });
-    // We need to calculate the width of each left axis because the first axis can be hidden
-    const boundsOffsetLeft = getBoundsOffsetLeft({
-        chartMarginLeft: preparedChart.margin.left,
-        preparedLegend,
-        yAxis,
-        getYAxisWidth,
-        legendConfig,
-    });
-    return {
-        allPreparedSeries,
-        boundsHeight,
-        boundsOffsetLeft,
-        boundsOffsetTop,
+    // additional end
+    return Object.assign(Object.assign({}, chartState), { preparedSeries, boundsOffsetLeft: (_e = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetLeft) !== null && _e !== void 0 ? _e : 0, boundsOffsetTop: (_f = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetTop) !== null && _f !== void 0 ? _f : 0, boundsHeight,
         boundsWidth,
-        handleLegendItemClick,
-        isOutsideBounds,
-        legendConfig,
-        legendItems,
-        preparedLegend,
-        preparedSeries,
-        preparedSeriesOptions,
-        preparedSplit,
-        prevHeight,
-        prevWidth,
-        shapes,
-        shapesData,
-        shapesReady,
         xAxis,
-        xScale,
-        yAxis,
-        yScale,
-    };
+        yAxis, shapesData: (_g = chartState === null || chartState === void 0 ? void 0 : chartState.shapesData) !== null && _g !== void 0 ? _g : [], shapesReady: Boolean(chartState), handleLegendItemClick, isOutsideBounds: (_h = chartState === null || chartState === void 0 ? void 0 : chartState.isOutsideBounds) !== null && _h !== void 0 ? _h : (() => false) });
 }

package/dist/cjs/components/ChartInner/useChartInnerState.js

@@ -41,8 +41,9 @@ export function useChartInnerState(props) {
             else if (nextZoomState.x !== undefined) {
                 setRangeSliderState({ min: nextZoomState.x[0], max: nextZoomState.x[1] });
             }
+            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
         }
-    }, [zoomState]);
+    }, [dispatcher, zoomState]);
     const updateRangeSliderState = React.useCallback((nextRangeSliderState) => {
         if (!isEqual(rangeSliderState, nextRangeSliderState)) {
             setRangeSliderState(nextRangeSliderState

package/dist/cjs/components/Legend/index.d.ts

@@ -5,7 +5,7 @@ import './styles.css';
 type Props = {
     chartSeries: PreparedSeries[];
     legend: PreparedLegend;
-    items: LegendItem[][];
+    items: LegendItem[][] | undefined;
     config: LegendConfig;
     htmlLayout: HTMLElement | null;
     onItemClick: OnLegendItemClick;

package/dist/cjs/components/Legend/index.js

@@ -130,7 +130,7 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
+    const { chartSeries, legend, items = [], config, htmlLayout, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
     const [pageIndex, setPageIndex] = React.useState(0);
     React.useEffect(() => {