@mui/x-charts 7.0.0-alpha.3 → 7.0.0-alpha.4

package/legacy/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Delaunay } from 'd3-delaunay';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { InteractionContext } from '../context/InteractionProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { getSVGPoint } from '../internals/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartsVoronoiHandler(props) {
+  var _React$useContext$sca;
+  var voronoiMaxRadius = props.voronoiMaxRadius;
+  var svgRef = React.useContext(SVGContext);
+  var _React$useContext = React.useContext(DrawingContext),
+    width = _React$useContext.width,
+    height = _React$useContext.height,
+    top = _React$useContext.top,
+    left = _React$useContext.left;
+  var _React$useContext2 = React.useContext(CartesianContext),
+    xAxis = _React$useContext2.xAxis,
+    yAxis = _React$useContext2.yAxis,
+    xAxisIds = _React$useContext2.xAxisIds,
+    yAxisIds = _React$useContext2.yAxisIds;
+  var _React$useContext3 = React.useContext(InteractionContext),
+    dispatch = _React$useContext3.dispatch;
+  var _ref = (_React$useContext$sca = React.useContext(SeriesContext).scatter) != null ? _React$useContext$sca : {},
+    series = _ref.series,
+    seriesOrder = _ref.seriesOrder;
+  var voronoiRef = React.useRef({});
+  var defaultXAxisId = xAxisIds[0];
+  var defaultYAxisId = yAxisIds[0];
+  useEnhancedEffect(function () {
+    dispatch({
+      type: 'updateVoronoiUsage',
+      useVoronoiInteraction: true
+    });
+    return function () {
+      dispatch({
+        type: 'updateVoronoiUsage',
+        useVoronoiInteraction: false
+      });
+    };
+  }, [dispatch]);
+  useEnhancedEffect(function () {
+    if (seriesOrder === undefined || series === undefined) {
+      // If there is no scatter chart series
+      return;
+    }
+    voronoiRef.current = {};
+    var points = [];
+    seriesOrder.forEach(function (seriesId) {
+      var _series$seriesId = series[seriesId],
+        data = _series$seriesId.data,
+        xAxisKey = _series$seriesId.xAxisKey,
+        yAxisKey = _series$seriesId.yAxisKey;
+      var xScale = xAxis[xAxisKey != null ? xAxisKey : defaultXAxisId].scale;
+      var yScale = yAxis[yAxisKey != null ? yAxisKey : defaultYAxisId].scale;
+      var getXPosition = getValueToPositionMapper(xScale);
+      var getYPosition = getValueToPositionMapper(yScale);
+      var seriesPoints = data.flatMap(function (_ref2) {
+        var x = _ref2.x,
+          y = _ref2.y;
+        return [getXPosition(x), getYPosition(y)];
+      });
+      voronoiRef.current[seriesId] = {
+        startIndex: points.length,
+        endIndex: points.length + seriesPoints.length
+      };
+      points = points.concat(seriesPoints);
+    });
+    voronoiRef.current.delauney = new Delaunay(points);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+  React.useEffect(function () {
+    var element = svgRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    var handleMouseOut = function handleMouseOut() {
+      dispatch({
+        type: 'exitChart'
+      });
+    };
+
+    // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
+    var handleMouseMove = function handleMouseMove(event) {
+      var _voronoiRef$current$d;
+      // Get mouse coordinate in global SVG space
+      var svgPoint = getSVGPoint(svgRef.current, event);
+      var outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      var outsideY = svgPoint.y < top || svgPoint.y > top + height;
+      if (outsideX || outsideY) {
+        dispatch({
+          type: 'exitChart'
+        });
+        return;
+      }
+      if (!voronoiRef.current.delauney) {
+        return;
+      }
+      var closestPointIndex = (_voronoiRef$current$d = voronoiRef.current.delauney) == null ? void 0 : _voronoiRef$current$d.find(svgPoint.x, svgPoint.y);
+      if (closestPointIndex !== undefined) {
+        var seriesId = Object.keys(voronoiRef.current).find(function (id) {
+          if (id === 'delauney') {
+            return false;
+          }
+          return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
+        });
+        if (seriesId === undefined) {
+          return;
+        }
+        var dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
+        if (voronoiMaxRadius !== undefined) {
+          var pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
+          var pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
+          var dist2 = Math.pow(pointX - svgPoint.x, 2) + Math.pow(pointY - svgPoint.y, 2);
+          if (dist2 > Math.pow(voronoiMaxRadius, 2)) {
+            // The closest point is too far to be considered.
+            dispatch({
+              type: 'leaveItem',
+              data: {
+                type: 'scatter',
+                seriesId: seriesId,
+                dataIndex: dataIndex
+              }
+            });
+            return;
+          }
+        }
+        dispatch({
+          type: 'enterItem',
+          data: {
+            type: 'scatter',
+            seriesId: seriesId,
+            dataIndex: dataIndex
+          }
+        });
+      }
+    };
+    element.addEventListener('mouseout', handleMouseOut);
+    element.addEventListener('mousemove', handleMouseMove);
+    return function () {
+      element.removeEventListener('mouseout', handleMouseOut);
+      element.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]);
+  return /*#__PURE__*/_jsx("g", {}); // Workaround to fix docs scripts
+}
+process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number
+} : void 0;
+export { ChartsVoronoiHandler };

package/legacy/ChartsVoronoiHandler/index.js

@@ -0,0 +1 @@
+export * from './ChartsVoronoiHandler';

package/legacy/ScatterChart/Scatter.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getValueToPositionMapper } from '../hooks/useScale';
@@ -22,9 +22,17 @@ function Scatter(props) {
     yScale = props.yScale,
     color = props.color,
     markerSize = props.markerSize;
+  var highlightScope = React.useMemo(function () {
+    return _extends({
+      highlighted: 'item',
+      faded: 'global'
+    }, series.highlightScope);
+  }, [series.highlightScope]);
   var _React$useContext = React.useContext(InteractionContext),
-    item = _React$useContext.item;
-  var getInteractionItemProps = useInteractionItemProps(series.highlightScope);
+    item = _React$useContext.item,
+    useVoronoiInteraction = _React$useContext.useVoronoiInteraction;
+  var skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  var getInteractionItemProps = useInteractionItemProps(highlightScope, skipInteractionHandlers);
   var cleanData = React.useMemo(function () {
     var getXPosition = getValueToPositionMapper(xScale);
     var getYPosition = getValueToPositionMapper(yScale);
@@ -46,23 +54,25 @@ function Scatter(props) {
         dataIndex: i
       };
       if (isInRange) {
+        var isHighlighted = getIsHighlighted(item, pointCtx, highlightScope);
         temp.push({
           x: x,
           y: y,
-          isFaded: !getIsHighlighted(item, pointCtx, series.highlightScope) && getIsFaded(item, pointCtx, series.highlightScope),
+          isHighlighted: isHighlighted,
+          isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id
         });
       }
     }
     return temp;
-  }, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
+  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(function (dataPoint) {
       return /*#__PURE__*/_jsx("circle", _extends({
         cx: 0,
         cy: 0,
-        r: markerSize,
+        r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
         transform: "translate(".concat(dataPoint.x, ", ").concat(dataPoint.y, ")"),
         fill: color,
         opacity: dataPoint.isFaded && 0.3 || 1
@@ -84,6 +94,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     })).isRequired,
+    disableHover: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])

package/legacy/ScatterChart/ScatterChart.js

@@ -7,6 +7,7 @@ import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -25,6 +26,8 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
     series = props.series,
     tooltip = props.tooltip,
     axisHighlight = props.axisHighlight,
+    voronoiMaxRadius = props.voronoiMaxRadius,
+    disableVoronoi = props.disableVoronoi,
     legend = props.legend,
     width = props.width,
     height = props.height,
@@ -52,7 +55,9 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
-    children: [/*#__PURE__*/_jsx(ChartsAxis, {
+    children: [!disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, {
+      voronoiMaxRadius: voronoiMaxRadius
+    }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
@@ -126,6 +131,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -218,6 +228,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     })).isRequired,
+    disableHover: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -283,6 +294,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    * @default undefined

package/legacy/SparkLineChart/SparkLineChart.js

@@ -84,6 +84,7 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     sx: sx,
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
+      skipAnimation: true,
       slots: slots,
       slotProps: slotProps,
       sx: {

package/legacy/context/InteractionProvider.js

@@ -8,6 +8,7 @@ export var InteractionContext = /*#__PURE__*/React.createContext({
     x: null,
     y: null
   },
+  useVoronoiInteraction: false,
   dispatch: function dispatch() {
     return null;
   }
@@ -18,6 +19,21 @@ var dataReducer = function dataReducer(prevState, action) {
       return _extends({}, prevState, {
         item: action.data
       });
+    case 'exitChart':
+      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      });
+    case 'updateVoronoiUsage':
+      return _extends({}, prevState, {
+        useVoronoiInteraction: action.useVoronoiInteraction
+      });
     case 'leaveItem':
       if (prevState.item === null || Object.keys(action.data).some(function (key) {
         return action.data[key] !== prevState.item[key];
@@ -29,6 +45,9 @@ var dataReducer = function dataReducer(prevState, action) {
         item: null
       });
     case 'updateAxis':
+      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
+        return prevState;
+      }
       return _extends({}, prevState, {
         axis: action.data
       });
@@ -43,7 +62,8 @@ export function InteractionProvider(_ref) {
       axis: {
         x: null,
         y: null
-      }
+      },
+      useVoronoiInteraction: false
     }),
     _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
     data = _React$useReducer2[0],

package/legacy/hooks/useAxisEvents.js

@@ -4,6 +4,10 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SVGContext, DrawingContext } from '../context/DrawingProvider';
 import { isBandScale } from '../internals/isBandScale';
+import { getSVGPoint } from '../internals/utils';
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
 export var useAxisEvents = function useAxisEvents(disableAxisListener) {
   var svgRef = React.useContext(SVGContext);
   var _React$useContext = React.useContext(DrawingContext),
@@ -44,17 +48,18 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
             value: value
           };
         }
-        var closestIndex = axisData == null ? void 0 : axisData.findIndex(function (v, index) {
-          if (v > value) {
-            // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
+        var valueAsNumber = getAsANumber(value);
+        var closestIndex = axisData == null ? void 0 : axisData.findIndex(function (pointValue, index) {
+          var v = getAsANumber(pointValue);
+          if (v > valueAsNumber) {
+            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
               return true;
             }
           }
-          if (v <= value) {
+          if (v <= valueAsNumber) {
             if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }
@@ -80,37 +85,25 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
         y: -1
       };
       dispatch({
-        type: 'updateAxis',
-        data: {
-          x: null,
-          y: null
-        }
+        type: 'exitChart'
       });
     };
     var handleMouseMove = function handleMouseMove(event) {
-      // Get mouse coordinate in global SVG space
-      var pt = svgRef.current.createSVGPoint();
-      pt.x = event.clientX;
-      pt.y = event.clientY;
-      var svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
+      var svgPoint = getSVGPoint(svgRef.current, event);
       mousePosition.current = {
-        x: svgPt.x,
-        y: svgPt.y
+        x: svgPoint.x,
+        y: svgPoint.y
       };
-      var outsideX = svgPt.x < left || svgPt.x > left + width;
-      var outsideY = svgPt.y < top || svgPt.y > top + height;
+      var outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      var outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
-          type: 'updateAxis',
-          data: {
-            x: null,
-            y: null
-          }
+          type: 'exitChart'
         });
         return;
       }
-      var newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
-      var newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
+      var newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
+      var newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/legacy/hooks/useInteractionItemProps.js

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { HighlighContext } from '../context/HighlightProvider';
-export var useInteractionItemProps = function useInteractionItemProps(scope) {
+export var useInteractionItemProps = function useInteractionItemProps(scope, skip) {
   var _React$useContext = React.useContext(InteractionContext),
     dispatchInteraction = _React$useContext.dispatch;
   var _React$useContext2 = React.useContext(HighlighContext),
     dispatchHighlight = _React$useContext2.dispatch;
+  if (skip) {
+    return function () {
+      return {};
+    };
+  }
   var getInteractionItemProps = function getInteractionItemProps(data) {
     var onMouseEnter = function onMouseEnter() {
       dispatchInteraction({

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.3
+ * @mui/x-charts v7.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18,6 +18,7 @@ export * from './ChartsYAxis';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
+export * from './ChartsVoronoiHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/legacy/internals/utils.js

@@ -2,4 +2,15 @@
 export function getSymbol(shape) {
   var symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
+}
+/**
+ * Transform mouse event position to corrdinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export function getSVGPoint(svg, event) {
+  var pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
 }

package/models/seriesType/scatter.d.ts

@@ -10,6 +10,11 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     data: ScatterValueType[];
     markerSize?: number;
     label?: string;
+    /**
+     * If true, the interaction will not use element hover for this series.
+     * @default false
+     */
+    disableHover?: boolean;
 }
 /**
  * An object that allows to identify a single scatter item.

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Delaunay } from 'd3-delaunay';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { InteractionContext } from '../context/InteractionProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { getSVGPoint } from '../internals/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartsVoronoiHandler(props) {
+  const {
+    voronoiMaxRadius
+  } = props;
+  const svgRef = React.useContext(SVGContext);
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(DrawingContext);
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+  const {
+    dispatch
+  } = React.useContext(InteractionContext);
+  const {
+    series,
+    seriesOrder
+  } = React.useContext(SeriesContext).scatter ?? {};
+  const voronoiRef = React.useRef({});
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  useEnhancedEffect(() => {
+    dispatch({
+      type: 'updateVoronoiUsage',
+      useVoronoiInteraction: true
+    });
+    return () => {
+      dispatch({
+        type: 'updateVoronoiUsage',
+        useVoronoiInteraction: false
+      });
+    };
+  }, [dispatch]);
+  useEnhancedEffect(() => {
+    if (seriesOrder === undefined || series === undefined) {
+      // If there is no scatter chart series
+      return;
+    }
+    voronoiRef.current = {};
+    let points = [];
+    seriesOrder.forEach(seriesId => {
+      const {
+        data,
+        xAxisKey,
+        yAxisKey
+      } = series[seriesId];
+      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const getXPosition = getValueToPositionMapper(xScale);
+      const getYPosition = getValueToPositionMapper(yScale);
+      const seriesPoints = data.flatMap(({
+        x,
+        y
+      }) => [getXPosition(x), getYPosition(y)]);
+      voronoiRef.current[seriesId] = {
+        startIndex: points.length,
+        endIndex: points.length + seriesPoints.length
+      };
+      points = points.concat(seriesPoints);
+    });
+    voronoiRef.current.delauney = new Delaunay(points);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    const handleMouseOut = () => {
+      dispatch({
+        type: 'exitChart'
+      });
+    };
+
+    // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
+    const handleMouseMove = event => {
+      // Get mouse coordinate in global SVG space
+      const svgPoint = getSVGPoint(svgRef.current, event);
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
+      if (outsideX || outsideY) {
+        dispatch({
+          type: 'exitChart'
+        });
+        return;
+      }
+      if (!voronoiRef.current.delauney) {
+        return;
+      }
+      const closestPointIndex = voronoiRef.current.delauney?.find(svgPoint.x, svgPoint.y);
+      if (closestPointIndex !== undefined) {
+        const seriesId = Object.keys(voronoiRef.current).find(id => {
+          if (id === 'delauney') {
+            return false;
+          }
+          return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
+        });
+        if (seriesId === undefined) {
+          return;
+        }
+        const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
+        if (voronoiMaxRadius !== undefined) {
+          const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
+          const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
+          const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
+          if (dist2 > voronoiMaxRadius ** 2) {
+            // The closest point is too far to be considered.
+            dispatch({
+              type: 'leaveItem',
+              data: {
+                type: 'scatter',
+                seriesId,
+                dataIndex
+              }
+            });
+            return;
+          }
+        }
+        dispatch({
+          type: 'enterItem',
+          data: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        });
+      }
+    };
+    element.addEventListener('mouseout', handleMouseOut);
+    element.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      element.removeEventListener('mouseout', handleMouseOut);
+      element.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]);
+  return /*#__PURE__*/_jsx("g", {}); // Workaround to fix docs scripts
+}
+process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number
+} : void 0;
+export { ChartsVoronoiHandler };

package/modern/ChartsVoronoiHandler/index.js

@@ -0,0 +1 @@
+export * from './ChartsVoronoiHandler';