@mui/x-charts 8.14.0 → 8.14.1

package/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findClosestPoints = findClosestPoints;
+var _scaleGuards = require("../../../scaleGuards");
+function findClosestPoints(flatbush, drawingArea, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1) {
+  const originalXScale = xScale.copy();
+  const originalYScale = yScale.copy();
+  originalXScale.range([0, 1]);
+  originalYScale.range([0, 1]);
+  const excludeIfOutsideDrawingArea = function excludeIfOutsideDrawingArea(index) {
+    const x = originalXScale(seriesData[index].x);
+    const y = originalYScale(seriesData[index].y);
+    return x >= xZoomStart && x <= xZoomEnd && y >= yZoomStart && y <= yZoomEnd;
+  };
+
+  // We need to convert the distance from the original range [0, 1] to the current drawing area
+  // so the comparison is done on pixels instead of normalized values.
+  // fx and fy are the factors to convert the distance from [0, 1] to the current drawing area.
+  const fx = xScale.range()[1] - xScale.range()[0];
+  const fy = yScale.range()[1] - yScale.range()[0];
+  const fxSq = fx * fx;
+  const fySq = fy * fy;
+  function sqDistFn(dx, dy) {
+    return fxSq * dx * dx + fySq * dy * dy;
+  }
+  const pointX = originalXScale(invertScale(xScale, svgPointX, dataIndex => seriesData[dataIndex].x));
+  const pointY = originalYScale(invertScale(yScale, svgPointY, dataIndex => seriesData[dataIndex].y));
+  return flatbush.neighbors(pointX, pointY, maxResults, maxRadius != null ? maxRadius * maxRadius : Infinity, excludeIfOutsideDrawingArea, sqDistFn);
+}
+function invertScale(scale, value, getDataPoint) {
+  if ((0, _scaleGuards.isOrdinalScale)(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return getDataPoint(dataIndex);
+  }
+  return scale.invert(value);
+}

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -11,13 +11,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
-var _useScale = require("../../../../hooks/useScale");
 var _getSVGPoint = require("../../../getSVGPoint");
 var _useSelector = require("../../../store/useSelector");
 var _useChartCartesianAxis = require("../useChartCartesianAxis");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
+var _findClosestPoints = require("./findClosestPoints");
 const useChartClosestPoint = ({
   svgRef,
   params,
@@ -43,9 +42,7 @@ const useChartClosestPoint = ({
     series,
     seriesOrder
   } = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed)?.scatter ?? {};
-  const voronoiRef = React.useRef({});
-  const delauneyRef = React.useRef(undefined);
-  const lastFind = React.useRef(undefined);
+  const flatbushMap = (0, _useSelector.useSelector)(store, zoomIsInteracting ? _useChartCartesianAxis.selectorChartSeriesEmptyFlatbushMap : _useChartCartesianAxis.selectorChartSeriesFlatbushMap);
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
@@ -55,52 +52,6 @@ const useChartClosestPoint = ({
       }
     }));
   }, [store, disableVoronoi]);
-  (0, _useEnhancedEffect.default)(() => {
-    // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
-
-    if (zoomIsInteracting || seriesOrder === undefined || series === undefined || disableVoronoi) {
-      // If there is no scatter chart series
-      return;
-    }
-    voronoiRef.current = {};
-    let points = [];
-    seriesOrder.forEach(seriesId => {
-      const {
-        data,
-        xAxisId,
-        yAxisId
-      } = series[seriesId];
-      const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
-      const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-      const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-      const seriesPoints = [];
-      const seriesIndexes = [];
-      for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
-        const {
-          x,
-          y
-        } = data[dataIndex];
-        const pointX = getXPosition(x);
-        const pointY = getYPosition(y);
-        if (instance.isPointInside(pointX, pointY)) {
-          seriesPoints.push(pointX);
-          seriesPoints.push(pointY);
-          seriesIndexes.push(dataIndex);
-        }
-      }
-      voronoiRef.current[seriesId] = {
-        seriesId,
-        seriesIndexes,
-        startIndex: points.length,
-        endIndex: points.length + seriesPoints.length,
-        markerSize: series[seriesId].markerSize
-      };
-      points = points.concat(seriesPoints);
-    });
-    delauneyRef.current = new _d3Delaunay.Delaunay(points);
-    lastFind.current = undefined;
-  }, [zoomIsInteracting, defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance, disableVoronoi]);
   React.useEffect(() => {
     if (svgRef.current === null || disableVoronoi) {
       return undefined;
@@ -110,40 +61,48 @@ const useChartClosestPoint = ({
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
-        lastFind.current = undefined;
         return 'outside-chart';
       }
-      if (!delauneyRef.current) {
-        return 'no-point-found';
-      }
-      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y, lastFind.current);
-      if (closestPointIndex === undefined) {
-        return 'no-point-found';
+      let closestPoint = undefined;
+      for (const seriesId of seriesOrder ?? []) {
+        const aSeries = (series ?? {})[seriesId];
+        const flatbush = flatbushMap.get(seriesId);
+        if (!flatbush) {
+          continue;
+        }
+        const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+        const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+        const xAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.getSnapshot(), xAxisId);
+        const yAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.getSnapshot(), yAxisId);
+        const maxRadius = voronoiMaxRadius === 'item' ? aSeries.markerSize : voronoiMaxRadius;
+        const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
+        const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
+        const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
+        const yZoomEnd = (yAxisZoom?.end ?? 100) / 100;
+        const xScale = xAxis[xAxisId].scale;
+        const yScale = yAxis[yAxisId].scale;
+        const closestPointIndex = (0, _findClosestPoints.findClosestPoints)(flatbush, drawingArea, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
+        if (closestPointIndex === undefined) {
+          continue;
+        }
+        const point = aSeries.data[closestPointIndex];
+        const scaledX = xScale(point.x);
+        const scaledY = yScale(point.y);
+        const distSq = (scaledX - svgPoint.x) ** 2 + (scaledY - svgPoint.y) ** 2;
+        if (closestPoint === undefined || distSq < closestPoint.distanceSq) {
+          closestPoint = {
+            dataIndex: closestPointIndex,
+            seriesId,
+            distanceSq: distSq
+          };
+        }
       }
-      lastFind.current = closestPointIndex;
-      const closestSeries = Object.values(voronoiRef.current).find(value => {
-        return 2 * closestPointIndex >= value.startIndex && 2 * closestPointIndex < value.endIndex;
-      });
-      if (closestSeries === undefined) {
+      if (closestPoint === undefined) {
         return 'no-point-found';
       }
-
-      // The point index in the series with id=closestSeries.seriesId.
-      const seriesPointIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
-      const dataIndex = voronoiRef.current[closestSeries.seriesId].seriesIndexes[seriesPointIndex];
-      const maxRadius = voronoiMaxRadius === 'item' ? closestSeries.markerSize : voronoiMaxRadius;
-      if (maxRadius !== undefined) {
-        const pointX = delauneyRef.current.points[2 * closestPointIndex];
-        const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];
-        const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
-        if (dist2 > maxRadius ** 2) {
-          // The closest point is too far to be considered.
-          return 'outside-voronoi-max-radius';
-        }
-      }
       return {
-        seriesId: closestSeries.seriesId,
-        dataIndex
+        seriesId: closestPoint.seriesId,
+        dataIndex: closestPoint.dataIndex
       };
     }
 
@@ -218,7 +177,7 @@ const useChartClosestPoint = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
 
   // Instance implementation
   const enableVoronoiCallback = (0, _useEventCallback.default)(() => {

package/models/seriesType/scatter.d.ts

@@ -23,6 +23,8 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
   /**
    * If true, the interaction will not use element hover for this series.
    * @default false
+   * @deprecated This prop will be removed in a future version because it is ambiguous. You can select what to disable
+   *             on hover by disabling the highlight or the tooltip separately.
    */
   disableHover?: boolean;
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.14.0",
+  "version": "8.14.1",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -31,12 +31,13 @@
     "@mui/utils": "^7.3.3",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
+    "flatqueue": "^3.0.0",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-charts-vendor": "8.14.0",
-    "@mui/x-internal-gestures": "0.3.3",
-    "@mui/x-internals": "8.14.0"
+    "@mui/x-charts-vendor": "8.14.1",
+    "@mui/x-internals": "8.14.0",
+    "@mui/x-internal-gestures": "0.3.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/themeAugmentation/components.d.ts

@@ -62,6 +62,9 @@ export interface ChartsComponents<Theme = unknown> {
     defaultProps?: ComponentsProps['MuiScatterChart'];
   };
   MuiScatter?: {};
+  MuiGauge?: {
+    styleOverrides?: ComponentsOverrides<Theme>['MuiGauge'];
+  };
 }
 declare module '@mui/material/styles' {
   interface Components<Theme = unknown> extends ChartsComponents<Theme> {}

package/themeAugmentation/overrides.d.ts

@@ -1,3 +1,4 @@
+import { GaugeClassKey } from "../Gauge/index.js";
 import { BarLabelClassKey } from "../BarChart/index.js";
 import { BarElementClassKey } from "../BarChart/barElementClasses.js";
 import { ChartsAxisHighlightClassKey } from "../ChartsAxisHighlight/index.js";
@@ -18,6 +19,7 @@ export interface ChartsComponentNameToClassKey {
   MuiAreaElement: AreaElementClassKey;
   MuiLineElement: LineElementClassKey;
   MuiMarkElement: MarkElementClassKey;
+  MuiGauge: GaugeClassKey;
 }
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends ChartsComponentNameToClassKey {}