@mui/x-charts 9.0.4 → 9.2.0

package/LineChart/seriesConfig/curveEvaluation.d.mts

@@ -8,4 +8,22 @@ import type { CurveType } from "../../models/curve.mjs";
 export declare function evaluateCurveY(points: Array<{
   x: number;
   y: number;
-}>, targetX: number, curveType?: CurveType): number | null;
+}>, targetX: number, curveType?: CurveType): number | null;
+/**
+ * Build the curve segments for a set of pixel-coordinate points using d3's curve factory,
+ * then evaluate the point on the curve at the given angle.
+ *
+ * Returns null if no point on the curve matches the target angle.
+ */
+export declare function evaluateCurveAtAngle(
+/**
+ * The points only uses the x/y coordinate system, because internally curve factory only works with x/y coordinates.
+ * So angles/radius are lost during the curve generation.
+ */
+points: Array<{
+  x: number;
+  y: number;
+}>, targetAngle: number, curveType?: CurveType): {
+  x: number;
+  y: number;
+} | null;

package/LineChart/seriesConfig/curveEvaluation.d.ts

@@ -8,4 +8,22 @@ import type { CurveType } from "../../models/curve.js";
 export declare function evaluateCurveY(points: Array<{
   x: number;
   y: number;
-}>, targetX: number, curveType?: CurveType): number | null;
+}>, targetX: number, curveType?: CurveType): number | null;
+/**
+ * Build the curve segments for a set of pixel-coordinate points using d3's curve factory,
+ * then evaluate the point on the curve at the given angle.
+ *
+ * Returns null if no point on the curve matches the target angle.
+ */
+export declare function evaluateCurveAtAngle(
+/**
+ * The points only uses the x/y coordinate system, because internally curve factory only works with x/y coordinates.
+ * So angles/radius are lost during the curve generation.
+ */
+points: Array<{
+  x: number;
+  y: number;
+}>, targetAngle: number, curveType?: CurveType): {
+  x: number;
+  y: number;
+} | null;

package/LineChart/seriesConfig/curveEvaluation.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.evaluateCurveAtAngle = evaluateCurveAtAngle;
 exports.evaluateCurveY = evaluateCurveY;
+var _epsilon = require("../../utils/epsilon");
 var _getCurve = require("../../internals/getCurve");
+var _clampAngle = require("../../internals/clampAngle");
 var _cubiqSolver = require("../../internals/cubiqSolver");
 /**
  * A straight line segment.
@@ -90,6 +93,42 @@ function findTForX(segment, targetX) {
   return -1;
 }
 
+/**
+ * Find parameter t such that the segment's x(t) ≈ targetX using cubic roots.
+ */
+function findTForAngle(segment, targetAngle) {
+  if (!isBezierSegment(segment)) {
+    // Linear segment.
+    const DeltaY = segment.y1 - segment.y0;
+    const DeltaX = segment.x1 - segment.x0;
+    const dx = Math.sin(targetAngle);
+    const dy = -Math.cos(targetAngle);
+    if (Math.abs(dx) < _epsilon.EPSILON) {
+      if (Math.abs(DeltaX) < _epsilon.EPSILON) {
+        return -1;
+      }
+      return -segment.x0 / DeltaX;
+    }
+    if (Math.abs(dy) < _epsilon.EPSILON) {
+      if (Math.abs(DeltaY) < _epsilon.EPSILON) {
+        return -1;
+      }
+      return -segment.y0 / DeltaY;
+    }
+    return (segment.y0 / dy - segment.x0 / dx) / (DeltaX / dx - DeltaY / dy);
+  }
+  const xBezierCoeffs = cubicBezierCoeffs(segment.x0, segment.cpx1, segment.cpx2, segment.x1);
+  const yBezierCoeffs = cubicBezierCoeffs(segment.y0, segment.cpy1, segment.cpy2, segment.y1);
+  const targetX = Math.sin(targetAngle);
+  const targetY = -Math.cos(targetAngle);
+  const polyToSolve = [targetY * xBezierCoeffs[0] - targetX * yBezierCoeffs[0], targetY * xBezierCoeffs[1] - targetX * yBezierCoeffs[1], targetY * xBezierCoeffs[2] - targetX * yBezierCoeffs[2], targetY * xBezierCoeffs[3] - targetX * yBezierCoeffs[3]];
+  const roots = (0, _cubiqSolver.cubicRoots)(polyToSolve);
+  if (roots.length > 0) {
+    return roots[0];
+  }
+  return -1;
+}
+
 /** Evaluate the segment's y at parameter t. */
 function evaluateSegmentY(segment, t) {
   if (!isBezierSegment(segment)) {
@@ -98,6 +137,14 @@ function evaluateSegmentY(segment, t) {
   return cubicBezier(t, segment.y0, segment.cpy1, segment.cpy2, segment.y1);
 }
 
+/** Evaluate the segment's x at parameter t. */
+function evaluateSegmentX(segment, t) {
+  if (!isBezierSegment(segment)) {
+    return segment.x0 + t * (segment.x1 - segment.x0);
+  }
+  return cubicBezier(t, segment.x0, segment.cpx1, segment.cpx2, segment.x1);
+}
+
 /**
  * Build the curve segments for a set of pixel-coordinate points
  * using d3's curve factory, then evaluate y at the given pixel x.
@@ -136,4 +183,89 @@ function evaluateCurveY(points, targetX, curveType) {
     }
   }
   return null;
+}
+const vectorProduct = (a, b) => a.x * b.y - a.y * b.x;
+
+/**
+ * Build the curve segments for a set of pixel-coordinate points using d3's curve factory,
+ * then evaluate the point on the curve at the given angle.
+ *
+ * Returns null if no point on the curve matches the target angle.
+ */
+function evaluateCurveAtAngle(
+/**
+ * The points only uses the x/y coordinate system, because internally curve factory only works with x/y coordinates.
+ * So angles/radius are lost during the curve generation.
+ */
+points, targetAngle, curveType) {
+  if (points.length === 0) {
+    return null;
+  }
+  if (points.length === 1) {
+    return points[0];
+  }
+  const capture = new SegmentCapture();
+  const factory = (0, _getCurve.getCurveFactory)(curveType);
+  const curveInstance = factory(capture);
+  let pointsContainsOrigin = false;
+  curveInstance.lineStart();
+  for (const p of points) {
+    curveInstance.point(p.x, p.y);
+    if (p.x === 0 && p.y === 0) {
+      pointsContainsOrigin = true;
+    }
+  }
+  curveInstance.lineEnd();
+  const xTarget = Math.sin(targetAngle);
+  const yTarget = -Math.cos(targetAngle);
+  const pointTarget = {
+    x: xTarget,
+    y: yTarget
+  };
+
+  // Find the segment containing targetAngle.
+  for (const segment of capture.segments) {
+    const directionX0Target = vectorProduct({
+      x: segment.x0,
+      y: segment.y0
+    }, pointTarget);
+    const directionTargetX1 = vectorProduct(pointTarget, {
+      x: segment.x1,
+      y: segment.y1
+    });
+
+    // Test if target angle is between x0 and x1. To do so we check the sign of the vector product.
+    if (directionX0Target >= 0 && directionTargetX1 >= 0) {
+      const angle0 = Math.atan2(segment.x0, -segment.y0);
+      const angle1 = Math.atan2(segment.x1, -segment.y1);
+      const clampedAngleGap0 = (0, _clampAngle.clampAngleRad)(targetAngle - angle0);
+      if (clampedAngleGap0 < _epsilon.EPSILON || clampedAngleGap0 > Math.PI * 2 - _epsilon.EPSILON) {
+        return {
+          x: segment.x0,
+          y: segment.y0
+        };
+      }
+      const clampedAngleGap1 = (0, _clampAngle.clampAngleRad)(targetAngle - angle1);
+      if (clampedAngleGap1 < _epsilon.EPSILON || clampedAngleGap1 > Math.PI * 2 - _epsilon.EPSILON) {
+        return {
+          x: segment.x1,
+          y: segment.y1
+        };
+      }
+      const t = findTForAngle(segment, targetAngle);
+      return {
+        x: evaluateSegmentX(segment, t),
+        y: evaluateSegmentY(segment, t)
+      };
+    }
+  }
+  if (pointsContainsOrigin) {
+    // Frequent edge case when handling area with minRadius set to 0.
+    // The only point on the curve is at the origin, so we can return (0, 0) for any angle.
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+  return null;
 }

package/LineChart/seriesConfig/curveEvaluation.mjs

@@ -1,4 +1,6 @@
+import { EPSILON } from "../../utils/epsilon.mjs";
 import { getCurveFactory } from "../../internals/getCurve.mjs";
+import { clampAngleRad } from "../../internals/clampAngle.mjs";
 import { cubicRoots } from "../../internals/cubiqSolver.mjs";
 
 /**
@@ -85,6 +87,42 @@ function findTForX(segment, targetX) {
   return -1;
 }
 
+/**
+ * Find parameter t such that the segment's x(t) ≈ targetX using cubic roots.
+ */
+function findTForAngle(segment, targetAngle) {
+  if (!isBezierSegment(segment)) {
+    // Linear segment.
+    const DeltaY = segment.y1 - segment.y0;
+    const DeltaX = segment.x1 - segment.x0;
+    const dx = Math.sin(targetAngle);
+    const dy = -Math.cos(targetAngle);
+    if (Math.abs(dx) < EPSILON) {
+      if (Math.abs(DeltaX) < EPSILON) {
+        return -1;
+      }
+      return -segment.x0 / DeltaX;
+    }
+    if (Math.abs(dy) < EPSILON) {
+      if (Math.abs(DeltaY) < EPSILON) {
+        return -1;
+      }
+      return -segment.y0 / DeltaY;
+    }
+    return (segment.y0 / dy - segment.x0 / dx) / (DeltaX / dx - DeltaY / dy);
+  }
+  const xBezierCoeffs = cubicBezierCoeffs(segment.x0, segment.cpx1, segment.cpx2, segment.x1);
+  const yBezierCoeffs = cubicBezierCoeffs(segment.y0, segment.cpy1, segment.cpy2, segment.y1);
+  const targetX = Math.sin(targetAngle);
+  const targetY = -Math.cos(targetAngle);
+  const polyToSolve = [targetY * xBezierCoeffs[0] - targetX * yBezierCoeffs[0], targetY * xBezierCoeffs[1] - targetX * yBezierCoeffs[1], targetY * xBezierCoeffs[2] - targetX * yBezierCoeffs[2], targetY * xBezierCoeffs[3] - targetX * yBezierCoeffs[3]];
+  const roots = cubicRoots(polyToSolve);
+  if (roots.length > 0) {
+    return roots[0];
+  }
+  return -1;
+}
+
 /** Evaluate the segment's y at parameter t. */
 function evaluateSegmentY(segment, t) {
   if (!isBezierSegment(segment)) {
@@ -93,6 +131,14 @@ function evaluateSegmentY(segment, t) {
   return cubicBezier(t, segment.y0, segment.cpy1, segment.cpy2, segment.y1);
 }
 
+/** Evaluate the segment's x at parameter t. */
+function evaluateSegmentX(segment, t) {
+  if (!isBezierSegment(segment)) {
+    return segment.x0 + t * (segment.x1 - segment.x0);
+  }
+  return cubicBezier(t, segment.x0, segment.cpx1, segment.cpx2, segment.x1);
+}
+
 /**
  * Build the curve segments for a set of pixel-coordinate points
  * using d3's curve factory, then evaluate y at the given pixel x.
@@ -131,4 +177,89 @@ export function evaluateCurveY(points, targetX, curveType) {
     }
   }
   return null;
+}
+const vectorProduct = (a, b) => a.x * b.y - a.y * b.x;
+
+/**
+ * Build the curve segments for a set of pixel-coordinate points using d3's curve factory,
+ * then evaluate the point on the curve at the given angle.
+ *
+ * Returns null if no point on the curve matches the target angle.
+ */
+export function evaluateCurveAtAngle(
+/**
+ * The points only uses the x/y coordinate system, because internally curve factory only works with x/y coordinates.
+ * So angles/radius are lost during the curve generation.
+ */
+points, targetAngle, curveType) {
+  if (points.length === 0) {
+    return null;
+  }
+  if (points.length === 1) {
+    return points[0];
+  }
+  const capture = new SegmentCapture();
+  const factory = getCurveFactory(curveType);
+  const curveInstance = factory(capture);
+  let pointsContainsOrigin = false;
+  curveInstance.lineStart();
+  for (const p of points) {
+    curveInstance.point(p.x, p.y);
+    if (p.x === 0 && p.y === 0) {
+      pointsContainsOrigin = true;
+    }
+  }
+  curveInstance.lineEnd();
+  const xTarget = Math.sin(targetAngle);
+  const yTarget = -Math.cos(targetAngle);
+  const pointTarget = {
+    x: xTarget,
+    y: yTarget
+  };
+
+  // Find the segment containing targetAngle.
+  for (const segment of capture.segments) {
+    const directionX0Target = vectorProduct({
+      x: segment.x0,
+      y: segment.y0
+    }, pointTarget);
+    const directionTargetX1 = vectorProduct(pointTarget, {
+      x: segment.x1,
+      y: segment.y1
+    });
+
+    // Test if target angle is between x0 and x1. To do so we check the sign of the vector product.
+    if (directionX0Target >= 0 && directionTargetX1 >= 0) {
+      const angle0 = Math.atan2(segment.x0, -segment.y0);
+      const angle1 = Math.atan2(segment.x1, -segment.y1);
+      const clampedAngleGap0 = clampAngleRad(targetAngle - angle0);
+      if (clampedAngleGap0 < EPSILON || clampedAngleGap0 > Math.PI * 2 - EPSILON) {
+        return {
+          x: segment.x0,
+          y: segment.y0
+        };
+      }
+      const clampedAngleGap1 = clampAngleRad(targetAngle - angle1);
+      if (clampedAngleGap1 < EPSILON || clampedAngleGap1 > Math.PI * 2 - EPSILON) {
+        return {
+          x: segment.x1,
+          y: segment.y1
+        };
+      }
+      const t = findTForAngle(segment, targetAngle);
+      return {
+        x: evaluateSegmentX(segment, t),
+        y: evaluateSegmentY(segment, t)
+      };
+    }
+  }
+  if (pointsContainsOrigin) {
+    // Frequent edge case when handling area with minRadius set to 0.
+    // The only point on the curve is at the origin, so we can return (0, 0) for any angle.
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+  return null;
 }

package/LineChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => (0, _extends2.default)({}, seriesData, {
   id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-  color: seriesData.color ?? colors[seriesIndex % colors.length]
+  color: seriesData.color ?? colors[seriesIndex % colors.length],
+  curve: seriesData.curve ?? 'monotoneX'
 });
 var _default = exports.default = getSeriesWithDefaultValues;

package/LineChart/seriesConfig/getSeriesWithDefaultValues.mjs

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => _extends({}, seriesData, {
   id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
-  color: seriesData.color ?? colors[seriesIndex % colors.length]
+  color: seriesData.color ?? colors[seriesIndex % colors.length],
+  curve: seriesData.curve ?? 'monotoneX'
 });
 export default getSeriesWithDefaultValues;

package/LineChart/seriesConfig/seriesProcessor.js

@@ -51,12 +51,16 @@ function seriesProcessor(params, dataset, isItemVisible) {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Line series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : (0, _formatErrorMessage2.default)(27, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Line series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/LineChart/seriesConfig/seriesProcessor.mjs

@@ -44,12 +44,16 @@ function seriesProcessor(params, dataset, isItemVisible) {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Line series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : _formatErrorMessage(27, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Line series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/LineChart/useAreaPlotData.js

@@ -54,9 +54,13 @@ function useAreaPlotData(xAxes, yAxes) {
         const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.');
           }
           if (xData.length < stackedData.length) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: The data length of the x-axis (${xData.length} items) is less than the length of series data (${stackedData.length} items). ` + 'Some data points will not be displayed because they have no corresponding x-axis value. ' + 'Ensure the x-axis data has at least as many items as the series data.');
           }
         }

package/LineChart/useAreaPlotData.mjs

@@ -47,9 +47,13 @@ export function useAreaPlotData(xAxes, yAxes) {
         const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.');
           }
           if (xData.length < stackedData.length) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: The data length of the x-axis (${xData.length} items) is less than the length of series data (${stackedData.length} items). ` + 'Some data points will not be displayed because they have no corresponding x-axis value. ' + 'Ensure the x-axis data has at least as many items as the series data.');
           }
         }

package/LineChart/useLinePlotData.js

@@ -52,6 +52,8 @@ function useLinePlotData(xAxes, yAxes) {
         const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.');
           }
           if (xData.length < stackedData.length) {

package/LineChart/useLinePlotData.mjs

@@ -45,6 +45,8 @@ export function useLinePlotData(xAxes, yAxes) {
         const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.');
           }
           if (xData.length < stackedData.length) {

package/LineChart/useMarkPlotData.js

@@ -53,6 +53,8 @@ function useMarkPlotData(xAxes, yAxes) {
         const xData = xAxes[xAxisId].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.');
           }
         }

package/LineChart/useMarkPlotData.mjs

@@ -45,6 +45,8 @@ export function useMarkPlotData(xAxes, yAxes) {
         const xData = xAxes[xAxisId].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
+            // TODO: fix mui/no-guarded-throw
+            // eslint-disable-next-line mui/no-guarded-throw
             throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have a data property to be able to display a line plot. ` + 'The x-axis data defines the positions for each point in the line. ' + 'Provide a data array to the x-axis configuration.');
           }
         }

package/RadarChart/RadarGrid/CircularRadarStripes.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CircularRadarStripes = CircularRadarStripes;
 var React = _interopRequireWildcard(require("react"));
+var _getRingPath = require("../../internals/getRingPath");
 var _jsxRuntime = require("react/jsx-runtime");
-const getPath = (center, outerRadius, innerRadius) => [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
-
 /**
  * @ignore - internal component.
  */
@@ -27,7 +26,7 @@ function CircularRadarStripes(props) {
     children: divisionRadius.map((r, index) => {
       const smallerRadius = divisionRadius[index - 1] ?? 0;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-        d: getPath(center, r, smallerRadius),
+        d: (0, _getRingPath.getRingPath)(center, r, smallerRadius),
         fillRule: "evenodd",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,

package/RadarChart/RadarGrid/CircularRadarStripes.mjs

@@ -1,7 +1,6 @@
 import * as React from 'react';
+import { getRingPath } from "../../internals/getRingPath.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getPath = (center, outerRadius, innerRadius) => [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
-
 /**
  * @ignore - internal component.
  */
@@ -20,7 +19,7 @@ export function CircularRadarStripes(props) {
     children: divisionRadius.map((r, index) => {
       const smallerRadius = divisionRadius[index - 1] ?? 0;
       return /*#__PURE__*/_jsx("path", {
-        d: getPath(center, r, smallerRadius),
+        d: getRingPath(center, r, smallerRadius),
         fillRule: "evenodd",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.js

@@ -32,7 +32,7 @@ function useRadarRotationIndex() {
     }
     const svgPoint = (0, _getChartPoint.getChartPoint)(element, event);
     const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
-    const rotationIndex = (0, _getAxisIndex.getAxisIndex)(rotationAxis, rotation);
+    const rotationIndex = (0, _getAxisIndex.getRotationAxisIndex)(rotationAxis, rotation);
     return rotationIndex;
   }, [center, rotationAxis, chartsLayerContainerRef]);
   return rotationIndexGetter;

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.mjs

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
 import { getChartPoint } from "../../internals/getChartPoint.mjs";
 import { generateSvg2rotation } from "../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.mjs";
-import { getAxisIndex } from "../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs";
+import { getRotationAxisIndex } from "../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs";
 import { useStore } from "../../internals/store/useStore.mjs";
 import { useChartsLayerContainerRef } from "../../hooks/useChartsLayerContainerRef.mjs";
 import { useRotationAxis } from "../../hooks/useAxis.mjs";
@@ -25,7 +25,7 @@ export function useRadarRotationIndex() {
     }
     const svgPoint = getChartPoint(element, event);
     const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
-    const rotationIndex = getAxisIndex(rotationAxis, rotation);
+    const rotationIndex = getRotationAxisIndex(rotationAxis, rotation);
     return rotationIndex;
   }, [center, rotationAxis, chartsLayerContainerRef]);
   return rotationIndexGetter;

package/ScatterChart/FocusedScatterMark.js

@@ -13,8 +13,8 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
-var _hooks = require("../hooks");
 var _scatterClasses = require("./scatterClasses");
+var _useScatterItemPosition = require("./useScatterItemPosition");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"];
 function FocusedScatterMark(_ref) {
@@ -24,38 +24,24 @@ function FocusedScatterMark(_ref) {
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const theme = (0, _styles.useTheme)();
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
-  const scatterSeries = (0, _hooks.useScatterSeriesContext)();
-  const {
-    xAxis,
-    xAxisIds
-  } = (0, _hooks.useXAxes)();
-  const {
-    yAxis,
-    yAxisIds
-  } = (0, _hooks.useYAxes)();
   const classes = (0, _scatterClasses.useUtilityClasses)();
-  if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
+  const resolved = (0, _useScatterItemPosition.useScatterItemPosition)(focusedItem?.type === 'scatter' ? focusedItem : null);
+  if (!resolved) {
     return null;
   }
-  const series = scatterSeries?.series[focusedItem.seriesId];
-  if (!series || series.hidden) {
-    return null;
-  }
-  const xAxisId = series.xAxisId ?? xAxisIds[0];
-  const yAxisId = series.yAxisId ?? yAxisIds[0];
-  const getXPosition = (0, _hooks.getValueToPositionMapper)(xAxis[xAxisId].scale);
-  const getYPosition = (0, _hooks.getValueToPositionMapper)(yAxis[yAxisId].scale);
-  const scatterPoint = series.data[focusedItem.dataIndex];
-  const x = getXPosition(scatterPoint.x);
-  const y = getYPosition(scatterPoint.y);
+  const {
+    cx,
+    cy,
+    series
+  } = resolved;
   const size = series.markerSize + 3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.focusedMark, className),
     fill: "none",
     stroke: (theme.vars ?? theme).palette.text.primary,
     strokeWidth: 2,
-    x: x - size,
-    y: y - size,
+    x: cx - size,
+    y: cy - size,
     width: 2 * size,
     height: 2 * size,
     rx: 3,