[charts] Fix themeAugmentation (#14372)

Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com> Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>
mui · Aug 29, 2024 · 9e72473 · 9e72473
1 parent cf441ec
commit 9e72473
Show file tree

Hide file tree

Showing 29 changed files with 213 additions and 105 deletions.
diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json
@@ -22,7 +22,7 @@
         "name": "enum",
         "description": "'axis'<br>&#124;&nbsp;'item'<br>&#124;&nbsp;'none'"
       },
-      "default": "'item'"
+      "default": "'axis'"
     }
   },
   "name": "ChartsTooltip",
@@ -76,6 +76,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiChartsTooltip-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiChartsTooltip-root",

diff --git a/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json b/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json
@@ -53,6 +53,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiDefaultChartsAxisTooltipContent-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiDefaultChartsAxisTooltipContent-root",

diff --git a/docs/pages/x/api/charts/default-charts-item-tooltip-content.json b/docs/pages/x/api/charts/default-charts-item-tooltip-content.json
@@ -54,6 +54,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiDefaultChartsItemTooltipContent-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiDefaultChartsItemTooltipContent-root",

diff --git a/docs/pages/x/api/charts/default-heatmap-tooltip.json b/docs/pages/x/api/charts/default-heatmap-tooltip.json
@@ -53,6 +53,12 @@
       "description": "Styles applied to the markCell element.",
       "isGlobal": false
     },
+    {
+      "key": "paper",
+      "className": "MuiDefaultHeatmapTooltip-paper",
+      "description": "Styles applied to the paper element.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiDefaultHeatmapTooltip-root",

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

diff --git a/...-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json b/...-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json
@@ -19,6 +19,7 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"
     },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
     "root": { "description": "Styles applied to the root element." },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },

diff --git a/...-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json b/...-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json
@@ -23,6 +23,7 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"
     },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
     "root": { "description": "Styles applied to the root element." },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },

diff --git a/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json b/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json
@@ -23,6 +23,7 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the markCell element"
     },
+    "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
     "root": { "description": "Styles applied to the root element." },
     "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
     "table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },

diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
@@ -56,7 +56,7 @@ const BarChartPro = React.forwardRef(function BarChartPro(inProps: BarChartProPr
       onZoomChange={onZoomChange}
     >
       {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
-      {props.grid && <ChartsGrid {...gridProps} />}
+      <ChartsGrid {...gridProps} />
       <g {...clipPathGroupProps}>
         <BarChartPlotZoom {...barPlotProps} />
         <ChartsOverlay {...overlayProps} />

diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
@@ -66,7 +66,7 @@ const LineChartPro = React.forwardRef(function LineChartPro(inProps: LineChartPr
       onZoomChange={onZoomChange}
     >
       {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
-      {props.grid && <ChartsGrid {...gridProps} />}
+      <ChartsGrid {...gridProps} />
       <g {...clipPathGroupProps}>
         <AreaPlotZoom {...areaPlotProps} />
         <LinePlotZoom {...linePlotProps} />

diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
@@ -57,7 +57,7 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
       <ZAxisContextProvider {...zAxisProps}>
         {!props.disableVoronoi && <ChartsVoronoiHandler {...voronoiHandlerProps} />}
         <ChartsAxis {...chartsAxisProps} />
-        {props.grid && <ChartsGrid {...gridProps} />}
+        <ChartsGrid {...gridProps} />
         <g data-drawing-container>
           {/* The `data-drawing-container` indicates that children are part of the drawing area. Ref: https://github.com/mui/mui-x/issues/13659 */}
           <ScatterPlot {...scatterPlotProps} />

diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -130,7 +130,7 @@ const BarChart = React.forwardRef(function BarChart(inProps: BarChartProps, ref)
   return (
     <ResponsiveChartContainer ref={ref} {...chartContainerProps}>
       {props.onAxisClick && <ChartsOnAxisClickHandler {...axisClickHandlerProps} />}
-      {props.grid && <ChartsGrid {...gridProps} />}
+      <ChartsGrid {...gridProps} />
       <g {...clipPathGroupProps}>
         <BarPlot {...barPlotProps} />
         <ChartsOverlay {...overlayProps} />

diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
@@ -1,36 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, useThemeProps } from '@mui/material/styles';
-
+import { useThemeProps } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import {
-  ChartsGridClasses,
-  getChartsGridUtilityClass,
-  chartsGridClasses,
-} from './chartsGridClasses';
+import { ChartsGridClasses, getChartsGridUtilityClass } from './chartsGridClasses';
 import { useDrawingArea } from '../hooks/useDrawingArea';
-
-const GridRoot = styled('g', {
-  name: 'MuiChartsGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => [
-    { [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine },
-    { [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine },
-    styles.root,
-  ],
-})({});
-
-const GridLine = styled('line', {
-  name: 'MuiChartsGrid',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line,
-})(({ theme }) => ({
-  stroke: (theme.vars || theme).palette.divider,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1,
-}));
+import { GridRoot } from './styledCommonents';
+import { ChartsGridVertical } from './ChartsVerticalGrid';
+import { ChartsGridHorizontal } from './ChartsHorizontalGrid';
 
 const useUtilityClasses = ({ classes }: ChartsGridProps) => {
   const slots = {
@@ -75,48 +52,18 @@ function ChartsGrid(inProps: ChartsGridProps) {
 
   const classes = useUtilityClasses(props);
 
-  const horizontalAxisId = yAxisIds[0];
-  const verticalAxisId = xAxisIds[0];
-
-  const {
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval,
-  } = xAxis[verticalAxisId];
-
-  const {
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval,
-  } = yAxis[horizontalAxisId];
-
-  const xTicks = useTicks({ scale: xScale, tickNumber: xTickNumber, tickInterval: xTickInterval });
-  const yTicks = useTicks({ scale: yScale, tickNumber: yTickNumber, tickInterval: yTickInterval });
+  const horizontalAxis = yAxis[yAxisIds[0]];
+  const verticalAxis = xAxis[xAxisIds[0]];
 
   return (
     <GridRoot {...other} className={classes.root}>
-      {vertical &&
-        xTicks.map(({ formattedValue, offset }) => (
-          <GridLine
-            key={`vertical-${formattedValue}`}
-            y1={drawingArea.top}
-            y2={drawingArea.top + drawingArea.height}
-            x1={offset}
-            x2={offset}
-            className={classes.verticalLine}
-          />
-        ))}
-      {horizontal &&
-        yTicks.map(({ formattedValue, offset }) => (
-          <GridLine
-            key={`horizontal-${formattedValue}`}
-            y1={offset}
-            y2={offset}
-            x1={drawingArea.left}
-            x2={drawingArea.left + drawingArea.width}
-            className={classes.horizontalLine}
-          />
-        ))}
+      {vertical && (
+        <ChartsGridVertical axis={verticalAxis} drawingArea={drawingArea} classes={classes} />
+      )}
+
+      {horizontal && (
+        <ChartsGridHorizontal axis={horizontalAxis} drawingArea={drawingArea} classes={classes} />
+      )}
     </GridRoot>
   );
 }

diff --git a/packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { DrawingArea } from '../context/DrawingProvider';
+import { useTicks } from '../hooks/useTicks';
+import { AxisDefaultized, ChartsYAxisProps, ScaleName } from '../models/axis';
+import { GridLine } from './styledCommonents';
+import { ChartsGridClasses } from './chartsGridClasses';
+
+interface ChartsGridHorizontalProps {
+  axis: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
+  drawingArea: DrawingArea;
+  classes: Partial<ChartsGridClasses>;
+}
+
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridHorizontal(props: ChartsGridHorizontalProps) {
+  const { axis, drawingArea, classes } = props;
+
+  const { scale, tickNumber, tickInterval } = axis;
+
+  const yTicks = useTicks({ scale, tickNumber, tickInterval });
+
+  return (
+    <React.Fragment>
+      {yTicks.map(({ formattedValue, offset }) => (
+        <GridLine
+          key={`horizontal-${formattedValue}`}
+          y1={offset}
+          y2={offset}
+          x1={drawingArea.left}
+          x2={drawingArea.left + drawingArea.width}
+          className={classes.horizontalLine}
+        />
+      ))}
+    </React.Fragment>
+  );
+}
diff --git a/packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { DrawingArea } from '../context/DrawingProvider';
+import { useTicks } from '../hooks/useTicks';
+import { AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
+import { GridLine } from './styledCommonents';
+import { ChartsGridClasses } from './chartsGridClasses';
+
+interface ChartsGridVerticalProps {
+  axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
+  drawingArea: DrawingArea;
+  classes: Partial<ChartsGridClasses>;
+}
+
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridVertical(props: ChartsGridVerticalProps) {
+  const { axis, drawingArea, classes } = props;
+
+  const { scale, tickNumber, tickInterval } = axis;
+
+  const xTicks = useTicks({ scale, tickNumber, tickInterval });
+
+  return (
+    <React.Fragment>
+      {xTicks.map(({ formattedValue, offset }) => (
+        <GridLine
+          key={`vertical-${formattedValue}`}
+          y1={drawingArea.top}
+          y2={drawingArea.top + drawingArea.height}
+          x1={offset}
+          x2={offset}
+          className={classes.verticalLine}
+        />
+      ))}
+    </React.Fragment>
+  );
+}
diff --git a/packages/x-charts/src/ChartsGrid/styledCommonents.tsx b/packages/x-charts/src/ChartsGrid/styledCommonents.tsx
@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+import { chartsGridClasses } from './chartsGridClasses';
+
+export const GridRoot = styled('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [
+    { [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine },
+    { [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine },
+    styles.root,
+  ],
+})({});
+
+export const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line,
+})(({ theme }) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+}));
diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx
@@ -59,20 +59,21 @@ const useUtilityClasses = (ownerState: DefaultizedChartsLegendProps & { theme: T
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
 
-const defaultProps = {
-  position: { horizontal: 'middle', vertical: 'top' },
-  direction: 'row',
-} as const;
-
 function ChartsLegend(inProps: ChartsLegendProps) {
-  const props: DefaultizedChartsLegendProps = useThemeProps({
-    props: { ...defaultProps, ...inProps },
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsLegend',
   });
 
-  const { position, direction, hidden, slots, slotProps } = props;
+  const defaultizedProps: DefaultizedChartsLegendProps = {
+    direction: 'row',
+    ...props,
+    position: { horizontal: 'middle', vertical: 'top', ...props.position },
+  };
+  const { position, direction, hidden, slots, slotProps } = defaultizedProps;
+
   const theme = useTheme();
-  const classes = useUtilityClasses({ ...props, theme });
+  const classes = useUtilityClasses({ ...defaultizedProps, theme });
 
   const drawingArea = useDrawingArea();
   const series = useSeries();