[charts] Fix ChartsTooltip component setup (#11157)

mui · Nov 23, 2023 · 819dc15 · 819dc15
1 parent 396951d
commit 819dc15
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 58 deletions.
diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json
@@ -32,7 +32,7 @@
     "import { ChartsTooltip } from '@mui/x-charts';"
   ],
   "styles": {
-    "classes": ["root", "markCell", "labelCell", "valueCell"],
+    "classes": ["root", "table", "row", "cell", "mark", "markCell", "labelCell", "valueCell"],
     "globalClasses": {},
     "name": "MuiChartsTooltip"
   },

diff --git a/docs/translations/api-docs/charts/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip.json
@@ -34,6 +34,10 @@
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
+    "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
+    "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
+    "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
+    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the mark element" },
     "markCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import { SxProps, Theme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import { useSlotProps } from '@mui/base/utils';
@@ -18,7 +19,7 @@ import {
   ChartsTooltipMark,
   ChartsTooltipRow,
 } from './ChartsTooltipTable';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 
 export type ChartsAxisContentProps = {
   /**
@@ -57,7 +58,7 @@ export function DefaultChartsAxisContent(props: ChartsAxisContentProps) {
   const axisFormatter = axis.valueFormatter ?? ((v) => v.toLocaleString());
   return (
     <ChartsTooltipPaper sx={sx} className={classes.root}>
-      <ChartsTooltipTable>
+      <ChartsTooltipTable className={classes.table}>
         {axisValue != null && !axis.hideTooltip && (
           <thead>
             <ChartsTooltipRow>
@@ -74,16 +75,20 @@ export function DefaultChartsAxisContent(props: ChartsAxisContentProps) {
               return null;
             }
             return (
-              <ChartsTooltipRow key={id}>
-                <ChartsTooltipCell className={classes.markCell}>
-                  <ChartsTooltipMark ownerState={{ color }} boxShadow={1} />
+              <ChartsTooltipRow key={id} className={classes.row}>
+                <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
+                  <ChartsTooltipMark
+                    ownerState={{ color }}
+                    boxShadow={1}
+                    className={classes.mark}
+                  />
                 </ChartsTooltipCell>
 
-                <ChartsTooltipCell className={classes.labelCell}>
+                <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
                   {label ? <Typography>{label}</Typography> : null}
                 </ChartsTooltipCell>
 
-                <ChartsTooltipCell className={classes.valueCell}>
+                <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
                   <Typography>{formattedValue}</Typography>
                 </ChartsTooltipCell>
               </ChartsTooltipRow>

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import { SxProps, Theme } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { ItemInteractionData } from '../context/InteractionProvider';
@@ -11,7 +12,7 @@ import {
   ChartsTooltipPaper,
   ChartsTooltipRow,
 } from './ChartsTooltipTable';
-import { ChartsTooltipClasses } from './tooltipClasses';
+import { ChartsTooltipClasses } from './chartsTooltipClasses';
 
 export type ChartsItemContentProps<T extends ChartSeriesType = ChartSeriesType> = {
   /**
@@ -53,16 +54,20 @@ export function DefaultChartsItemContent<T extends ChartSeriesType = ChartSeries
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return (
     <ChartsTooltipPaper sx={sx} className={classes.root}>
-      <ChartsTooltipTable>
+      <ChartsTooltipTable className={classes.table}>
         <tbody>
-          <ChartsTooltipRow>
-            <ChartsTooltipCell className={classes.markCell}>
-              <ChartsTooltipMark ownerState={{ color }} />
+          <ChartsTooltipRow className={classes.row}>
+            <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
+              <ChartsTooltipMark ownerState={{ color }} className={classes.mark} />
             </ChartsTooltipCell>
 
-            <ChartsTooltipCell className={classes.labelCell}>{displayedLabel}</ChartsTooltipCell>
+            <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
+              {displayedLabel}
+            </ChartsTooltipCell>
 
-            <ChartsTooltipCell className={classes.valueCell}>{formattedValue}</ChartsTooltipCell>
+            <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
+              {formattedValue}
+            </ChartsTooltipCell>
           </ChartsTooltipRow>
         </tbody>
       </ChartsTooltipTable>

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { Popper, PopperProps } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
 import { useSlotProps } from '@mui/base/utils';
@@ -10,11 +10,16 @@ import {
   InteractionContext,
   ItemInteractionData,
 } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTootipHasData, TriggerOptions } from './utils';
+import {
+  generateVirtualElement,
+  useMouseTracker,
+  getTooltipHasData,
+  TriggerOptions,
+} from './utils';
 import { ChartSeriesType } from '../models/seriesType/config';
 import { ChartsItemContentProps, ChartsItemTooltipContent } from './ChartsItemTooltipContent';
 import { ChartsAxisContentProps, ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { ChartsTooltipClasses, getTooltipUtilityClass } from './tooltipClasses';
+import { ChartsTooltipClasses, getChartsTooltipUtilityClass } from './chartsTooltipClasses';
 
 export interface ChartsTooltipSlotsComponent {
   popper?: React.ElementType<PopperProps>;
@@ -68,12 +73,16 @@ const useUtilityClasses = (ownerState: { classes: ChartsTooltipProps['classes']
 
   const slots = {
     root: ['root'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell'],
   };
 
-  return composeClasses(slots, getTooltipUtilityClass, classes);
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };
 
 const ChartsTooltipRoot = styled(Popper, {
@@ -95,18 +104,22 @@ const ChartsTooltipRoot = styled(Popper, {
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
 function ChartsTooltip(props: ChartsTooltipProps) {
-  const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = props;
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsTooltip',
+  });
+  const { trigger = 'axis', itemContent, axisContent, slots, slotProps } = themeProps;
 
   const mousePosition = useMouseTracker();
 
   const { item, axis } = React.useContext(InteractionContext);
 
   const displayedData = trigger === 'item' ? item : axis;
 
-  const tooltipHasData = getTootipHasData(trigger, displayedData);
+  const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
 
-  const classes = useUtilityClasses({ classes: props.classes });
+  const classes = useUtilityClasses({ classes: themeProps.classes });
 
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.tsx
@@ -1,6 +1,6 @@
 import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
-import { tooltipClasses } from './tooltipClasses';
+import { chartsTooltipClasses } from './chartsTooltipClasses';
 
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
@@ -42,10 +42,10 @@ export const ChartsTooltipCell = styled('td', {
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
 
-  [`&.${tooltipClasses.labelCell}`]: {
+  [`&.${chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1),
   },
-  [`&.${tooltipClasses.valueCell}`]: {
+  [`&.${chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary,
   },

diff --git a/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts b/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts
@@ -0,0 +1,37 @@
+import {
+  unstable_generateUtilityClass as generateUtilityClass,
+  unstable_generateUtilityClasses as generateUtilityClasses,
+} from '@mui/utils';
+
+export interface ChartsTooltipClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markCell element. */
+  markCell: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+}
+
+export type ChartsTooltipClassKey = keyof Omit<
+  ChartsTooltipClasses,
+  // these classes are not used for styled components
+  'markCell' | 'labelCell' | 'valueCell'
+>;
+
+export function getChartsTooltipUtilityClass(slot: string) {
+  return generateUtilityClass('MuiChartsTooltip', slot);
+}
+export const chartsTooltipClasses: ChartsTooltipClasses = generateUtilityClasses(
+  'MuiChartsTooltip',
+  ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell'],
+);
diff --git a/packages/x-charts/src/ChartsTooltip/index.tsx b/packages/x-charts/src/ChartsTooltip/index.tsx
@@ -1 +1,2 @@
 export * from './ChartsTooltip';
+export * from './chartsTooltipClasses';
diff --git a/packages/x-charts/src/ChartsTooltip/tooltipClasses.ts b/packages/x-charts/src/ChartsTooltip/tooltipClasses.ts
diff --git a/packages/x-charts/src/ChartsTooltip/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx
@@ -72,7 +72,7 @@ export function useMouseTracker() {
 
 export type TriggerOptions = 'item' | 'axis' | 'none';
 
-export function getTootipHasData(
+export function getTooltipHasData(
   trigger: TriggerOptions,
   displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>,
 ): boolean {

diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts
@@ -24,6 +24,7 @@ export interface ChartsComponents {
   };
   MuiChartsTooltip?: {
     defaultProps?: ComponentsProps['MuiChartsTooltip'];
+    styleOverrides?: ComponentsOverrides['MuiChartsTooltip'];
   };
   MuiChartsSurface?: {
     defaultProps?: ComponentsProps['MuiChartsSurface'];

diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts
@@ -2,13 +2,15 @@ import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
 import { ChartsLegendClassKey } from '../ChartsLegend';
+import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
 
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
   MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
+  MuiChartsTooltip: ChartsTooltipClassKey;
 
   // BarChart components
   MuiBarElement: BarElementClassKey;

diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
@@ -70,11 +70,11 @@ createTheme({
         // @ts-expect-error invalid MuiChartsTooltip prop
         someRandomProp: true,
       },
-      // styleOverrides: {
-      //   root: { backgroundColor: 'red' },
-      //   // @ts-expect-error invalid MuiChartsTooltip class key
-      //   constent: { color: 'red' },
-      // },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiChartsTooltip class key
+        constent: { color: 'red' },
+      },
     },
     MuiChartsSurface: {
       defaultProps: {

diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json
@@ -40,6 +40,9 @@
   { "name": "ChartsReferenceLineClasses", "kind": "Interface" },
   { "name": "ChartsReferenceLineClassKey", "kind": "TypeAlias" },
   { "name": "ChartsTooltip", "kind": "Function" },
+  { "name": "chartsTooltipClasses", "kind": "Variable" },
+  { "name": "ChartsTooltipClasses", "kind": "Interface" },
+  { "name": "ChartsTooltipClassKey", "kind": "TypeAlias" },
   { "name": "ChartsTooltipProps", "kind": "TypeAlias" },
   { "name": "ChartsTooltipSlotComponentProps", "kind": "Interface" },
   { "name": "ChartsTooltipSlotsComponent", "kind": "Interface" },
@@ -67,6 +70,7 @@
   { "name": "getAreaElementUtilityClass", "kind": "Function" },
   { "name": "getAxisHighlightUtilityClass", "kind": "Function" },
   { "name": "getAxisUtilityClass", "kind": "Function" },
+  { "name": "getChartsTooltipUtilityClass", "kind": "Function" },
   { "name": "getHighlightElementUtilityClass", "kind": "Function" },
   { "name": "getLineElementUtilityClass", "kind": "Function" },
   { "name": "getMarkElementUtilityClass", "kind": "Function" },
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './ChartsTooltip';
		export * from './chartsTooltipClasses';