@gravity-ui/charts 0.4.1 → 0.6.0

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedAxis, ShapeData } from '../../hooks';
+import type { useChartInnerState } from './useChartInnerState';
+type ChartInnerState = ReturnType<typeof useChartInnerState>;
+type Props = {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    dispatcher: Dispatch<object>;
+    shapesData: ShapeData[];
+    svgContainer: SVGSVGElement | null;
+    togglePinTooltip: ChartInnerState['togglePinTooltip'];
+    tooltipPinned: boolean;
+    unpinTooltip: ChartInnerState['unpinTooltip'];
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
+};
+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;
+};
+export {};

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { pointer } from 'd3';
+import throttle from 'lodash/throttle';
+import { IS_TOUCH_ENABLED } from '../../constants';
+import { EventType } from '../../utils';
+import { getClosestPoints } from '../../utils/chart/get-closest-data';
+const THROTTLE_DELAY = 50;
+export function useChartInnerHandlers(props) {
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, } = props;
+    const isOutsideBounds = React.useCallback((x, y) => {
+        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+    }, [boundsHeight, boundsWidth]);
+    const handleMove = ([pointerX, pointerY], event) => {
+        if (tooltipPinned) {
+            return;
+        }
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (isOutsideBounds(x, y)) {
+            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+            dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
+            return;
+        }
+        const closest = getClosestPoints({
+            position: [x, y],
+            shapesData,
+        });
+        dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
+        dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
+            hovered: closest,
+            xAxis,
+            yAxis: yAxis[0],
+        }, event);
+    };
+    const handleMouseMove = (event) => {
+        const [pointerX, pointerY] = pointer(event, svgContainer);
+        handleMove([pointerX, pointerY], event);
+    };
+    const throttledHandleMouseMove = IS_TOUCH_ENABLED
+        ? undefined
+        : throttle(handleMouseMove, THROTTLE_DELAY);
+    const handleMouseLeave = (event) => {
+        if (tooltipPinned) {
+            return;
+        }
+        throttledHandleMouseMove === null || throttledHandleMouseMove === void 0 ? void 0 : throttledHandleMouseMove.cancel();
+        dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+        dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
+    };
+    const handleTouchMove = (event) => {
+        const touch = event.touches[0];
+        const [pointerX, pointerY] = pointer(touch, svgContainer);
+        handleMove([pointerX, pointerY], event);
+    };
+    const throttledHandleTouchMove = IS_TOUCH_ENABLED
+        ? throttle(handleTouchMove, THROTTLE_DELAY)
+        : undefined;
+    const handleChartClick = (event) => {
+        const [pointerX, pointerY] = pointer(event, svgContainer);
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (isOutsideBounds(x, y)) {
+            return;
+        }
+        const items = getClosestPoints({
+            position: [x, y],
+            shapesData,
+        });
+        const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
+        if (!selected) {
+            if (tooltipPinned) {
+                unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
+            }
+            return;
+        }
+        dispatcher.call(EventType.CLICK_CHART, undefined, { point: selected.data, series: selected.series }, event);
+        const nextTooltipFixed = !tooltipPinned;
+        if (!nextTooltipFixed) {
+            dispatcher.call(EventType.HOVER_SHAPE, event.target, items, [pointerX, pointerY]);
+            dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
+                hovered: items,
+                xAxis,
+                yAxis: yAxis[0],
+            }, event);
+        }
+        togglePinTooltip === null || togglePinTooltip === void 0 ? void 0 : togglePinTooltip(nextTooltipFixed, event);
+    };
+    return {
+        handleChartClick,
+        handleMouseLeave,
+        throttledHandleMouseMove,
+        throttledHandleTouchMove,
+    };
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { ChartInnerProps } from './types';
+type Props = ChartInnerProps & {
+    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
+};
+export declare function useChartInnerProps(props: Props): {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    handleLegendItemClick: import("../../hooks").OnLegendItemClick;
+    legendConfig: {
+        offset: {
+            left: number;
+            top: number;
+        };
+        pagination: {
+            limit: number;
+            maxPage: number;
+        } | undefined;
+    };
+    legendItems: import("../../hooks").LegendItem[][];
+    preparedLegend: import("../../hooks").PreparedLegend;
+    preparedSeries: import("../../hooks").PreparedSeries[];
+    preparedSplit: import("../../hooks").PreparedSplit;
+    prevHeight: number | undefined;
+    prevWidth: number | undefined;
+    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    shapesData: import("../../hooks").ShapeData[];
+    title: (import("../../types").ChartTitle & {
+        height: number;
+    }) | undefined;
+    tooltip: import("../../types").ChartTooltip<any> & {
+        enabled: boolean;
+    };
+    xAxis: import("../../hooks").PreparedAxis;
+    xScale: import("../../hooks").ChartScale | undefined;
+    yAxis: import("../../hooks").PreparedAxis[];
+    yScale: import("../../hooks").ChartScale[] | undefined;
+};
+export {};

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
+import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
+import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
+export function useChartInnerProps(props) {
+    const { width, height, data, dispatcher, htmlLayout } = props;
+    const prevWidth = usePrevious(width);
+    const prevHeight = usePrevious(height);
+    const { chart, title, tooltip } = useChartOptions({ data });
+    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
+    const yAxis = React.useMemo(() => getPreparedYAxis({
+        series: data.series.data,
+        yAxis: data.yAxis,
+        height,
+    }), [data, height]);
+    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
+        chartWidth: width,
+        chartHeight: height,
+        chartMargin: chart.margin,
+        series: data.series,
+        legend: data.legend,
+        preparedYAxis: yAxis,
+    });
+    const { boundsWidth, boundsHeight } = useChartDimensions({
+        width,
+        height,
+        margin: chart.margin,
+        preparedLegend,
+        preparedXAxis: xAxis,
+        preparedYAxis: yAxis,
+        preparedSeries: preparedSeries,
+    });
+    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
+    const { xScale, yScale } = useAxisScales({
+        boundsWidth,
+        boundsHeight,
+        series: preparedSeries,
+        xAxis,
+        yAxis,
+        split: preparedSplit,
+    });
+    const { shapes, shapesData } = useShapes({
+        boundsWidth,
+        boundsHeight,
+        dispatcher,
+        series: preparedSeries,
+        seriesOptions: preparedSeriesOptions,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        split: preparedSplit,
+        htmlLayout,
+    });
+    const boundsOffsetTop = chart.margin.top;
+    // We only need to consider the width of the first left axis
+    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
+    return {
+        boundsHeight,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        boundsWidth,
+        handleLegendItemClick,
+        legendConfig,
+        legendItems,
+        preparedLegend,
+        preparedSeries,
+        preparedSplit,
+        prevHeight,
+        prevWidth,
+        shapes,
+        shapesData,
+        title,
+        tooltip,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+    };
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { ChartTooltip } from '../../types';
+type Props = {
+    dispatcher: Dispatch<object>;
+    tooltip?: ChartTooltip;
+};
+export declare function useChartInnerState(props: Props): {
+    tooltipPinned: boolean;
+    togglePinTooltip: ((value: boolean, event: React.MouseEvent) => void) | undefined;
+    unpinTooltip: (() => void) | undefined;
+};
+export {};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { EventType, isMacintosh } from '../../utils';
+export function useChartInnerState(props) {
+    var _a, _b;
+    const { dispatcher, tooltip } = props;
+    const [tooltipPinned, setTooltipPinned] = React.useState(false);
+    const tooltipEnabled = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled;
+    const tooltipPinEnabled = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _a === void 0 ? void 0 : _a.enabled;
+    const modifierKey = (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _b === void 0 ? void 0 : _b.modifierKey;
+    const togglePinTooltip = React.useCallback((value, event) => {
+        let resultValue = value;
+        if (value && modifierKey) {
+            switch (modifierKey) {
+                case 'altKey': {
+                    resultValue = event.altKey;
+                    break;
+                }
+                case 'metaKey': {
+                    resultValue = isMacintosh() ? event.metaKey : event.ctrlKey;
+                }
+            }
+        }
+        setTooltipPinned(resultValue);
+    }, [modifierKey]);
+    const unpinTooltip = React.useCallback(() => {
+        setTooltipPinned(false);
+        dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+    }, [dispatcher]);
+    return {
+        tooltipPinned,
+        togglePinTooltip: tooltipEnabled && tooltipPinEnabled ? togglePinTooltip : undefined,
+        unpinTooltip: tooltipEnabled && tooltipPinEnabled ? unpinTooltip : undefined,
+    };
+}

package/dist/esm/components/Legend/index.d.ts

@@ -8,6 +8,7 @@ type Props = {
     items: LegendItem[][];
     config: LegendConfig;
     onItemClick: OnLegendItemClick;
+    onUpdate?: () => void;
 };
 export declare const Legend: (props: Props) => React.JSX.Element;
 export {};

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { getLineDashArray } from '../../hooks/useShapes/utils';
+import { formatNumber } from '../../libs';
 import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
-    const { align, offsetWidth, width, contentWidth } = args;
+    const { align, offsetWidth = 0, width, contentWidth } = args;
     const top = 0;
     if (align === 'left') {
         return { top, left: offsetWidth };
@@ -133,7 +134,7 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, onItemClick } = props;
+    const { boundsWidth, chartSeries, legend, items, config, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
     const [paginationOffset, setPaginationOffset] = React.useState(0);
     React.useEffect(() => {
@@ -163,6 +164,7 @@ export const Legend = (props) => {
                     .attr('class', b('item'))
                     .on('click', function (e, d) {
                     onItemClick({ name: d.name, metaKey: e.metaKey });
+                    onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
                 });
                 const getXPosition = (i) => {
                     return line.slice(0, i).reduce((acc, legendItem) => {
@@ -229,14 +231,16 @@ export const Legend = (props) => {
                 }),
             });
             // ticks
+            const scale = scaleLinear(domain, [0, legend.width]);
             const xAxisGenerator = axisBottom({
-                scale: scaleLinear(domain, [0, legend.width]),
+                scale,
                 ticks: {
                     items: [[0, -rectHeight]],
                     labelsMargin: legend.ticks.labelsMargin,
                     labelsLineHeight: legend.ticks.labelsLineHeight,
                     maxTickCount: 4,
                     tickColor: '#fff',
+                    labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
                 },
                 domain: {
                     size: legend.width,
@@ -251,15 +255,31 @@ export const Legend = (props) => {
             legendWidth = legend.width;
         }
         if (legend.title.enable) {
-            const { maxWidth: labelWidth } = getLabelsSize({
+            const { maxWidth: titleWidth } = getLabelsSize({
                 labels: [legend.title.text],
                 style: legend.title.style,
             });
+            let dx = 0;
+            switch (legend.title.align) {
+                case 'center': {
+                    dx = legend.width / 2 - titleWidth / 2;
+                    break;
+                }
+                case 'right': {
+                    dx = legend.width - titleWidth;
+                    break;
+                }
+                case 'left':
+                default: {
+                    dx = 0;
+                    break;
+                }
+            }
             svgElement
                 .append('g')
                 .attr('class', b('title'))
                 .append('text')
-                .attr('dx', legend.width / 2 - labelWidth / 2)
+                .attr('dx', dx)
                 .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
@@ -273,6 +293,6 @@ export const Legend = (props) => {
             contentWidth: legendWidth,
         });
         svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
-    }, [boundsWidth, chartSeries, onItemClick, legend, items, config, paginationOffset]);
+    }, [boundsWidth, chartSeries, onItemClick, onUpdate, legend, items, config, paginationOffset]);
     return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
 };

package/dist/esm/components/Tooltip/index.d.ts

@@ -8,6 +8,8 @@ type TooltipProps = {
     svgContainer: SVGSVGElement | null;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis;
+    tooltipPinned: boolean;
+    onOutsideClick?: () => void;
 };
 export declare const Tooltip: (props: TooltipProps) => React.JSX.Element | null;
 export {};

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

@@ -6,16 +6,22 @@ import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
 const b = block('d3-tooltip');
 export const Tooltip = (props) => {
-    const { tooltip, xAxis, yAxis, svgContainer, dispatcher } = props;
+    const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
     const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
-    const anchorRef = useVirtualElementRef({ rect: { top, left } });
+    const anchorRef = useVirtualElementRef({ rect: { left, top } });
+    const handleOutsideClick = (e) => {
+        if (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.contains(e.target)) {
+            return;
+        }
+        onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
+    };
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
         React.createElement("div", { className: b('content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

package/dist/esm/components/Tooltip/styles.css

@@ -7,6 +7,9 @@
   animation-timing-function: unset;
   animation-fill-mode: unset;
 }
+.gcharts-d3-tooltip[class].gcharts-d3-tooltip_pinned {
+  pointer-events: inherit;
+}
 .gcharts-d3-tooltip__content {
   padding: 10px 14px;
   text-wrap: nowrap;

package/dist/esm/hooks/index.d.ts

@@ -2,9 +2,10 @@ export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useAxisScales';
+export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
-export * from './useTooltip/types';
+export * from './useSplit';
 export * from './useSplit/types';

package/dist/esm/hooks/index.js

@@ -2,9 +2,10 @@ export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useAxisScales';
+export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
-export * from './useTooltip/types';
+export * from './useSplit';
 export * from './useSplit/types';

package/dist/esm/hooks/usePrevious/index.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

package/dist/esm/hooks/usePrevious/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -63,6 +63,7 @@ export const getPreparedLegend = (args) => {
             margin: titleMargin,
             style: titleStyle,
             height: titleHeight,
+            align: get(legend, 'title.align', 'left'),
         },
         width: legendWidth,
         ticks,

package/dist/esm/hooks/useSeries/types.d.ts

@@ -21,6 +21,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
         margin: number;
         style: BaseTextStyle;
         height: number;
+        align: Required<Required<ChartLegend>['title']>['align'];
     };
     ticks: {
         labelsMargin: number;

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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);
         };