@mui/x-charts 8.0.0-beta.2 → 8.0.0-beta.3

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
-import { useAxisTooltip } from "./useAxisTooltip.js";
+import { useAxesTooltip } from "./useAxesTooltip.js";
 import { useXAxis, useYAxis } from "../hooks/index.js";
 import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,70 +15,62 @@ function ChartsAxisTooltipContent(props) {
     classes: propClasses,
     sx
   } = props;
-  const tooltipData = useAxisTooltip();
+  const tooltipData = useAxesTooltip();
   const xAxis = useXAxis();
   const yAxis = useYAxis();
   const classes = useUtilityClasses(propClasses);
   if (tooltipData === null) {
     return null;
   }
-  const {
-    axisDirection,
-    axisValue,
-    axisFormattedValue,
-    seriesItems
-  } = tooltipData;
-  const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.paper,
-    children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      className: classes.table,
-      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
-          className: classes.row,
-          children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            colSpan: 3,
-            className: clsx(classes.cell, classes.axisValueCell),
-            children: /*#__PURE__*/_jsx(Typography, {
-              children: axisFormattedValue
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: seriesItems.map(({
-          seriesId,
-          color,
-          formattedValue,
-          formattedLabel,
-          markType
-        }) => {
-          if (formattedValue == null) {
-            return null;
-          }
-          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-            className: classes.row,
-            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/_jsx(ChartsLabelMark, {
-                type: markType,
-                color: color,
-                className: classes.mark
-              })
-            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.labelCell, classes.cell),
-              children: formattedLabel ? /*#__PURE__*/_jsx(Typography, {
-                children: formattedLabel
-              }) : null
-            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.valueCell, classes.cell),
-              children: /*#__PURE__*/_jsx(Typography, {
+    children: tooltipData.map(({
+      axisId,
+      axisDirection,
+      axisValue,
+      axisFormattedValue,
+      seriesItems
+    }) => {
+      const axis = axisDirection === 'x' ? xAxis : yAxis;
+      return /*#__PURE__*/_jsxs(ChartsTooltipTable, {
+        className: classes.table,
+        children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx(Typography, {
+          component: "caption",
+          children: axisFormattedValue
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: seriesItems.map(({
+            seriesId,
+            color,
+            formattedValue,
+            formattedLabel,
+            markType
+          }) => {
+            if (formattedValue == null) {
+              return null;
+            }
+            return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+              className: classes.row,
+              children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
+                className: clsx(classes.labelCell, classes.cell),
+                component: "th",
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: classes.markContainer,
+                  children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+                    type: markType,
+                    color: color,
+                    className: classes.mark
+                  })
+                }), formattedLabel || null]
+              }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+                className: clsx(classes.valueCell, classes.cell),
+                component: "td",
                 children: formattedValue
-              })
-            })]
-          }, seriesId);
-        })
-      })]
+              })]
+            }, seriesId);
+          })
+        })]
+      }, axisId);
     })
   });
 }

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -32,18 +32,20 @@ function ChartsItemTooltipContent(props) {
       children: /*#__PURE__*/_jsx("tbody", {
         children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
           className: classes.row,
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.markCell, classes.cell),
-            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
-              type: markType,
-              color: color,
-              className: classes.mark
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+          children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
             className: clsx(classes.labelCell, classes.cell),
-            children: label
+            component: "th",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: classes.markContainer,
+              children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), label]
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes.valueCell, classes.cell),
+            component: "td",
             children: formattedValue
           })]
         })

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -58,7 +58,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: PropTypes.shape({
@@ -67,7 +67,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   /**
    * The props used for each slot inside the Popper.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/modern/ChartsTooltip/ChartsTooltipContainer.js

@@ -14,9 +14,8 @@ import { useSvgRef } from "../hooks/useSvgRef.js";
 import { usePointerType } from "./utils.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useXAxis } from "../hooks/index.js";
 import { selectorChartsInteractionItemIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsInteractionAxisTooltip } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -28,7 +27,6 @@ const ChartsTooltipRoot = styled(Popper, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
-const axisHasData = axis => axis?.data !== undefined && axis.data.length !== 0;
 
 /**
  * Demos:
@@ -52,16 +50,13 @@ function ChartsTooltipContainer(inProps) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgRef = useSvgRef();
   const pointerType = usePointerType();
-  const xAxis = useXAxis();
   const popperRef = React.useRef(null);
   const positionRef = useLazyRef(() => ({
     x: 0,
     y: 0
   }));
   const store = useStore();
-  const isOpen = useSelector(store,
-  // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? axisHasData(xAxis) ? selectorChartsInteractionXAxisIsDefined : selectorChartsInteractionYAxisIsDefined : selectorChartsInteractionItemIsDefined);
+  const isOpen = useSelector(store, trigger === 'axis' ? selectorChartsInteractionAxisTooltip : selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {
@@ -155,7 +150,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: PropTypes.shape({
@@ -164,7 +159,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
   /**
    * The props used for each slot inside the Popper.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/modern/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -13,4 +13,6 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
+export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  component?: React.ElementType;
+}, {}, {}>;

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,4 +1,5 @@
 import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 import { chartsTooltipClasses } from "./chartsTooltipClasses.js";
 
 /**
@@ -28,8 +29,14 @@ export const ChartsTooltipTable = styled('table', {
   theme
 }) => ({
   borderSpacing: 0,
-  '& thead td': {
-    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
+  '& caption': {
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`,
+    padding: theme.spacing(0.5, 1.5),
+    textAlign: 'start',
+    whiteSpace: 'nowrap',
+    '& span': {
+      marginRight: theme.spacing(1.5)
+    }
   }
 }));
 
@@ -54,20 +61,27 @@ export const ChartsTooltipRow = styled('tr', {
 /**
  * @ignore - internal component.
  */
-export const ChartsTooltipCell = styled('td', {
+export const ChartsTooltipCell = styled(Typography, {
   name: 'MuiChartsTooltip',
-  slot: 'Cell',
-  overridesResolver: (props, styles) => styles.cell
+  slot: 'Cell'
 })(({
   theme
 }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${chartsTooltipClasses.labelCell}`]: {
+  textAlign: 'start',
+  [`&.${chartsTooltipClasses.cell}`]: {
     paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(1.5),
+    paddingRight: theme.spacing(1)
+  },
+  [`&.${chartsTooltipClasses.labelCell}`]: {
     fontWeight: theme.typography.fontWeightRegular
   },
+  [`& .${chartsTooltipClasses.markContainer}`]: {
+    display: 'inline-block',
+    width: `calc(20px + ${theme.spacing(1.5)})`,
+    verticalAlign: 'middle'
+  },
   [`&.${chartsTooltipClasses.valueCell}, &.${chartsTooltipClasses.axisValueCell}`]: {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: theme.typography.fontWeightMedium
@@ -76,10 +90,10 @@ export const ChartsTooltipCell = styled('td', {
     paddingLeft: theme.spacing(1.5),
     paddingRight: theme.spacing(1.5)
   },
-  'td:first-of-type&': {
+  'td:first-of-type&, th:first-of-type&': {
     paddingLeft: theme.spacing(1.5)
   },
-  'td:last-of-type&': {
+  'td:last-of-type&, th:last-of-type&': {
     paddingRight: theme.spacing(1.5)
   }
 }));

package/modern/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -11,8 +11,8 @@ export interface ChartsTooltipClasses {
   cell: string;
   /** Styles applied to the mark element. */
   mark: string;
-  /** Styles applied to the markCell element. */
-  markCell: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
   /** Styles applied to the labelCell element. */
   labelCell: string;
   /** Styles applied to the valueCell element. */
@@ -20,7 +20,7 @@ export interface ChartsTooltipClasses {
   /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
   axisValueCell: string;
 }
-export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
+export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markContainer' | 'labelCell' | 'valueCell'>;
 export declare function getChartsTooltipUtilityClass(slot: string): string;
 export declare const chartsTooltipClasses: ChartsTooltipClasses;
-export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markContainer" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -4,7 +4,7 @@ import composeClasses from '@mui/utils/composeClasses';
 export function getChartsTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiChartsTooltip', slot);
 }
-export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markContainer', 'labelCell', 'valueCell', 'axisValueCell']);
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -13,7 +13,7 @@ export const useUtilityClasses = classes => {
     row: ['row'],
     cell: ['cell'],
     mark: ['mark'],
-    markCell: ['markCell'],
+    markContainer: ['markContainer'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell'],
     axisValueCell: ['axisValueCell']

package/modern/ChartsTooltip/index.d.ts

@@ -7,5 +7,6 @@ export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
 export * from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
+export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";
 export * from "./ChartTooltip.types.js";

package/modern/ChartsTooltip/index.js

@@ -6,5 +6,6 @@ export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
 export * from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
+export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";
 export * from "./ChartTooltip.types.js";

package/modern/ChartsTooltip/useAxesTooltip.d.ts

@@ -0,0 +1,7 @@
+import { UseAxisTooltipParams, UseAxisTooltipReturnValue } from "./useAxisTooltip.js";
+type UseAxesTooltipParams = Omit<UseAxisTooltipParams, 'multipleAxes'>;
+/**
+ * Returns the axes to display in the tooltip and the series item related to them.
+ */
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxisTooltipReturnValue[] | null;
+export {};

package/modern/ChartsTooltip/useAxesTooltip.js

@@ -0,0 +1,12 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useAxisTooltip } from "./useAxisTooltip.js";
+/**
+ * Returns the axes to display in the tooltip and the series item related to them.
+ */
+export function useAxesTooltip(params) {
+  return useAxisTooltip(_extends({}, params, {
+    multipleAxes: true
+  }));
+}

package/modern/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,12 +1,25 @@
 import { SeriesId } from "../models/seriesType/common.js";
+import { AxisId } from "../models/axis.js";
 import { CartesianChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
 import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
 export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
   axisDirection: 'x' | 'y';
-  dataIndex: number;
-  seriesItems: SeriesItem<SeriesT>[];
+  axisId: AxisId;
   axisValue: AxisValueT;
   axisFormattedValue: string;
+  dataIndex: number;
+  seriesItems: SeriesItem<SeriesT>[];
+}
+export interface UseAxisTooltipParams {
+  /**
+   * If `true`, the hook returns an array with an object per active axis.
+   */
+  multipleAxes?: boolean;
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y')[];
 }
 interface SeriesItem<T extends CartesianChartSeriesType> {
   seriesId: SeriesId;
@@ -16,5 +29,13 @@ interface SeriesItem<T extends CartesianChartSeriesType> {
   formattedLabel: string | null;
   markType: ChartsLabelMarkProps['type'];
 }
-export declare function useAxisTooltip(): UseAxisTooltipReturnValue | null;
+/**
+ * @deprecated Use `useAxesTooltip` instead.
+ */
+export declare function useAxisTooltip(params: UseAxisTooltipParams & {
+  multipleAxes: true;
+}): UseAxisTooltipReturnValue[] | null;
+export declare function useAxisTooltip(params?: UseAxisTooltipParams & {
+  multipleAxes?: false;
+}): UseAxisTooltipReturnValue | null;
 export {};

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -9,13 +9,38 @@ import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
 import { useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
 import { useZAxes } from "../hooks/useZAxis.js";
-import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-export function useAxisTooltip() {
+import { selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
+  const axisValue = axis.data?.[dataIndex] ?? null;
+  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip',
+    scale: axis.scale
+  });
+  return {
+    axisDirection,
+    axisId: axis.id,
+    dataIndex,
+    axisValue,
+    axisFormattedValue,
+    seriesItems: []
+  };
+}
+
+/**
+ * @deprecated Use `useAxesTooltip` instead.
+ */
+
+export function useAxisTooltip(params = {}) {
+  const {
+    multipleAxes,
+    directions
+  } = params;
   const defaultXAxis = useXAxis();
   const defaultYAxis = useYAxis();
-  const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
   const store = useStore();
-  const axisData = useSelector(store, xAxisHasData ? selectorChartsInteractionXAxis : selectorChartsInteractionYAxis);
+  const tooltipXAxes = useSelector(store, selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = useSelector(store, selectorChartsInteractionTooltipYAxes);
   const series = useSeries();
   const {
     xAxis
@@ -28,61 +53,70 @@ export function useAxisTooltip() {
     zAxisIds
   } = useZAxes();
   const colorProcessors = useColorProcessor();
-  if (axisData === null) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0) {
     return null;
   }
-  const {
-    index: dataIndex,
-    value: axisValue
-  } = axisData;
-  const USED_AXIS_ID = xAxisHasData ? defaultXAxis.id : defaultYAxis.id;
-  const usedAxis = xAxisHasData ? defaultXAxis : defaultYAxis;
-  const relevantSeries = Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
+  const tooltipAxes = [];
+  if (directions === undefined || directions.includes('x')) {
+    tooltipXAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      if (!multipleAxes && tooltipAxes.length > 1) {
+        return;
+      }
+      tooltipAxes.push(defaultAxisTooltipConfig(xAxis[axisId], dataIndex, 'x'));
+    });
+  }
+  if (directions === undefined || directions.includes('y')) {
+    tooltipYAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      if (!multipleAxes && tooltipAxes.length > 1) {
+        return;
+      }
+      tooltipAxes.push(defaultAxisTooltipConfig(yAxis[axisId], dataIndex, 'y'));
+    });
+  }
+  Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
       return [];
     }
-    return seriesOfType.seriesOrder.map(seriesId => {
+    return seriesOfType.seriesOrder.forEach(seriesId => {
       const seriesToAdd = seriesOfType.series[seriesId];
-      const providedXAxisId = seriesToAdd.xAxisId;
-      const providedYAxisId = seriesToAdd.yAxisId;
-      const axisKey = xAxisHasData ? providedXAxisId : providedYAxisId;
-
+      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 (axisKey === undefined || axisKey === USED_AXIS_ID) {
-        const xAxisId = providedXAxisId ?? defaultXAxis.id;
-        const yAxisId = providedYAxisId ?? defaultYAxis.id;
+      if (tooltipItemIndex >= 0) {
         const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
+        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 = getLabel(seriesToAdd.label, 'tooltip') ?? null;
-        return {
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
           seriesId,
           color,
           value,
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType
-        };
+        });
       }
-      return undefined;
     });
-  }).filter(function truthy(item) {
-    return Boolean(item);
-  });
-  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
-  const axisFormattedValue = axisFormatter(axisValue, {
-    location: 'tooltip',
-    scale: usedAxis.scale
   });
-  return {
-    axisDirection: xAxisHasData ? 'x' : 'y',
-    dataIndex,
-    seriesItems: relevantSeries,
-    axisValue,
-    axisFormattedValue
-  };
+  if (!multipleAxes) {
+    return tooltipAxes.length === 0 ? tooltipAxes[0] : null;
+  }
+  return tooltipAxes;
 }

package/modern/ChartsTooltip/useItemTooltip.js

@@ -30,7 +30,10 @@ export function useItemTooltip() {
   if (!identifier || identifier.dataIndex === undefined) {
     return null;
   }
-  const itemSeries = series[identifier.type].series[identifier.seriesId];
+  const itemSeries = series[identifier.type]?.series[identifier.seriesId];
+  if (!itemSeries) {
+    return null;
+  }
   const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,