@mui/x-charts 8.26.0 → 9.0.0-alpha.0

package/ChartsTooltip/useAxesTooltip.js

@@ -1,18 +1,185 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxesTooltip = useAxesTooltip;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useAxisTooltip = require("./useAxisTooltip");
+var _useSeries = require("../hooks/useSeries");
+var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
+var _useStore = require("../internals/store/useStore");
+var _getLabel = require("../internals/getLabel");
+var _isCartesian = require("../internals/isCartesian");
+var _utils = require("./utils");
+var _useAxis = require("../hooks/useAxis");
+var _useZAxis = require("../hooks/useZAxis");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
+var _isPolar = require("../internals/isPolar");
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors");
+function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
+  const axisValue = axis.data?.[dataIndex] ?? null;
+  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? (0, _utils.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.
  */
 function useAxesTooltip(params) {
-  return (0, _useAxisTooltip.useAxisTooltip)((0, _extends2.default)({}, params, {
-    multipleAxes: true
-  }));
+  const {
+    directions
+  } = params ?? {};
+  const defaultXAxis = (0, _useAxis.useXAxis)();
+  const defaultYAxis = (0, _useAxis.useYAxis)();
+  const defaultRotationAxis = (0, _useAxis.useRotationAxis)();
+  const store = (0, _useStore.useStore)();
+  const tooltipXAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = store.use(_useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
+  const series = (0, _useSeries.useSeries)();
+  const {
+    xAxis
+  } = (0, _useAxis.useXAxes)();
+  const {
+    yAxis
+  } = (0, _useAxis.useYAxes)();
+  const {
+    zAxis,
+    zAxisIds
+  } = (0, _useZAxis.useZAxes)();
+  const {
+    rotationAxis
+  } = (0, _useAxis.useRotationAxes)();
+  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+  const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
+    return null;
+  }
+  const tooltipAxes = [];
+  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(_isCartesian.isCartesianSeriesType).forEach(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.forEach(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+
+      // Skip hidden series (only if visibility manager is available)
+      if (isItemVisible && !isItemVisible({
+        type: seriesType,
+        seriesId
+      })) {
+        return;
+      }
+      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(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
+        });
+      }
+    });
+  });
+  Object.keys(series).filter(_isPolar.isPolarSeriesType).forEach(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.forEach(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+
+      // Skip hidden series (only if visibility manager is available)
+      if (isItemVisible && !isItemVisible({
+        type: seriesType,
+        seriesId
+      })) {
+        return;
+      }
+      const providedRotationAxisId =
+      // @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(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
+        });
+      }
+    });
+  });
+  return tooltipAxes;
 }

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,5 +1,5 @@
 import { type ChartSeriesType } from "../models/seriesType/config.js";
-import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/models/seriesConfig/tooltipGetter.types.js";
+import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
 export declare function useInternalItemTooltip<T extends ChartSeriesType>(): (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>) | null;

package/ChartsTooltip/useItemTooltip.js

@@ -11,12 +11,12 @@ var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTool
 var _useStore = require("../internals/store/useStore");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
-var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _isCartesian = require("../internals/isCartesian");
 function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
   const identifier = store.use(_useChartTooltip.selectorChartsTooltipItem);
-  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,

package/ChartsXAxis/ChartsXAxis.d.ts

@@ -1,4 +1,6 @@
-import { type ChartsXAxisProps } from "../models/axis.js";
+import { type ChartsXAxisProps, type ChartsAxisSlots, type ChartsAxisSlotProps } from "../models/axis.js";
+export interface ChartsXAxisSlots extends ChartsAxisSlots {}
+export interface ChartsXAxisSlotProps extends ChartsAxisSlotProps {}
 /**
  * Demos:
  *

package/ChartsXAxis/ChartsXAxis.js

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * API:
  *
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
- */function ChartsXAxis(inProps) {
+ */
+function ChartsXAxis(inProps) {
   const {
     xAxis,
     xAxisIds

package/ChartsXAxis/ChartsXAxisImpl.js

@@ -44,7 +44,7 @@ function ChartsXAxisImpl(_ref) {
     } = axis,
     settings = (0, _objectWithoutPropertiesLoose2.default)(axis, _excluded2);
 
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = (0, _styles.useThemeProps)({
     props: (0, _extends2.default)({}, settings, inProps),
     name: 'MuiChartsXAxis'
@@ -108,6 +108,7 @@ function ChartsXAxisImpl(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
     className: classes.root,
+    "data-axis-id": defaultizedProps.id,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
       x1: left,

package/ChartsXAxis/getVisibleLabels.d.ts

@@ -1,6 +1,6 @@
-import { type TickItemType } from "../hooks/useTicks.js";
+import { type TickItem } from "../hooks/useTicks.js";
 import { type ChartsXAxisProps, type ComputedXAxis } from "../models/axis.js";
-export declare function getVisibleLabels<T extends TickItemType>(xTicks: T[], {
+export declare function getVisibleLabels<T extends TickItem>(xTicks: T[], {
   tickLabelStyle: style,
   tickLabelInterval,
   tickLabelMinGap,

package/ChartsXAxis/shortenLabels.d.ts

@@ -1,4 +1,4 @@
-import { type TickItemType } from "../hooks/useTicks.js";
+import { type TickItem } from "../hooks/useTicks.js";
 import { type ChartsXAxisProps } from "../models/axis.js";
 import { type ChartDrawingArea } from "../hooks/useDrawingArea.js";
-export declare function shortenLabels(visibleLabels: Set<TickItemType>, drawingArea: Pick<ChartDrawingArea, 'left' | 'width' | 'right'>, maxHeight: number, isRtl: boolean, tickLabelStyle: ChartsXAxisProps['tickLabelStyle']): Map<TickItemType, string>;
+export declare function shortenLabels(visibleLabels: Set<TickItem>, drawingArea: Pick<ChartDrawingArea, 'left' | 'width' | 'right'>, maxHeight: number, isRtl: boolean, tickLabelStyle: ChartsXAxisProps['tickLabelStyle']): Map<TickItem, string>;