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

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js

@@ -0,0 +1,22 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
+import { generateSvg2rotation } from "./coordinateTransformation.js";
+import { getAxisIndex } from "./getAxisValue.js";
+import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
+export const selectorChartsInteractionRotationAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, selectorChartRotationAxis], (x, y, center, rotationAxis) => {
+  if (x === null || y === null || !rotationAxis.axis[rotationAxis.axisIds[0]]) {
+    return null;
+  }
+  const rotation = generateSvg2rotation(center)(x, y);
+  return getAxisIndex(rotationAxis.axis[rotationAxis.axisIds[0]], rotation);
+});
+export const selectorChartsInteractionRotationAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex], (x, y, rotationAxis, rotationIndex) => {
+  if (x === null || y === null || rotationIndex === null || rotationIndex === -1) {
+    return null;
+  }
+  const data = rotationAxis.axis[rotationAxis.axisIds[0]]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[rotationIndex];
+});

package/hooks/useAxis.d.ts

@@ -1,4 +1,4 @@
-import { AxisId } from "../models/axis.js";
+import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaultized, ScaleName } from "../models/axis.js";
 /**
  * Get all the x-axes.
  *
@@ -40,12 +40,12 @@ export declare function useXAxis(axisId?: AxisId): import("../internals").AxisDe
  */
 export declare function useYAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;
 export declare function useRotationAxes(): {
-  rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<import("../internals").ChartsRotationAxisProps>;
+  rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<ChartsRotationAxisProps>;
   rotationAxisIds: string[];
 };
 export declare function useRadiusAxes(): {
-  radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<import("../internals").ChartsRadiusAxisProps>;
+  radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<ChartsRadiusAxisProps>;
   radiusAxisIds: string[];
 };
-export declare function useRotationAxis(identifier?: number | string): import("../internals").PolarAxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsRotationAxisProps>;
-export declare function useRadiusAxis(identifier?: number | string): import("../internals").PolarAxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsRadiusAxisProps>;
+export declare function useRotationAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
+export declare function useRadiusAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;

package/hooks/useInteractionItemProps.js

@@ -9,7 +9,7 @@ exports.useInteractionItemProps = exports.useInteractionAllItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _ChartProvider = require("../context/ChartProvider");
 const onPointerDown = event => {
-  if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+  if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
 };

package/hooks/useScale.d.ts

@@ -20,5 +20,5 @@ export declare function useXScale<S extends ScaleName>(axisId?: AxisId): AxisSca
  * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
  */
 export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
-export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];
-export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];
+export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;
+export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;

package/hooks/useScale.js

@@ -47,9 +47,9 @@ function useYScale(axisId) {
 }
 function useRotationScale(identifier) {
   const axis = (0, _useAxis.useRotationAxis)(identifier);
-  return axis.scale;
+  return axis?.scale;
 }
 function useRadiusScale(identifier) {
   const axis = (0, _useAxis.useRadiusAxis)(identifier);
-  return axis.scale;
+  return axis?.scale;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-beta.0
+ * @mui/x-charts v8.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts

@@ -1,9 +1,11 @@
 import { AxisDefaultized } from "../../../../models/axis.js";
 /**
- * For a pointer coordinate, this function returns the value and dataIndex associated.
- * Returns `null` if the coordinate is outside of values.
+ * For a pointer coordinate, this function returns the dataIndex associated.
+ * Returns `-1` if no dataIndex matches.
  */
-export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number): {
-  value: any;
-  index: number;
-} | null;
+export declare function getAxisIndex(axisConfig: AxisDefaultized, pointerValue: number): number;
+/**
+ * For a pointer coordinate, this function returns the value associated.
+ * Returns `null` if the coordinate has no value associated.
+ */
+export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number, dataIndex: number): number | Date | null;

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getAxisIndex = getAxisIndex;
 exports.getAxisValue = getAxisValue;
 var _isBandScale = require("../../../isBandScale");
 function getAsANumber(value) {
@@ -10,10 +11,10 @@ function getAsANumber(value) {
 }
 
 /**
- * For a pointer coordinate, this function returns the value and dataIndex associated.
- * Returns `null` if the coordinate is outside of values.
+ * For a pointer coordinate, this function returns the dataIndex associated.
+ * Returns `-1` if no dataIndex matches.
  */
-function getAxisValue(axisConfig, pointerValue) {
+function getAxisIndex(axisConfig, pointerValue) {
   const {
     scale,
     data: axisData,
@@ -22,10 +23,7 @@ function getAxisValue(axisConfig, pointerValue) {
   if (!(0, _isBandScale.isBandScale)(scale)) {
     const value = scale.invert(pointerValue);
     if (axisData === undefined) {
-      return {
-        value,
-        index: -1
-      };
+      return -1;
     }
     const valueAsNumber = getAsANumber(value);
     const closestIndex = axisData?.findIndex((pointValue, index) => {
@@ -42,24 +40,33 @@ function getAxisValue(axisConfig, pointerValue) {
       }
       return false;
     });
-    return {
-      value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
-      index: closestIndex
-    };
+    return closestIndex;
   }
   const dataIndex = scale.bandwidth() === 0 ? Math.floor((pointerValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((pointerValue - Math.min(...scale.range())) / scale.step());
   if (dataIndex < 0 || dataIndex >= axisData.length) {
-    return null;
+    return -1;
+  }
+  return reverse ? axisData.length - 1 - dataIndex : dataIndex;
+}
+
+/**
+ * For a pointer coordinate, this function returns the value associated.
+ * Returns `null` if the coordinate has no value associated.
+ */
+function getAxisValue(axisConfig, pointerValue, dataIndex) {
+  const {
+    scale,
+    data: axisData
+  } = axisConfig;
+  if (!(0, _isBandScale.isBandScale)(scale)) {
+    const value = scale.invert(pointerValue);
+    if (dataIndex < 0) {
+      return value;
+    }
+    return axisData[dataIndex];
   }
-  if (reverse) {
-    const reverseIndex = axisData.length - 1 - dataIndex;
-    return {
-      index: reverseIndex,
-      value: axisData[reverseIndex]
-    };
+  if (dataIndex < 0 || dataIndex >= axisData.length) {
+    return null;
   }
-  return {
-    index: dataIndex,
-    value: axisData[dataIndex]
-  };
+  return axisData[dataIndex];
 }

package/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts

@@ -1,6 +1,7 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export type * from './useChartCartesianAxis.types';
 export * from "./useChartCartesianAxisRendering.selectors.js";
+export * from "./useChartCartesianInteraction.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";

package/internals/plugins/featurePlugins/useChartCartesianAxis/index.js

@@ -39,6 +39,18 @@ Object.keys(_useChartCartesianAxisRendering).forEach(function (key) {
     }
   });
 });
+var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
+Object.keys(_useChartCartesianInteraction).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartCartesianInteraction[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartCartesianInteraction[key];
+    }
+  });
+});
 var _defaultizeAxis = require("./defaultizeAxis");
 var _computeAxisValue = require("./computeAxisValue");
 Object.keys(_computeAxisValue).forEach(function (key) {

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -40,7 +40,6 @@ const useChartCartesianAxis = ({
   }
   const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
   const processedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
-  const interactionAxis = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionAxis);
   const isInteractionEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsInitialized);
   const {
     axis: xAxisWithScale,
@@ -82,58 +81,31 @@ const useChartCartesianAxis = ({
       if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
-        store.update(prev => (0, _extends2.default)({}, prev, {
-          interaction: {
-            item: null,
-            axis: {
-              x: null,
-              y: null
-            }
-          }
-        }));
+        instance.cleanInteraction?.();
         return;
       }
-      instance.setAxisInteraction?.({
-        x: (0, _getAxisValue.getAxisValue)(xAxisWithScale[usedXAxis], svgPoint.x),
-        y: (0, _getAxisValue.getAxisValue)(yAxisWithScale[usedYAxis], svgPoint.y)
-      });
+      instance.setPointerCoordinate?.(svgPoint);
     };
     const handleDown = event => {
       const target = event.currentTarget;
       if (!target) {
         return;
       }
-      if (target.hasPointerCapture(event.pointerId)) {
+      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
         target.releasePointerCapture(event.pointerId);
       }
     };
     element.addEventListener('pointerdown', handleDown);
     element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointerout', handleOut);
     element.addEventListener('pointercancel', handleOut);
     element.addEventListener('pointerleave', handleOut);
     return () => {
       element.removeEventListener('pointerdown', handleDown);
       element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointerout', handleOut);
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
-  const axisInteractionRef = React.useRef({
-    x: null,
-    y: null
-  });
-
-  // This avoids re-attaching the event listener on mouse move.
-  React.useEffect(() => {
-    const {
-      x,
-      y
-    } = interactionAxis;
-    axisInteractionRef.current.x = x;
-    axisInteractionRef.current.y = y;
-  }, [interactionAxis]);
   React.useEffect(() => {
     const element = svgRef.current;
     const onAxisClick = params.onAxisClick;
@@ -144,15 +116,10 @@ const useChartCartesianAxis = ({
       event.preventDefault();
       let dataIndex = null;
       let isXAxis = false;
-      if (axisInteractionRef.current.x === null && axisInteractionRef.current.y === null) {
-        const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-        const xIndex = (0, _getAxisValue.getAxisValue)(xAxisWithScale[usedXAxis], svgPoint.x)?.index ?? null;
-        isXAxis = xIndex !== null && xIndex !== -1;
-        dataIndex = isXAxis ? xIndex : (0, _getAxisValue.getAxisValue)(yAxisWithScale[usedYAxis], svgPoint.y)?.index ?? null;
-      } else {
-        isXAxis = axisInteractionRef.current.x !== null && axisInteractionRef.current.x.index !== -1;
-        dataIndex = isXAxis ? axisInteractionRef.current.x && axisInteractionRef.current.x.index : axisInteractionRef.current.y && axisInteractionRef.current.y.index;
-      }
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
+      const xIndex = (0, _getAxisValue.getAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : (0, _getAxisValue.getAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
       const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
       if (dataIndex == null || dataIndex === -1) {
         return;
@@ -182,7 +149,7 @@ const useChartCartesianAxis = ({
     return () => {
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, axisInteractionRef, usedXAxis, usedYAxis]);
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis]);
   return {};
 };
 exports.useChartCartesianAxis = useChartCartesianAxis;