@gravity-ui/charts 1.9.0 → 1.10.0

package/dist/esm/components/Axis/AxisY.js

@@ -85,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, bottomLimit = 0, } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -96,11 +96,16 @@ export const AxisY = (props) => {
         const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        let plotContainer = null;
+        let plotBeforeContainer = null;
+        let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-y';
-        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
-            plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
+        if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+            plotBeforeContainer = select(plotBeforeRef.current);
+            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+        }
+        if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+            plotAfterContainer = select(plotAfterRef.current);
+            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         const axisSelection = svgElement
             .selectAll('axis')
@@ -174,76 +179,74 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
-            if (plotContainer && d.plotBands.length > 0) {
+            if (d.plotBands.length > 0) {
                 const plotBandDataAttr = `data-plot-y-band-${index}`;
-                const plotBandsSelection = plotContainer
-                    .selectAll(`[${plotBandDataAttr}]`)
-                    .data(d.plotBands)
-                    .join('g')
-                    .attr(plotDataAttr, 1)
-                    .attr(plotBandDataAttr, 1)
-                    .style('transform', getAxisPlotsPosition(d, split));
-                plotBandsSelection
-                    .append('rect')
-                    .attr('x', 0)
-                    .attr('width', width)
-                    .attr('y', (band) => {
-                    var _a, _b;
-                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                    const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                    const startPos = halfBandwidth + Math.min(from, to);
-                    return Math.max(0, startPos);
-                })
-                    .attr('height', (band) => {
-                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                    const startPos = height - Math.min(from, to);
-                    const endPos = Math.min(Math.abs(to - from), startPos);
-                    return Math.min(endPos, height);
-                })
-                    .attr('fill', (band) => band.color)
-                    .attr('opacity', (band) => band.opacity);
-                plotBandsSelection.each((plotBandData, i, nodes) => {
-                    const plotLineSelection = select(nodes[i]);
-                    if (plotBandData.layerPlacement === 'before') {
-                        plotLineSelection.lower();
+                const setPlotBands = (plotContainer, plotBands) => {
+                    if (!plotContainer || !plotBands.length) {
+                        return;
                     }
-                    else {
-                        plotLineSelection.raise();
-                    }
-                });
+                    const plotBandsSelection = plotContainer
+                        .selectAll(`[${plotBandDataAttr}]`)
+                        .remove()
+                        .data(plotBands)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotBandDataAttr, 1)
+                        .style('transform', getAxisPlotsPosition(d, split));
+                    plotBandsSelection
+                        .append('rect')
+                        .attr('x', 0)
+                        .attr('width', width)
+                        .attr('y', (band) => {
+                        var _a, _b;
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                        const startPos = halfBandwidth + Math.min(from, to);
+                        return Math.max(0, startPos);
+                    })
+                        .attr('height', (band) => {
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                        const startPos = height - Math.min(from, to);
+                        const endPos = Math.min(Math.abs(to - from), startPos);
+                        return Math.min(endPos, height);
+                    })
+                        .attr('fill', (band) => band.color)
+                        .attr('opacity', (band) => band.opacity);
+                };
+                setPlotBands(plotBeforeContainer, d.plotBands.filter((item) => item.layerPlacement === 'before'));
+                setPlotBands(plotAfterContainer, d.plotBands.filter((item) => item.layerPlacement === 'after'));
             }
-            if (plotContainer && d.plotLines.length > 0) {
+            if (d.plotLines.length > 0) {
                 const plotLineDataAttr = `data-plot-y-line-${index}`;
-                const plotLinesSelection = plotContainer
-                    .selectAll(`[${plotLineDataAttr}]`)
-                    .data(d.plotLines)
-                    .join('g')
-                    .attr(plotDataAttr, 1)
-                    .attr(plotLineDataAttr, 1)
-                    .style('transform', getAxisPlotsPosition(d, split));
-                plotLinesSelection
-                    .append('path')
-                    .attr('d', (plotLine) => {
-                    const plotLineValue = Number(axisScale(plotLine.value));
-                    const points = [
-                        [0, plotLineValue],
-                        [width, plotLineValue],
-                    ];
-                    return lineGenerator(points);
-                })
-                    .attr('stroke', (plotLine) => plotLine.color)
-                    .attr('stroke-width', (plotLine) => plotLine.width)
-                    .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
-                    .attr('opacity', (plotLine) => plotLine.opacity);
-                plotLinesSelection.each((plotLineData, i, nodes) => {
-                    const plotLineSelection = select(nodes[i]);
-                    if (plotLineData.layerPlacement === 'before') {
-                        plotLineSelection.lower();
-                    }
-                    else {
-                        plotLineSelection.raise();
+                const setPlotLines = (plotContainer, plotLines) => {
+                    if (!plotContainer || !plotLines.length) {
+                        return;
                     }
-                });
+                    const plotLinesSelection = plotContainer
+                        .selectAll(`[${plotLineDataAttr}]`)
+                        .remove()
+                        .data(plotLines)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotLineDataAttr, 1)
+                        .style('transform', getAxisPlotsPosition(d, split));
+                    plotLinesSelection
+                        .append('path')
+                        .attr('d', (plotLine) => {
+                        const plotLineValue = Number(axisScale(plotLine.value));
+                        const points = [
+                            [0, plotLineValue],
+                            [width, plotLineValue],
+                        ];
+                        return lineGenerator(points);
+                    })
+                        .attr('stroke', (plotLine) => plotLine.color)
+                        .attr('stroke-width', (plotLine) => plotLine.width)
+                        .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                        .attr('opacity', (plotLine) => plotLine.opacity);
+                };
+                setPlotLines(plotBeforeContainer, d.plotLines.filter((item) => item.layerPlacement === 'before'));
+                setPlotLines(plotAfterContainer, d.plotLines.filter((item) => item.layerPlacement === 'after'));
             }
             return axisItem;
         });
@@ -269,28 +272,47 @@ export const AxisY = (props) => {
             .attr('class', b('title'))
             .attr('text-anchor', 'middle')
             .attr('font-size', (d) => d.title.style.fontSize)
-            .attr('transform', (d) => {
-            const titleRows = wrapText({
-                text: d.title.text,
-                style: d.title.style,
-                width: height,
+            .call(async (s) => {
+            s.each(async function prepareAxisTitle(d) {
+                if (!this) {
+                    return;
+                }
+                const selection = select(this);
+                const titleRows = await wrapText({
+                    text: d.title.text,
+                    style: d.title.style,
+                    width: height,
+                });
+                const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
+                const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
+                const angle = d.position === 'left' ? -90 : 90;
+                selection.attr('transform', `translate(${x}, ${y}) rotate(${angle})`);
+                const axisTitleRows = await getAxisTitleRows({ axis: d, textMaxWidth: height });
+                selection
+                    .selectAll('tspan')
+                    .data(axisTitleRows)
+                    .join('tspan')
+                    .attr('x', 0)
+                    .attr('y', (titleRow) => titleRow.y)
+                    .text((titleRow) => titleRow.text)
+                    .each((_d, index, nodes) => {
+                    if (index === nodes.length - 1) {
+                        handleOverflowingText(nodes[index], height);
+                    }
+                });
             });
-            const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
-            const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
-            const angle = d.position === 'left' ? -90 : 90;
-            return `translate(${x}, ${y}) rotate(${angle})`;
-        })
-            .selectAll('tspan')
-            .data((d) => getAxisTitleRows({ axis: d, textMaxWidth: height }))
-            .join('tspan')
-            .attr('x', 0)
-            .attr('y', (d) => d.y)
-            .text((d) => d.text)
-            .each((_d, index, nodes) => {
-            if (index === nodes.length - 1) {
-                handleOverflowingText(nodes[index], height);
-            }
+            return s;
         });
-    }, [allAxes, width, height, scale, split, bottomLimit]);
+    }, [
+        allAxes,
+        width,
+        height,
+        scale,
+        split,
+        bottomLimit,
+        lineGenerator,
+        plotBeforeRef,
+        plotAfterRef,
+    ]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { ArrowRotateLeft } from '@gravity-ui/icons';
+import { Button, ButtonIcon } from '@gravity-ui/uikit';
 import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
@@ -15,10 +17,13 @@ export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
-    const htmlLayerRef = React.useRef(null);
+    const [htmlLayout, setHtmlLayout] = React.useState(null);
     const plotRef = React.useRef(null);
+    const plotBeforeRef = React.useRef(null);
+    const plotAfterRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current, svgContainer: svgRef.current }));
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
+        htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
         tooltip,
@@ -42,7 +47,7 @@ export const ChartInner = (props) => {
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
     useCrosshair({
         split: preparedSplit,
-        plotElement: plotRef.current,
+        plotElement: plotAfterRef.current,
         boundsOffsetLeft,
         boundsOffsetTop,
         width: boundsWidth,
@@ -74,20 +79,28 @@ export const ChartInner = (props) => {
         }
     }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
     return (React.createElement("div", { className: b() },
-        React.createElement("svg", { ref: svgRef, width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
+        React.createElement("svg", { ref: svgRef, width: width, height: height, 
+            // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
+            // when starting to select an area, the tooltip remains in the position where the selection began
+            onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
-                    React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
-                shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayerRef.current }))),
-        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
+                    xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }))))),
+                React.createElement("g", { ref: plotBeforeRef }),
+                shapes,
+                React.createElement("g", { ref: plotAfterRef })),
+            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
+        React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
+        handleZoomReset && (React.createElement(Button, { style: { position: 'absolute', top: 0, right: 0 }, onClick: handleZoomReset },
+            React.createElement(ButtonIcon, null,
+                React.createElement(ArrowRotateLeft, null)))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
 };

package/dist/esm/components/ChartInner/useChartInnerHandlers.d.ts

@@ -14,7 +14,7 @@ type Props = {
     togglePinTooltip: ChartInnerState['togglePinTooltip'];
     tooltipPinned: boolean;
     unpinTooltip: ChartInnerState['unpinTooltip'];
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     tooltipThrottle: number;
 };

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
+import type { PreparedAxis } from '../../hooks';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     svgContainer: SVGGElement | null;
+    plotNode: SVGGElement | null;
 };
 export declare function useChartInnerProps(props: Props): {
     svgBottomPos: number | undefined;
@@ -14,6 +16,7 @@ export declare function useChartInnerProps(props: Props): {
     boundsOffsetTop: number;
     boundsWidth: number;
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
+    handleZoomReset: (() => void) | undefined;
     legendConfig: {
         offset: {
             left: number;
@@ -25,9 +28,9 @@ export declare function useChartInnerProps(props: Props): {
                 end: number;
             }[];
         } | undefined;
-    };
-    legendItems: import("../../hooks").LegendItem[][];
-    preparedLegend: import("../../hooks").PreparedLegend;
+    } | undefined;
+    legendItems: never[] | import("../../hooks").LegendItem[][];
+    preparedLegend: import("../../hooks").PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;
@@ -41,9 +44,9 @@ export declare function useChartInnerProps(props: Props): {
         enabled: boolean;
         throttle: number;
     };
-    xAxis: import("../../hooks").PreparedAxis;
+    xAxis: PreparedAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
-    yAxis: import("../../hooks").PreparedAxis[];
+    yAxis: PreparedAxis[];
     yScale: import("../../hooks").ChartScale[] | undefined;
 };
 export {};

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

@@ -1,28 +1,44 @@
 import React from 'react';
 import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { getZoomedSeriesData } from '../../hooks/hooks-utils';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
+import { useZoom } from '../../hooks/useZoom';
+import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 export function useChartInnerProps(props) {
     var _a;
-    const { width, height, data, dispatcher, htmlLayout, svgContainer } = props;
+    const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
+    const [zoomState, setZoomState] = React.useState({});
     const { chart, title, tooltip, colors } = useChartOptions({ data });
-    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
-    const yAxis = React.useMemo(() => getPreparedYAxis({
-        series: data.series.data,
-        yAxis: data.yAxis,
-        height,
-    }), [data, height]);
+    const zoomedSeriesData = React.useMemo(() => {
+        return getZoomedSeriesData({
+            seriesData: data.series.data,
+            xAxis: data.xAxis,
+            yAxises: data.yAxis,
+            zoomState,
+        });
+    }, [data.series.data, data.xAxis, data.yAxis, zoomState]);
+    const [xAxis, setXAxis] = React.useState(null);
+    React.useEffect(() => {
+        getPreparedXAxis({ xAxis: data.xAxis, width, seriesData: zoomedSeriesData }).then((val) => setXAxis(val));
+    }, [data.xAxis, width, zoomedSeriesData]);
+    const [yAxis, setYAxis] = React.useState([]);
+    React.useEffect(() => {
+        getPreparedYAxis({ yAxis: data.yAxis, height, seriesData: zoomedSeriesData }).then((val) => setYAxis(val));
+    }, [data.yAxis, height, zoomedSeriesData]);
     const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
         chartWidth: width,
         chartHeight: height,
         chartMargin: chart.margin,
-        series: data.series,
+        colors,
         legend: data.legend,
+        originalSeriesData: data.series.data,
+        seriesData: zoomedSeriesData,
+        seriesOptions: data.series.options,
         preparedYAxis: yAxis,
-        colors,
     });
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
@@ -37,6 +53,8 @@ export function useChartInnerProps(props) {
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
+        hasZoomX: Boolean(zoomState.x),
+        hasZoomY: Boolean(zoomState.y),
         series: preparedSeries,
         xAxis,
         yAxis,
@@ -55,6 +73,30 @@ export function useChartInnerProps(props) {
         split: preparedSplit,
         htmlLayout,
     });
+    const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
+        const nextZoomedSeriesData = getZoomedSeriesData({
+            seriesData: zoomedSeriesData,
+            xAxis: data.xAxis,
+            yAxises: data.yAxis,
+            zoomState: nextZoomState,
+        });
+        const hasData = hasAtLeastOneSeriesDataPerPlot(nextZoomedSeriesData, yAxis);
+        if (hasData) {
+            setZoomState(nextZoomState);
+        }
+    }, [data.xAxis, data.yAxis, yAxis, zoomedSeriesData]);
+    useZoom({
+        node: plotNode,
+        onUpdate: handleAttemptToSetZoomState,
+        plotContainerHeight: boundsHeight,
+        plotContainerWidth: boundsWidth,
+        preparedSplit,
+        preparedZoom: chart.zoom,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+    });
     const boundsOffsetTop = chart.margin.top;
     // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = chart.margin.left +
@@ -69,6 +111,9 @@ export function useChartInnerProps(props) {
             return acc;
         }, 0);
     const { x, bottom } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+    const handleZoomReset = React.useCallback(() => {
+        setZoomState({});
+    }, []);
     return {
         svgBottomPos: bottom,
         svgXPos: x,
@@ -77,6 +122,7 @@ export function useChartInnerProps(props) {
         boundsOffsetTop,
         boundsWidth,
         handleLegendItemClick,
+        handleZoomReset: Object.keys(zoomState).length > 0 ? handleZoomReset : undefined,
         legendConfig,
         legendItems,
         preparedLegend,

package/dist/esm/components/ChartInner/utils.d.ts

@@ -0,0 +1,3 @@
+import type { PreparedAxis } from '../../hooks/useChartOptions/types';
+import type { ChartSeries } from '../../types';
+export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: ChartSeries[], yAxises?: PreparedAxis[]): boolean;

package/dist/esm/components/ChartInner/utils.js

@@ -0,0 +1,28 @@
+export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxises = []) {
+    const hasDataMap = new Map();
+    yAxises.forEach((yAxis) => {
+        var _a;
+        const plotIndex = (_a = yAxis.plotIndex) !== null && _a !== void 0 ? _a : 0;
+        if (!hasDataMap.has(plotIndex)) {
+            hasDataMap.set(plotIndex, false);
+        }
+    });
+    if (hasDataMap.size === 0) {
+        return false;
+    }
+    seriesData.forEach((seriesDataChunk) => {
+        var _a;
+        let yAxisIndex = 0;
+        if ('yAxis' in seriesDataChunk && typeof seriesDataChunk.yAxis === 'number') {
+            yAxisIndex = seriesDataChunk.yAxis;
+        }
+        const yAxis = yAxises[yAxisIndex];
+        const plotIndex = (_a = yAxis === null || yAxis === void 0 ? void 0 : yAxis.plotIndex) !== null && _a !== void 0 ? _a : 0;
+        if (!hasDataMap.get(plotIndex)) {
+            if (seriesDataChunk.data.length > 0) {
+                hasDataMap.set(plotIndex, true);
+            }
+        }
+    });
+    return [...hasDataMap.values()].every((hasData) => hasData);
+}