@gravity-ui/charts 1.34.0 → 1.34.2

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

@@ -1,12 +1,13 @@
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '../../hooks';
 import type { AxisXData } from './types';
-export declare function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }: {
+export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }: {
     axis: PreparedAxis;
-    yAxis: PreparedAxis[];
-    scale: ChartScale;
-    boundsWidth: number;
     boundsOffsetLeft: number;
     boundsOffsetRight: number;
+    boundsWidth: number;
     height: number;
+    scale: ChartScale;
+    series: PreparedSeries[];
     split: PreparedSplit;
+    yAxis: PreparedAxis[];
 }): Promise<AxisXData[]>;

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

@@ -68,7 +68,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 // eslint-disable-next-line complexity
-export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }) {
+export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
     var _a, _b, _c, _d, _e, _f;
     const xAxisItems = [];
     for (let plotIndex = 0; plotIndex < split.plots.length; plotIndex++) {
@@ -95,7 +95,7 @@ export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, bounds
         const ticks = [];
         const getTextSize = getTextSizeFn({ style: axis.labels.style });
         const labelLineHeight = (await getTextSize('Tmp')).height;
-        const values = getXAxisTickValues({ scale, axis, labelLineHeight });
+        const values = getXAxisTickValues({ scale, axis, labelLineHeight, series });
         const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
         const labelMaxWidth = values.length > 1
             ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2

package/dist/cjs/components/AxisY/utils.js

@@ -1,4 +1,4 @@
-import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCount, isBandScale, thinOut, } from '../../utils';
+import { getDomainDataYBySeries, getMinSpaceBetween, getTicksCountByPixelInterval, isBandScale, thinOut, } from '../../utils';
 export function getTickValues({ scale, axis, labelLineHeight, series, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();
@@ -13,10 +13,10 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
                 if (domainData.length < 3) {
                     return domainData;
                 }
-                const ticksCount = (_a = getTicksCount({ axis, range: height })) !== null && _a !== void 0 ? _a : domainData.length;
+                const ticksCount = (_a = getTicksCountByPixelInterval({ axis, axisWidth: height })) !== null && _a !== void 0 ? _a : domainData.length;
                 return scale.ticks(Math.min(ticksCount, domainData.length));
             }
-            const ticksCount = getTicksCount({ axis, range: height });
+            const ticksCount = getTicksCountByPixelInterval({ axis, axisWidth: height });
             return scale.ticks(ticksCount);
         };
         const scaleTicks = getScaleTicks();

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

@@ -6,6 +6,7 @@ import { getPreparedRangeSlider } from '../../hooks/useAxis/range-slider';
 import { getPreparedChart } from '../../hooks/useChartOptions/chart';
 import { getPreparedTitle } from '../../hooks/useChartOptions/title';
 import { getPreparedTooltip } from '../../hooks/useChartOptions/tooltip';
+import { getClipPathIdByBounds } from '../../hooks/useShapes/utils';
 import { EventType, block, getDispatcher, isBandScale } from '../../utils';
 import { AxisX } from '../AxisX/AxisX';
 import { prepareXAxisData } from '../AxisX/prepare-axis-data';
@@ -63,7 +64,7 @@ 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, 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, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart, rangeSliderDomain: (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.getDomain(), rangeSliderState, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
@@ -159,18 +160,29 @@ export const ChartInner = (props) => {
         if (axis && scale) {
             const axisData = await prepareXAxisData({
                 axis,
-                yAxis,
-                scale,
-                boundsWidth,
                 boundsOffsetLeft: boundsOffsetLeft,
                 boundsOffsetRight: width - boundsWidth - boundsOffsetLeft,
+                boundsWidth,
                 height: boundsHeight,
+                scale,
+                series: preparedSeries.filter((s) => s.visible),
                 split: preparedSplit,
+                yAxis,
             });
             items.push(...axisData);
         }
         return items;
-    }, [xAxis, xScale, yAxis, boundsWidth, boundsOffsetLeft, width, boundsHeight, preparedSplit]);
+    }, [
+        boundsHeight,
+        boundsOffsetLeft,
+        boundsWidth,
+        preparedSeries,
+        preparedSplit,
+        width,
+        xAxis,
+        xScale,
+        yAxis,
+    ]);
     const xAxisDataItems = useAsyncState([], setXAxisDataItems);
     React.useEffect(() => {
         if (!initialized && xScale) {
@@ -206,16 +218,17 @@ export const ChartInner = (props) => {
         updateRangeSliderState,
         xScale,
     ]);
-    const areShapesReady = shapes.length > 0;
     React.useEffect(() => {
-        if (areShapesReady) {
+        if (shapesReady) {
             onReady === null || onReady === void 0 ? void 0 : onReady({ dimensions: { width, height } });
         }
-    }, [height, areShapesReady, onReady, width]);
+    }, [height, shapesReady, onReady, width]);
     const chartContent = (React.createElement(React.Fragment, null,
         React.createElement("defs", null,
-            React.createElement("clipPath", { id: clipPathId },
-                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight }))),
+            React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId }) },
+                React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
+            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) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

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

@@ -44,6 +44,7 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
+    shapesReady: boolean;
     svgXPos: number | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;

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

@@ -111,7 +111,7 @@ export function useChartInnerProps(props) {
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
-    const { shapes, shapesData } = useShapes({
+    const { shapes, shapesData, shapesReady } = useShapes({
         boundsWidth,
         boundsHeight,
         clipPathBySeriesType: CLIP_PATH_BY_SERIES_TYPE,
@@ -126,6 +126,7 @@ export function useChartInnerProps(props) {
         htmlLayout,
         clipPathId,
         isOutsideBounds,
+        zoomState,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({
@@ -182,6 +183,7 @@ export function useChartInnerProps(props) {
         prevWidth,
         shapes,
         shapesData,
+        shapesReady,
         svgXPos: x,
         xAxis,
         xScale,

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

@@ -59,6 +59,7 @@ function RangeSliderComponent(props, forwardedRef) {
         brushOptions: brush,
         node: ref.current,
         onBrushEnd,
+        preventNullSelection: true,
         selection,
         type: 'x',
     });

package/dist/cjs/hooks/useAxis/x-axis.js

@@ -15,7 +15,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
     }
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
-    const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight });
+    const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
     if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat)) {
         axis.labels.dateFormat = getDefaultDateFormat(tickStep);

package/dist/cjs/hooks/useBrush/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { brush, brushX, brushY, select } from 'd3';
+import { brush, brushX, brushY, pointer, select } from 'd3';
 import { block } from '../../utils';
-import { getNormalizedSelection, setBrushBorder, setBrushHandles } from './utils';
+import { getDefaultSelection, getNormalizedSelection, setBrushBorder, setBrushHandles, } from './utils';
 import './styles.css';
 const b = block('brush');
 export function useBrush(props) {
-    const { areas, brushOptions, disabled, node, selection, type, onBrushStart, onBrush, onBrushEnd, } = props;
+    const { areas, brushOptions, disabled, node, preventNullSelection = false, selection, type, onBrushStart, onBrush, onBrushEnd, } = props;
     React.useEffect(() => {
         if (!node || !areas.length || disabled) {
             return () => { };
@@ -103,7 +103,15 @@ export function useBrush(props) {
                     });
                 }
                 if (event.sourceEvent) {
-                    onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, instance, event.selection);
+                    let resultSelection = event.selection;
+                    if (preventNullSelection && !resultSelection) {
+                        const [pointerPositionX] = pointer(event, this);
+                        resultSelection = getDefaultSelection({
+                            brushWidth,
+                            pointerPositionX,
+                        });
+                    }
+                    onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, instance, resultSelection);
                 }
             });
             groupSelection.call(instance);
@@ -129,5 +137,16 @@ export function useBrush(props) {
                 groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.remove();
             });
         };
-    }, [areas, brushOptions, disabled, node, selection, type, onBrushStart, onBrush, onBrushEnd]);
+    }, [
+        areas,
+        brushOptions,
+        disabled,
+        node,
+        preventNullSelection,
+        selection,
+        type,
+        onBrushStart,
+        onBrush,
+        onBrushEnd,
+    ]);
 }

package/dist/cjs/hooks/useBrush/types.d.ts

@@ -15,6 +15,7 @@ export interface BrushArea {
 export interface UseBrushProps {
     areas: BrushArea[];
     node: SVGGElement | null;
+    preventNullSelection?: boolean;
     brushOptions?: DeepRequired<ChartBrush>;
     disabled?: boolean;
     onBrush?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection) => void;

package/dist/cjs/hooks/useBrush/utils.d.ts

@@ -17,3 +17,7 @@ export declare function getNormalizedSelection(args: {
     selection: BrushSelection;
     width: number;
 }): [number, number] | [[number, number], [number, number]];
+export declare function getDefaultSelection(args: {
+    brushWidth: number;
+    pointerPositionX: number;
+}): BrushSelection;

package/dist/cjs/hooks/useBrush/utils.js

@@ -170,3 +170,7 @@ export function getNormalizedSelection(args) {
     }
     return resultSelection;
 }
+export function getDefaultSelection(args) {
+    const { brushWidth, pointerPositionX } = args;
+    return pointerPositionX < 0 ? [0, 1] : [brushWidth - 1, brushWidth];
+}

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -94,11 +94,13 @@ export const prepareAreaData = async (args) => {
             const positiveStackValues = new Map();
             const negativeStackValues = new Map();
             xValues.forEach(([key]) => {
-                positiveStackValues.set(key, 0);
-                negativeStackValues.set(key, 0);
+                positiveStackValues.set(key, { prev: 0, next: 0 });
+                negativeStackValues.set(key, { prev: 0, next: 0 });
             });
             const seriesStackData = [];
-            for (let j = 0; j < seriesStack.length; j++) {
+            // Process series in reverse order so that the first series in input
+            // appears at the top of the stack (furthest from baseline)
+            for (let j = seriesStack.length - 1; j >= 0; j--) {
                 const s = seriesStack[j];
                 const yAxisIndex = s.yAxis;
                 const seriesYAxis = yAxis[yAxisIndex];
@@ -123,40 +125,97 @@ export const prepareAreaData = async (args) => {
                         : d.x);
                     return m.set(key, d);
                 }, new Map());
-                const points = xValues.reduce((pointsAcc, [x, xValue]) => {
-                    var _a, _b;
+                const points = xValues.reduce((pointsAcc, [x, xValue], index) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
                     const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
                         x,
                         y: 0,
                     };
                     const yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
+                    if (s.nullMode === 'connect' && yDataValue === null) {
+                        return pointsAcc;
+                    }
                     const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
-                    let y = null;
-                    let y0 = yAxisTop + yMin;
                     if (typeof yDataValue === 'number' && yValue !== null) {
+                        const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
+                        const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
+                        const currentPointStackHeight = Math.abs(yMin - yValue);
                         if (yDataValue >= 0) {
-                            const positiveStackHeight = positiveStackValues.get(x) || 0;
-                            y = yAxisTop + yValue - positiveStackHeight;
-                            y0 -= positiveStackHeight;
-                            positiveStackValues.set(x, positiveStackHeight + (yMin - yValue));
+                            const positiveStackHeights = positiveStackValues.get(x);
+                            let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
+                            let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
+                            pointsAcc.push({
+                                y0: yAxisTop + yMin - prevSectionStackHeight,
+                                x: xValue,
+                                y: yAxisTop + yValue - prevSectionStackHeight,
+                                data: d,
+                                series: s,
+                            });
+                            if (prevSectionStackHeight !== nextSectionStackHeight) {
+                                pointsAcc.push({
+                                    y0: yAxisTop + yMin - nextSectionStackHeight,
+                                    x: xValue,
+                                    y: yAxisTop + yValue - nextSectionStackHeight,
+                                    data: d,
+                                    series: s,
+                                });
+                            }
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                                prevSectionStackHeight =
+                                    prevSectionStackHeight + currentPointStackHeight;
+                            }
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                                nextSectionStackHeight =
+                                    nextSectionStackHeight + currentPointStackHeight;
+                            }
+                            positiveStackValues.set(x, {
+                                prev: prevSectionStackHeight,
+                                next: nextSectionStackHeight,
+                            });
                         }
                         else {
-                            const negativeStackHeight = negativeStackValues.get(x) || 0;
-                            y = yAxisTop + yValue + negativeStackHeight;
-                            y0 += negativeStackHeight;
-                            negativeStackValues.set(x, negativeStackHeight + (yValue - yMin));
+                            const negativeStackHeights = negativeStackValues.get(x);
+                            let prevSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _g !== void 0 ? _g : 0;
+                            let nextSectionStackHeight = (_h = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _h !== void 0 ? _h : 0;
+                            pointsAcc.push({
+                                y0: yAxisTop + yMin + prevSectionStackHeight,
+                                x: xValue,
+                                y: yAxisTop + yValue + prevSectionStackHeight,
+                                data: d,
+                                series: s,
+                            });
+                            if (prevSectionStackHeight !== nextSectionStackHeight) {
+                                pointsAcc.push({
+                                    y0: yAxisTop + yMin + nextSectionStackHeight,
+                                    x: xValue,
+                                    y: yAxisTop + yValue + nextSectionStackHeight,
+                                    data: d,
+                                    series: s,
+                                });
+                            }
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                                prevSectionStackHeight =
+                                    prevSectionStackHeight + currentPointStackHeight;
+                            }
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                                nextSectionStackHeight =
+                                    nextSectionStackHeight + currentPointStackHeight;
+                            }
+                            negativeStackValues.set(x, {
+                                prev: prevSectionStackHeight,
+                                next: nextSectionStackHeight,
+                            });
                         }
                     }
-                    if (s.nullMode === 'connect' && yDataValue === null) {
-                        return pointsAcc;
+                    else {
+                        pointsAcc.push({
+                            y0: yAxisTop + yMin,
+                            x: xValue,
+                            y: null,
+                            data: d,
+                            series: s,
+                        });
                     }
-                    pointsAcc.push({
-                        y0,
-                        x: xValue,
-                        y,
-                        data: d,
-                        series: s,
-                    });
                     return pointsAcc;
                 }, []);
                 const labels = [];
@@ -197,7 +256,8 @@ export const prepareAreaData = async (args) => {
             }
             if (series.some((s) => s.stacking === 'percent')) {
                 xValues.forEach(([x], index) => {
-                    const stackHeight = positiveStackValues.get(x) || 0;
+                    var _a;
+                    const stackHeight = ((_a = positiveStackValues.get(x)) === null || _a === void 0 ? void 0 : _a.prev) || 0;
                     let acc = 0;
                     const ratio = plotHeight / stackHeight;
                     seriesStackData.forEach((item) => {

package/dist/cjs/hooks/useShapes/index.d.ts

@@ -5,6 +5,7 @@ import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedSplit } from '../useSplit/types';
+import type { ZoomState } from '../useZoom/types';
 import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
@@ -37,8 +38,10 @@ type Args = {
     isRangeSlider?: boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
+    zoomState?: Partial<ZoomState>;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: ShapeData[];
+    shapesReady: boolean;
 };

package/dist/cjs/hooks/useShapes/index.js

@@ -20,6 +20,7 @@ import { prepareSankeyData } from './sankey/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
+import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
@@ -30,9 +31,10 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
     return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
 }
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
+    const shapesReadyRef = React.useRef(false);
     const countedRef = React.useRef(0);
     React.useEffect(() => {
         countedRef.current++;
@@ -44,7 +46,7 @@ export const useShapes = (args) => {
             const shapes = [];
             await Promise.all(
             // eslint-disable-next-line complexity
-            Array.from(groupedSeries).map(async (item) => {
+            Array.from(groupedSeries).map(async (item, index) => {
                 const [seriesType, chartSeries] = item;
                 switch (seriesType) {
                     case SERIES_TYPE.BarX: {
@@ -60,8 +62,8 @@ export const useShapes = (args) => {
                                 split,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -77,8 +79,8 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData.shapes);
+                            shapes[index] = (React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData.shapes);
                         }
                         break;
                     }
@@ -92,8 +94,8 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapes[index] = (React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -109,8 +111,13 @@ export const useShapes = (args) => {
                                 isOutsideBounds,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            const resultClipPathId = getSeriesClipPathId({
+                                clipPathId,
+                                yAxis,
+                                zoomState,
+                            });
+                            shapes[index] = (React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -127,8 +134,8 @@ export const useShapes = (args) => {
                                 isOutsideBounds,
                                 isRangeSlider,
                             });
-                            shapes.push(React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -142,10 +149,10 @@ export const useShapes = (args) => {
                                 yScale,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
+                            shapes[index] = (React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
                                     ? clipPathId
                                     : undefined, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                            shapesData.push(...preparedData);
+                            shapesData.splice(index, 0, ...preparedData);
                         }
                         break;
                     }
@@ -155,8 +162,8 @@ export const useShapes = (args) => {
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
+                        shapes[index] = (React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, ...preparedData);
                         break;
                     }
                     case SERIES_TYPE.Treemap: {
@@ -167,8 +174,8 @@ export const useShapes = (args) => {
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(preparedData);
+                        shapes[index] = (React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, preparedData);
                         break;
                     }
                     case SERIES_TYPE.Sankey: {
@@ -177,8 +184,8 @@ export const useShapes = (args) => {
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(preparedData);
+                        shapes[index] = (React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, preparedData);
                         break;
                     }
                     case SERIES_TYPE.Radar: {
@@ -187,8 +194,8 @@ export const useShapes = (args) => {
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(...preparedData);
+                        shapes[index] = (React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, ...preparedData);
                         break;
                     }
                     case SERIES_TYPE.Heatmap: {
@@ -200,8 +207,8 @@ export const useShapes = (args) => {
                                 yAxis: yAxis[0],
                                 yScale: yScale[0],
                             });
-                            shapes.push(React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                            shapesData.push(preparedData);
+                            shapes[index] = (React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapesData.splice(index, 0, preparedData);
                         }
                         break;
                     }
@@ -211,8 +218,8 @@ export const useShapes = (args) => {
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                        shapesData.push(preparedData);
+                        shapes[index] = (React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.splice(index, 0, preparedData);
                         break;
                     }
                     default: {
@@ -223,6 +230,7 @@ export const useShapes = (args) => {
                 }
             }));
             if (countedRef.current === currentRun) {
+                shapesReadyRef.current = true;
                 setShapesElements(shapes);
                 setShapesElemensData(shapesData);
             }
@@ -243,6 +251,11 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
+        zoomState,
     ]);
-    return { shapes: shapesElemens, shapesData: shapesElemensData };
+    return {
+        shapes: shapesElemens,
+        shapesData: shapesElemensData,
+        shapesReady: shapesReadyRef.current,
+    };
 };

package/dist/cjs/hooks/useShapes/utils.d.ts

@@ -2,6 +2,7 @@ import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales/types';
+import type { ZoomState } from '../useZoom/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;
@@ -46,3 +47,12 @@ export declare function getRectBorderPath(args: {
     borderWidth: number;
     borderRadius?: number | number[];
 }): string;
+export declare function getClipPathIdByBounds(args: {
+    clipPathId: string;
+    bounds?: 'horizontal';
+}): string;
+export declare function getSeriesClipPathId(args: {
+    clipPathId: string;
+    yAxis: PreparedYAxis[];
+    zoomState?: Partial<ZoomState>;
+}): string;