[charts] Add missing themeAugmentation in pro plan (#14313)

Co-authored-by: Jose Quintas <[email protected]> Co-authored-by: alex <[email protected]>
mui · Aug 27, 2024 · 0c30a6f · 0c30a6f
1 parent 2c8d5fc
commit 0c30a6f
Show file tree

Hide file tree

Showing 31 changed files with 199 additions and 127 deletions.
diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md
@@ -118,3 +118,30 @@ Visit the [Axis page](/x/react-charts/axis/) for more details.
 MUI X Charts follows the Material UI styling and features all of the customization tools you'd find there, making tweaking charts as straightforward as designing buttons.
 
 Visit the [Styling page](/x/react-charts/styling/) for more details.
+
+## TypeScript
+
+In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
+Internally, it uses module augmentation to extend the default theme structure.
+
+```tsx
+import type {} from '@mui/x-charts/themeAugmentation';
+import type {} from '@mui/x-charts-pro/themeAugmentation';
+
+const theme = createTheme({
+  components: {
+    MuiChartsAxis: {
+      styleOverrides: {
+        tick: {
+          stroke: '#006BD6',
+        },
+      },
+    },
+  },
+});
+```
+
+:::info
+You don't have to import the theme augmentation from both `@mui/x-charts` and `@mui/x-charts-pro` when using `@mui/x-charts-pro`.
+Importing it from `@mui/x-charts-pro` is enough.
+:::
diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json
@@ -191,7 +191,7 @@
   ],
   "classes": [],
   "spread": true,
-  "themeDefaultProps": false,
+  "themeDefaultProps": true,
   "muiName": "MuiBarChart",
   "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/BarChart/BarChart.tsx",

diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json
@@ -186,7 +186,7 @@
   ],
   "classes": [],
   "spread": true,
-  "themeDefaultProps": false,
+  "themeDefaultProps": true,
   "muiName": "MuiLineChart",
   "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/LineChart/LineChart.tsx",

diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json
@@ -170,7 +170,7 @@
   ],
   "classes": [],
   "spread": true,
-  "themeDefaultProps": false,
+  "themeDefaultProps": true,
   "muiName": "MuiPieChart",
   "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/PieChart/PieChart.tsx",

diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json
@@ -176,7 +176,7 @@
   ],
   "classes": [],
   "spread": true,
-  "themeDefaultProps": false,
+  "themeDefaultProps": true,
   "muiName": "MuiScatterChart",
   "forwardsRefTo": "SVGSVGElement",
   "filename": "/packages/x-charts/src/ScatterChart/ScatterChart.tsx",

diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -29,7 +30,8 @@ export interface BarChartProProps extends BarChartProps, ZoomProps {}
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProps, ref) {
+const BarChartPro = React.forwardRef(function BarChartPro(inProps: BarChartProProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiBarChartPro' });
   const { zoom, onZoomChange, ...other } = props;
   const {
     chartContainerProps,

diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
+import { useThemeProps } from '@mui/material/styles';
 import useId from '@mui/utils/useId';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis, ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import {
   ChartsTooltip,
@@ -104,7 +105,8 @@ const defaultColorMap = interpolateRgbBasis([
   '#084081',
 ]);
 
-const Heatmap = React.forwardRef(function Heatmap(props: HeatmapProps, ref) {
+const Heatmap = React.forwardRef(function Heatmap(inProps: HeatmapProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiHeatmap' });
   const {
     xAxis,
     yAxis,

diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import {
   AreaPlot,
   AreaPlotProps,
@@ -36,7 +37,8 @@ export interface LineChartProProps extends LineChartProps, ZoomProps {}
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProProps, ref) {
+const LineChartPro = React.forwardRef(function LineChartPro(inProps: LineChartProProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiLineChartPro' });
   const { zoom, onZoomChange, ...other } = props;
   const {
     chartContainerProps,

diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart';
 import { ZAxisContextProvider } from '@mui/x-charts/context';
@@ -27,9 +28,10 @@ export interface ScatterChartProProps extends ScatterChartProps, ZoomProps {}
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
 const ScatterChartPro = React.forwardRef(function ScatterChartPro(
-  props: ScatterChartProProps,
+  inProps: ScatterChartProProps,
   ref,
 ) {
+  const props = useThemeProps({ props: inProps, name: 'MuiScatterChartPro' });
   const { zoom, onZoomChange, ...other } = props;
   const {
     chartContainerProps,

diff --git a/packages/x-charts-pro/src/themeAugmentation/components.d.ts b/packages/x-charts-pro/src/themeAugmentation/components.d.ts
@@ -0,0 +1,25 @@
+import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
+
+export interface ChartsProComponents<Theme = unknown> {
+  // BarChartPro components
+  MuiBarChartPro?: {
+    defaultProps?: ComponentsProps['MuiBarChartPro'];
+  };
+  // LineChartPro components
+  MuiLineChartPro?: {
+    defaultProps?: ComponentsProps['MuiLineChartPro'];
+  };
+  // Heatmap components
+  MuiHeatmap?: {
+    defaultProps?: ComponentsProps['MuiHeatmap'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmap'];
+  };
+  // ScatterChartPro components
+  MuiScatterChartPro?: {
+    defaultProps?: ComponentsProps['MuiScatterChartPro'];
+  };
+}
+
+declare module '@mui/material/styles' {
+  interface Components<Theme = unknown> extends ChartsProComponents<Theme> {}
+}
diff --git a/packages/x-charts-pro/src/themeAugmentation/index.js b/packages/x-charts-pro/src/themeAugmentation/index.js
@@ -0,0 +1 @@
+// Prefer to use `import type {} from '@mui/x-charts-pro/themeAugmentation';` instead to avoid importing an empty file.
diff --git a/packages/x-charts-pro/src/themeAugmentation/index.ts b/packages/x-charts-pro/src/themeAugmentation/index.ts
@@ -0,0 +1,4 @@
+export * from '@mui/x-charts/themeAugmentation';
+export * from './overrides';
+export * from './props';
+export * from './components';
diff --git a/packages/x-charts-pro/src/themeAugmentation/overrides.d.ts b/packages/x-charts-pro/src/themeAugmentation/overrides.d.ts
@@ -0,0 +1,13 @@
+import { HeatmapClassKey } from '../Heatmap';
+
+export interface ChartsProComponentNameToClassKey {
+  // Heatmap components
+  MuiHeatmap: HeatmapClassKey;
+}
+
+declare module '@mui/material/styles' {
+  interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {}
+}
+
+// disable automatic export
+export {};
diff --git a/packages/x-charts-pro/src/themeAugmentation/props.d.ts b/packages/x-charts-pro/src/themeAugmentation/props.d.ts
@@ -0,0 +1,22 @@
+import { ScatterChartProProps } from '../ScatterChartPro';
+import { BarChartProProps } from '../BarChartPro';
+import { HeatmapProps } from '../Heatmap/Heatmap';
+import { LineChartProProps } from '../LineChartPro';
+
+export interface ChartsProComponentsPropsList {
+  // BarChartPro components
+  MuiBarChartPro: BarChartProProps;
+  // LineChartPro components
+  MuiLineChartPro: LineChartProProps;
+  // Heatmap components
+  MuiHeatmap: HeatmapProps;
+  // ScatterChartPro components
+  MuiScatterChartPro: ScatterChartProProps;
+}
+
+declare module '@mui/material/styles' {
+  interface ComponentsPropsList extends ChartsProComponentsPropsList {}
+}
+
+// disable automatic export
+export {};
diff --git a/packages/x-charts-pro/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts-pro/src/themeAugmentation/themeAugmentation.spec.ts
@@ -0,0 +1,39 @@
+import { createTheme } from '@mui/material/styles';
+
+createTheme({
+  components: {
+    MuiBarChartPro: {
+      defaultProps: {
+        title: 'toto',
+        // @ts-expect-error invalid MuiChartsAxis prop
+        someRandomProp: true,
+      },
+    },
+    MuiLineChartPro: {
+      defaultProps: {
+        title: 'toto',
+        // @ts-expect-error invalid MuiChartsAxis prop
+        someRandomProp: true,
+      },
+    },
+    MuiScatterChartPro: {
+      defaultProps: {
+        title: 'toto',
+        // @ts-expect-error invalid MuiChartsAxis prop
+        someRandomProp: true,
+      },
+    },
+    MuiHeatmap: {
+      defaultProps: {
+        title: 'toto',
+        // @ts-expect-error invalid MuiChartsAxis prop
+        someRandomProp: true,
+      },
+      styleOverrides: {
+        highlighted: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiChartsAxis class key
+        constent: { color: 'red' },
+      },
+    },
+  },
+});
diff --git a/packages/x-charts/src/BarChart/BarChart.test.tsx b/packages/x-charts/src/BarChart/BarChart.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { createRenderer } from '@mui/internal-test-utils/createRenderer';
+import { describeConformance } from 'test/utils/describeConformance';
 import { BarChart } from '@mui/x-charts/BarChart';
 
 describe('<BarChart />', () => {
@@ -20,7 +21,6 @@ describe('<BarChart />', () => {
         'slotPropsProp',
         'slotPropsCallback',
         'slotsProp',
-        'themeDefaultProps',
         'themeStyleOverrides',
         'themeVariants',
         'themeCustomPalette',

diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { BarPlot, BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot';
 import {
   ResponsiveChartContainer,
@@ -109,7 +110,8 @@ export interface BarChartProps
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) {
+const BarChart = React.forwardRef(function BarChart(inProps: BarChartProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiBarChart' });
   const {
     chartContainerProps,
     barPlotProps,

diff --git a/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx b/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx
@@ -29,10 +29,10 @@ export const BarLabelComponent = styled(animated.text, {
 
 export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> & BarLabelOwnerState;
 
-function BarLabel(props: BarLabelProps) {
-  const themeProps = useThemeProps({ props, name: 'MuiBarLabel' });
+function BarLabel(inProps: BarLabelProps) {
+  const props = useThemeProps({ props: inProps, name: 'MuiBarLabel' });
 
-  const { seriesId, dataIndex, color, isFaded, isHighlighted, classes, ...otherProps } = themeProps;
+  const { seriesId, dataIndex, color, isFaded, isHighlighted, classes, ...otherProps } = props;
 
   return <BarLabelComponent {...otherProps} />;
 }

diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
@@ -66,14 +66,14 @@ export interface ChartsGridProps {
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-function ChartsGrid(props: ChartsGridProps) {
-  const themeProps = useThemeProps({ props, name: 'MuiChartsGrid' });
+function ChartsGrid(inProps: ChartsGridProps) {
+  const props = useThemeProps({ props: inProps, name: 'MuiChartsGrid' });
 
   const drawingArea = useDrawingArea();
-  const { vertical, horizontal, ...other } = themeProps;
+  const { vertical, horizontal, ...other } = props;
   const { xAxis, xAxisIds, yAxis, yAxisIds } = useCartesianContext();
 
-  const classes = useUtilityClasses(themeProps);
+  const classes = useUtilityClasses(props);
 
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];

diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx
@@ -1,4 +1,4 @@
-import { styled, SxProps, Theme } from '@mui/material/styles';
+import { styled, SxProps, Theme, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useAxisEvents } from '../hooks/useAxisEvents';
@@ -42,9 +42,10 @@ const ChartChartsSurfaceStyles = styled('svg', {
 }));
 
 const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(function ChartsSurface(
-  props: ChartsSurfaceProps,
+  inProps: ChartsSurfaceProps,
   ref,
 ) {
+  const props = useThemeProps({ props: inProps, name: 'MuiChartsSurface' });
   const {
     children,
     width,

diff --git a/packages/x-charts/src/LineChart/LineChart.test.tsx b/packages/x-charts/src/LineChart/LineChart.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { createRenderer } from '@mui/internal-test-utils/createRenderer';
+import { describeConformance } from 'test/utils/describeConformance';
 import { LineChart } from '@mui/x-charts/LineChart';
 
 describe('<LineChart />', () => {
@@ -19,7 +20,6 @@ describe('<LineChart />', () => {
         'slotPropsProp',
         'slotPropsCallback',
         'slotsProp',
-        'themeDefaultProps',
         'themeStyleOverrides',
         'themeVariants',
         'themeCustomPalette',

diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot';
 import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot';
 import {
@@ -135,7 +136,8 @@ export interface LineChartProps
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref) {
+const LineChart = React.forwardRef(function LineChart(inProps: LineChartProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiLineChart' });
   const {
     chartContainerProps,
     axisClickHandlerProps,

diff --git a/packages/x-charts/src/PieChart/PieChart.test.tsx b/packages/x-charts/src/PieChart/PieChart.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { createRenderer } from '@mui/internal-test-utils/createRenderer';
+import { describeConformance } from 'test/utils/describeConformance';
 import { PieChart } from '@mui/x-charts/PieChart';
 
 describe('<PieChart />', () => {
@@ -30,7 +31,6 @@ describe('<PieChart />', () => {
         'slotPropsProp',
         'slotPropsCallback',
         'slotsProp',
-        'themeDefaultProps',
         'themeStyleOverrides',
         'themeVariants',
         'themeCustomPalette',

diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import {
   ResponsiveChartContainer,
   ResponsiveChartContainerProps,
@@ -123,7 +124,8 @@ const defaultRTLMargin = { top: 5, bottom: 5, left: 100, right: 5 };
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-const PieChart = React.forwardRef(function PieChart(props: PieChartProps, ref) {
+const PieChart = React.forwardRef(function PieChart(inProps: PieChartProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiPieChart' });
   const {
     xAxis,
     yAxis,