@gravity-ui/charts 1.42.4 → 1.43.1

package/dist/cjs/core/utils/get-hovered-plots.js

@@ -1,5 +1,4 @@
 import { getBandsPosition, isBandScale } from './axis/common';
-const PLOT_LINE_HIT_THRESHOLD_PX = 4;
 function getHoveredAxisPlotBands(args) {
     const { pointerPx, plotBands, scale, axis } = args;
     const axisScale = scale;
@@ -22,16 +21,31 @@ function getHoveredAxisPlotLines(args) {
     }
     for (const line of plotLines) {
         const linePx = Number(scale(line.value));
-        if (Math.abs(pointerPx - linePx) <= PLOT_LINE_HIT_THRESHOLD_PX + line.width / 2) {
+        if (Math.abs(pointerPx - linePx) <= line.hoverThreshold + line.width / 2) {
             result.push(line);
         }
     }
     return result;
 }
+function getHoveredAxisPlotShapes(args) {
+    const { pointerX, pointerY, plotShapes } = args;
+    const result = [];
+    for (const shape of plotShapes) {
+        const left = shape.x + shape.hitbox.x;
+        const top = shape.y + shape.hitbox.y;
+        const inX = pointerX >= left && pointerX <= left + shape.hitbox.width;
+        const inY = pointerY >= top && pointerY <= top + shape.hitbox.height;
+        if (inX && inY) {
+            result.push(shape);
+        }
+    }
+    return result;
+}
 export function getHoveredPlots(args) {
     const { pointerX, pointerY, xAxis, yAxis, xScale, yScale } = args;
-    const plotLines = [];
     const plotBands = [];
+    const plotLines = [];
+    const plotShapes = [];
     if (xAxis && xScale) {
         plotBands.push(...getHoveredAxisPlotBands({
             pointerPx: pointerX,
@@ -44,6 +58,11 @@ export function getHoveredPlots(args) {
             plotLines: xAxis.plotLines,
             scale: xScale,
         }));
+        plotShapes.push(...getHoveredAxisPlotShapes({
+            pointerX,
+            pointerY,
+            plotShapes: xAxis.plotShapes,
+        }));
     }
     for (let i = 0; i < yAxis.length; i++) {
         const yAxisItem = yAxis[i];
@@ -62,6 +81,11 @@ export function getHoveredPlots(args) {
             plotLines: yAxisItem.plotLines,
             scale: yScaleItem,
         }));
+        plotShapes.push(...getHoveredAxisPlotShapes({
+            pointerX,
+            pointerY,
+            plotShapes: yAxisItem.plotShapes,
+        }));
     }
-    return { plotLines, plotBands };
+    return { plotBands, plotLines, plotShapes };
 }

package/dist/cjs/core/utils/labels.d.ts

@@ -3,7 +3,7 @@ export declare function getLeftPosition(label: LabelData): number;
 export declare function getOverlappingByX(rect1: LabelData | HtmlItem, rect2: LabelData | HtmlItem, gap?: number): number;
 export declare function getOverlappingByY(rect1: LabelData | HtmlItem, rect2: LabelData | HtmlItem, gap?: number): number;
 export declare function isLabelsOverlapping<T extends LabelData | HtmlItem>(label1: T, label2: T, padding?: number): boolean;
-export declare function filterOverlappingLabels<T extends LabelData | HtmlItem>(labels: T[]): T[];
+export declare function filterOverlappingLabels<T extends LabelData | HtmlItem>(labels: T[], renderedSvgLabels?: T[]): T[];
 export declare function getSvgLabelConstraintedPosition(args: {
     boundsHeight: number;
     boundsWidth: number;

package/dist/cjs/core/utils/labels.js

@@ -32,11 +32,12 @@ export function getOverlappingByY(rect1, rect2, gap = 0) {
 export function isLabelsOverlapping(label1, label2, padding = 0) {
     return Boolean(getOverlappingByX(label1, label2, padding) && getOverlappingByY(label1, label2, padding));
 }
-export function filterOverlappingLabels(labels) {
+export function filterOverlappingLabels(labels, renderedSvgLabels) {
     const result = [];
     const sorted = sortBy(labels, (d) => d.y, (d) => ('textAnchor' in d ? getLeftPosition(d) : d.x));
     sorted.forEach((label) => {
-        if (!result.some((l) => isLabelsOverlapping(label, l))) {
+        if (!(renderedSvgLabels === null || renderedSvgLabels === void 0 ? void 0 : renderedSvgLabels.some((l) => isLabelsOverlapping(label, l))) &&
+            !result.some((l) => isLabelsOverlapping(label, l))) {
             result.push(label);
         }
     });

package/dist/cjs/core/utils/text.js

@@ -189,10 +189,20 @@ export function getTextSizeFn({ style }) {
     const defaultFontFamily = computedStyle.getPropertyValue('font-family');
     const defaultFontSize = computedStyle.getPropertyValue('font-size');
     const defaultFontWeight = computedStyle.getPropertyValue('font-weight');
+    const resolveCSSVar = (value) => {
+        const match = value.match(/^var\(\s*([\w-]+)/);
+        if (match) {
+            return computedStyle.getPropertyValue(match[1]).trim() || value;
+        }
+        return value;
+    };
     return async (str) => {
-        var _a, _b;
         await document.fonts.ready;
-        context.font = `${(_a = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _a !== void 0 ? _a : defaultFontWeight} ${(_b = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _b !== void 0 ? _b : defaultFontSize} ${defaultFontFamily}`;
+        const fontWeight = (style === null || style === void 0 ? void 0 : style.fontWeight)
+            ? resolveCSSVar(String(style.fontWeight))
+            : defaultFontWeight;
+        const fontSize = (style === null || style === void 0 ? void 0 : style.fontSize) ? resolveCSSVar(style.fontSize) : defaultFontSize;
+        context.font = `${fontWeight} ${fontSize} ${defaultFontFamily}`;
         const textMetric = context.measureText(unescapeHtml(str));
         // we calculate hanging based on an approximate algorithm from chromium
         // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/text_metrics.cc;l=32;drc=7cf6ac3dd6dca800fbc0d28e80a7732d4ea90340?q=member_hanging_&ss=chromium%2Fchromium%2Fsrc

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

@@ -1,4 +1,5 @@
-import type { ChartBrush, ChartData, ChartMargin, ChartZoom, DeepRequired } from '../types';
+import type { TextRowData } from '../components/types';
+import type { ChartBrush, ChartData, ChartMargin, ChartTitle, ChartZoom, DeepRequired } from '../types';
 export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
     brush: ChartBrush;
 }>;
@@ -6,8 +7,10 @@ export type PreparedChart = {
     margin: ChartMargin;
     zoom: PreparedZoom | null;
 };
-export type PreparedTitle = ChartData['title'] & {
+export type PreparedTitle = Omit<ChartTitle, 'margin'> & {
     height: number;
+    margin: number;
+    contentRows: TextRowData[];
 };
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;

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

@@ -13,14 +13,20 @@ export const getVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
 export const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
     const seriesNames = getSeriesNames(seriesData);
     const colorScale = scaleOrdinal(seriesNames, colors);
-    const groupedSeries = group(seriesData, (item) => item.type);
+    const groupedSeries = group(seriesData, (item, index) => {
+        if (item.type === 'line') {
+            return `${item.type}_${index}`;
+        }
+        return item.type;
+    });
     const acc = [];
     if (!preparedLegend) {
         return acc;
     }
     const list = Array.from(groupedSeries);
     for (let i = 0; i < list.length; i++) {
-        const [seriesType, seriesList] = list[i];
+        const [_groupId, seriesList] = list[i];
+        const seriesType = seriesList[0].type;
         acc.push(...(await prepareSeries({
             type: seriesType,
             series: seriesList,

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

@@ -60,7 +60,7 @@ export const AreaSeriesShapes = (args) => {
             .attr('fill', (d) => d.color)
             .attr('opacity', (d) => d.opacity);
         let dataLabels = preparedData.reduce((acc, d) => {
-            return acc.concat(d.labels);
+            return acc.concat(d.svgLabels);
         }, []);
         if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
@@ -191,7 +191,7 @@ export const AreaSeriesShapes = (args) => {
         };
     }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
-        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
             return { htmlElements: items };
         }

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

@@ -1,4 +1,4 @@
-import { group } from 'd3-array';
+import { group, min } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
@@ -76,7 +76,7 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBoun
     return { svgLabels, htmlLabels };
 }
 export const prepareAreaData = async (args) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { series, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
@@ -144,12 +144,17 @@ export const prepareAreaData = async (args) => {
                     continue;
                 }
                 const yAxisTop = ((_a = split.plots[plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-                const yMin = (_b = getYValue({
-                    point: { y: 0 },
+                let base = 0;
+                if (seriesYAxis.type === 'logarithmic') {
+                    const domainData = seriesYScale.domain();
+                    base = (_b = min(domainData)) !== null && _b !== void 0 ? _b : 0;
+                }
+                const yMin = (_c = getYValue({
+                    point: { y: base },
                     points: s.data,
                     yAxis: seriesYAxis,
                     yScale: seriesYScale,
-                })) !== null && _b !== void 0 ? _b : 0;
+                })) !== null && _c !== void 0 ? _c : 0;
                 const seriesData = s.data.reduce((m, d) => {
                     const key = String(xAxis.type === 'category'
                         ? getDataCategoryValue({
@@ -295,7 +300,7 @@ export const prepareAreaData = async (args) => {
                 seriesStackData.push({
                     points,
                     markers,
-                    labels: [],
+                    svgLabels: [],
                     color: s.color,
                     opacity: s.opacity,
                     width: s.lineWidth,
@@ -303,13 +308,13 @@ export const prepareAreaData = async (args) => {
                     hovered: false,
                     active: true,
                     id: s.id,
-                    htmlElements: [],
+                    htmlLabels: [],
                 });
             }
             for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
                 const item = seriesStackData[itemIndex];
                 const currentYAxis = yAxis[item.series.yAxis];
-                const itemYAxisTop = ((_c = split.plots[currentYAxis.plotIndex]) === null || _c === void 0 ? void 0 : _c.top) || 0;
+                const itemYAxisTop = ((_d = split.plots[currentYAxis.plotIndex]) === null || _d === void 0 ? void 0 : _d.top) || 0;
                 if (item.series.dataLabels.enabled && !isRangeSlider) {
                     const labelsData = await prepareDataLabels({
                         series: item.series,
@@ -318,8 +323,8 @@ export const prepareAreaData = async (args) => {
                         yAxisTop: itemYAxisTop,
                         isOutsideBounds,
                     });
-                    item.labels.push(...labelsData.svgLabels);
-                    item.htmlElements.push(...labelsData.htmlLabels);
+                    item.svgLabels.push(...labelsData.svgLabels);
+                    item.htmlLabels.push(...labelsData.htmlLabels);
                 }
             }
             result.push(...seriesStackData);

package/dist/cjs/hooks/useShapes/area/types.d.ts

@@ -27,6 +27,6 @@ export type PreparedAreaData = {
     series: PreparedAreaSeries;
     hovered: boolean;
     active: boolean;
-    labels: LabelData[];
-    htmlElements: HtmlItem[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
 };

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

@@ -49,7 +49,7 @@ export const BarXSeriesShapes = (args) => {
             .attr('fill', (d) => d.data.color || d.series.color)
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
+        let dataLabels = preparedData.map((d) => d.svgLabels).flat();
         if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
@@ -114,7 +114,7 @@ export const BarXSeriesShapes = (args) => {
         };
     }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
-        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
             return { htmlElements: items };
         }

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

@@ -1,4 +1,4 @@
-import { ascending, descending, max, reverse, sort } from 'd3-array';
+import { ascending, descending, max, min, reverse, sort } from 'd3-array';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
@@ -35,7 +35,7 @@ async function getLabelData(d, xMax) {
     };
 }
 export const prepareBarXData = async (args) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     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 : [];
@@ -145,7 +145,15 @@ export const prepareBarXData = async (args) => {
                     const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                     const yDataValue = ((_d = yValue.data.y) !== null && _d !== void 0 ? _d : 0);
                     const y = seriesYScale(yDataValue);
-                    const base = seriesYScale(0);
+                    let base = 0;
+                    if (seriesYAxis.type === 'logarithmic') {
+                        const domainData = seriesYScale.domain();
+                        const yMinValue = (_e = min(domainData)) !== null && _e !== void 0 ? _e : 0;
+                        base = seriesYScale(yMinValue);
+                    }
+                    else {
+                        base = seriesYScale(0);
+                    }
                     const isLastStackItem = yValueIndex === sortedData.length - 1;
                     const height = Math.abs(base - y);
                     let shapeHeight = height - (stackItems.length ? stackGap : 0);
@@ -166,7 +174,8 @@ export const prepareBarXData = async (args) => {
                         opacity: get(yValue.data, 'opacity', null),
                         data: yValue.data,
                         series: yValue.series,
-                        htmlElements: [],
+                        htmlLabels: [],
+                        svgLabels: [],
                         isLastStackItem,
                     };
                     stackItems.push(barData);
@@ -198,22 +207,24 @@ export const prepareBarXData = async (args) => {
             barData.x >= xMax ||
             barData.y + barData.height <= 0 ||
             barData.y >= plotHeight;
-        const isZeroValue = ((_e = barData.data.y) !== null && _e !== void 0 ? _e : 0) === 0;
+        const isZeroValue = ((_f = barData.data.y) !== null && _f !== void 0 ? _f : 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,
-                    y: label.y,
-                    content: label.text,
-                    size: label.size,
-                    style: label.style,
-                });
-            }
-            else {
-                barData.label = label;
+            if (label) {
+                if (barData.series.dataLabels.html) {
+                    barData.htmlLabels.push({
+                        x: label.x,
+                        y: label.y,
+                        content: label.text,
+                        size: label.size,
+                        style: label.style,
+                    });
+                }
+                else {
+                    barData.svgLabels.push(label);
+                }
             }
         }
     }

package/dist/cjs/hooks/useShapes/bar-x/types.d.ts

@@ -7,8 +7,8 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     height: number;
     opacity: number | null;
     series: PreparedBarXSeries;
-    label?: LabelData;
-    htmlElements: HtmlItem[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
     isLastStackItem: boolean;
     /**
      * the utility field for storing the original height (for recalculations, etc.)

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

@@ -33,11 +33,20 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
 export async function getShapes(args) {
     const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
     const visibleSeries = getOnlyVisibleSeries(series);
-    const groupedSeries = group(visibleSeries, (item) => item.type);
+    const groupedSeries = group(visibleSeries, (item) => {
+        if (item.type === 'line') {
+            return item.id;
+        }
+        return item.type;
+    });
     const shapesData = [];
     const shapes = [];
-    await Promise.all(Array.from(groupedSeries).map(async (item, index) => {
-        const [seriesType, chartSeries] = item;
+    const layers = [];
+    const groupedSeriesItems = Array.from(groupedSeries);
+    for (let index = groupedSeriesItems.length - 1; index >= 0; index--) {
+        const item = groupedSeriesItems[index];
+        const [groupId, chartSeries] = item;
+        const seriesType = chartSeries[0].type;
         switch (seriesType) {
             case SERIES_TYPE.BarX: {
                 if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
@@ -54,6 +63,7 @@ export async function getShapes(args) {
                     });
                     shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
+                    layers.push(...preparedData);
                 }
                 break;
             }
@@ -100,14 +110,16 @@ export async function getShapes(args) {
                         split,
                         isOutsideBounds,
                         isRangeSlider,
+                        otherLayers: layers,
                     });
                     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 }));
+                    shapes[index] = (React.createElement(LineSeriesShapes, { key: groupId, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
+                    layers.push(...preparedData);
                 }
                 break;
             }
@@ -125,6 +137,7 @@ export async function getShapes(args) {
                     });
                     shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
+                    layers.push(...preparedData);
                 }
                 break;
             }
@@ -217,7 +230,7 @@ export async function getShapes(args) {
                 });
             }
         }
-    }));
+    }
     return { shapes, shapesData };
 }
 export const useShapes = (args) => {

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

@@ -3,7 +3,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
-import { filterOverlappingLabels, getLineDashArray } from '../../../core/utils';
+import { getLineDashArray } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
@@ -15,9 +15,6 @@ export const LineSeriesShapes = (args) => {
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
     const hoverMarkersRef = 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(() => {
         if (!plotRef.current || !markersRef.current) {
             return () => { };
@@ -46,12 +43,9 @@ export const LineSeriesShapes = (args) => {
             .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.reduce((acc, d) => {
-            return acc.concat(d.labels);
+        const dataLabels = preparedData.reduce((acc, d) => {
+            return acc.concat(d.svgLabels);
         }, []);
-        if (!allowOverlapDataLabels) {
-            dataLabels = filterOverlappingLabels(dataLabels);
-        }
         const labelsSelection = plotSvgElement
             .selectAll('text')
             .data(dataLabels)
@@ -175,14 +169,11 @@ export const LineSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', null);
         };
-    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    }, [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]);
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
+        return { htmlElements: items };
+    }, [preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),

package/dist/cjs/hooks/useShapes/line/prepare-data.d.ts

@@ -1,5 +1,6 @@
 import type { PreparedSplit } from '../../../core/layout/split-types';
 import type { ChartScale } from '../../../core/scales/types';
+import type { ShapeDataWithLabels } from '../../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 import type { PreparedLineData } from './types';
@@ -12,4 +13,5 @@ export declare const prepareLineData: (args: {
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
     isRangeSlider?: boolean;
+    otherLayers: ShapeDataWithLabels[];
 }) => Promise<PreparedLineData[]>;

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

@@ -1,4 +1,4 @@
-import { getLabelsSize, getTextSizeFn } from '../../../core/utils';
+import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 import { getXValue, getYValue } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
@@ -16,7 +16,7 @@ async function getHtmlLabel(point, series, xMax) {
 }
 export const prepareLineData = async (args) => {
     var _a, _b, _c, _d;
-    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
+    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const acc = [];
@@ -44,8 +44,8 @@ export const prepareLineData = async (args) => {
                 series: s,
             };
         });
-        const htmlElements = [];
-        const labels = [];
+        let htmlElements = [];
+        let svgLabels = [];
         if (s.dataLabels.enabled && !isRangeSlider) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
@@ -83,11 +83,15 @@ export const prepareLineData = async (args) => {
                             series: s,
                             active: true,
                         };
-                        labels.push(labelData);
+                        svgLabels.push(labelData);
                     }
                 }
             }
         }
+        if (!s.dataLabels.allowOverlap) {
+            svgLabels = filterOverlappingLabels(svgLabels, otherLayers.map((l) => l.svgLabels).flat());
+            htmlElements = filterOverlappingLabels(htmlElements, otherLayers.map((l) => l.htmlLabels).flat());
+        }
         let markers = [];
         const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
         if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
@@ -111,12 +115,12 @@ export const prepareLineData = async (args) => {
         const result = {
             points,
             markers,
-            labels,
+            svgLabels: svgLabels,
             series: s,
             hovered: false,
             active: true,
             id: s.id,
-            htmlElements,
+            htmlLabels: htmlElements,
             color: s.color,
             lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
             dashStyle: s.dashStyle,

package/dist/cjs/hooks/useShapes/line/types.d.ts

@@ -25,8 +25,8 @@ export type PreparedLineData = {
     series: PreparedLineSeries;
     hovered: boolean;
     active: boolean;
-    labels: LabelData[];
-    htmlElements: HtmlItem[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;

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

@@ -1,5 +1,5 @@
 import type { Dispatch } from 'd3-dispatch';
-import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
+import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 type Args = {
@@ -10,8 +10,9 @@ type Args = {
 };
 export declare const useTooltip: ({ dispatcher, tooltip, xAxis, yAxis }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
-    hoveredPlotLines: AxisPlotLine[] | undefined;
     hoveredPlotBands: AxisPlotBand[] | undefined;
+    hoveredPlotLines: AxisPlotLine[] | undefined;
+    hoveredPlotShapes: AxisPlotShape[] | undefined;
     pointerPosition: PointPosition | undefined;
 };
 export {};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import isEqual from 'lodash/isEqual';
 import { getSortedHovered } from '../../components/Tooltip/DefaultTooltipContent/utils';
 export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
-    const [{ hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition }, setTooltipState] = React.useState({});
+    const [{ hovered, hoveredPlotBands, hoveredPlotLines, hoveredPlotShapes, pointerPosition }, setTooltipState,] = React.useState({});
     const prevHovered = React.useRef(hovered);
     React.useEffect(() => {
         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
@@ -17,8 +17,9 @@ export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
                 const isHoveredChanged = !isEqual(prevHovered.current, sortedHovered);
                 const newTooltipState = {
                     hovered: isHoveredChanged ? sortedHovered : prevHovered.current,
-                    hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
                     hoveredPlotBands: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.bands,
+                    hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
+                    hoveredPlotShapes: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.shapes,
                     pointerPosition: nextPointerPosition,
                 };
                 if (isHoveredChanged) {
@@ -35,8 +36,9 @@ export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
     }, [dispatcher, tooltip, xAxis, yAxis]);
     return {
         hovered,
-        hoveredPlotLines,
         hoveredPlotBands,
+        hoveredPlotLines,
+        hoveredPlotShapes,
         pointerPosition,
     };
 };

package/dist/cjs/types/chart-ui.d.ts

@@ -25,6 +25,10 @@ export interface HtmlItem {
     };
     style?: BaseTextStyle & React.CSSProperties;
 }
+export interface ShapeDataWithLabels {
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+}
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];
 }