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

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -0,0 +1,75 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
+import { getAxisIndex, getAxisValue } from "./getAxisValue.js";
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
+const optionalGetAxisId = (_, id) => id;
+const optionalGetAxisIds = (_, ids) => ids;
+
+/**
+ * Get interaction indexes
+ */
+
+function indexGetter(value, axes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+}
+export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+export const selectorChartsInteractionXAxisIndexes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+export const selectorChartsInteractionYAxisIndexes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+
+/**
+ * Get interaction values
+ */
+
+function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map((id, axisIndex) => getAxisValue(axes.axis[id], value, indexes[axisIndex])) : getAxisValue(axes.axis[ids], value, indexes);
+}
+export const selectorChartsInteractionXAxisValues = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
+  if (x === null || xIndex === null || xAxes.axisIds.length === 0) {
+    return null;
+  }
+  return valueGetter(x, xAxes, xIndex, id);
+});
+export const selectorChartsInteractionYAxisValues = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
+  if (y === null || yIndex === null || yAxes.axisIds.length === 0) {
+    return null;
+  }
+  return valueGetter(y, yAxes, yIndex, id);
+});
+
+/**
+ * Get x-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipXAxes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (value, axes) => {
+  if (value === null) {
+    return [];
+  }
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
+});
+
+/**
+ * Get y-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipYAxes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (value, axes) => {
+  if (value === null) {
+    return [];
+  }
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
+});
+
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+export const selectorChartsInteractionAxisTooltip = createSelector([selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes], (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0);

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -6,13 +6,10 @@ export const useChartInteraction = ({
   const cleanInteraction = useEventCallback(() => {
     store.update(prev => {
       return _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
-          axis: {
-            x: null,
-            y: null
-          },
+        interaction: {
+          pointer: null,
           item: null
-        })
+        }
       });
     });
   });
@@ -45,17 +42,10 @@ export const useChartInteraction = ({
       })
     }));
   });
-  const setAxisInteraction = useEventCallback(({
-    x: newStateX,
-    y: newStateY
-  }) => {
+  const setPointerCoordinate = useEventCallback(coordinate => {
     store.update(prev => _extends({}, prev, {
       interaction: _extends({}, prev.interaction, {
-        axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
-          x: newStateX
-        } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
-          y: newStateY
-        } : {})
+        pointer: coordinate
       })
     }));
   });
@@ -64,17 +54,14 @@ export const useChartInteraction = ({
       cleanInteraction,
       setItemInteraction,
       removeItemInteraction,
-      setAxisInteraction
+      setPointerCoordinate
     }
   };
 };
 useChartInteraction.getInitialState = () => ({
   interaction: {
     item: null,
-    axis: {
-      x: null,
-      y: null
-    }
+    pointer: null
   }
 });
 useChartInteraction.params = {};

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts

@@ -1,5 +1,5 @@
 import { ChartOptionalRootSelector } from "../../utils/selectors.js";
-import { AxisInteractionData, UseChartInteractionSignature } from "./useChartInteraction.types.js";
+import { UseChartInteractionSignature } from "./useChartInteraction.types.js";
 export declare const selectorChartsInteractionIsInitialized: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
 }) => boolean) & {
@@ -9,11 +9,11 @@ export declare const selectorChartsInteractionIsInitialized: ((state: import("..
 } & {
   resultFunc: (resultFuncArgs_0: {
     item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-    axis: AxisInteractionData;
+    pointer: import("./useChartInteraction.types").Coordinate | null;
   } | undefined) => boolean;
   memoizedResultFunc: ((resultFuncArgs_0: {
     item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-    axis: AxisInteractionData;
+    pointer: import("./useChartInteraction.types").Coordinate | null;
   } | undefined) => boolean) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -38,11 +38,11 @@ export declare const selectorChartsInteractionItem: ((state: import("../../coreP
 } & {
   resultFunc: (resultFuncArgs_0: {
     item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-    axis: AxisInteractionData;
+    pointer: import("./useChartInteraction.types").Coordinate | null;
   } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null;
   memoizedResultFunc: ((resultFuncArgs_0: {
     item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-    axis: AxisInteractionData;
+    pointer: import("./useChartInteraction.types").Coordinate | null;
   } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null) & {
     clearCache: () => void;
     resultsCount: () => number;
@@ -58,26 +58,26 @@ export declare const selectorChartsInteractionItem: ((state: import("../../coreP
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPointer: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
-}) => AxisInteractionData) & {
+}) => import("./useChartInteraction.types").Coordinate | null) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
   resultFunc: (resultFuncArgs_0: {
     item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-    axis: AxisInteractionData;
-  } | undefined) => AxisInteractionData;
+    pointer: import("./useChartInteraction.types").Coordinate | null;
+  } | undefined) => import("./useChartInteraction.types").Coordinate | null;
   memoizedResultFunc: ((resultFuncArgs_0: {
     item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-    axis: AxisInteractionData;
-  } | undefined) => AxisInteractionData) & {
+    pointer: import("./useChartInteraction.types").Coordinate | null;
+  } | undefined) => import("./useChartInteraction.types").Coordinate | null) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => AxisInteractionData;
+  lastResult: () => import("./useChartInteraction.types").Coordinate | null;
   dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
   recomputations: () => number;
   resetRecomputations: () => void;
@@ -87,52 +87,40 @@ export declare const selectorChartsInteractionAxis: ((state: import("../../coreP
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPointerX: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
-}) => {
-  value: number | Date | string;
-  index: number;
-} | null) & {
+}) => number | null) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
-  resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
-    value: number | Date | string;
-    index: number;
-  } | null;
-  memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
-    value: number | Date | string;
-    index: number;
-  } | null) & {
+  resultFunc: (resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null;
+  memoizedResultFunc: ((resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => {
-    value: number | Date | string;
-    index: number;
-  } | null;
+  lastResult: () => number | null;
   dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
     cacheKey: import("../../models").ChartStateCacheKey;
-  }) => AxisInteractionData) & {
+  }) => import("./useChartInteraction.types").Coordinate | null) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   } & {
     resultFunc: (resultFuncArgs_0: {
       item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-      axis: AxisInteractionData;
-    } | undefined) => AxisInteractionData;
+      pointer: import("./useChartInteraction.types").Coordinate | null;
+    } | undefined) => import("./useChartInteraction.types").Coordinate | null;
     memoizedResultFunc: ((resultFuncArgs_0: {
       item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-      axis: AxisInteractionData;
-    } | undefined) => AxisInteractionData) & {
+      pointer: import("./useChartInteraction.types").Coordinate | null;
+    } | undefined) => import("./useChartInteraction.types").Coordinate | null) & {
       clearCache: () => void;
       resultsCount: () => number;
       resetResultsCount: () => void;
     };
-    lastResult: () => AxisInteractionData;
+    lastResult: () => import("./useChartInteraction.types").Coordinate | null;
     dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
     recomputations: () => number;
     resetRecomputations: () => void;
@@ -150,52 +138,40 @@ export declare const selectorChartsInteractionXAxis: ((state: import("../../core
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPointerY: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
   cacheKey: import("../../models").ChartStateCacheKey;
-}) => {
-  value: number | Date | string;
-  index: number;
-} | null) & {
+}) => number | null) & {
   clearCache: () => void;
   resultsCount: () => number;
   resetResultsCount: () => void;
 } & {
-  resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
-    value: number | Date | string;
-    index: number;
-  } | null;
-  memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
-    value: number | Date | string;
-    index: number;
-  } | null) & {
+  resultFunc: (resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null;
+  memoizedResultFunc: ((resultFuncArgs_0: import("./useChartInteraction.types").Coordinate | null) => number | null) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   };
-  lastResult: () => {
-    value: number | Date | string;
-    index: number;
-  } | null;
+  lastResult: () => number | null;
   dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
     cacheKey: import("../../models").ChartStateCacheKey;
-  }) => AxisInteractionData) & {
+  }) => import("./useChartInteraction.types").Coordinate | null) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
   } & {
     resultFunc: (resultFuncArgs_0: {
       item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-      axis: AxisInteractionData;
-    } | undefined) => AxisInteractionData;
+      pointer: import("./useChartInteraction.types").Coordinate | null;
+    } | undefined) => import("./useChartInteraction.types").Coordinate | null;
     memoizedResultFunc: ((resultFuncArgs_0: {
       item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-      axis: AxisInteractionData;
-    } | undefined) => AxisInteractionData) & {
+      pointer: import("./useChartInteraction.types").Coordinate | null;
+    } | undefined) => import("./useChartInteraction.types").Coordinate | null) & {
       clearCache: () => void;
       resultsCount: () => number;
       resetResultsCount: () => void;
     };
-    lastResult: () => AxisInteractionData;
+    lastResult: () => import("./useChartInteraction.types").Coordinate | null;
     dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
     recomputations: () => number;
     resetRecomputations: () => void;
@@ -236,11 +212,11 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
   } & {
     resultFunc: (resultFuncArgs_0: {
       item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-      axis: AxisInteractionData;
+      pointer: import("./useChartInteraction.types").Coordinate | null;
     } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null;
     memoizedResultFunc: ((resultFuncArgs_0: {
       item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-      axis: AxisInteractionData;
+      pointer: import("./useChartInteraction.types").Coordinate | null;
     } | undefined) => import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").BarItemIdentifier | import("../../../..").PieItemIdentifier | import("../../../..").RadarItemIdentifier | null) & {
       clearCache: () => void;
       resultsCount: () => number;
@@ -263,186 +239,4 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
 } & {
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
-};
-export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
-  cacheKey: import("../../models").ChartStateCacheKey;
-}) => boolean) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: {
-    value: number | Date | string;
-    index: number;
-  } | null) => boolean;
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    value: number | Date | string;
-    index: number;
-  } | null) => boolean) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => boolean;
-  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
-    cacheKey: import("../../models").ChartStateCacheKey;
-  }) => {
-    value: number | Date | string;
-    index: number;
-  } | null) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  } & {
-    resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
-      value: number | Date | string;
-      index: number;
-    } | null;
-    memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
-      value: number | Date | string;
-      index: number;
-    } | null) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    };
-    lastResult: () => {
-      value: number | Date | string;
-      index: number;
-    } | null;
-    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
-      cacheKey: import("../../models").ChartStateCacheKey;
-    }) => AxisInteractionData) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    } & {
-      resultFunc: (resultFuncArgs_0: {
-        item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-        axis: AxisInteractionData;
-      } | undefined) => AxisInteractionData;
-      memoizedResultFunc: ((resultFuncArgs_0: {
-        item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-        axis: AxisInteractionData;
-      } | undefined) => AxisInteractionData) & {
-        clearCache: () => void;
-        resultsCount: () => number;
-        resetResultsCount: () => void;
-      };
-      lastResult: () => AxisInteractionData;
-      dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
-      recomputations: () => number;
-      resetRecomputations: () => void;
-      dependencyRecomputations: () => number;
-      resetDependencyRecomputations: () => void;
-    } & {
-      memoize: typeof import("reselect").weakMapMemoize;
-      argsMemoize: typeof import("reselect").weakMapMemoize;
-    }];
-    recomputations: () => number;
-    resetRecomputations: () => void;
-    dependencyRecomputations: () => number;
-    resetDependencyRecomputations: () => void;
-  } & {
-    memoize: typeof import("reselect").weakMapMemoize;
-    argsMemoize: typeof import("reselect").weakMapMemoize;
-  }];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
-export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
-  cacheKey: import("../../models").ChartStateCacheKey;
-}) => boolean) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: {
-    value: number | Date | string;
-    index: number;
-  } | null) => boolean;
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    value: number | Date | string;
-    index: number;
-  } | null) => boolean) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => boolean;
-  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
-    cacheKey: import("../../models").ChartStateCacheKey;
-  }) => {
-    value: number | Date | string;
-    index: number;
-  } | null) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  } & {
-    resultFunc: (resultFuncArgs_0: AxisInteractionData) => {
-      value: number | Date | string;
-      index: number;
-    } | null;
-    memoizedResultFunc: ((resultFuncArgs_0: AxisInteractionData) => {
-      value: number | Date | string;
-      index: number;
-    } | null) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    };
-    lastResult: () => {
-      value: number | Date | string;
-      index: number;
-    } | null;
-    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & Partial<import("./useChartInteraction.types").UseChartInteractionState> & {
-      cacheKey: import("../../models").ChartStateCacheKey;
-    }) => AxisInteractionData) & {
-      clearCache: () => void;
-      resultsCount: () => number;
-      resetResultsCount: () => void;
-    } & {
-      resultFunc: (resultFuncArgs_0: {
-        item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-        axis: AxisInteractionData;
-      } | undefined) => AxisInteractionData;
-      memoizedResultFunc: ((resultFuncArgs_0: {
-        item: null | import("../../..").ChartItemIdentifier<import("../../..").ChartSeriesType>;
-        axis: AxisInteractionData;
-      } | undefined) => AxisInteractionData) & {
-        clearCache: () => void;
-        resultsCount: () => number;
-        resetResultsCount: () => void;
-      };
-      lastResult: () => AxisInteractionData;
-      dependencies: [ChartOptionalRootSelector<UseChartInteractionSignature>];
-      recomputations: () => number;
-      resetRecomputations: () => void;
-      dependencyRecomputations: () => number;
-      resetDependencyRecomputations: () => void;
-    } & {
-      memoize: typeof import("reselect").weakMapMemoize;
-      argsMemoize: typeof import("reselect").weakMapMemoize;
-    }];
-    recomputations: () => number;
-    resetRecomputations: () => void;
-    dependencyRecomputations: () => number;
-    resetDependencyRecomputations: () => void;
-  } & {
-    memoize: typeof import("reselect").weakMapMemoize;
-    argsMemoize: typeof import("reselect").weakMapMemoize;
-  }];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
 };

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -1,14 +1,8 @@
 import { createSelector } from "../../utils/selectors.js";
-const EMPTY_AXIS_INTERACTION = {
-  x: null,
-  y: null
-};
 const selectInteraction = state => state.interaction;
 export const selectorChartsInteractionIsInitialized = createSelector(selectInteraction, interaction => interaction !== undefined);
 export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction?.item ?? null);
-export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction?.axis ?? EMPTY_AXIS_INTERACTION);
-export const selectorChartsInteractionXAxis = createSelector(selectorChartsInteractionAxis, axis => axis.x);
-export const selectorChartsInteractionYAxis = createSelector(selectorChartsInteractionAxis, axis => axis.y);
-export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
-export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
-export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
+export const selectorChartsInteractionPointer = createSelector(selectInteraction, interaction => interaction?.pointer ?? null);
+export const selectorChartsInteractionPointerX = createSelector(selectorChartsInteractionPointer, pointer => pointer && pointer.x);
+export const selectorChartsInteractionPointerY = createSelector(selectorChartsInteractionPointer, pointer => pointer && pointer.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts

@@ -1,5 +1,9 @@
 import { ChartPluginSignature } from "../../models/index.js";
 import { ChartItemIdentifier, ChartSeriesType } from "../../../../models/seriesType/config.js";
+export type Coordinate = {
+  x: number;
+  y: number;
+};
 export interface UseChartInteractionInstance {
   /**
    * Remove all interaction.
@@ -16,21 +20,11 @@ export interface UseChartInteractionInstance {
    */
   removeItemInteraction: (itemToRemove?: ChartItemIdentifier<ChartSeriesType>) => void;
   /**
-   * Set the new axis the user is interacting with.
-   * @param {Partial<AxisInteractionData>} newAxis The new axis identifier.
+   * Set the new pointer coordinate.
+   * @param {Coordinate | null} newCoordinate The new pointer coordinate.
    */
-  setAxisInteraction: (newAxis: Partial<AxisInteractionData>) => void;
+  setPointerCoordinate: (newCoordinate: Coordinate | null) => void;
 }
-export type AxisInteractionData = {
-  x: null | {
-    value: number | Date | string;
-    index: number;
-  };
-  y: null | {
-    value: number | Date | string;
-    index: number;
-  };
-};
 export interface UseChartInteractionState {
   interaction: {
     /**
@@ -38,9 +32,9 @@ export interface UseChartInteractionState {
      */
     item: null | ChartItemIdentifier<ChartSeriesType>;
     /**
-     * The x- and y-axes currently interacting.
+     * The x/y SVG coordinate of the "main" pointer
      */
-    axis: AxisInteractionData;
+    pointer: Coordinate | null;
   };
 }
 export type UseChartInteractionSignature = ChartPluginSignature<{

package/modern/internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.d.ts

@@ -0,0 +1,12 @@
+export declare const generateSvg2rotation: (center: {
+  cx: number;
+  cy: number;
+}) => (x: number, y: number) => number;
+export declare const generateSvg2polar: (center: {
+  cx: number;
+  cy: number;
+}) => (x: number, y: number) => [number, number];
+export declare const generatePolar2svg: (center: {
+  cx: number;
+  cy: number;
+}) => (radius: number, rotation: number) => [number, number];

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

@@ -0,0 +1,8 @@
+export const generateSvg2rotation = center => (x, y) => Math.atan2(x - center.cx, center.cy - y);
+export const generateSvg2polar = center => (x, y) => {
+  const angle = Math.atan2(x - center.cx, center.cy - y);
+  return [Math.sqrt((x - center.cx) ** 2 + (center.cy - y) ** 2), angle];
+};
+export const generatePolar2svg = center => (radius, rotation) => {
+  return [center.cx + radius * Math.sin(rotation), center.cy - radius * Math.cos(rotation)];
+};

package/modern/internals/plugins/featurePlugins/useChartPolarAxis/getAxisValue.d.ts

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