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

package/ChartsTooltip/useAxesTooltip.d.mts

@@ -18,7 +18,7 @@ export interface UseAxesTooltipParams {
    */
   directions?: ('x' | 'y' | 'rotation')[];
 }
-interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;
   color: string;
   value: ChartsSeriesConfig[T]['valueType'];
@@ -30,5 +30,4 @@ interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType>
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
-export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;
-export {};
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;

package/ChartsTooltip/useAxesTooltip.d.ts

@@ -18,7 +18,7 @@ export interface UseAxesTooltipParams {
    */
   directions?: ('x' | 'y' | 'rotation')[];
 }
-interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;
   color: string;
   value: ChartsSeriesConfig[T]['valueType'];
@@ -30,5 +30,4 @@ interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType>
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
-export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;
-export {};
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;

package/ChartsTooltip/useItemTooltip.d.mts

@@ -1,10 +1,8 @@
 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> = SeriesType extends 'heatmap' ? Omit<ItemTooltip<SeriesType>, 'value'> & {
-  value: number | null;
-} : ItemTooltip<SeriesType>;
+export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
-export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : UseItemTooltipReturnValue<SeriesType>) | null;
+export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;
 /**
  * Returns a config object when the tooltip contains a single item to display.
  * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,10 +1,8 @@
 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> = SeriesType extends 'heatmap' ? Omit<ItemTooltip<SeriesType>, 'value'> & {
-  value: number | null;
-} : ItemTooltip<SeriesType>;
+export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
-export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : UseItemTooltipReturnValue<SeriesType>) | null;
+export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;
 /**
  * Returns a config object when the tooltip contains a single item to display.
  * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.

package/ChartsTooltip/utils.d.mts

@@ -5,10 +5,6 @@ type MousePosition = {
   height: number;
 };
 export type UseMouseTrackerReturnValue = null | MousePosition;
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export declare function useMouseTracker(): UseMouseTrackerReturnValue;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function utcFormatter(v: string | number | Date): string;
 /**

package/ChartsTooltip/utils.d.ts

@@ -5,10 +5,6 @@ type MousePosition = {
   height: number;
 };
 export type UseMouseTrackerReturnValue = null | MousePosition;
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export declare function useMouseTracker(): UseMouseTrackerReturnValue;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function utcFormatter(v: string | number | Date): string;
 /**

package/ChartsTooltip/utils.js

@@ -1,51 +1,12 @@
 "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.useIsFineMainPointer = void 0;
-exports.useMouseTracker = useMouseTracker;
 exports.utcFormatter = utcFormatter;
-var React = _interopRequireWildcard(require("react"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _ChartProvider = require("../context/ChartProvider");
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-function useMouseTracker() {
-  const {
-    instance
-  } = (0, _ChartProvider.useChartContext)();
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const [mousePosition, setMousePosition] = React.useState(null);
-  React.useEffect(() => {
-    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
-      if (!event.detail.activeGestures.pan) {
-        setMousePosition(null);
-      }
-    });
-    const gestureHandler = event => {
-      setMousePosition({
-        x: event.detail.centroid.x,
-        y: event.detail.centroid.y,
-        height: event.detail.srcEvent.height,
-        pointerType: event.detail.srcEvent.pointerType
-      });
-    };
-    const moveHandler = instance.addInteractionListener('move', gestureHandler);
-    const panHandler = instance.addInteractionListener('pan', gestureHandler);
-    return () => {
-      moveHandler.cleanup();
-      panHandler.cleanup();
-      moveEndHandler.cleanup();
-    };
-  }, [instance]);
-  return mousePosition;
-}
 function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/ChartsTooltip/utils.mjs

@@ -1,42 +1,4 @@
-'use client';
-
-import * as React from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useChartContext } from "../context/ChartProvider/index.mjs";
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export function useMouseTracker() {
-  const {
-    instance
-  } = useChartContext();
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const [mousePosition, setMousePosition] = React.useState(null);
-  React.useEffect(() => {
-    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
-      if (!event.detail.activeGestures.pan) {
-        setMousePosition(null);
-      }
-    });
-    const gestureHandler = event => {
-      setMousePosition({
-        x: event.detail.centroid.x,
-        y: event.detail.centroid.y,
-        height: event.detail.srcEvent.height,
-        pointerType: event.detail.srcEvent.pointerType
-      });
-    };
-    const moveHandler = instance.addInteractionListener('move', gestureHandler);
-    const panHandler = instance.addInteractionListener('pan', gestureHandler);
-    return () => {
-      moveHandler.cleanup();
-      panHandler.cleanup();
-      moveEndHandler.cleanup();
-    };
-  }, [instance]);
-  return mousePosition;
-}
 export function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -11,20 +11,22 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _scaleGuards = require("../internals/scaleGuards");
-var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
 var _useAxisTicksProps = require("./useAxisTicksProps");
+var _useStore = require("../internals/store/useStore");
+var _useChartAxisAutoSize = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_GROUPING_CONFIG = {
   tickSize: 6
 };
-const getGroupingConfig = (groups, groupIndex, tickSize) => {
+const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
   const config = groups[groupIndex] ?? {};
   const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
   const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
   return (0, _extends2.default)({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: config.tickSize ?? calculatedTickSize
+    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
   });
 };
 /**
@@ -54,9 +56,16 @@ function ChartsGroupedXAxisTicks(inProps) {
     tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
+  const axisId = defaultizedProps.id;
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
+  const store = (0, _useStore.useStore)();
+
+  // Get computed group tick sizes from auto-sizing (if available)
+  const autoSizeResults = store.use(_useChartAxisAutoSize.selectorChartXAxisAutoSizeResults);
+  const axisAutoSizeResult = axisId ? autoSizeResults[axisId] : undefined;
+  const computedGroupTickSizes = axisAutoSizeResult?.groupTickSizes;
   const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: xScale,
     tickNumber,
@@ -78,7 +87,7 @@ function ChartsGroupedXAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickYSize = positionSign * groupConfig.tickSize;
       const labelPositionY = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {

package/ChartsXAxis/ChartsGroupedXAxisTicks.mjs

@@ -4,20 +4,22 @@ import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { isOrdinalScale } from "../internals/scaleGuards.mjs";
-import { useChartContext } from "../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../context/ChartsProvider/useChartsContext.mjs";
 import { TICK_LABEL_GAP } from "./utilities.mjs";
 import { useTicksGrouped } from "../hooks/useTicksGrouped.mjs";
 import { useAxisTicksProps } from "./useAxisTicksProps.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartXAxisAutoSizeResults } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisAutoSize.selectors.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_GROUPING_CONFIG = {
   tickSize: 6
 };
-const getGroupingConfig = (groups, groupIndex, tickSize) => {
+const getGroupingConfig = (groups, groupIndex, tickSize, computedGroupTickSizes) => {
   const config = groups[groupIndex] ?? {};
   const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
   const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
   return _extends({}, DEFAULT_GROUPING_CONFIG, config, {
-    tickSize: config.tickSize ?? calculatedTickSize
+    tickSize: computedGroupTickSizes?.[groupIndex] ?? config.tickSize ?? calculatedTickSize
   });
 };
 /**
@@ -47,9 +49,16 @@ function ChartsGroupedXAxisTicks(inProps) {
     tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
+  const axisId = defaultizedProps.id;
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
+  const store = useStore();
+
+  // Get computed group tick sizes from auto-sizing (if available)
+  const autoSizeResults = store.use(selectorChartXAxisAutoSizeResults);
+  const axisAutoSizeResult = axisId ? autoSizeResults[axisId] : undefined;
+  const computedGroupTickSizes = axisAutoSizeResult?.groupTickSizes;
   const xTicks = useTicksGrouped({
     scale: xScale,
     tickNumber,
@@ -71,7 +80,7 @@ function ChartsGroupedXAxisTicks(inProps) {
       const tickLabel = item.formattedValue;
       const ignoreTick = item.ignoreTick ?? false;
       const groupIndex = item.groupIndex ?? 0;
-      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize, computedGroupTickSizes);
       const tickYSize = positionSign * groupConfig.tickSize;
       const labelPositionY = positionSign * (groupConfig.tickSize + TICK_LABEL_GAP);
       return /*#__PURE__*/_jsxs("g", {

package/ChartsXAxis/ChartsSingleXAxisTicks.js

@@ -14,7 +14,7 @@ var _useIsHydrated = require("../hooks/useIsHydrated");
 var _useTicks = require("../hooks/useTicks");
 var _useMounted = require("../hooks/useMounted");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
 var _shortenLabels = require("./shortenLabels");
 var _getVisibleLabels = require("./getVisibleLabels");
 var _utilities = require("./utilities");
@@ -57,7 +57,7 @@ function ChartsSingleXAxisTicks(inProps) {
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const isHydrated = (0, _useIsHydrated.useIsHydrated)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const xTicks = (0, _useTicks.useTicks)({

package/ChartsXAxis/ChartsSingleXAxisTicks.mjs

@@ -7,7 +7,7 @@ import { useIsHydrated } from "../hooks/useIsHydrated.mjs";
 import { useTicks } from "../hooks/useTicks.mjs";
 import { useMounted } from "../hooks/useMounted.mjs";
 import { useDrawingArea } from "../hooks/useDrawingArea.mjs";
-import { useChartContext } from "../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../context/ChartsProvider/useChartsContext.mjs";
 import { shortenLabels } from "./shortenLabels.mjs";
 import { getVisibleLabels } from "./getVisibleLabels.mjs";
 import { AXIS_LABEL_TICK_LABEL_GAP, TICK_LABEL_GAP } from "./utilities.mjs";
@@ -50,7 +50,7 @@ function ChartsSingleXAxisTicks(inProps) {
   const drawingArea = useDrawingArea();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const isHydrated = useIsHydrated();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const xTicks = useTicks({

package/ChartsXAxis/ChartsXAxisImpl.js

@@ -10,6 +10,7 @@ exports.ChartsXAxisImpl = ChartsXAxisImpl;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _styles = require("@mui/material/styles");
 var _ChartsSingleXAxisTicks = require("./ChartsSingleXAxisTicks");
@@ -52,6 +53,7 @@ function ChartsXAxisImpl(_ref) {
   const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
   const {
     position,
+    className,
     labelStyle,
     offset,
     slots,
@@ -107,7 +109,7 @@ function ChartsXAxisImpl(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     "data-axis-id": defaultizedProps.id,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({

package/ChartsXAxis/ChartsXAxisImpl.mjs

@@ -5,6 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["axis"],
   _excluded2 = ["scale", "tickNumber", "reverse", "ordinalTimeTicks"];
 import * as React from 'react';
+import clsx from 'clsx';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import { ChartsSingleXAxisTicks } from "./ChartsSingleXAxisTicks.mjs";
@@ -45,6 +46,7 @@ export function ChartsXAxisImpl(_ref) {
   const defaultizedProps = _extends({}, defaultProps, themedProps);
   const {
     position,
+    className,
     labelStyle,
     offset,
     slots,
@@ -100,7 +102,7 @@ export function ChartsXAxisImpl(_ref) {
   };
   return /*#__PURE__*/_jsxs(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
+    className: clsx(classes.root, className),
     "data-axis-id": defaultizedProps.id,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({