@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.2

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getAxisIndex = getAxisIndex;
 exports.getAxisValue = getAxisValue;
 var _isBandScale = require("../../../isBandScale");
 var _clampAngle = require("../../../clampAngle");
 /**
  * For a pointer coordinate, this function returns the value and dataIndex associated.
- * Returns `null` if the coordinate is outside of values.
+ * Returns `-1` if the coordinate does not match a value.
  */
-function getAxisValue(axisConfig, pointerValue) {
+function getAxisIndex(axisConfig, pointerValue) {
   const {
     scale,
     data: axisData,
@@ -19,20 +20,25 @@ function getAxisValue(axisConfig, pointerValue) {
   if (!(0, _isBandScale.isBandScale)(scale)) {
     throw new Error('MUI X: getAxisValue is not implemented for polare continuous axes.');
   }
+  if (!axisData) {
+    return -1;
+  }
   const angleGap = (0, _clampAngle.clampAngleRad)(pointerValue - Math.min(...scale.range()));
   const dataIndex = scale.bandwidth() === 0 ? Math.floor((angleGap + scale.step() / 2) / scale.step()) % axisData.length : Math.floor(angleGap / scale.step());
   if (dataIndex < 0 || dataIndex >= axisData.length) {
-    return null;
+    return -1;
   }
-  if (reverse) {
-    const reverseIndex = axisData.length - 1 - dataIndex;
-    return {
-      index: reverseIndex,
-      value: axisData[reverseIndex]
-    };
+  return reverse ? axisData.length - 1 - dataIndex : dataIndex;
+}
+
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `null` if the coordinate is outside of values.
+ */
+function getAxisValue(axisConfig, pointerValue) {
+  const dataIndex = getAxisIndex(axisConfig, pointerValue);
+  if (dataIndex < 0) {
+    return null;
   }
-  return {
-    index: dataIndex,
-    value: axisData[dataIndex]
-  };
+  return axisConfig.data?.[dataIndex];
 }

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -13,10 +13,10 @@ var _warning = require("@mui/x-internals/warning");
 var _useSelector = require("../../../store/useSelector");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _defaultizeAxis = require("./defaultizeAxis");
-var _getAxisValue = require("./getAxisValue");
 var _useChartInteraction = require("../useChartInteraction");
 var _useChartPolarAxis = require("./useChartPolarAxis.selectors");
 var _getSVGPoint = require("../../../getSVGPoint");
+var _coordinateTransformation = require("./coordinateTransformation");
 const useChartPolarAxis = ({
   params,
   store,
@@ -63,14 +63,18 @@ const useChartPolarAxis = ({
       })
     }));
   }, [seriesConfig, drawingArea, rotationAxis, radiusAxis, dataset, store]);
-  const svg2rotation = React.useCallback((x, y) => Math.atan2(x - center.cx, center.cy - y), [center.cx, center.cy]);
-  const svg2polar = React.useCallback((x, y) => {
-    const angle = Math.atan2(x - center.cx, center.cy - y);
-    return [Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2), angle];
-  }, [center.cx, center.cy]);
-  const polar2svg = React.useCallback((radius, rotation) => {
-    return [center.cx + radius * Math.sin(rotation), center.cy - radius * Math.cos(rotation)];
-  }, [center.cx, center.cy]);
+  const svg2rotation = React.useMemo(() => (0, _coordinateTransformation.generateSvg2rotation)({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
+  const svg2polar = React.useMemo(() => (0, _coordinateTransformation.generateSvg2polar)({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
+  const polar2svg = React.useMemo(() => (0, _coordinateTransformation.generatePolar2svg)({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
   const usedRotationAxisId = rotationAxisIds[0];
   const usedRadiusAxisId = radiusAxisIds[0];
 
@@ -104,15 +108,7 @@ const useChartPolarAxis = ({
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
-          store.update(prev => (0, _extends2.default)({}, prev, {
-            interaction: {
-              item: null,
-              axis: {
-                x: null,
-                y: null
-              }
-            }
-          }));
+          instance?.cleanInteraction();
           mousePosition.current.isInChart = false;
         }
         return;
@@ -123,25 +119,13 @@ const useChartPolarAxis = ({
       const maxRadius = radiusAxisWithScale[usedRadiusAxisId].scale.range()[1];
       if (radiusSquare > maxRadius ** 2) {
         if (mousePosition.current.isInChart) {
-          store.update(prev => (0, _extends2.default)({}, prev, {
-            interaction: {
-              item: null,
-              axis: {
-                x: null,
-                y: null
-              }
-            }
-          }));
+          instance?.cleanInteraction();
           mousePosition.current.isInChart = false;
         }
         return;
       }
       mousePosition.current.isInChart = true;
-      const angle = svg2rotation(svgPoint.x, svgPoint.y);
-      instance.setAxisInteraction?.({
-        x: (0, _getAxisValue.getAxisValue)(rotationAxisWithScale[usedRotationAxisId], angle),
-        y: null
-      });
+      instance.setPointerCoordinate?.(svgPoint);
     };
     const handleDown = event => {
       const target = event.currentTarget;