@gravity-ui/chartkit 5.3.2 → 5.4.0

package/build/plugins/d3/renderer/components/Chart.js

@@ -1,17 +1,21 @@
 import React from 'react';
+import { pointer } from 'd3';
+import throttle from 'lodash/throttle';
 import { block } from '../../../../utils/cn';
 import { getD3Dispatcher } from '../d3-dispatcher';
-import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes, useTooltip, } from '../hooks';
+import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes } from '../hooks';
 import { getWidthOccupiedByYAxis } from '../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
+import { getClosestPoints } from '../utils/get-closest-data';
 import { AxisX } from './AxisX';
 import { AxisY } from './AxisY';
 import { Legend } from './Legend';
 import { Title } from './Title';
-import { Tooltip, TooltipTriggerArea } from './Tooltip';
+import { Tooltip } from './Tooltip';
 import './styles.css';
 const b = block('d3');
+const THROTTLE_DELAY = 50;
 export const Chart = (props) => {
     var _a, _b;
     const { width, height, data } = props;
@@ -48,7 +52,6 @@ export const Chart = (props) => {
         xAxis,
         yAxis,
     });
-    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
     const { shapes, shapesData } = useShapes({
         boundsWidth,
         boundsHeight,
@@ -59,7 +62,6 @@ export const Chart = (props) => {
         xScale,
         yAxis,
         yScale,
-        svgContainer: svgRef.current,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     React.useEffect(() => {
@@ -72,16 +74,34 @@ export const Chart = (props) => {
     }, [dispatcher, clickHandler]);
     const boundsOffsetTop = chart.margin.top;
     const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({ preparedAxis: yAxis });
+    const handleMouseMove = (event) => {
+        const [pointerX, pointerY] = pointer(event, svgRef.current);
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (x < 0 || x > boundsWidth || y < 0 || y > boundsHeight) {
+            dispatcher.call('hover-shape', {}, undefined);
+            return;
+        }
+        const closest = getClosestPoints({
+            position: [x, y],
+            shapesData,
+        });
+        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
+    };
+    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
+    const handleMouseLeave = () => {
+        throttledHandleMouseMove.cancel();
+        dispatcher.call('hover-shape', {}, undefined);
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height },
+        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
                 xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
-                shapes,
-                (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) && Boolean(shapesData.length) && (React.createElement(TooltipTriggerArea, { boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, shapesData: shapesData, svgContainer: svgRef.current }))),
+                shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
-        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], hovered: hovered, pointerPosition: pointerPosition })));
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));
 };

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
+import { block } from '../../../../../utils/cn';
 import { formatNumber } from '../../../../shared';
 import { getDataCategoryValue } from '../../utils';
+const b = block('d3-tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, axis, data) => {
     switch (axis.type) {
@@ -26,47 +28,58 @@ const getRowData = (fieldName, axis, data) => {
 };
 const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
 const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
+const getMeasureValue = (data, xAxis, yAxis) => {
+    var _a, _b;
+    if (data.every((item) => item.series.type === 'pie' || item.series.type === 'treemap')) {
+        return null;
+    }
+    if (data.some((item) => item.series.type === 'bar-y')) {
+        return getYRowData(yAxis, (_a = data[0]) === null || _a === void 0 ? void 0 : _a.data);
+    }
+    return getXRowData(xAxis, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.data);
+};
 export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
-    return (React.createElement(React.Fragment, null, hovered.map(({ data, series }, i) => {
-        const id = get(series, 'id', i);
-        switch (series.type) {
-            case 'scatter':
-            case 'line':
-            case 'area':
-            case 'bar-x': {
-                const xRow = getXRowData(xAxis, data);
-                const yRow = getYRowData(yAxis, data);
-                return (React.createElement("div", { key: id },
-                    React.createElement("div", null, xRow),
-                    React.createElement("div", null,
-                        React.createElement("span", null,
-                            React.createElement("b", null, series.name),
-                            ": ",
-                            yRow))));
-            }
-            case 'bar-y': {
-                const xRow = getXRowData(xAxis, data);
-                const yRow = getYRowData(yAxis, data);
-                return (React.createElement("div", { key: id },
-                    React.createElement("div", null, yRow),
-                    React.createElement("div", null,
+    const measureValue = getMeasureValue(hovered, xAxis, yAxis);
+    return (React.createElement(React.Fragment, null,
+        measureValue && React.createElement("div", null, measureValue),
+        hovered.map(({ data, series, closest }, i) => {
+            const id = `${get(series, 'id')}_${i}`;
+            const color = get(series, 'color');
+            switch (series.type) {
+                case 'scatter':
+                case 'line':
+                case 'area':
+                case 'bar-x': {
+                    const value = (React.createElement(React.Fragment, null,
+                        series.name,
+                        ": ",
+                        getYRowData(yAxis, data)));
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
+                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                }
+                case 'bar-y': {
+                    const value = (React.createElement(React.Fragment, null,
+                        series.name,
+                        ": ",
+                        getXRowData(xAxis, data)));
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
+                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                }
+                case 'pie':
+                case 'treemap': {
+                    const seriesData = data;
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("span", null,
-                            React.createElement("b", null, series.name),
-                            ": ",
-                            xRow))));
-            }
-            case 'pie':
-            case 'treemap': {
-                const pieSeriesData = data;
-                return (React.createElement("div", { key: id },
-                    React.createElement("span", null,
-                        pieSeriesData.name || pieSeriesData.id,
-                        "\u00A0"),
-                    React.createElement("span", null, pieSeriesData.value)));
+                            seriesData.name || seriesData.id,
+                            "\u00A0"),
+                        React.createElement("span", null, seriesData.value)));
+                }
+                default: {
+                    return null;
+                }
             }
-            default: {
-                return null;
-            }
-        }
-    })));
+        })));
 };

package/build/plugins/d3/renderer/components/Tooltip/index.d.ts

@@ -1,15 +1,12 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { TooltipDataChunk } from '../../../../../types/widget-data';
-import type { PointerPosition, PreparedAxis, PreparedTooltip } from '../../hooks';
-export * from './TooltipTriggerArea';
+import type { PreparedAxis, PreparedTooltip } from '../../hooks';
 type TooltipProps = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
     svgContainer: SVGSVGElement | null;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis;
-    hovered?: TooltipDataChunk[];
-    pointerPosition?: PointerPosition;
 };
 export declare const Tooltip: (props: TooltipProps) => React.JSX.Element | null;
+export {};

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import isNil from 'lodash/isNil';
 import { block } from '../../../../../utils/cn';
+import { useTooltip } from '../../hooks';
 import { DefaultContent } from './DefaultContent';
-export * from './TooltipTriggerArea';
 const b = block('d3-tooltip');
 export const Tooltip = (props) => {
-    const { tooltip, xAxis, yAxis, hovered, svgContainer, pointerPosition } = props;
+    const { tooltip, xAxis, yAxis, svgContainer, dispatcher } = 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;
@@ -22,6 +23,6 @@ export const Tooltip = (props) => {
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return hovered ? (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(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
         React.createElement("div", { className: b('content') }, content))) : null;
 };

package/build/plugins/d3/renderer/components/styles.css

@@ -97,4 +97,18 @@
   border-radius: 3px;
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
   text-wrap: nowrap;
+}
+
+.chartkit-d3-tooltip__content-row {
+  display: flex;
+  align-items: center;
+}
+
+.chartkit-d3-tooltip__color {
+  height: 8px;
+  width: 16px;
+  display: inline-block;
+  margin-right: 8px;
+  border-radius: 2px;
+  background-color: #dddddd;
 }

package/build/plugins/d3/renderer/hooks/useShapes/area/index.js

@@ -73,14 +73,13 @@ export const AreaSeriesShapes = (args) => {
         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) => {
-            var _a;
-            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'area');
-            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;
+            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; });
             shapeSelection.datum((d, index, list) => {
                 var _a;
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
+                const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     let strokeColor = d.color || '';
@@ -95,7 +94,9 @@ export const AreaSeriesShapes = (args) => {
                 return setActiveState({
                     element: list[index],
                     state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.id),
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.id)),
                     datum: d,
                 });
             });
@@ -103,13 +104,15 @@ export const AreaSeriesShapes = (args) => {
                 return setActiveState({
                     element: list[index],
                     state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.series.id)),
                     datum: d,
                 });
             });
             markerSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
@@ -118,8 +121,8 @@ export const AreaSeriesShapes = (args) => {
                 }
                 if (d.point.series.marker.states.normal.enabled) {
                     const isActive = Boolean(!inactiveEnabled ||
-                        !selectedSeriesId ||
-                        selectedSeriesId === d.point.series.id);
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.point.series.id));
                     setActiveState({
                         element: list[index],
                         state: inactiveOptions,

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -21,7 +21,6 @@ type Args = {
     seriesOptions: PreparedSeriesOptions;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
-    svgContainer: SVGSVGElement | null;
     xScale?: ChartScale;
     yScale?: ChartScale;
 };

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -14,7 +14,7 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import './styles.css';
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, } = args;
     const shapesComponents = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -89,7 +89,8 @@ export const useShapes = (args) => {
                             yAxis: yAxis[0],
                             yScale,
                         });
-                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                        shapesData.push(...preparedData);
                     }
                     break;
                 }
@@ -99,7 +100,8 @@ export const useShapes = (args) => {
                         boundsWidth,
                         boundsHeight,
                     });
-                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                    shapesData.push(...preparedData);
                     break;
                 }
                 case 'treemap': {
@@ -110,7 +112,8 @@ export const useShapes = (args) => {
                         width: boundsWidth,
                         height: boundsHeight,
                     });
-                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                    shapesData.push(preparedData);
                 }
             }
             return acc;
@@ -126,7 +129,6 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
-        svgContainer,
     ]);
     return { shapes: shapesComponents.shapes, shapesData: shapesComponents.shapesData };
 };

package/build/plugins/d3/renderer/hooks/useShapes/line/index.js

@@ -61,13 +61,12 @@ export const LineSeriesShapes = (args) => {
         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) => {
-            var _a;
-            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'line');
-            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;
+            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; });
             lineSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
+                const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('stroke', (d) => {
@@ -82,7 +81,9 @@ export const LineSeriesShapes = (args) => {
                 return setActiveState({
                     element: list[index],
                     state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.id),
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.id)),
                     datum: d,
                 });
             });
@@ -90,13 +91,15 @@ export const LineSeriesShapes = (args) => {
                 return setActiveState({
                     element: list[index],
                     state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.series.id)),
                     datum: d,
                 });
             });
             markerSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
@@ -105,8 +108,8 @@ export const LineSeriesShapes = (args) => {
                 }
                 if (d.point.series.marker.states.normal.enabled) {
                     const isActive = Boolean(!inactiveEnabled ||
-                        !selectedSeriesId ||
-                        selectedSeriesId === d.point.series.id);
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.point.series.id));
                     setActiveState({
                         element: list[index],
                         state: inactiveOptions,

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.d.ts

@@ -6,7 +6,6 @@ type PreparePieSeriesArgs = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedPieData[];
     seriesOptions: PreparedSeriesOptions;
-    svgContainer: SVGSVGElement | null;
 };
 export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
 export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { arc, color, line as lineGenerator, pointer, select } from 'd3';
+import { arc, color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { setEllipsisForOverflowTexts } from '../../../utils';
@@ -11,7 +11,7 @@ export function getHaloVisibility(d) {
     return enabled ? '' : 'hidden';
 }
 export function PieSeriesShapes(args) {
-    const { dispatcher, preparedData, seriesOptions, svgContainer } = args;
+    const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -127,32 +127,15 @@ export function PieSeriesShapes(args) {
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        svgElement
-            .on('mousemove', (e) => {
-            const currentSegment = getSelectedSegment(e.target);
-            if (currentSegment) {
-                const data = {
-                    series: {
-                        id: currentSegment.series.id,
-                        type: 'pie',
-                        name: currentSegment.series.name,
-                    },
-                    data: currentSegment.series.data,
-                };
-                dispatcher.call('hover-shape', {}, [data], pointer(e, svgContainer));
-            }
-        })
-            .on('mouseleave', () => {
-            dispatcher.call('hover-shape', {}, undefined);
-        })
-            .on('click', (e) => {
+        svgElement.on('click', (e) => {
             const selectedSegment = getSelectedSegment(e.target);
             if (selectedSegment) {
                 dispatcher.call('click-chart', undefined, { point: selectedSegment.series.data, series: selectedSegment.series }, e);
             }
         });
         dispatcher.on(eventName, (data) => {
-            const selectedSeriesId = data === null || data === void 0 ? void 0 : data[0].series.id;
+            var _a, _b;
+            const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             shapesSelection.datum((_d, index, list) => {
@@ -202,6 +185,6 @@ export function PieSeriesShapes(args) {
         return () => {
             dispatcher.on(eventName, null);
         };
-    }, [dispatcher, preparedData, seriesOptions, svgContainer]);
+    }, [dispatcher, preparedData, seriesOptions]);
     return React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } });
 }

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.d.ts

@@ -7,6 +7,5 @@ type ScatterSeriesShapeProps = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedScatterData[];
     seriesOptions: PreparedSeriesOptions;
-    svgContainer: SVGSVGElement | null;
 };
 export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { pointer, select } from 'd3';
+import { select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
@@ -7,7 +7,7 @@ import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 export function ScatterSeriesShape(props) {
-    const { dispatcher, preparedData, seriesOptions, svgContainer } = props;
+    const { dispatcher, preparedData, seriesOptions } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -28,27 +28,7 @@ export function ScatterSeriesShape(props) {
         const getSelectedPoint = (element) => {
             return select(element).datum();
         };
-        svgElement
-            .on('mousemove', (e) => {
-            const datum = getSelectedPoint(e.target);
-            if (!datum) {
-                return;
-            }
-            const [pointerX, pointerY] = pointer(e, svgContainer);
-            const data = {
-                series: {
-                    id: datum.point.series.id,
-                    type: 'scatter',
-                    name: datum.point.series.name,
-                },
-                data: datum.point.data,
-            };
-            dispatcher.call('hover-shape', {}, [data], [pointerX, pointerY]);
-        })
-            .on('mouseleave', () => {
-            dispatcher.call('hover-shape', {}, undefined);
-        })
-            .on('click', (e) => {
+        svgElement.on('click', (e) => {
             const datum = getSelectedPoint(e.target);
             if (datum) {
                 dispatcher.call('click-chart', undefined, { point: datum.point.data, series: datum.point.series }, e);
@@ -90,6 +70,6 @@ export function ScatterSeriesShape(props) {
         return () => {
             dispatcher.on('hover-shape.scatter', null);
         };
-    }, [dispatcher, preparedData, seriesOptions, svgContainer]);
+    }, [dispatcher, preparedData, seriesOptions]);
     return React.createElement("g", { ref: ref, className: b() });
 }

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.d.ts

@@ -6,7 +6,6 @@ type ShapeProps = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedTreemapData;
     seriesOptions: PreparedSeriesOptions;
-    svgContainer: SVGSVGElement | null;
 };
 export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { color, pointer, select } from 'd3';
+import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { setEllipsisForOverflowTexts } from '../../../utils';
 const b = block('d3-treemap');
 export const TreemapSeriesShape = (props) => {
-    const { dispatcher, preparedData, seriesOptions, svgContainer } = props;
+    const { dispatcher, preparedData, seriesOptions } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -52,22 +52,15 @@ export const TreemapSeriesShape = (props) => {
         const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
-        svgElement
-            .on('mousemove', (e) => {
-            const datum = getSelectedPart(e.target);
-            dispatcher.call('hover-shape', {}, [{ data: datum.data, series }], pointer(e, svgContainer));
-        })
-            .on('mouseleave', () => {
-            dispatcher.call('hover-shape', {}, undefined);
-        })
-            .on('click', (e) => {
+        svgElement.on('click', (e) => {
             const datum = getSelectedPart(e.target);
             dispatcher.call('click-chart', undefined, { point: datum.data, series }, e);
         });
         dispatcher.on(eventName, (data) => {
+            var _a;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            const hoveredData = data === null || data === void 0 ? void 0 : data[0].data;
+            const hoveredData = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.data;
             rectSelection.datum((d, index, list) => {
                 const currentRect = select(list[index]);
                 const hovered = Boolean(hoverEnabled && hoveredData === d.data);
@@ -106,6 +99,6 @@ export const TreemapSeriesShape = (props) => {
         return () => {
             dispatcher.on(eventName, null);
         };
-    }, [dispatcher, preparedData, seriesOptions, svgContainer]);
+    }, [dispatcher, preparedData, seriesOptions]);
     return React.createElement("g", { ref: ref, className: b() });
 };

package/build/plugins/d3/renderer/utils/get-closest-data.d.ts

@@ -0,0 +1,15 @@
+import type { ChartKitWidgetSeries, ChartKitWidgetSeriesData, TooltipDataChunk } from '../../../../types';
+import type { ShapeData } from '../hooks';
+type GetClosestPointsArgs = {
+    position: [number, number];
+    shapesData: ShapeData[];
+};
+export type ShapePoint = {
+    x: number;
+    y0: number;
+    y1: number;
+    data: ChartKitWidgetSeriesData;
+    series: ChartKitWidgetSeries;
+};
+export declare function getClosestPoints(args: GetClosestPointsArgs): TooltipDataChunk[];
+export {};

package/build/plugins/d3/renderer/utils/get-closest-data.js

@@ -0,0 +1,156 @@
+import { Delaunay, bisector, sort } from 'd3';
+import get from 'lodash/get';
+import groupBy from 'lodash/groupBy';
+function getClosestPointsByXValue(x, y, points) {
+    var _a, _b;
+    const sorted = sort(points, (p) => p.x);
+    const closestXIndex = bisector((p) => p.x).center(sorted, x);
+    if (closestXIndex === -1) {
+        return [];
+    }
+    const closestX = sorted[closestXIndex].x;
+    const closestPoints = sort(points.filter((p) => p.x === closestX), (p) => p.y0);
+    let closestYIndex = -1;
+    if (y < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
+        closestYIndex = 0;
+    }
+    else if (y > ((_b = closestPoints[closestPoints.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
+        closestYIndex = closestPoints.length - 1;
+    }
+    else {
+        closestYIndex = closestPoints.findIndex((p) => y > p.y0 && y < p.y1);
+    }
+    return closestPoints.map((p, i) => ({
+        data: p.data,
+        series: p.series,
+        closest: i === closestYIndex,
+    }));
+}
+function getSeriesType(shapeData) {
+    return get(shapeData, 'series.type') || get(shapeData, 'point.series.type');
+}
+export function getClosestPoints(args) {
+    const { position, shapesData } = args;
+    const [pointerX, pointerY] = position;
+    const result = [];
+    const groups = groupBy(shapesData, getSeriesType);
+    Object.entries(groups).forEach(([seriesType, list]) => {
+        var _a, _b;
+        switch (seriesType) {
+            case 'bar-x': {
+                const points = list.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    x: d.x + d.width / 2,
+                    y0: d.y,
+                    y1: d.y + d.height,
+                }));
+                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'area': {
+                const points = list.reduce((acc, d) => {
+                    Array.prototype.push.apply(acc, d.points.map((p) => ({
+                        data: p.data,
+                        series: p.series,
+                        x: p.x,
+                        y0: p.y0,
+                        y1: p.y,
+                    })));
+                    return acc;
+                }, []);
+                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'line': {
+                const points = list.reduce((acc, d) => {
+                    Array.prototype.push.apply(acc, d.points.map((p) => ({
+                        data: p.data,
+                        series: p.series,
+                        x: p.x,
+                        y0: p.y,
+                        y1: p.y,
+                    })));
+                    return acc;
+                }, []);
+                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'bar-y': {
+                const points = list;
+                const sorted = sort(points, (p) => p.y);
+                const closestYIndex = bisector((p) => p.y).center(sorted, pointerY);
+                let closestPoints = [];
+                let closestXIndex = -1;
+                if (closestYIndex !== -1) {
+                    const closestY = sorted[closestYIndex].y;
+                    closestPoints = sort(points.filter((p) => p.y === closestY), (p) => p.x);
+                    const lastPoint = closestPoints[closestPoints.length - 1];
+                    if (pointerX < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.x)) {
+                        closestXIndex = 0;
+                    }
+                    else if (lastPoint && pointerX > lastPoint.x + lastPoint.width) {
+                        closestXIndex = closestPoints.length - 1;
+                    }
+                    else {
+                        closestXIndex = closestPoints.findIndex((p) => pointerX > p.x && pointerX < p.x + p.width);
+                    }
+                }
+                Array.prototype.push.apply(result, closestPoints.map((p, i) => ({
+                    data: p.data,
+                    series: p.series,
+                    closest: i === closestXIndex,
+                })));
+                break;
+            }
+            case 'scatter': {
+                const points = list;
+                const delaunayX = Delaunay.from(points, (d) => d.point.x, (d) => d.point.y);
+                const closestPoint = points[delaunayX.find(pointerX, pointerY)];
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.point.data,
+                        series: closestPoint.point.series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
+            case 'pie': {
+                const points = list.map((d) => d.segments).flat();
+                const closestPoint = points.find((p) => {
+                    const { center, radius } = p.data.pie;
+                    const x = pointerX - center[0];
+                    const y = pointerY - center[1];
+                    let angle = Math.atan2(y, x) + 0.5 * Math.PI;
+                    angle = angle < 0 ? Math.PI * 2 + angle : angle;
+                    const polarRadius = Math.sqrt(x * x + y * y);
+                    return angle >= p.startAngle && angle <= p.endAngle && polarRadius < radius;
+                });
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.data.series.data,
+                        series: closestPoint.data.series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
+            case 'treemap': {
+                const data = list;
+                const closestPoint = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.leaves.find((l) => {
+                    return (pointerX >= l.x0 && pointerX <= l.x1 && pointerY >= l.y0 && pointerY <= l.y1);
+                });
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.data,
+                        series: data[0].series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
+        }
+    });
+    return result;
+}

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -8,9 +8,6 @@ export * from './axis';
 export * from './labels';
 export * from './symbol';
 export type AxisDirection = 'x' | 'y';
-export type NodeWithD3Data<T = unknown> = Element & {
-    __data__: T;
-};
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
     data: unknown;
@@ -73,5 +70,3 @@ export declare const getDataCategoryValue: (args: {
     data: ChartKitWidgetSeriesData;
 }) => string;
 export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
-export declare const isNodeContainsD3Data: (node?: Element | null) => node is NodeWithD3Data<unknown>;
-export declare const extractD3DataFromNode: <T extends unknown>(node: NodeWithD3Data<T>) => T;

package/build/plugins/d3/renderer/utils/index.js

@@ -170,10 +170,3 @@ export function getClosestPointsRange(axis, points) {
     }
     return points[1] - points[0];
 }
-// https://d3js.org/d3-selection/joining#selection_data
-export const isNodeContainsD3Data = (node) => {
-    return Boolean(node && '__data__' in node);
-};
-export const extractD3DataFromNode = (node) => {
-    return node.__data__;
-};

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -363,11 +363,6 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                         mouseOut: () => void;
                         click: (event: any) => void;
                     };
-                    point: {
-                        events: {
-                            click: (event: any) => boolean;
-                        };
-                    };
                     marker: {
                         states: {
                             hover: {

package/build/plugins/highcharts/renderer/helpers/config/config.d.ts

@@ -526,11 +526,6 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
                 mouseOut: () => void;
                 click: (event: any) => void;
             };
-            point: {
-                events: {
-                    click: (event: any) => boolean;
-                };
-            };
             marker: {
                 states: {
                     hover: {

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -2,7 +2,6 @@
 import { dateTime } from '@gravity-ui/date-utils';
 import Highcharts from 'highcharts';
 import clamp from 'lodash/clamp';
-import debounce from 'lodash/debounce';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import isNumber from 'lodash/isNumber';
@@ -1152,7 +1151,6 @@ export function prepareConfig(data, options, isMobile, holidays) {
     const chartType = get(options, 'highcharts.chart.type') || 'line';
     const { entryId } = options;
     const testClassName = `data-qa-chartkit-tooltip-entry-${entryId}`;
-    const debouncedAdjustDonutFontSize = debounce(adjustDonutFontSize, 100);
     const params = merge(getParamsByCustomType(options.type, options), defaultOptions, Object.assign({ _config: options, chart: {
             events: Object.assign({ load: function () {
                     var _a;
@@ -1231,7 +1229,7 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     const chartSeries = chart.series[0];
                     const innerWidth = chartSeries === null || chartSeries === void 0 ? void 0 : chartSeries.center[3];
                     if (innerWidth) {
-                        debouncedAdjustDonutFontSize(chart, chartSeries, innerWidth, totals);
+                        adjustDonutFontSize(chart, chartSeries, innerWidth, totals);
                     }
                 },
             })),
@@ -1266,18 +1264,6 @@ export function prepareConfig(data, options, isMobile, holidays) {
                         }
                     },
                 },
-                point: {
-                    events: {
-                        click: function (event) {
-                            if (event.shiftKey) {
-                                this.series.chart.tooltip.hide();
-                                this.series.data[this.index].remove();
-                                return true;
-                            }
-                            return false;
-                        },
-                    },
-                },
                 marker: options.splitTooltip
                     ? {
                         states: {

package/build/plugins/highcharts/renderer/helpers/config/options.js

@@ -57,7 +57,7 @@ const first = {
 };
 const second = {
     allowPointSelect: true,
-    slicedOffset: 20,
+    slicedOffset: 0,
     cursor: 'pointer',
     showInLegend: true,
 };

package/build/plugins/highcharts/renderer/helpers/graph.d.ts

@@ -357,11 +357,6 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
                     mouseOut: () => void;
                     click: (event: any) => void;
                 };
-                point: {
-                    events: {
-                        click: (event: any) => boolean;
-                    };
-                };
                 marker: {
                     states: {
                         hover: {

package/build/types/widget-data/tooltip.d.ts

@@ -50,7 +50,9 @@ export type TooltipDataChunkTreemap<T = any> = {
     data: TreemapSeriesData<T>;
     series: TreemapSeries<T>;
 };
-export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T>;
+export type TooltipDataChunk<T = any> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T>) & {
+    closest?: boolean;
+};
 export type ChartKitWidgetTooltip<T = any> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { Dispatch } from 'd3';
-import type { ShapeData } from '../../hooks';
-type Args = {
-    boundsWidth: number;
-    boundsHeight: number;
-    dispatcher: Dispatch<object>;
-    shapesData: ShapeData[];
-    svgContainer: SVGSVGElement | null;
-};
-export declare const TooltipTriggerArea: (args: Args) => React.JSX.Element;
-export {};

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.js

@@ -1,153 +0,0 @@
-import React from 'react';
-import { bisector, group, pointer, sort } from 'd3';
-import get from 'lodash/get';
-import throttle from 'lodash/throttle';
-import { extractD3DataFromNode, isNodeContainsD3Data } from '../../utils';
-const THROTTLE_DELAY = 50;
-const isNodeContainsData = (node) => {
-    return isNodeContainsD3Data(node);
-};
-function getBarXShapeData(args) {
-    var _a;
-    const { shapesData, point: [pointerX, pointerY], top, left, xData, container, } = args;
-    const barWidthOffset = shapesData[0].width / 2;
-    const xPosition = pointerX - left - barWidthOffset;
-    const xDataIndex = bisector((d) => d.x).center(xData, xPosition);
-    const xNodes = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(`[x="${(_a = xData[xDataIndex]) === null || _a === void 0 ? void 0 : _a.x}"]`)) || []);
-    if (xNodes.length === 1 && isNodeContainsData(xNodes[0])) {
-        return [extractD3DataFromNode(xNodes[0])];
-    }
-    if (xNodes.length > 1 && xNodes.every(isNodeContainsData)) {
-        const yPosition = pointerY - top;
-        const xyNode = xNodes.find((node, i) => {
-            const { y, height } = extractD3DataFromNode(node);
-            if (i === xNodes.length - 1) {
-                return yPosition <= y + height;
-            }
-            return yPosition >= y && yPosition <= y + height;
-        });
-        if (xyNode) {
-            return [extractD3DataFromNode(xyNode)];
-        }
-    }
-    return [];
-}
-function getLineShapesData(args) {
-    const { xData, point: [pointerX], } = args;
-    const xDataIndex = bisector((d) => d.x).center(xData, pointerX);
-    const selectedLineShape = xData[xDataIndex];
-    if (selectedLineShape) {
-        return [
-            {
-                series: selectedLineShape.series,
-                data: selectedLineShape.data,
-            },
-        ];
-    }
-    return [];
-}
-function getBarYData(args) {
-    var _a;
-    const { data, point: [pointerX, pointerY], } = args;
-    const yDataIndex = bisector((d) => d.y).center(data, pointerY);
-    const shapesByY = ((_a = data[yDataIndex]) === null || _a === void 0 ? void 0 : _a.items) || [];
-    const xDataIndex = bisector((d) => d.x).left(shapesByY, pointerX);
-    const result = shapesByY[Math.min(xDataIndex, shapesByY.length - 1)];
-    return result
-        ? [
-            {
-                series: result.series,
-                data: result.data,
-            },
-        ]
-        : [];
-}
-export const TooltipTriggerArea = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, shapesData, svgContainer } = args;
-    const rectRef = React.useRef(null);
-    const xBarData = React.useMemo(() => {
-        const result = shapesData
-            .filter((sd) => get(sd, 'series.type') === 'bar-x')
-            .map((sd) => ({ x: sd.x, data: sd }));
-        return sort(result, (item) => item.x);
-    }, [shapesData]);
-    const xLineData = React.useMemo(() => {
-        const result = shapesData
-            .filter((sd) => ['line', 'area'].includes(sd.series.type))
-            .reduce((acc, sd) => {
-            return acc.concat(sd.points.map((d) => ({
-                x: d.x,
-                data: d.data,
-                series: d.series,
-            })));
-        }, []);
-        return sort(result, (item) => item.x);
-    }, [shapesData]);
-    const barYData = React.useMemo(() => {
-        const barYShapeData = shapesData.filter((sd) => get(sd, 'series.type') === 'bar-y');
-        const result = Array.from(group(barYShapeData, (sd) => sd.y)).map(([y, shapes]) => {
-            const yValue = y + shapes[0].height / 2;
-            return {
-                y: yValue,
-                items: sort(shapes.map((shape) => {
-                    const preparedData = shape;
-                    return {
-                        x: preparedData.x + preparedData.width,
-                        data: preparedData.data,
-                        series: preparedData.series,
-                    };
-                }), (item) => item.x),
-            };
-        });
-        return sort(result, (item) => item.y);
-    }, [shapesData]);
-    const getShapeData = (point) => {
-        var _a, _b;
-        const { left: ownLeft, top: ownTop } = ((_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
-            left: 0,
-            top: 0,
-        };
-        const { left: containerLeft, top: containerTop } = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || {
-            left: 0,
-            top: 0,
-        };
-        const [pointerX, pointerY] = point; //pointer(e, svgContainer);
-        const result = [];
-        result === null || result === void 0 ? void 0 : result.push(...getBarXShapeData({
-            shapesData,
-            point: [pointerX, pointerY],
-            left: ownLeft - containerLeft,
-            top: ownTop - containerTop,
-            xData: xBarData,
-            container: (_b = rectRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
-        }), ...getLineShapesData({
-            xData: xLineData,
-            point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
-        }), ...getBarYData({
-            data: barYData,
-            point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
-        }));
-        return result;
-    };
-    const handleMouseMove = (e) => {
-        const [pointerX, pointerY] = pointer(e, svgContainer);
-        const hoverShapeData = getShapeData([pointerX, pointerY]);
-        if (hoverShapeData.length) {
-            const position = [pointerX, pointerY];
-            dispatcher.call('hover-shape', e.target, hoverShapeData, position);
-        }
-    };
-    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = () => {
-        throttledHandleMouseMove.cancel();
-        dispatcher.call('hover-shape', {}, undefined);
-    };
-    const handleClick = (e) => {
-        const [pointerX, pointerY] = pointer(e, svgContainer);
-        const shapeData = getShapeData([pointerX, pointerY]);
-        if (shapeData.length) {
-            dispatcher.call('click-chart', undefined, { point: get(shapeData, '[0].data'), series: get(shapeData, '[0].series') }, e);
-        }
-    };
-    return (React.createElement("rect", { ref: rectRef, width: boundsWidth, height: boundsHeight, fill: "transparent", onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleClick }));
-};