@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.4

package/ChartsTooltip/useAxesTooltip.d.mts

@@ -18,16 +18,16 @@ 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'];
   formattedValue: string;
   formattedLabel: string | null;
   markType: ChartsLabelMarkProps['type'];
+  markShape: ChartsLabelMarkProps['markShape'];
 }
 /**
  * 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,16 +18,16 @@ 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'];
   formattedValue: string;
   formattedLabel: string | null;
   markType: ChartsLabelMarkProps['type'];
+  markShape: ChartsLabelMarkProps['markShape'];
 }
 /**
  * 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.js

@@ -9,7 +9,6 @@ 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");
@@ -17,6 +16,7 @@ var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useCha
 var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
 var _isPolar = require("../internals/isPolar");
 var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors");
+var _composition = require("../models/seriesType/composition");
 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());
@@ -93,7 +93,7 @@ function useAxesTooltip(params) {
       tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
     });
   }
-  Object.keys(series).filter(_isCartesian.isCartesianSeriesType).forEach(seriesType => {
+  Object.keys(series).filter(seriesType => _composition.composableCartesianSeriesTypes.has(seriesType)).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
       return [];
@@ -132,7 +132,8 @@ function useAxesTooltip(params) {
           value,
           formattedValue,
           formattedLabel,
-          markType: seriesToAdd.labelMarkType
+          markType: seriesToAdd.labelMarkType,
+          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? seriesToAdd.shape ?? 'circle' : undefined
         });
       }
     });
@@ -176,7 +177,8 @@ function useAxesTooltip(params) {
           value,
           formattedValue,
           formattedLabel,
-          markType: seriesToAdd.labelMarkType
+          markType: seriesToAdd.labelMarkType,
+          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? 'circle' : undefined
         });
       }
     });

package/ChartsTooltip/useAxesTooltip.mjs

@@ -4,7 +4,6 @@ import { useSeries } from "../hooks/useSeries.mjs";
 import { useColorProcessor } from "../internals/plugins/corePlugins/useChartSeries/useColorProcessor.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { getLabel } from "../internals/getLabel.mjs";
-import { isCartesianSeriesType } from "../internals/isCartesian.mjs";
 import { utcFormatter } from "./utils.mjs";
 import { useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.mjs";
 import { useZAxes } from "../hooks/useZAxis.mjs";
@@ -12,6 +11,7 @@ import { selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltip
 import { selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 import { isPolarSeriesType } from "../internals/isPolar.mjs";
 import { selectorIsItemVisibleGetter } from "../internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.mjs";
+import { composableCartesianSeriesTypes } from "../models/seriesType/composition.mjs";
 function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
   const axisValue = axis.data?.[dataIndex] ?? null;
   const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
@@ -88,7 +88,7 @@ export function useAxesTooltip(params) {
       tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
     });
   }
-  Object.keys(series).filter(isCartesianSeriesType).forEach(seriesType => {
+  Object.keys(series).filter(seriesType => composableCartesianSeriesTypes.has(seriesType)).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
       return [];
@@ -127,7 +127,8 @@ export function useAxesTooltip(params) {
           value,
           formattedValue,
           formattedLabel,
-          markType: seriesToAdd.labelMarkType
+          markType: seriesToAdd.labelMarkType,
+          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? seriesToAdd.shape ?? 'circle' : undefined
         });
       }
     });
@@ -171,7 +172,8 @@ export function useAxesTooltip(params) {
           value,
           formattedValue,
           formattedLabel,
-          markType: seriesToAdd.labelMarkType
+          markType: seriesToAdd.labelMarkType,
+          markShape: 'showMark' in seriesToAdd && seriesToAdd.showMark ? 'circle' : undefined
         });
       }
     });

package/ChartsTooltip/useItemTooltip.d.mts

@@ -1,14 +1,14 @@
 import { type ChartSeriesType } from "../models/seriesType/config.mjs";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
-export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
+export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
-export declare function useInternalItemTooltip<T extends ChartSeriesType>(): (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>) | 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.
  * @returns The tooltip item config
  */
-export declare const useItemTooltip: <T extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<T> | null;
+export declare const useItemTooltip: <SeriesType extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<SeriesType> | null;
 /**
  * Contains an object per value with their content and the label of the associated metric.
  * @returns The tooltip item configs

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,14 +1,14 @@
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
-export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
+export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
-export declare function useInternalItemTooltip<T extends ChartSeriesType>(): (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>) | 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.
  * @returns The tooltip item config
  */
-export declare const useItemTooltip: <T extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<T> | null;
+export declare const useItemTooltip: <SeriesType extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<SeriesType> | null;
 /**
  * Contains an object per value with their content and the label of the associated metric.
  * @returns The tooltip item configs

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,7 +11,7 @@ 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");
@@ -56,7 +56,7 @@ function ChartsGroupedXAxisTicks(inProps) {
   const groups = defaultizedProps.groups;
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: xScale,
     tickNumber,

package/ChartsXAxis/ChartsGroupedXAxisTicks.mjs

@@ -4,7 +4,7 @@ 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";
@@ -49,7 +49,7 @@ function ChartsGroupedXAxisTicks(inProps) {
   const groups = defaultizedProps.groups;
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const xTicks = useTicksGrouped({
     scale: xScale,
     tickNumber,

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({