@gravity-ui/charts 1.34.7 → 1.34.9

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

@@ -11,8 +11,10 @@ export const AreaSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!plotRef.current || !markersRef.current) {
             return () => { };
         }
@@ -55,7 +57,7 @@ export const AreaSeriesShapes = (args) => {
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelsSelection = plotSvgElement
@@ -147,9 +149,16 @@ export const AreaSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

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

@@ -27,14 +27,14 @@ function getXValues(series, xAxis, xScale) {
     }
     return Array.from(xValues);
 }
-async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
+async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
     var _a;
     const svgLabels = [];
     const htmlLabels = [];
     const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
     for (let pointsIndex = 0; pointsIndex < points.length; pointsIndex++) {
         const point = points[pointsIndex];
-        if (point.y === null) {
+        if (point.y === null || isOutsideBounds(point.x, point.y)) {
             continue;
         }
         const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
@@ -281,6 +281,7 @@ export const prepareAreaData = async (args) => {
                         points: item.points,
                         xMax,
                         yAxisTop: itemYAxisTop,
+                        isOutsideBounds,
                     });
                     item.labels.push(...labelsData.svgLabels);
                     item.htmlElements.push(...labelsData.htmlLabels);

package/dist/cjs/hooks/useShapes/bar-x/index.js

@@ -11,8 +11,10 @@ export const BarXSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!ref.current) {
             return () => { };
         }
@@ -46,7 +48,7 @@ export const BarXSeriesShapes = (args) => {
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelSelection = svgElement
@@ -108,8 +110,15 @@ export const BarXSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-x', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -5,7 +5,7 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { getSeriesStackId } from '../../useSeries/utils';
 import { getBarXLayout } from '../../utils/bar-x';
 const isSeriesDataValid = (d) => d.y !== null;
-async function getLabelData(d) {
+async function getLabelData(d, xMax) {
     var _a;
     if (!d.series.dataLabels.enabled) {
         return undefined;
@@ -22,10 +22,10 @@ async function getLabelData(d) {
     if (d.series.dataLabels.inside) {
         y = d.y + d.height / 2;
     }
-    const x = d.x + d.width / 2;
+    const centerX = Math.min(xMax - width / 2, Math.max(width / 2, d.x + d.width / 2));
     return {
         text,
-        x: html ? x - width / 2 : x,
+        x: html ? centerX - width / 2 : centerX,
         y: html ? y - height : y,
         style,
         size: { width, height },
@@ -35,7 +35,7 @@ async function getLabelData(d) {
 }
 // eslint-disable-next-line complexity
 export const prepareBarXData = async (args) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories) !== null && _a !== void 0 ? _a : [];
@@ -176,10 +176,19 @@ export const prepareBarXData = async (args) => {
             }
         }
     }
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax;
     for (let i = 0; i < result.length; i++) {
         const barData = result[i];
-        if (barData.series.dataLabels.enabled && !isRangeSlider) {
-            const label = await getLabelData(barData);
+        const isBarOutsideBounds = barData.x + barData.width <= 0 ||
+            barData.x >= xMax ||
+            barData.y + barData.height <= 0 ||
+            barData.y >= plotHeight;
+        const isZeroValue = ((_e = barData.data.y) !== null && _e !== void 0 ? _e : 0) === 0;
+        if (barData.series.dataLabels.enabled &&
+            !isRangeSlider &&
+            (!isBarOutsideBounds || isZeroValue)) {
+            const label = await getLabelData(barData, xMax);
             if (barData.series.dataLabels.html && label) {
                 barData.htmlElements.push({
                     x: label.x,

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

@@ -11,8 +11,10 @@ export const LineSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!plotRef.current || !markersRef.current) {
             return () => { };
         }
@@ -42,7 +44,7 @@ export const LineSeriesShapes = (args) => {
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelsSelection = plotSvgElement
@@ -133,9 +135,16 @@ export const LineSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

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

@@ -49,7 +49,7 @@ export const prepareLineData = async (args) => {
         if (s.dataLabels.enabled && !isRangeSlider) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
-                    if (p.y === null) {
+                    if (p.y === null || p.x === null || isOutsideBounds(p.x, p.y)) {
                         return result;
                     }
                     result.push(getHtmlLabel(p, s, xMax));
@@ -61,7 +61,9 @@ export const prepareLineData = async (args) => {
                 const getTextSize = getTextSizeFn({ style: s.dataLabels.style });
                 for (let index = 0; index < points.length; index++) {
                     const point = points[index];
-                    if (point.y !== null && point.x !== null) {
+                    if (point.y !== null &&
+                        point.x !== null &&
+                        !isOutsideBounds(point.x, point.y)) {
                         const labelValue = (_b = point.data.label) !== null && _b !== void 0 ? _b : point.data.y;
                         const text = getFormattedValue(Object.assign({ value: labelValue }, s.dataLabels));
                         const labelSize = await getTextSize(text);

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

@@ -12,8 +12,10 @@ export const WaterfallSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!ref.current) {
             return () => { };
         }
@@ -34,7 +36,7 @@ export const WaterfallSeriesShapes = (args) => {
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelSelection = svgElement
@@ -125,8 +127,15 @@ export const WaterfallSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', null);
         };
-    }, [connectorSelector, dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, connectorSelector, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/utils/chart/get-closest-data.js

@@ -47,19 +47,53 @@ export function getClosestPoints(args) {
     const [pointerX, pointerY] = position;
     const result = [];
     const groups = groupBy(shapesData, getSeriesType);
+    const closestPointsByXValue = [];
     // eslint-disable-next-line complexity
     Object.entries(groups).forEach(([seriesType, list]) => {
         var _a, _b, _c, _d, _e;
         switch (seriesType) {
+            case 'line': {
+                const linePoints = list.reduce((acc, d) => {
+                    acc.push(...d.points.reduce((accPoints, p) => {
+                        if (p.y !== null && p.x !== null) {
+                            accPoints.push({
+                                data: p.data,
+                                series: p.series,
+                                x: p.x,
+                                y0: p.y,
+                                y1: p.y,
+                            });
+                        }
+                        return accPoints;
+                    }, []));
+                    return acc;
+                }, []);
+                closestPointsByXValue.push(...linePoints);
+                break;
+            }
+            case 'area': {
+                const areaPoints = list.reduce((acc, d) => {
+                    Array.prototype.push.apply(acc, d.points.map((p) => ({
+                        data: p.data,
+                        series: p.series,
+                        x: p.x,
+                        y0: p.y0,
+                        y1: p.y,
+                    })));
+                    return acc;
+                }, []);
+                closestPointsByXValue.push(...areaPoints);
+                break;
+            }
             case 'bar-x': {
-                const points = list.map((d) => ({
+                const barXPoints = list.map((d) => ({
                     data: d.data,
                     series: d.series,
                     x: d.x + d.width / 2,
                     y0: d.y,
                     y1: d.y + d.height,
                 }));
-                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
+                closestPointsByXValue.push(...barXPoints);
                 break;
             }
             case 'waterfall': {
@@ -74,39 +108,6 @@ export function getClosestPoints(args) {
                 result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;
             }
-            case 'area': {
-                const points = list.reduce((acc, d) => {
-                    Array.prototype.push.apply(acc, d.points.map((p) => ({
-                        data: p.data,
-                        series: p.series,
-                        x: p.x,
-                        y0: p.y0,
-                        y1: p.y,
-                    })));
-                    return acc;
-                }, []);
-                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
-                break;
-            }
-            case 'line': {
-                const points = list.reduce((acc, d) => {
-                    acc.push(...d.points.reduce((accPoints, p) => {
-                        if (p.y !== null && p.x !== null) {
-                            accPoints.push({
-                                data: p.data,
-                                series: p.series,
-                                x: p.x,
-                                y0: p.y,
-                                y1: p.y,
-                            });
-                        }
-                        return accPoints;
-                    }, []));
-                    return acc;
-                }, []);
-                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
-                break;
-            }
             case 'bar-y': {
                 const points = list;
                 const sorted = sort(points, (p) => p.y);
@@ -267,6 +268,9 @@ export function getClosestPoints(args) {
             }
         }
     });
+    if (closestPointsByXValue.length) {
+        result.push(...getClosestPointsByXValue(pointerX, pointerY, closestPointsByXValue));
+    }
     return result;
 }
 function isInsidePath(args) {

package/dist/cjs/utils/chart/zoom.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedSeries, PreparedXAxis, PreparedYAxis } from '../../hooks';
+import type { PreparedSeries, PreparedXAxis, PreparedYAxis, RangeSliderState } from '../../hooks';
 import type { ZoomState } from '../../hooks/useZoom/types';
 import type { ChartXAxis, ChartYAxis } from '../../types';
 export declare function getZoomedSeriesData(args: {
@@ -10,3 +10,4 @@ export declare function getZoomedSeriesData(args: {
     preparedSeries: PreparedSeries[];
     preparedShapesSeries: PreparedSeries[];
 };
+export declare function getEffectiveXRange(zoomStateX: [number, number] | undefined, rangeSliderState: RangeSliderState | undefined): [number, number] | undefined;

package/dist/cjs/utils/chart/zoom.js

@@ -123,3 +123,12 @@ export function getZoomedSeriesData(args) {
         preparedShapesSeries: zoomedShapesSeriesData,
     };
 }
+export function getEffectiveXRange(zoomStateX, rangeSliderState) {
+    if (zoomStateX && rangeSliderState) {
+        return [
+            Math.max(zoomStateX[0], rangeSliderState.min),
+            Math.min(zoomStateX[1], rangeSliderState.max),
+        ];
+    }
+    return (zoomStateX !== null && zoomStateX !== void 0 ? zoomStateX : (rangeSliderState ? [rangeSliderState.min, rangeSliderState.max] : undefined));
+}

package/dist/esm/components/AxisX/AxisX.js

@@ -32,7 +32,6 @@ export const AxisX = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('text-anchor', 'start')
-                .style('dominant-baseline', 'text-after-edge')
                 .style('transform', `translate(${preparedAxisData.title.x}px, ${preparedAxisData.title.y}px) rotate(${preparedAxisData.title.rotate}deg) translate(0px, ${preparedAxisData.title.offset}px)`)
                 .attr('font-size', preparedAxisData.title.style.fontSize)
                 .selectAll('tspan')

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

@@ -1,6 +1,7 @@
 import { getUniqId } from '@gravity-ui/uikit';
-import { calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../utils';
 import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
+import { getMultilineTitleContentRows } from '../utils/axis-title';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
     var _a;
     const rotation = axis.labels.rotation;
@@ -189,23 +190,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             const titleContent = [];
             const titleMaxWidth = axisWidth;
             if (axis.title.maxRowCount > 1) {
-                const titleTextRows = await wrapText({
-                    text: axis.title.text,
-                    style: axis.title.style,
-                    width: titleMaxWidth,
-                    getTextSize: getTitleTextSize,
-                });
-                for (let i = 0; i < axis.title.maxRowCount && i < titleTextRows.length; i++) {
-                    const textRow = titleTextRows[i];
-                    const textRowContent = textRow.text.trim();
-                    const textRowSize = await getTitleTextSize(textRowContent);
-                    titleContent.push({
-                        text: textRowContent,
-                        x: 0,
-                        y: textRow.y,
-                        size: textRowSize,
-                    });
-                }
+                titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
             }
             else {
                 const text = await getTextWithElipsis({
@@ -245,11 +230,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 style: axis.title.style,
                 size: titleTextSize,
                 x,
-                y: height +
-                    axis.labels.margin +
-                    axis.labels.height +
-                    axis.title.margin +
-                    titleTextSize.height,
+                y: height + axis.labels.margin + axis.labels.height + axis.title.margin,
                 rotate: 0,
                 offset: 0,
             };

package/dist/esm/components/AxisX/types.d.ts

@@ -1,14 +1,6 @@
 import type { DashStyle } from 'src/constants';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
-export type TextRowData = {
-    text: string;
-    x: number;
-    y: number;
-    size: {
-        width: number;
-        height: number;
-    };
-};
+import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
     x: number;
     y: number;

package/dist/esm/components/AxisY/prepare-axis-title.js

@@ -1,4 +1,5 @@
-import { calculateCos, calculateSin, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { calculateCos, calculateSin, getLabelsSize, getTextSizeFn, getTextWithElipsis, } from '../../utils';
+import { getMultilineTitleContentRows } from '../utils/axis-title';
 export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidth, axisLabelsWidth, }) {
     if (!axis.title.text || axis.title.html) {
         return null;
@@ -10,39 +11,7 @@ export async function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidt
     const titleContent = [];
     const titleMaxWidth = rotateAngle === 0 ? axis.title.maxWidth : sin * axisHeight;
     if (axis.title.maxRowCount > 1) {
-        let titleTextRows = await wrapText({
-            text: axis.title.text,
-            style: axis.title.style,
-            width: titleMaxWidth,
-            getTextSize: getTitleTextSize,
-        });
-        titleTextRows = titleTextRows.reduce((acc, row, index) => {
-            if (index < axis.title.maxRowCount) {
-                acc.push(row);
-            }
-            else {
-                acc[axis.title.maxRowCount - 1].text += row.text;
-            }
-            return acc;
-        }, []);
-        for (let i = 0; i < titleTextRows.length; i++) {
-            const textRow = titleTextRows[i];
-            let textRowContent = textRow.text.trim();
-            if (i === titleTextRows.length - 1) {
-                textRowContent = await getTextWithElipsis({
-                    text: textRowContent,
-                    maxWidth: titleMaxWidth,
-                    getTextWidth: async (s) => (await getTitleTextSize(s)).width,
-                });
-            }
-            const textRowSize = await getTitleTextSize(textRowContent);
-            titleContent.push({
-                text: textRowContent,
-                x: 0,
-                y: textRow.y,
-                size: textRowSize,
-            });
-        }
+        titleContent.push(...(await getMultilineTitleContentRows({ axis, titleMaxWidth })));
     }
     else {
         const text = await getTextWithElipsis({

package/dist/esm/components/AxisY/types.d.ts

@@ -1,14 +1,6 @@
 import type { DashStyle } from 'src/constants';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
-export type TextRowData = {
-    text: string;
-    x: number;
-    y: number;
-    size: {
-        width: number;
-        height: number;
-    };
-};
+import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
     x: number;
     y: number;

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

@@ -26,7 +26,7 @@ import './styles.css';
 const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
 export const ChartInner = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const { width, height, data, onReady } = props;
     const svgRef = React.useRef(null);
     const resetZoomButtonRef = React.useRef(null);
@@ -60,13 +60,13 @@ export const ChartInner = (props) => {
     }, [data.xAxis]);
     const { initialized, setInitialized, tooltipPinned, togglePinTooltip, unpinTooltip, rangeSliderState, updateRangeSliderState, updateZoomState, zoomState, } = useChartInnerState({
         dispatcher,
-        preparedChart,
         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,
         dispatcher,
-        htmlLayout, plotNode: plotRef.current, preparedChart, rangeSliderDomain: (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.getDomain(), rangeSliderState, svgContainer: svgRef.current, updateZoomState,
+        htmlLayout, plotNode: plotRef.current, preparedChart,
+        rangeSliderState, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,
@@ -96,8 +96,8 @@ export const ChartInner = (props) => {
         tooltipThrottle: preparedTooltip.throttle,
         isOutsideBounds,
     });
-    const clickHandler = (_c = (_b = data.chart) === null || _b === void 0 ? void 0 : _b.events) === null || _c === void 0 ? void 0 : _c.click;
-    const pointerMoveHandler = (_e = (_d = data.chart) === null || _d === void 0 ? void 0 : _d.events) === null || _e === void 0 ? void 0 : _e.pointermove;
+    const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
+    const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
     const prevRangeSliderDefaultRange = usePrevious(preparedRangeSlider.defaultRange);
     useCrosshair({
         split: preparedSplit,
@@ -246,7 +246,7 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_f = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _f === void 0 ? void 0 : _f.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 })),
+        ((_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 })),
         (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/esm/components/ChartInner/useChartInnerProps.d.ts

@@ -11,7 +11,6 @@ type Props = ChartInnerProps & {
     svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
-    rangeSliderDomain?: [number, number];
     rangeSliderState?: RangeSliderState;
 };
 export declare function useChartInnerProps(props: Props): {

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

@@ -4,7 +4,7 @@ import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData,
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
-import { getZoomedSeriesData } from '../../utils';
+import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -35,7 +35,7 @@ function getBoundsOffsetLeft(args) {
 }
 export function useChartInnerProps(props) {
     var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderDomain, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const colors = React.useMemo(() => {
@@ -57,14 +57,25 @@ export function useChartInnerProps(props) {
         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,
+            zoomState: effectiveZoomState,
         });
-    }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, zoomState]);
+    }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, effectiveZoomState]);
     const { legendConfig, legendItems } = React.useMemo(() => {
         if (!preparedLegend) {
             return { legendConfig: undefined, legendItems: [] };
@@ -126,7 +137,7 @@ export function useChartInnerProps(props) {
         htmlLayout,
         clipPathId,
         isOutsideBounds,
-        zoomState,
+        zoomState: effectiveZoomState,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const { preparedSeries: nextZoomedSeriesData } = getZoomedSeriesData({
@@ -147,7 +158,6 @@ export function useChartInnerProps(props) {
         plotContainerWidth: boundsWidth,
         preparedSplit,
         preparedZoom: preparedChart.zoom,
-        rangeSliderDomain,
         xAxis,
         xScale,
         yAxis,