@gravity-ui/charts 1.34.7 → 1.34.8

package/dist/cjs/hooks/useAxisScales/y-scale.js

@@ -141,14 +141,9 @@ export function createYScale(args) {
             }
             if (hasNumberAndNullValues) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
-                const isPointDomain = hasOnlyMarkerSeries(series)
-                    ? checkIsPointDomain([yMinDomain, yMaxDomain])
-                    : false;
-                const yMin = typeof yMinPropsOrState === 'number' && !isPointDomain
-                    ? yMinPropsOrState
-                    : yMinDomain;
+                const yMin = typeof yMinPropsOrState === 'number' ? yMinPropsOrState : yMinDomain;
                 let yMax;
-                if (typeof yMaxPropsOrState === 'number' && !isPointDomain) {
+                if (typeof yMaxPropsOrState === 'number') {
                     yMax = yMaxPropsOrState;
                 }
                 else {

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/esm/hooks/useAxisScales/y-scale.js

@@ -141,14 +141,9 @@ export function createYScale(args) {
             }
             if (hasNumberAndNullValues) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
-                const isPointDomain = hasOnlyMarkerSeries(series)
-                    ? checkIsPointDomain([yMinDomain, yMaxDomain])
-                    : false;
-                const yMin = typeof yMinPropsOrState === 'number' && !isPointDomain
-                    ? yMinPropsOrState
-                    : yMinDomain;
+                const yMin = typeof yMinPropsOrState === 'number' ? yMinPropsOrState : yMinDomain;
                 let yMax;
-                if (typeof yMaxPropsOrState === 'number' && !isPointDomain) {
+                if (typeof yMaxPropsOrState === 'number') {
                     yMax = yMaxPropsOrState;
                 }
                 else {

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.34.7",
+  "version": "1.34.8",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",