@gravity-ui/charts 0.5.0 → 0.6.1

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

@@ -8,6 +8,7 @@ import { setActiveState } from '../utils';
 const b = block('d3-area');
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -72,7 +73,8 @@ export const AreaSeriesShapes = (args) => {
             .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.area', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'area')) || [];
             const selectedDataItems = selected.map((d) => d.data);
             const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
@@ -132,7 +134,11 @@ export const AreaSeriesShapes = (args) => {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.area', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.area', null);
         };

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

@@ -102,10 +102,14 @@ export const prepareAreaData = (args) => {
                 const labelItems = points.map((p) => getLabelData(p, s, xMax));
                 if (s.dataLabels.html) {
                     const htmlLabels = labelItems.map((l) => {
+                        var _a;
+                        const style = (_a = l.style) !== null && _a !== void 0 ? _a : s.dataLabels.style;
+                        const labelSize = getLabelsSize({ labels: [l.text], style, html: true });
                         return {
                             x: l.x - l.size.width / 2,
                             y: l.y,
                             content: l.text,
+                            size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
                         };
                     });
                     htmlElements.push(...htmlLabels);

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

@@ -8,6 +8,7 @@ export * from './types';
 const b = block('d3-bar-x');
 export const BarXSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -46,7 +47,8 @@ export const BarXSeriesShapes = (args) => {
             .style('font-size', (d) => d.style.fontSize)
             .style('font-weight', (d) => d.style.fontWeight || null)
             .style('fill', (d) => d.style.fontColor || null);
-        dispatcher.on('hover-shape.bar-x', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             if (!data) {
@@ -84,7 +86,11 @@ export const BarXSeriesShapes = (args) => {
                         : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
                 });
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.bar-x', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.bar-x', null);
         };

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

@@ -136,6 +136,7 @@ export const prepareBarXData = (args) => {
                         x: label.x,
                         y: label.y,
                         content: label.text,
+                        size: label.size,
                     });
                 }
                 else {

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

@@ -7,6 +7,7 @@ export { prepareBarYData } from './prepare-data';
 const b = block('d3-bar-y');
 export const BarYSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -46,7 +47,8 @@ export const BarYSeriesShapes = (args) => {
             .style('fill', (d) => d.style.fontColor || null);
         const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
         const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
-        dispatcher.on('hover-shape.bar-y', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
                 const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
                     acc.add(d.data.y);
@@ -73,7 +75,11 @@ export const BarYSeriesShapes = (args) => {
                 rectSelection.attr('opacity', newOpacity);
                 labelSelection.attr('opacity', newOpacity);
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.bar-y', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.bar-y', null);
         };

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

@@ -69,6 +69,7 @@ function setLabel(prepared) {
             x,
             y: y - height / 2,
             content,
+            size: { width, height },
         });
     }
     else {

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

@@ -8,6 +8,7 @@ import { getLineDashArray, setActiveState } from '../utils';
 const b = block('d3-line');
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -60,7 +61,8 @@ export const LineSeriesShapes = (args) => {
             .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.line', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
             const selectedDataItems = selected.map((d) => d.data);
             const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
@@ -119,7 +121,11 @@ export const LineSeriesShapes = (args) => {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.line', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.line', null);
         };

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

@@ -33,6 +33,7 @@ function getHtmlLabel(point, series, xMax) {
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
         content,
+        size: { width: size.maxWidth, height: size.maxHeight },
     };
 }
 export const prepareLineData = (args) => {

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

@@ -165,7 +165,8 @@ export function PieSeriesShapes(args) {
             dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
+    const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
 }

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

@@ -18,7 +18,7 @@ export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+    const prepareItem = (stackId, items) => {
         var _a, _b, _c;
         const series = items[0];
         const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
@@ -30,6 +30,7 @@ export function preparePieData(args) {
             radius,
             segments: [],
             labels: [],
+            htmlLabels: [],
             connectors: [],
             borderColor,
             borderWidth,
@@ -41,7 +42,6 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
-            htmlElements: [],
         };
         const segments = items.map((item) => {
             return {
@@ -55,132 +55,180 @@ export function preparePieData(args) {
             };
         });
         data.segments = pieGenerator(segments);
-        let line = lineGenerator();
-        const curveFactory = getCurveFactory(data);
-        if (curveFactory) {
-            line = line.curve(curveFactory);
-        }
         if (dataLabels.enabled) {
             const { style, connectorPadding, distance } = dataLabels;
             const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
-            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
+            const minSegmentRadius = maxRadius - distance - connectorPadding - labelHeight;
             if (data.radius > minSegmentRadius) {
                 data.radius = minSegmentRadius;
                 data.innerRadius =
                     (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
             }
-            const connectorStartPointGenerator = arc()
-                .innerRadius(data.radius)
-                .outerRadius(data.radius);
-            const connectorMidPointRadius = data.radius + distance / 2;
-            const connectorMidPointGenerator = arc()
-                .innerRadius(connectorMidPointRadius)
-                .outerRadius(connectorMidPointRadius);
-            const connectorArcRadius = data.radius + distance;
-            const connectorEndPointGenerator = arc()
-                .innerRadius(connectorArcRadius)
-                .outerRadius(connectorArcRadius);
-            const labelArcRadius = connectorArcRadius + connectorPadding;
-            const labelArcGenerator = arc()
-                .innerRadius(labelArcRadius)
-                .outerRadius(labelArcRadius);
-            const labels = [];
-            items.forEach((d, index) => {
-                const prevLabel = labels[labels.length - 1];
-                const text = String(d.data.label || d.data.value);
-                const shouldUseHtml = dataLabels.html;
-                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
-                const labelWidth = labelSize.maxWidth;
-                const relatedSegment = data.segments[index];
-                const getLabelPosition = (angle) => {
-                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+        }
+        return data;
+    };
+    const prepareLabels = (prepareLabelsArgs) => {
+        const { data, series } = prepareLabelsArgs;
+        const { dataLabels } = series[0];
+        const labels = [];
+        const htmlLabels = [];
+        const connectors = [];
+        if (!dataLabels.enabled) {
+            return { labels, htmlLabels, connectors };
+        }
+        let line = lineGenerator();
+        const curveFactory = getCurveFactory(data);
+        if (curveFactory) {
+            line = line.curve(curveFactory);
+        }
+        const { style, connectorPadding, distance } = dataLabels;
+        const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
+        const connectorStartPointGenerator = arc()
+            .innerRadius(data.radius)
+            .outerRadius(data.radius);
+        const connectorMidPointRadius = data.radius + distance / 2;
+        const connectorMidPointGenerator = arc()
+            .innerRadius(connectorMidPointRadius)
+            .outerRadius(connectorMidPointRadius);
+        const connectorArcRadius = data.radius + distance;
+        const connectorEndPointGenerator = arc()
+            .innerRadius(connectorArcRadius)
+            .outerRadius(connectorArcRadius);
+        const labelArcRadius = connectorArcRadius + connectorPadding;
+        const labelArcGenerator = arc()
+            .innerRadius(labelArcRadius)
+            .outerRadius(labelArcRadius);
+        series.forEach((d, index) => {
+            const prevLabel = labels[labels.length - 1];
+            const text = String(d.data.label || d.data.value);
+            const shouldUseHtml = dataLabels.html;
+            const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
+            const labelWidth = labelSize.maxWidth;
+            const relatedSegment = data.segments[index];
+            const getLabelPosition = (angle) => {
+                let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (shouldUseHtml) {
+                    x = x < 0 ? x - labelWidth : x;
+                    y = y - labelSize.maxHeight;
+                }
+                else {
                     y = y < 0 ? y - labelHeight : y;
-                    if (shouldUseHtml) {
-                        x = x < 0 ? x - labelWidth : x;
-                    }
-                    x = Math.max(-boundsWidth / 2, x);
-                    return [x, y];
-                };
-                const getConnectorPoints = (angle) => {
-                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
-                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    if (dataLabels.connectorShape === 'straight-line') {
-                        return [connectorStartPoint, connectorEndPoint];
-                    }
-                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
-                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
-                };
-                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
-                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
-                const [x, y] = getLabelPosition(midAngle);
-                const label = {
-                    text,
-                    x,
-                    y,
-                    style,
-                    size: { width: labelWidth, height: labelHeight },
-                    maxWidth: labelWidth,
-                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
-                    series: { id: d.id },
-                    active: true,
-                    segment: relatedSegment.data,
-                    angle: midAngle,
-                };
-                let overlap = false;
-                if (prevLabel) {
-                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
-                    if (overlap) {
-                        let shouldAdjustAngle = true;
-                        const step = Math.PI / 180;
-                        while (shouldAdjustAngle) {
-                            const newAngle = label.angle + step;
-                            if (newAngle > FULL_CIRCLE &&
-                                newAngle % FULL_CIRCLE > labels[0].angle) {
+                }
+                x = Math.max(-boundsWidth / 2, x);
+                return [x, y];
+            };
+            const getConnectorPoints = (angle) => {
+                const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
+                const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (dataLabels.connectorShape === 'straight-line') {
+                    return [connectorStartPoint, connectorEndPoint];
+                }
+                const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
+                return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
+            };
+            const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
+                (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
+            const [x, y] = getLabelPosition(midAngle);
+            const label = {
+                text,
+                x,
+                y,
+                style,
+                size: { width: labelWidth, height: labelHeight },
+                maxWidth: labelWidth,
+                textAnchor: midAngle < Math.PI ? 'start' : 'end',
+                series: { id: d.id },
+                active: true,
+                segment: relatedSegment.data,
+                angle: midAngle,
+            };
+            let overlap = false;
+            if (prevLabel) {
+                overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                if (overlap) {
+                    let shouldAdjustAngle = true;
+                    const step = Math.PI / 180;
+                    while (shouldAdjustAngle) {
+                        const newAngle = label.angle + step;
+                        if (newAngle > FULL_CIRCLE && newAngle % FULL_CIRCLE > labels[0].angle) {
+                            shouldAdjustAngle = false;
+                        }
+                        else {
+                            label.angle = newAngle;
+                            const [newX, newY] = getLabelPosition(newAngle);
+                            label.x = newX;
+                            label.y = newY;
+                            if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
-                            }
-                            else {
-                                label.angle = newAngle;
-                                const [newX, newY] = getLabelPosition(newAngle);
-                                label.x = newX;
-                                label.y = newY;
-                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
-                                    shouldAdjustAngle = false;
-                                    overlap = false;
-                                }
+                                overlap = false;
                             }
                         }
                     }
                 }
-                if (dataLabels.allowOverlap || !overlap) {
-                    const left = getLeftPosition(label);
-                    if (Math.abs(left) > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
-                    }
-                    else {
-                        const right = left + label.size.width;
-                        if (right > boundsWidth / 2) {
-                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
-                        }
-                    }
-                    if (shouldUseHtml) {
-                        data.htmlElements.push({
-                            x: boundsWidth / 2 + label.x,
-                            y: boundsHeight / 2 + label.y,
-                            content: label.text,
-                        });
-                    }
-                    else {
-                        labels.push(label);
+            }
+            if (dataLabels.allowOverlap || !overlap) {
+                const left = getLeftPosition(label);
+                if (Math.abs(left) > boundsWidth / 2) {
+                    label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                }
+                else {
+                    const right = left + label.size.width;
+                    if (right > boundsWidth / 2) {
+                        label.maxWidth = label.size.width - (right - boundsWidth / 2);
                     }
-                    const connector = {
-                        path: line(getConnectorPoints(midAngle)),
-                        color: relatedSegment.data.color,
-                    };
-                    data.connectors.push(connector);
                 }
-            });
-            data.labels = labels;
+                if (shouldUseHtml) {
+                    htmlLabels.push({
+                        x: boundsWidth / 2 + label.x,
+                        y: boundsHeight / 2 + label.y,
+                        content: label.text,
+                        size: label.size,
+                    });
+                }
+                else {
+                    labels.push(label);
+                }
+                const connector = {
+                    path: line(getConnectorPoints(midAngle)),
+                    color: relatedSegment.data.color,
+                };
+                connectors.push(connector);
+            }
+        });
+        return {
+            labels,
+            htmlLabels,
+            connectors,
+        };
+    };
+    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        const data = prepareItem(stackId, items);
+        const preparedLabels = prepareLabels({
+            data,
+            series: items,
+        });
+        const allPreparedLabels = [...preparedLabels.labels, ...preparedLabels.htmlLabels];
+        const top = Math.min(data.center[1] - data.radius, ...allPreparedLabels.map((l) => l.y + data.center[1]));
+        const bottom = Math.max(data.center[1] + data.radius, ...allPreparedLabels.map((l) => data.center[1] + l.y + l.size.height));
+        const topAdjustment = Math.floor(top - data.halo.size);
+        if (topAdjustment > 0) {
+            // should adjust top position and height
+            data.radius += topAdjustment / 2;
+            data.center[1] -= topAdjustment / 2;
         }
+        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        if (bottomAdjustment > 0) {
+            // should adjust position and radius
+            data.radius += bottomAdjustment / 2;
+            data.center[1] += bottomAdjustment / 2;
+        }
+        const { labels, htmlLabels, connectors } = prepareLabels({
+            data,
+            series: items,
+        });
+        data.labels = labels;
+        data.htmlLabels = htmlLabels;
+        data.connectors = connectors;
         return data;
     });
 }

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

@@ -37,5 +37,5 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlElements: HtmlItem[];
+    htmlLabels: HtmlItem[];
 };

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

@@ -9,6 +9,7 @@ export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 export function ScatterSeriesShape(props) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -28,8 +29,9 @@ export function ScatterSeriesShape(props) {
             .attr('cursor', (d) => d.point.series.cursor);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.scatter', (data) => {
+        function handleShapeHover(data) {
             var _a;
+            hoveredDataRef.current = data;
             const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
             const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
             const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
@@ -58,7 +60,11 @@ export function ScatterSeriesShape(props) {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.scatter', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.scatter', null);
         };

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

@@ -6,6 +6,7 @@ import { HtmlLayer } from '../HtmlLayer';
 const b = block('d3-treemap');
 export const TreemapSeriesShape = (props) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -48,8 +49,9 @@ export const TreemapSeriesShape = (props) => {
         const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        function handleShapeHover(data) {
             var _a;
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             const hoveredData = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.data;
@@ -87,7 +89,11 @@ export const TreemapSeriesShape = (props) => {
                 });
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on(eventName, handleShapeHover);
         return () => {
             dispatcher.on(eventName, null);
         };

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

@@ -33,6 +33,7 @@ function getLabels(args) {
                     content: text,
                     x,
                     y,
+                    size: { width, height: lineHeight },
                 }
                 : {
                     text,

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

@@ -17,7 +17,7 @@ export declare function getYValue(args: {
     yAxis: PreparedAxis;
     yScale: ChartScale;
 }): number;
-export declare const shapeKey: (d: unknown) => string | -1;
+export declare function shapeKey(d: unknown): string | -1;
 export declare function setActiveState<T extends {
     active?: boolean;
 }>(args: {
@@ -26,4 +26,4 @@ export declare function setActiveState<T extends {
     state: BasicInactiveState | undefined;
     active: boolean;
 }): T;
-export declare const getLineDashArray: (dashStyle: DashStyle, strokeWidth?: number) => string;
+export declare function getLineDashArray(dashStyle: DashStyle, strokeWidth?: number): string;

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

@@ -23,7 +23,9 @@ export function getYValue(args) {
     const yLinearScale = yScale;
     return yLinearScale(point.y);
 }
-export const shapeKey = (d) => d.id || -1;
+export function shapeKey(d) {
+    return d.id || -1;
+}
 export function setActiveState(args) {
     const { element, datum, state, active } = args;
     const elementSelection = select(element);
@@ -34,7 +36,7 @@ export function setActiveState(args) {
     }
     return datum;
 }
-export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
+export function getLineDashArray(dashStyle, strokeWidth = 2) {
     const value = dashStyle.toLowerCase();
     const arrayValue = value
         .replace('shortdashdotdot', '3,1,1,1,1,1,')
@@ -50,4 +52,4 @@ export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
         return `${parseInt(part, 10) * strokeWidth}`;
     });
     return arrayValue.join(',').replace(/NaN/g, 'none');
-};
+}

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

@@ -10,6 +10,7 @@ export * from './types';
 const b = block('d3-waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
     React.useEffect(() => {
@@ -78,7 +79,8 @@ export const WaterfallSeriesShapes = (args) => {
         })
             .attr('stroke-width', 1)
             .attr('stroke-dasharray', () => getLineDashArray(DashStyle.Dash, 1));
-        dispatcher.on('hover-shape.waterfall', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             if (!data) {
@@ -116,7 +118,11 @@ export const WaterfallSeriesShapes = (args) => {
                         : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
                 });
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.waterfall', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.waterfall', null);
         };