@mui/x-charts 9.0.2 → 9.0.4

package/ChartsTooltip/useAxesTooltip.mjs

@@ -5,7 +5,7 @@ import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeri
 import { useStore } from "../internals/store/useStore.mjs";
 import { getLabel } from "../internals/getLabel.mjs";
 import { utcFormatter } from "./utils.mjs";
-import { useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.mjs";
+import { useRadiusAxes, useRadiusAxis, useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.mjs";
 import { useZAxes } from "../hooks/useZAxis.mjs";
 import { selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
@@ -29,7 +29,15 @@ function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
     seriesItems: []
   };
 }
-
+function getSeriesMark(series) {
+  if (!('showMark' in series) || !series.showMark) {
+    return undefined;
+  }
+  if ('shape' in series && series.shape) {
+    return series.shape;
+  }
+  return 'circle';
+}
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
@@ -40,6 +48,7 @@ export function useAxesTooltip(params) {
   const defaultXAxis = useXAxis();
   const defaultYAxis = useYAxis();
   const defaultRotationAxis = useRotationAxis();
+  const defaultRadiusAxis = useRadiusAxis();
   const store = useStore();
   const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
@@ -58,6 +67,9 @@ export function useAxesTooltip(params) {
   const {
     rotationAxis
   } = useRotationAxes();
+  const {
+    radiusAxis
+  } = useRadiusAxes();
   const colorProcessors = useColorProcessor();
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
   if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
@@ -160,7 +172,7 @@ export function useAxesTooltip(params) {
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType,
-          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? seriesToAdd.shape ?? 'circle' : undefined
+          markShape: getSeriesMark(seriesToAdd)
         });
       }
     });
@@ -180,9 +192,8 @@ export function useAxesTooltip(params) {
       })) {
         return;
       }
-      const providedRotationAxisId =
-      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
-      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+      const providedRotationAxisId = ('rotationAxisId' in seriesToAdd ? seriesToAdd.rotationAxisId : undefined) ?? defaultRotationAxis?.id;
+      const providedRadiusAxisId = ('radiusAxisId' in seriesToAdd ? seriesToAdd.radiusAxisId : undefined) ?? defaultRadiusAxis?.id;
       const tooltipItemIndex = tooltipAxes.findIndex(({
         axisDirection,
         axisId
@@ -192,7 +203,7 @@ export function useAxesTooltip(params) {
         const {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+        const color = colorProcessors[seriesType]?.(seriesToAdd, providedRotationAxisId !== undefined ? rotationAxis[providedRotationAxisId] : undefined, providedRadiusAxisId !== undefined ? radiusAxis[providedRadiusAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex
@@ -205,7 +216,7 @@ export function useAxesTooltip(params) {
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType,
-          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? 'circle' : undefined
+          markShape: getSeriesMark(seriesToAdd)
         });
       }
     });

package/ChartsTooltip/useItemTooltip.d.mts

@@ -1,4 +1,4 @@
-import { type ChartSeriesType } from "../models/seriesType/config.mjs";
+import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,4 +1,4 @@
-import { type ChartSeriesType } from "../models/seriesType/config.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;

package/ChartsTooltip/useItemTooltip.js

@@ -13,6 +13,7 @@ var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _isCartesian = require("../internals/isCartesian");
+var _isPolar = require("../internals/isPolar");
 function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
   const identifier = store.use(_useChartTooltip.selectorChartsTooltipItem);
@@ -34,6 +35,10 @@ function useInternalItemTooltip() {
     rotationAxis,
     rotationAxisIds
   } = (0, _useAxis.useRotationAxes)();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = (0, _useAxis.useRadiusAxes)();
   if (!identifier) {
     return null;
   }
@@ -43,9 +48,16 @@ function useInternalItemTooltip() {
   }
   const xAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
   const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
+  const radiusAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('radiusAxisId' in itemSeries ? itemSeries.radiusAxisId : undefined) ?? radiusAxisIds[0] : undefined;
+  const rotationAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('rotationAxisId' in itemSeries ? itemSeries.rotationAxisId : undefined) ?? rotationAxisIds[0] : undefined;
   const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
-  const rotationAxisId = rotationAxisIds[0];
-  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId !== undefined ? xAxis[xAxisId] : undefined, yAxisId !== undefined ? yAxis[yAxisId] : undefined, zAxisId !== undefined ? zAxis[zAxisId] : undefined) ?? (() => '');
+  const mainAxis =
+  // eslint-disable-next-line no-nested-ternary
+  rotationAxisId !== undefined ? rotationAxis[rotationAxisId] : xAxisId !== undefined ? xAxis[xAxisId] : undefined;
+  const secondAxis =
+  // eslint-disable-next-line no-nested-ternary
+  radiusAxisId !== undefined ? radiusAxis[radiusAxisId] : yAxisId !== undefined ? yAxis[yAxisId] : undefined;
+  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, zAxisId !== undefined ? zAxis[zAxisId] : undefined);
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];
@@ -56,6 +68,9 @@ function useInternalItemTooltip() {
   if (rotationAxisId !== undefined) {
     axesConfig.rotation = rotationAxis[rotationAxisId];
   }
+  if (radiusAxisId !== undefined) {
+    axesConfig.radius = radiusAxis[radiusAxisId];
+  }
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,
     axesConfig,

package/ChartsTooltip/useItemTooltip.mjs

@@ -3,10 +3,11 @@
 import { useSeries } from "../hooks/useSeries.mjs";
 import { selectorChartsTooltipItem } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
-import { useRotationAxes, useXAxes, useYAxes } from "../hooks/useAxis.mjs";
+import { useRadiusAxes, useRotationAxes, useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { useZAxes } from "../hooks/useZAxis.mjs";
 import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 import { isCartesianSeries } from "../internals/isCartesian.mjs";
+import { isPolarSeries } from "../internals/isPolar.mjs";
 export function useInternalItemTooltip() {
   const store = useStore();
   const identifier = store.use(selectorChartsTooltipItem);
@@ -28,6 +29,10 @@ export function useInternalItemTooltip() {
     rotationAxis,
     rotationAxisIds
   } = useRotationAxes();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = useRadiusAxes();
   if (!identifier) {
     return null;
   }
@@ -37,9 +42,16 @@ export function useInternalItemTooltip() {
   }
   const xAxisId = isCartesianSeries(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
   const yAxisId = isCartesianSeries(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
+  const radiusAxisId = isPolarSeries(itemSeries) ? ('radiusAxisId' in itemSeries ? itemSeries.radiusAxisId : undefined) ?? radiusAxisIds[0] : undefined;
+  const rotationAxisId = isPolarSeries(itemSeries) ? ('rotationAxisId' in itemSeries ? itemSeries.rotationAxisId : undefined) ?? rotationAxisIds[0] : undefined;
   const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
-  const rotationAxisId = rotationAxisIds[0];
-  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId !== undefined ? xAxis[xAxisId] : undefined, yAxisId !== undefined ? yAxis[yAxisId] : undefined, zAxisId !== undefined ? zAxis[zAxisId] : undefined) ?? (() => '');
+  const mainAxis =
+  // eslint-disable-next-line no-nested-ternary
+  rotationAxisId !== undefined ? rotationAxis[rotationAxisId] : xAxisId !== undefined ? xAxis[xAxisId] : undefined;
+  const secondAxis =
+  // eslint-disable-next-line no-nested-ternary
+  radiusAxisId !== undefined ? radiusAxis[radiusAxisId] : yAxisId !== undefined ? yAxis[yAxisId] : undefined;
+  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, zAxisId !== undefined ? zAxis[zAxisId] : undefined);
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];
@@ -50,6 +62,9 @@ export function useInternalItemTooltip() {
   if (rotationAxisId !== undefined) {
     axesConfig.rotation = rotationAxis[rotationAxisId];
   }
+  if (radiusAxisId !== undefined) {
+    axesConfig.radius = radiusAxis[radiusAxisId];
+  }
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,
     axesConfig,