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

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

@@ -3,9 +3,9 @@ import { clampAngleRad } from "../../../clampAngle.js";
 
 /**
  * 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.
  */
-export function getAxisValue(axisConfig, pointerValue) {
+export function getAxisIndex(axisConfig, pointerValue) {
   const {
     scale,
     data: axisData,
@@ -14,20 +14,25 @@ export function getAxisValue(axisConfig, pointerValue) {
   if (!isBandScale(scale)) {
     throw new Error('MUI X: getAxisValue is not implemented for polare continuous axes.');
   }
+  if (!axisData) {
+    return -1;
+  }
   const angleGap = 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.
+ */
+export 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/modern/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -6,10 +6,10 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { defaultizeAxis } from "./defaultizeAxis.js";
-import { getAxisValue } from "./getAxisValue.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
 import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
 import { getSVGPoint } from "../../../getSVGPoint.js";
+import { generatePolar2svg, generateSvg2polar, generateSvg2rotation } from "./coordinateTransformation.js";
 export const useChartPolarAxis = ({
   params,
   store,
@@ -56,14 +56,18 @@ export 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(() => generateSvg2rotation({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
+  const svg2polar = React.useMemo(() => generateSvg2polar({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
+  const polar2svg = React.useMemo(() => generatePolar2svg({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
   const usedRotationAxisId = rotationAxisIds[0];
   const usedRadiusAxisId = radiusAxisIds[0];
 
@@ -97,15 +101,7 @@ export const useChartPolarAxis = ({
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
-          store.update(prev => _extends({}, prev, {
-            interaction: {
-              item: null,
-              axis: {
-                x: null,
-                y: null
-              }
-            }
-          }));
+          instance?.cleanInteraction();
           mousePosition.current.isInChart = false;
         }
         return;
@@ -116,25 +112,13 @@ export const useChartPolarAxis = ({
       const maxRadius = radiusAxisWithScale[usedRadiusAxisId].scale.range()[1];
       if (radiusSquare > maxRadius ** 2) {
         if (mousePosition.current.isInChart) {
-          store.update(prev => _extends({}, 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: getAxisValue(rotationAxisWithScale[usedRotationAxisId], angle),
-        y: null
-      });
+      instance.setPointerCoordinate?.(svgPoint);
     };
     const handleDown = event => {
       const target = event.currentTarget;