[charts] Remove deprecated useAxisTooltip in favor of useAxesTooltip (mui#20962)

Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Jose Quintas <juniorquintas@gmail.com>
Co-authored-by: alex <alex.fauquette@gmail.com>
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

Author: 3 people

docs/data/migration/migration-charts-v8/migration-charts-v8.md

@@ -135,6 +135,36 @@ useBarSeries(['id-1']); // Returns [{ id: "id-1", ... }]
 useBarSeries([]); // Returns []
 ```
 
+### Rename `useAxisTooltip` hook
+
+The `useAxisTooltip` hook has been renamed to `useAxesTooltip` to better reflect its functionality of handling multiple axes.
+
+The hook now always returns an array of tooltip data (one entry per active axis) instead of a single object.
+
+```diff
+-import { useAxisTooltip, UseAxisTooltipReturnValue, UseAxisTooltipParams } from '@mui/x-charts';
++import { useAxesTooltip, UseAxesTooltipReturnValue, UseAxesTooltipParams } from '@mui/x-charts';
+```
+
+Run the following command to do the renaming.
+
+```bash
+npx @mui/x-codemod@next v9.0.0/charts/rename-axis-tooltip-hook <path|folder>
+```
+
+After running the codemod make sure to adapt the hook returned value to your needs.
+
+```diff
+ function CustomTooltip() {
+   // If you want to keep only one axis
+-  const tooltipData = useAxisTooltip();
++  const tooltipData = useAxesTooltip()[0] ?? null;
+   // If you use all the axes
+-  const tooltipData = useAxisTooltip({ multipleAxes: true });
++  const tooltipData = useAxesTooltip();
+ }
+```
+
 ## Heatmap
 
 ### `hideLegend` default value changed ✅

packages/x-charts/src/ChartsTooltip/index.ts

@@ -11,7 +11,6 @@ export * from './ChartsTooltipTable';
 export type { ItemTooltip } from '../internals/plugins/models/seriesConfig/tooltipGetter.types';
 export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from './useItemTooltip';
 export { useItemTooltip, useRadarItemTooltip } from './useItemTooltip';
-export * from './useAxisTooltip';
 export * from './useAxesTooltip';
 
 export { useMouseTracker } from './utils';

packages/x-charts/src/ChartsTooltip/useAxesTooltip.tsx

@@ -1,15 +1,234 @@
 'use client';
+import { useSeries } from '../hooks/useSeries';
+import { useColorProcessor } from '../internals/plugins/corePlugins/useChartSeries/useColorProcessor';
+import { type SeriesId } from '../models/seriesType/common';
 import {
-  useAxisTooltip,
-  type UseAxisTooltipParams,
-  type UseAxisTooltipReturnValue,
-} from './useAxisTooltip';
+  type CartesianChartSeriesType,
+  type ChartsSeriesConfig,
+  type PolarChartSeriesType,
+} from '../models/seriesType/config';
+import { type ComputedAxis, type PolarAxisDefaultized, type AxisId } from '../models/axis';
+import { useStore } from '../internals/store/useStore';
+import { getLabel } from '../internals/getLabel';
+import { isCartesianSeriesType } from '../internals/isCartesian';
+import { utcFormatter } from './utils';
+import {
+  useRotationAxes,
+  useRotationAxis,
+  useXAxes,
+  useXAxis,
+  useYAxes,
+  useYAxis,
+} from '../hooks/useAxis';
+import { useZAxes } from '../hooks/useZAxis';
+import {
+  selectorChartsInteractionTooltipXAxes,
+  selectorChartsInteractionTooltipYAxes,
+  type UseChartCartesianAxisSignature,
+} from '../internals/plugins/featurePlugins/useChartCartesianAxis';
+import { type ChartsLabelMarkProps } from '../ChartsLabel';
+import { selectorChartsInteractionTooltipRotationAxes } from '../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors';
+import { isPolarSeriesType } from '../internals/isPolar';
+
+export interface UseAxesTooltipReturnValue<
+  SeriesT extends CartesianChartSeriesType | PolarChartSeriesType =
+    | CartesianChartSeriesType
+    | PolarChartSeriesType,
+  AxisValueT extends string | number | Date = string | number | Date,
+> {
+  axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
+  mainAxis: SeriesT extends CartesianChartSeriesType ? ComputedAxis : PolarAxisDefaultized;
+  axisId: AxisId;
+  axisValue: AxisValueT;
+  axisFormattedValue: string;
+  dataIndex: number;
+  seriesItems: SeriesItem<SeriesT>[];
+}
+
+export interface UseAxesTooltipParams {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+}
+
+interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+  seriesId: SeriesId;
+  color: string;
+  value: ChartsSeriesConfig[T]['valueType'];
+  formattedValue: string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkProps['type'];
+}
+
+function defaultAxisTooltipConfig(
+  axis: ComputedAxis | PolarAxisDefaultized,
+  dataIndex: number,
+  axisDirection: 'x' | 'y' | 'rotation',
+): UseAxesTooltipReturnValue {
+  const axisValue = axis.data?.[dataIndex] ?? null;
 
-type UseAxesTooltipParams = Omit<UseAxisTooltipParams, 'multipleAxes'>;
+  const axisFormatter =
+    axis.valueFormatter ??
+    ((v: string | number | Date) =>
+      axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
+
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip',
+    scale: axis.scale,
+  });
+
+  return {
+    axisDirection,
+    axisId: axis.id,
+    mainAxis: axis,
+    dataIndex,
+    axisValue,
+    axisFormattedValue,
+    seriesItems: [],
+  };
+}
 
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
-export function useAxesTooltip(params?: UseAxesTooltipParams): UseAxisTooltipReturnValue[] | null {
-  return useAxisTooltip({ ...params, multipleAxes: true });
+export function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null {
+  const { directions } = params ?? {};
+
+  const defaultXAxis = useXAxis();
+  const defaultYAxis = useYAxis();
+  const defaultRotationAxis = useRotationAxis();
+
+  const store = useStore<[UseChartCartesianAxisSignature]>();
+
+  const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
+
+  const tooltipRotationAxes = store.use(selectorChartsInteractionTooltipRotationAxes);
+
+  const series = useSeries();
+
+  const { xAxis } = useXAxes();
+  const { yAxis } = useYAxes();
+  const { zAxis, zAxisIds } = useZAxes();
+
+  const { rotationAxis } = useRotationAxes();
+
+  const colorProcessors = useColorProcessor();
+
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
+    return null;
+  }
+
+  const tooltipAxes: UseAxesTooltipReturnValue[] = [];
+
+  if (directions === undefined || directions.includes('x')) {
+    tooltipXAxes.forEach(({ axisId, dataIndex }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(xAxis[axisId], dataIndex, 'x'));
+    });
+  }
+
+  if (directions === undefined || directions.includes('y')) {
+    tooltipYAxes.forEach(({ axisId, dataIndex }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(yAxis[axisId], dataIndex, 'y'));
+    });
+  }
+
+  if (directions === undefined || directions.includes('rotation')) {
+    tooltipRotationAxes.forEach(({ axisId, dataIndex }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
+    });
+  }
+
+  Object.keys(series)
+    .filter(isCartesianSeriesType)
+    .forEach(<SeriesT extends CartesianChartSeriesType>(seriesType: SeriesT) => {
+      const seriesOfType = series[seriesType];
+      if (!seriesOfType) {
+        return [];
+      }
+      return seriesOfType.seriesOrder.forEach((seriesId) => {
+        const seriesToAdd = seriesOfType.series[seriesId]!;
+
+        const providedXAxisId = seriesToAdd.xAxisId ?? defaultXAxis.id;
+        const providedYAxisId = seriesToAdd.yAxisId ?? defaultYAxis.id;
+
+        const tooltipItemIndex = tooltipAxes.findIndex(
+          ({ axisDirection, axisId }) =>
+            (axisDirection === 'x' && axisId === providedXAxisId) ||
+            (axisDirection === 'y' && axisId === providedYAxisId),
+        );
+        // Test if the series uses the default axis
+        if (tooltipItemIndex >= 0) {
+          const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+          const { dataIndex } = tooltipAxes[tooltipItemIndex];
+          const color =
+            colorProcessors[seriesType]?.(
+              seriesToAdd,
+              xAxis[providedXAxisId],
+              yAxis[providedYAxisId],
+              zAxisId ? zAxis[zAxisId] : undefined,
+            )(dataIndex) ?? '';
+
+          const value = seriesToAdd.data[dataIndex] ?? null;
+          const formattedValue = (seriesToAdd.valueFormatter as any)(value, {
+            dataIndex,
+          });
+          const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
+
+          tooltipAxes[tooltipItemIndex].seriesItems.push({
+            seriesId,
+            color,
+            value,
+            formattedValue,
+            formattedLabel,
+            markType: seriesToAdd.labelMarkType,
+          });
+        }
+      });
+    });
+
+  Object.keys(series)
+    .filter(isPolarSeriesType)
+    .forEach(<SeriesT extends PolarChartSeriesType>(seriesType: SeriesT) => {
+      const seriesOfType = series[seriesType];
+      if (!seriesOfType) {
+        return [];
+      }
+      return seriesOfType.seriesOrder.forEach((seriesId) => {
+        const seriesToAdd = seriesOfType.series[seriesId]!;
+
+        const providedRotationAxisId: AxisId | undefined =
+          // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
+          seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+
+        const tooltipItemIndex = tooltipAxes.findIndex(
+          ({ axisDirection, axisId }) =>
+            axisDirection === 'rotation' && axisId === providedRotationAxisId,
+        );
+        // Test if the series uses the default axis
+        if (tooltipItemIndex >= 0) {
+          const { dataIndex } = tooltipAxes[tooltipItemIndex];
+          const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+
+          const value = seriesToAdd.data[dataIndex] ?? null;
+          const formattedValue = (seriesToAdd.valueFormatter as any)(value, {
+            dataIndex,
+          });
+          const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
+
+          tooltipAxes[tooltipItemIndex].seriesItems.push({
+            seriesId,
+            color,
+            value,
+            formattedValue,
+            formattedLabel,
+            markType: seriesToAdd.labelMarkType,
+          });
+        }
+      });
+    });
+
+  return tooltipAxes;
 }