@gravity-ui/charts 1.43.0 → 1.44.0

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

@@ -22,6 +22,7 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
+import { XRangeSeriesShapes, prepareXRangeData } from './x-range';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
     return false;
@@ -33,11 +34,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 +64,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 +111,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 +138,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;
             }
@@ -211,13 +225,29 @@ export async function getShapes(args) {
                 shapesData.splice(index, 0, preparedData);
                 break;
             }
+            case SERIES_TYPE.XRange: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareXRangeData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        boundsWidth,
+                        isRangeSlider,
+                    });
+                    shapes[index] = (React.createElement(XRangeSeriesShapes, { key: SERIES_TYPE.XRange, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
             default: {
                 throw new ChartError({
                     message: `The display method is not defined for a series with type "${seriesType}"`,
                 });
             }
         }
-    }));
+    }
     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/useShapes/x-range/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+export { prepareXRangeData } from './prepare-data';
+export type { PreparedXRangeData } from './types';
+import type { PreparedXRangeData } from './types';
+type Args = {
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
+    preparedData: PreparedXRangeData[];
+    seriesOptions: PreparedSeriesOptions;
+    dispatcher?: Dispatch<object>;
+};
+export declare function XRangeSeriesShapes(args: Args): React.JSX.Element;

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import get from 'lodash/get';
+import { getLineDashArray } from '../../../core/utils';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+import { getRectPath } from '../utils';
+export { prepareXRangeData } from './prepare-data';
+const b = block('x-range');
+export function XRangeSeriesShapes(args) {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const hoveredDataRef = React.useRef(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const segmentSelection = svgElement
+            .selectAll(`path.${b('segment')}`)
+            .data(preparedData)
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+            return getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius,
+            }).toString();
+        })
+            .attr('class', b('segment'))
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+            .attr('cursor', (d) => d.series.cursor);
+        svgElement
+            .selectAll(`path.${b('segment-border')}`)
+            .data(preparedData.filter((d) => d.series.borderWidth > 0))
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = Math.min(d.height / 2, d.width / 2, d.series.borderRadius);
+            return getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius,
+            }).toString();
+        })
+            .attr('class', b('segment-border'))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.series.borderColor)
+            .attr('stroke-width', (d) => d.series.borderWidth)
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.series.borderDashStyle, d.series.borderWidth))
+            .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
+            .attr('pointer-events', 'none');
+        const svgLabels = preparedData.flatMap((d) => d.svgLabels);
+        svgElement
+            .selectAll(`text.${b('label')}`)
+            .data(svgLabels)
+            .join('text')
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .attr('dominant-baseline', 'central')
+            .attr('pointer-events', 'none')
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null)
+            .html((d) => d.text);
+        const hoverOptions = get(seriesOptions, 'x-range.states.hover');
+        const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
+            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
+                const hoveredSet = new Set(data === null || data === void 0 ? void 0 : data.map((d) => d.data));
+                segmentSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.color;
+                    if (hoveredSet.has(d.data)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+            if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
+                const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
+                segmentSelection.attr('opacity', (d) => {
+                    var _a, _b;
+                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
+                        return inactiveOptions.opacity || null;
+                    }
+                    return (_b = (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity) !== null && _b !== void 0 ? _b : null;
+                });
+            }
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover((_a = hoveredDataRef.current) !== null && _a !== void 0 ? _a : undefined);
+        }
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', handleShapeHover);
+        return () => {
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.x-range', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.flatMap((d) => d.htmlLabels) }), [preparedData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
+}

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

@@ -0,0 +1,15 @@
+import type { ChartScale } from '../../../core/scales/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
+import type { PreparedXRangeSeries } from '../../useSeries/types';
+import type { PreparedXRangeData } from './types';
+type PrepareXRangeDataArgs = {
+    series: PreparedXRangeSeries[];
+    xAxis: PreparedXAxis;
+    xScale: ChartScale;
+    yAxis: PreparedYAxis[];
+    yScale: (ChartScale | undefined)[];
+    boundsWidth?: number;
+    isRangeSlider?: boolean;
+};
+export declare function prepareXRangeData(args: PrepareXRangeDataArgs): Promise<PreparedXRangeData[]>;
+export {};

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

@@ -0,0 +1,147 @@
+import get from 'lodash/get';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn, getTextWithElipsis } from '../../../core/utils';
+import { getFormattedValue } from '../../../core/utils/format';
+import { MIN_BAR_WIDTH } from '../../constants';
+import { getBandSize } from '../../utils/get-band-size';
+const DEFAULT_BAR_PADDING = 0.2;
+export async function prepareXRangeData(args) {
+    var _a;
+    const { series, xAxis, xScale, yAxis, yScale: [yScale], boundsWidth, isRangeSlider, } = args;
+    if (!yScale) {
+        return [];
+    }
+    // Collect unique y-domain values
+    const domain = [];
+    const seen = new Set();
+    const categories = get(yAxis[0], 'categories', []);
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            const key = yAxis[0].type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'y', categories, data: d })
+                : d.y;
+            if (key !== undefined && !seen.has(key)) {
+                seen.add(key);
+                domain.push(key);
+            }
+        });
+    });
+    const bandSize = getBandSize({ domain, scale: yScale });
+    const barSize = Math.max(MIN_BAR_WIDTH, bandSize * (1 - DEFAULT_BAR_PADDING));
+    const result = [];
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            let center;
+            if (yAxis[0].type === 'category') {
+                const bandScale = yScale;
+                const yCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: d });
+                if (!bandScale.domain().includes(yCategory)) {
+                    return;
+                }
+                center = (bandScale(yCategory) || 0) + bandSize / 2;
+            }
+            else {
+                const linearScale = yScale;
+                if (d.y === undefined) {
+                    return;
+                }
+                center = linearScale(Number(d.y));
+            }
+            let xStart;
+            let xEnd;
+            if (xAxis.type === 'category') {
+                // x-range on a category x-axis is unusual but supported
+                const xBandScale = xScale;
+                const xCategories = get(xAxis, 'categories', []);
+                const startCategory = getDataCategoryValue({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    data: { x: d.x0 },
+                });
+                const endCategory = getDataCategoryValue({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    data: { x: d.x1 },
+                });
+                xStart = xBandScale(startCategory) || 0;
+                xEnd = (xBandScale(endCategory) || 0) + xBandScale.bandwidth();
+            }
+            else {
+                const linearScale = xScale;
+                xStart = linearScale(Number(d.x0));
+                xEnd = linearScale(Number(d.x1));
+            }
+            const width = xEnd - xStart;
+            if (width <= 0) {
+                return;
+            }
+            result.push({
+                x: xStart,
+                y: center - barSize / 2,
+                width,
+                height: barSize,
+                color: d.color || s.color,
+                data: d,
+                series: s,
+                htmlLabels: [],
+                svgLabels: [],
+            });
+        });
+    });
+    const textSizeFnCache = new Map();
+    for (let i = 0; i < result.length; i++) {
+        const item = result[i];
+        const { dataLabels } = item.series;
+        if (!dataLabels.enabled || item.data.label === null || isRangeSlider) {
+            continue;
+        }
+        const content = getFormattedValue(Object.assign({ value: item.data.label }, dataLabels));
+        const visibleStart = Math.max(0, item.x);
+        const visibleEnd = boundsWidth === undefined
+            ? item.x + item.width
+            : Math.min(boundsWidth, item.x + item.width);
+        const visibleWidth = visibleEnd - visibleStart;
+        const visibleCenterX = visibleStart + visibleWidth / 2;
+        if (dataLabels.html) {
+            const { maxHeight: height, maxWidth: width } = await getLabelsSize({
+                labels: [content],
+                style: dataLabels.style,
+                html: true,
+            });
+            const htmlItem = {
+                content,
+                size: { width, height },
+                style: dataLabels.style,
+                x: visibleCenterX - width / 2,
+                y: item.y + item.height / 2 - height / 2,
+            };
+            item.htmlLabels.push(htmlItem);
+        }
+        else {
+            if (!textSizeFnCache.has(dataLabels.style)) {
+                textSizeFnCache.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
+            }
+            const getTextSize = (_a = textSizeFnCache.get(dataLabels.style)) !== null && _a !== void 0 ? _a : getTextSizeFn({ style: dataLabels.style });
+            const availableWidth = Math.max(0, visibleWidth - 2 * dataLabels.padding);
+            const text = await getTextWithElipsis({
+                text: content,
+                getTextWidth: (s) => getTextSize(s).then((r) => r.width),
+                maxWidth: availableWidth,
+            });
+            if (!text) {
+                continue;
+            }
+            const { width, height, hangingOffset } = await getTextSize(text);
+            const svgItem = {
+                text,
+                size: { width, height, hangingOffset },
+                style: dataLabels.style,
+                textAnchor: 'middle',
+                x: visibleCenterX,
+                y: item.y + item.height / 2,
+                series: item.series,
+            };
+            item.svgLabels.push(svgItem);
+        }
+    }
+    return result;
+}

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

@@ -0,0 +1,12 @@
+import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
+import type { PreparedXRangeSeries } from '../../useSeries/types';
+export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    series: PreparedXRangeSeries;
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+};

package/dist/cjs/hooks/useShapes/x-range/types.js

@@ -0,0 +1 @@
+export {};

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[];
 }

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

@@ -71,7 +71,7 @@ export const ChartInner = (props) => {
         value: allPreparedSeries,
         delay: DEBOUNCED_VALUE_DELAY,
     });
-    const { handleChartClick, handleMouseLeave, throttledHandleMouseMove, throttledHandleTouchMove } = useChartInnerHandlers({
+    const { handleChartClick, handlePointerLeave, throttledHandlePointerMove, throttledHandleTouchMove, } = useChartInnerHandlers({
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,
@@ -256,7 +256,7 @@ export const ChartInner = (props) => {
                 React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
-        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { chartWidth: width })),
+        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle)),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
@@ -283,7 +283,7 @@ export const ChartInner = (props) => {
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
             // when starting to select an area, the tooltip remains in the position where the selection began
-            onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
+            onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -23,8 +23,8 @@ type Props = {
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;
-    handleMouseLeave: React.MouseEventHandler<SVGSVGElement>;
-    throttledHandleMouseMove: import("lodash").DebouncedFuncLeading<React.MouseEventHandler<SVGSVGElement>> | undefined;
-    throttledHandleTouchMove: import("lodash").DebouncedFuncLeading<React.TouchEventHandler<SVGSVGElement>> | undefined;
+    handlePointerLeave: React.PointerEventHandler<SVGSVGElement>;
+    throttledHandlePointerMove: import("lodash").DebouncedFuncLeading<React.PointerEventHandler<SVGSVGElement>>;
+    throttledHandleTouchMove: import("lodash").DebouncedFuncLeading<React.TouchEventHandler<SVGSVGElement>>;
 };
 export {};

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { pointer } from 'd3-selection';
 import get from 'lodash/get';
 import throttle from 'lodash/throttle';
-import { IS_TOUCH_ENABLED } from '../../core/constants';
 import { EventType } from '../../core/utils';
 import { getClosestPoints } from '../../core/utils/get-closest-data';
 import { getHoveredPlots } from '../../core/utils/get-hovered-plots';
@@ -47,18 +46,19 @@ export function useChartInnerHandlers(props) {
             hoveredPlotBands: plotBands,
         }, event);
     };
-    const handleMouseMove = (event) => {
+    const handlePointerMove = (event) => {
+        if (event.pointerType === 'touch') {
+            return;
+        }
         const [pointerX, pointerY] = pointer(event, svgContainer);
         handleMove([pointerX, pointerY], event);
     };
-    const throttledHandleMouseMove = IS_TOUCH_ENABLED
-        ? undefined
-        : throttle(handleMouseMove, tooltipThrottle);
-    const handleMouseLeave = (event) => {
+    const throttledHandlePointerMove = throttle(handlePointerMove, tooltipThrottle);
+    const handlePointerLeave = (event) => {
         if (tooltipPinned) {
             return;
         }
-        throttledHandleMouseMove === null || throttledHandleMouseMove === void 0 ? void 0 : throttledHandleMouseMove.cancel();
+        throttledHandlePointerMove.cancel();
         dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
     };
@@ -67,9 +67,7 @@ export function useChartInnerHandlers(props) {
         const [pointerX, pointerY] = pointer(touch, svgContainer);
         handleMove([pointerX, pointerY], event);
     };
-    const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, tooltipThrottle)
-        : undefined;
+    const throttledHandleTouchMove = throttle(handleTouchMove, tooltipThrottle);
     const handleChartClick = (event) => {
         const [pointerX, pointerY] = pointer(event, svgContainer);
         const x = pointerX - boundsOffsetLeft;
@@ -116,8 +114,8 @@ export function useChartInnerHandlers(props) {
     };
     return {
         handleChartClick,
-        handleMouseLeave,
-        throttledHandleMouseMove,
+        handlePointerLeave,
+        throttledHandlePointerMove,
         throttledHandleTouchMove,
     };
 }