@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

package/internals/plugins/corePlugins/useChartSeriesConfig/types/tooltipGetter.types.d.ts

@@ -4,23 +4,15 @@ import { type SeriesId } from "../../../../../models/seriesType/common.js";
 import { type AxisId, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type PolarAxisDefaultized, type ComputedXAxis, type ComputedYAxis } from "../../../../../models/axis.js";
 import { type ChartsLabelMarkProps } from "../../../../../ChartsLabel/ChartsLabelMark.js";
 import { type ColorGetter } from "./colorProcessor.types.js";
-export interface ItemTooltip<SeriesType extends ChartSeriesType> {
+export interface ItemTooltipValue<SeriesType extends ChartSeriesType> {
   /**
-   * An object that identifies the item to display.
-   */
-  identifier: SeriesItemIdentifierWithType<SeriesType>;
-  /**
-   * The color associated with the item.
-   */
-  color: string;
-  /**
-   * The item label.
+   * The metric label.
    */
   label: string | undefined;
   /**
-   * The item value.
+   * The value.
    */
-  value: ChartsSeriesConfig[SeriesType]['valueType'];
+  value: SeriesType extends 'heatmap' ? number | null : ChartsSeriesConfig[SeriesType]['valueType'];
   /**
    * The value formatted with context set to "tooltip".
    */
@@ -34,29 +26,18 @@ export interface ItemTooltip<SeriesType extends ChartSeriesType> {
    */
   markShape?: ChartsLabelMarkProps['markShape'];
 }
+export interface ItemTooltip<SeriesType extends ChartSeriesType> extends ItemTooltipValue<SeriesType> {
+  /**
+   * An object that identifies the item to display.
+   */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /**
+   * The color associated with the item.
+   */
+  color: string;
+}
 export type ItemTooltipWithMultipleValues<T extends 'radar' = 'radar'> = Pick<ItemTooltip<T>, 'identifier' | 'color' | 'label' | 'markType' | 'markShape'> & {
-  values: {
-    /**
-     * The metric label.
-     */
-    label: string | undefined;
-    /**
-     * The value.
-     */
-    value: ChartsSeriesConfig[T]['valueType'];
-    /**
-     * The value formatted with context set to "tooltip".
-     */
-    formattedValue: string | null;
-    /**
-     * The series mark type.
-     */
-    markType: ChartsLabelMarkProps['type'];
-    /**
-     * The series mark shape.
-     */
-    markShape?: ChartsLabelMarkProps['markShape'];
-  }[];
+  values: ItemTooltipValue<T>[];
 };
 export interface TooltipGetterAxesConfig {
   x?: ComputedXAxis;
@@ -69,9 +50,7 @@ export type TooltipGetter<SeriesType extends ChartSeriesType> = (params: {
   axesConfig: TooltipGetterAxesConfig;
   getColor: ColorGetter<SeriesType>;
   identifier: SeriesItemIdentifierWithType<SeriesType> | null;
-}) => (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : SeriesType extends 'heatmap' ? Omit<ItemTooltip<SeriesType>, 'value'> & {
-  value: number | null;
-} : ItemTooltip<SeriesType>) | null;
+}) => (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;
 /**
  * If `axisId` is set to undefined, the default axis will be used.
  *

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.d.mts

@@ -1,12 +1,6 @@
-import { type SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.mjs";
-import { type ChartSeriesType } from "../../../../models/seriesType/config.mjs";
-import { type UseChartHighlightSignature } from "../useChartHighlight/index.mjs";
-import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.mjs";
-import { type ChartState } from "../../models/index.mjs";
 /**
- * Hook to get pointer interaction props for chart items.
+ * Hook that registers pointer interaction handlers on the chart container.
+ * It iterates through all series configs' `getItemAtPosition` to find which
+ * item is at the pointer position and updates highlight/tooltip state accordingly.
  */
-export declare function useRegisterPointerInteractions<SeriesType extends ChartSeriesType>(getItemAtPosition: (state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature<SeriesType>]>, point: {
-  x: number;
-  y: number;
-}) => SeriesItemIdentifierWithType<SeriesType> | undefined, onItemEnter?: () => void, onItemLeave?: () => void): void;
+export declare function useRegisterPointerInteractions(): void;

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.d.ts

@@ -1,12 +1,6 @@
-import { type SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.js";
-import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { type UseChartHighlightSignature } from "../useChartHighlight/index.js";
-import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.js";
-import { type ChartState } from "../../models/index.js";
 /**
- * Hook to get pointer interaction props for chart items.
+ * Hook that registers pointer interaction handlers on the chart container.
+ * It iterates through all series configs' `getItemAtPosition` to find which
+ * item is at the pointer position and updates highlight/tooltip state accordingly.
  */
-export declare function useRegisterPointerInteractions<SeriesType extends ChartSeriesType>(getItemAtPosition: (state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature<SeriesType>]>, point: {
-  x: number;
-  y: number;
-}) => SeriesItemIdentifierWithType<SeriesType> | undefined, onItemEnter?: () => void, onItemLeave?: () => void): void;
+export declare function useRegisterPointerInteractions(): void;

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -1,34 +1,36 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRegisterPointerInteractions = useRegisterPointerInteractions;
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _hooks = require("../../../../hooks");
 var _useStore = require("../../../store/useStore");
-var _ChartProvider = require("../../../../context/ChartProvider");
+var _ChartsProvider = require("../../../../context/ChartsProvider");
 var _getChartPoint = require("../../../getChartPoint");
 /**
- * Hook to get pointer interaction props for chart items.
+ * Hook that registers pointer interaction handlers on the chart container.
+ * It iterates through all series configs' `getItemAtPosition` to find which
+ * item is at the pointer position and updates highlight/tooltip state accordingly.
  */
-function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLeave) {
+function useRegisterPointerInteractions() {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const chartsLayerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
   const store = (0, _useStore.useStore)();
   const interactionActive = React.useRef(false);
   const lastItemRef = React.useRef(undefined);
-  const onItemEnterRef = (0, _useEventCallback.default)(() => onItemEnter?.());
-  const onItemLeaveRef = (0, _useEventCallback.default)(() => onItemLeave?.());
   React.useEffect(() => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
+    const element = chartsLayerContainerRef.current;
+    if (!element) {
+      return undefined;
+    }
+    const hasGetItemAtPosition = Object.values(store.state.seriesConfig.config).some(config => config.getItemAtPosition != null);
+    if (!hasGetItemAtPosition) {
       return undefined;
     }
     function onPointerEnter() {
@@ -40,7 +42,6 @@ function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLe
         lastItemRef.current = undefined;
         instance.removeTooltipItem(lastItem);
         instance.clearHighlight();
-        onItemLeaveRef();
       }
     }
     function onPointerLeave() {
@@ -48,34 +49,42 @@ function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLe
       reset();
     }
     const onPointerMove = function onPointerMove(event) {
-      const svgPoint = (0, _getChartPoint.getChartPoint)(svg, event);
+      const svgPoint = (0, _getChartPoint.getChartPoint)(element, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         reset();
         return;
       }
-      const item = getItemAtPosition(store.state, svgPoint);
+      let item;
+      for (const seriesType of Object.keys(store.state.seriesConfig.config)) {
+        item = store.state.seriesConfig.config[seriesType].getItemAtPosition?.(store.state, {
+          x: svgPoint.x,
+          y: svgPoint.y
+        });
+        if (item) {
+          break;
+        }
+      }
       if (item) {
         instance.setLastUpdateSource('pointer');
         instance.setTooltipItem(item);
         instance.setHighlight(item);
-        onItemEnterRef();
         lastItemRef.current = item;
       } else {
         reset();
       }
     };
-    svg.addEventListener('pointerleave', onPointerLeave);
-    svg.addEventListener('pointermove', onPointerMove);
-    svg.addEventListener('pointerenter', onPointerEnter);
+    element.addEventListener('pointerleave', onPointerLeave);
+    element.addEventListener('pointermove', onPointerMove);
+    element.addEventListener('pointerenter', onPointerEnter);
     return () => {
-      svg.removeEventListener('pointerenter', onPointerEnter);
-      svg.removeEventListener('pointermove', onPointerMove);
-      svg.removeEventListener('pointerleave', onPointerLeave);
+      element.removeEventListener('pointerenter', onPointerEnter);
+      element.removeEventListener('pointermove', onPointerMove);
+      element.removeEventListener('pointerleave', onPointerLeave);
 
       /* Clean up state if this item is unmounted while active. */
       if (interactionActive.current) {
         onPointerLeave();
       }
     };
-  }, [getItemAtPosition, instance, onItemEnterRef, onItemLeaveRef, store, chartsLayerContainerRef]);
+  }, [instance, store, chartsLayerContainerRef, store.state.seriesConfig.config]);
 }

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs

@@ -1,27 +1,30 @@
 'use client';
 
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
 import { useChartsLayerContainerRef } from "../../../../hooks/index.mjs";
 import { useStore } from "../../../store/useStore.mjs";
-import { useChartContext } from "../../../../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../../../../context/ChartsProvider/index.mjs";
 import { getChartPoint } from "../../../getChartPoint.mjs";
 /**
- * Hook to get pointer interaction props for chart items.
+ * Hook that registers pointer interaction handlers on the chart container.
+ * It iterates through all series configs' `getItemAtPosition` to find which
+ * item is at the pointer position and updates highlight/tooltip state accordingly.
  */
-export function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLeave) {
+export function useRegisterPointerInteractions() {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const chartsLayerContainerRef = useChartsLayerContainerRef();
   const store = useStore();
   const interactionActive = React.useRef(false);
   const lastItemRef = React.useRef(undefined);
-  const onItemEnterRef = useEventCallback(() => onItemEnter?.());
-  const onItemLeaveRef = useEventCallback(() => onItemLeave?.());
   React.useEffect(() => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
+    const element = chartsLayerContainerRef.current;
+    if (!element) {
+      return undefined;
+    }
+    const hasGetItemAtPosition = Object.values(store.state.seriesConfig.config).some(config => config.getItemAtPosition != null);
+    if (!hasGetItemAtPosition) {
       return undefined;
     }
     function onPointerEnter() {
@@ -33,7 +36,6 @@ export function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, o
         lastItemRef.current = undefined;
         instance.removeTooltipItem(lastItem);
         instance.clearHighlight();
-        onItemLeaveRef();
       }
     }
     function onPointerLeave() {
@@ -41,34 +43,42 @@ export function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, o
       reset();
     }
     const onPointerMove = function onPointerMove(event) {
-      const svgPoint = getChartPoint(svg, event);
+      const svgPoint = getChartPoint(element, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         reset();
         return;
       }
-      const item = getItemAtPosition(store.state, svgPoint);
+      let item;
+      for (const seriesType of Object.keys(store.state.seriesConfig.config)) {
+        item = store.state.seriesConfig.config[seriesType].getItemAtPosition?.(store.state, {
+          x: svgPoint.x,
+          y: svgPoint.y
+        });
+        if (item) {
+          break;
+        }
+      }
       if (item) {
         instance.setLastUpdateSource('pointer');
         instance.setTooltipItem(item);
         instance.setHighlight(item);
-        onItemEnterRef();
         lastItemRef.current = item;
       } else {
         reset();
       }
     };
-    svg.addEventListener('pointerleave', onPointerLeave);
-    svg.addEventListener('pointermove', onPointerMove);
-    svg.addEventListener('pointerenter', onPointerEnter);
+    element.addEventListener('pointerleave', onPointerLeave);
+    element.addEventListener('pointermove', onPointerMove);
+    element.addEventListener('pointerenter', onPointerEnter);
     return () => {
-      svg.removeEventListener('pointerenter', onPointerEnter);
-      svg.removeEventListener('pointermove', onPointerMove);
-      svg.removeEventListener('pointerleave', onPointerLeave);
+      element.removeEventListener('pointerenter', onPointerEnter);
+      element.removeEventListener('pointermove', onPointerMove);
+      element.removeEventListener('pointerleave', onPointerLeave);
 
       /* Clean up state if this item is unmounted while active. */
       if (interactionActive.current) {
         onPointerLeave();
       }
     };
-  }, [getItemAtPosition, instance, onItemEnterRef, onItemLeaveRef, store, chartsLayerContainerRef]);
+  }, [instance, store, chartsLayerContainerRef, store.state.seriesConfig.config]);
 }

package/internals/plugins/featurePlugins/useChartCartesianAxis/autoSizeConstants.d.mts

@@ -0,0 +1,5 @@
+export declare const AXIS_AUTO_SIZE_PADDING = 4;
+export declare const AXIS_AUTO_SIZE_MIN = 20;
+export declare const AXIS_AUTO_SIZE_TICK_SIZE = 6;
+export declare const AXIS_AUTO_SIZE_TICK_LABEL_GAP = 2;
+export declare const AXIS_AUTO_SIZE_GROUP_GAP = 4;

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

@@ -0,0 +1,5 @@
+export declare const AXIS_AUTO_SIZE_PADDING = 4;
+export declare const AXIS_AUTO_SIZE_MIN = 20;
+export declare const AXIS_AUTO_SIZE_TICK_SIZE = 6;
+export declare const AXIS_AUTO_SIZE_TICK_LABEL_GAP = 2;
+export declare const AXIS_AUTO_SIZE_GROUP_GAP = 4;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AXIS_AUTO_SIZE_TICK_SIZE = exports.AXIS_AUTO_SIZE_TICK_LABEL_GAP = exports.AXIS_AUTO_SIZE_PADDING = exports.AXIS_AUTO_SIZE_MIN = exports.AXIS_AUTO_SIZE_GROUP_GAP = void 0;
+const AXIS_AUTO_SIZE_PADDING = exports.AXIS_AUTO_SIZE_PADDING = 4;
+const AXIS_AUTO_SIZE_MIN = exports.AXIS_AUTO_SIZE_MIN = 20;
+const AXIS_AUTO_SIZE_TICK_SIZE = exports.AXIS_AUTO_SIZE_TICK_SIZE = 6;
+const AXIS_AUTO_SIZE_TICK_LABEL_GAP = exports.AXIS_AUTO_SIZE_TICK_LABEL_GAP = 2;
+const AXIS_AUTO_SIZE_GROUP_GAP = exports.AXIS_AUTO_SIZE_GROUP_GAP = 4;

package/internals/plugins/featurePlugins/useChartCartesianAxis/autoSizeConstants.mjs

@@ -0,0 +1,5 @@
+export const AXIS_AUTO_SIZE_PADDING = 4;
+export const AXIS_AUTO_SIZE_MIN = 20;
+export const AXIS_AUTO_SIZE_TICK_SIZE = 6;
+export const AXIS_AUTO_SIZE_TICK_LABEL_GAP = 2;
+export const AXIS_AUTO_SIZE_GROUP_GAP = 4;

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisAutoSize.d.mts

@@ -0,0 +1,33 @@
+import type { DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.mjs";
+import { type DomainDefinition } from "./domain.mjs";
+interface ComputeAxisAutoSizeOptions {
+  axis: DefaultedXAxis | DefaultedYAxis;
+  direction: 'x' | 'y';
+  /**
+   * The niced domain and tick number for the axis.
+   * These reflect the actual displayed domain (after domainLimit processing),
+   * so tick labels measured from them match what the chart renders.
+   */
+  domain?: DomainDefinition;
+}
+/**
+ * Result of auto-size computation for axes.
+ */
+export interface AxisAutoSizeResult {
+  size: number;
+  /**
+   * Computed tick sizes for each group level.
+   * These are cumulative - each group's tick extends further than the previous.
+   * The renderer should use these instead of the formula-based tick sizes.
+   */
+  groupTickSizes?: number[];
+}
+/**
+ * Computes the auto-size dimension for an axis based on tick label measurements.
+ * Returns undefined if measurement is not available (SSR or not hydrated).
+ *
+ * For regular axes, returns just a number (the size).
+ * For grouped axes, returns an object with size and computed group tick sizes.
+ */
+export declare function computeAxisAutoSize(options: ComputeAxisAutoSizeOptions): AxisAutoSizeResult | undefined;
+export {};

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

@@ -0,0 +1,33 @@
+import type { DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
+import { type DomainDefinition } from "./domain.js";
+interface ComputeAxisAutoSizeOptions {
+  axis: DefaultedXAxis | DefaultedYAxis;
+  direction: 'x' | 'y';
+  /**
+   * The niced domain and tick number for the axis.
+   * These reflect the actual displayed domain (after domainLimit processing),
+   * so tick labels measured from them match what the chart renders.
+   */
+  domain?: DomainDefinition;
+}
+/**
+ * Result of auto-size computation for axes.
+ */
+export interface AxisAutoSizeResult {
+  size: number;
+  /**
+   * Computed tick sizes for each group level.
+   * These are cumulative - each group's tick extends further than the previous.
+   * The renderer should use these instead of the formula-based tick sizes.
+   */
+  groupTickSizes?: number[];
+}
+/**
+ * Computes the auto-size dimension for an axis based on tick label measurements.
+ * Returns undefined if measurement is not available (SSR or not hydrated).
+ *
+ * For regular axes, returns just a number (the size).
+ * For grouped axes, returns an object with size and computed group tick sizes.
+ */
+export declare function computeAxisAutoSize(options: ComputeAxisAutoSizeOptions): AxisAutoSizeResult | undefined;
+export {};