[charts] Fix charts not passing className to root element (#13647)

mui · Jul 11, 2024 · 55aee56 · 55aee56
1 parent f502dbe
commit 55aee56
Show file tree

Hide file tree

Showing 34 changed files with 529 additions and 148 deletions.
diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json
@@ -189,7 +189,10 @@
  }
  ],
  "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
  "muiName": "MuiBarChart",
+ "forwardsRefTo": "SVGSVGElement",
  "filename": "/packages/x-charts/src/BarChart/BarChart.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/x/react-charts/bar-demo/\">Charts - Bar demonstration</a></li>\n<li><a href=\"/x/react-charts/bars/\">Charts - Bars</a></li>\n<li><a href=\"/x/react-charts/label/\">Charts - Label</a></li></ul>",

diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json
@@ -58,7 +58,10 @@
  "import { ChartContainer } from '@mui/x-charts';"
  ],
  "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
  "muiName": "MuiChartContainer",
+ "forwardsRefTo": "SVGSVGElement",
  "filename": "/packages/x-charts/src/ChartContainer/ChartContainer.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/x/react-charts/composition/\">Chart composition</a></li></ul>",

diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json
@@ -184,7 +184,10 @@
  }
  ],
  "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
  "muiName": "MuiLineChart",
+ "forwardsRefTo": "SVGSVGElement",
  "filename": "/packages/x-charts/src/LineChart/LineChart.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/x/react-charts/areas-demo/\">Charts - Areas demonstration</a></li>\n<li><a href=\"/x/react-charts/label/\">Charts - Label</a></li>\n<li><a href=\"/x/react-charts/line-demo/\">Charts - Line demonstration</a></li>\n<li><a href=\"/x/react-charts/lines/\">Charts - Lines</a></li></ul>",

diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json
@@ -168,7 +168,10 @@
  }
  ],
  "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
  "muiName": "MuiPieChart",
+ "forwardsRefTo": "SVGSVGElement",
  "filename": "/packages/x-charts/src/PieChart/PieChart.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/x/react-charts/label/\">Charts - Label</a></li>\n<li><a href=\"/x/react-charts/pie/\">Charts - Pie</a></li>\n<li><a href=\"/x/react-charts/pie-demo/\">Charts - Pie demonstration</a></li></ul>",

diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json
@@ -58,7 +58,10 @@
  "import { ResponsiveChartContainer } from '@mui/x-charts';"
  ],
  "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
  "muiName": "MuiResponsiveChartContainer",
+ "forwardsRefTo": "SVGSVGElement",
  "filename": "/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/x/react-charts/composition/\">Chart composition</a></li></ul>",

diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json
@@ -174,7 +174,10 @@
  }
  ],
  "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
  "muiName": "MuiScatterChart",
+ "forwardsRefTo": "SVGSVGElement",
  "filename": "/packages/x-charts/src/ScatterChart/ScatterChart.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/x/react-charts/label/\">Charts - Label</a></li>\n<li><a href=\"/x/react-charts/scatter/\">Charts - Scatter</a></li>\n<li><a href=\"/x/react-charts/scatter-demo/\">Charts - Scatter demonstration</a></li></ul>",

diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json
@@ -113,7 +113,10 @@
  }
  ],
  "classes": [],
+ "spread": true,
+ "themeDefaultProps": false,
  "muiName": "MuiSparkLineChart",
+ "forwardsRefTo": "SVGSVGElement",
  "filename": "/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/x/react-charts/sparkline/\">Charts - Sparkline</a></li></ul>",

diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx
@@ -9,7 +9,7 @@ import {
  DrawingProvider,
  InteractionProvider,
  SeriesContextProvider,
- useChartContainerHooks,
+ useChartContainerProps,
 } from '@mui/x-charts/internals';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
@@ -25,68 +25,28 @@ const ChartContainerPro = React.forwardRef(function ChartContainer(
  ref,
 ) {
  const {
- width,
- height,
- series,
- margin,
- xAxis,
- yAxis,
- zAxis,
- colors,
- dataset,
- sx,
- title,
- desc,
- disableAxisListener,
- highlightedItem,
- onHighlightChange,
- plugins,
  children,
- } = props;
+ drawingProviderProps,
+ colorProviderProps,
+ seriesContextProps,
+ cartesianContextProps,
+ zAxisContextProps,
+ highlightedProviderProps,
+ chartsSurfaceProps,
+ } = useChartContainerProps(props, ref);
 
  useLicenseVerifier('x-charts-pro', releaseInfo);
 
- const {
- svgRef,
- handleRef,
- xExtremumGetters,
- yExtremumGetters,
- seriesFormatters,
- colorProcessors,
- } = useChartContainerHooks(ref, plugins);
-
  return (
- <DrawingProvider width={width} height={height} margin={margin} svgRef={svgRef}>
- <ColorProvider colorProcessors={colorProcessors}>
- <SeriesContextProvider
- series={series}
- colors={colors}
- dataset={dataset}
- seriesFormatters={seriesFormatters}
- >
+ <DrawingProvider {...drawingProviderProps}>
+ <ColorProvider {...colorProviderProps}>
+ <SeriesContextProvider {...seriesContextProps}>
  <ZoomProvider>
- <CartesianContextProviderPro
- xAxis={xAxis}
- yAxis={yAxis}
- dataset={dataset}
- xExtremumGetters={xExtremumGetters}
- yExtremumGetters={yExtremumGetters}
- >
- <ZAxisContextProvider zAxis={zAxis} dataset={dataset}>
+ <CartesianContextProviderPro {...cartesianContextProps}>
+ <ZAxisContextProvider {...zAxisContextProps}>
  <InteractionProvider>
- <HighlightedProvider
- highlightedItem={highlightedItem}
- onHighlightChange={onHighlightChange}
- >
- <ChartsSurface
- width={width}
- height={height}
- ref={handleRef}
- sx={sx}
- title={title}
- desc={desc}
- disableAxisListener={disableAxisListener}
- >
+ <HighlightedProvider {...highlightedProviderProps}>
+ <ChartsSurface {...chartsSurfaceProps}>
  <ChartsAxesGradients />
  {children}
  </ChartsSurface>

diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
 import { ResponsiveChartContainerProps } from '@mui/x-charts/ResponsiveChartContainer';
-import { ResizableContainer, useChartContainerDimensions } from '@mui/x-charts/internals';
+import { ResizableContainer, useResponsiveChartContainerProps } from '@mui/x-charts/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { ChartContainerPro } from '../ChartContainerPro';
 
@@ -14,14 +14,12 @@ const ResponsiveChartContainerPro = React.forwardRef(function ResponsiveChartCon
  props: ResponsiveChartContainerProProps,
  ref,
 ) {
- const { width: inWidth, height: inHeight, ...other } = props;
- const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
+ const { chartContainerProps, resizableChartContainerProps, hasIntrinsicSize } =
+  useResponsiveChartContainerProps(props, ref);
 
  return (
- <ResizableContainer ref={containerRef} ownerState={{ width: inWidth, height: inHeight }}>
- {width && height ? (
- <ChartContainerPro {...other} width={width} height={height} ref={ref} />
- ) : null}
+ <ResizableContainer {...resizableChartContainerProps}>
+ {hasIntrinsicSize ? <ChartContainerPro {...chartContainerProps} /> : null}
  <Watermark packageName="x-charts-pro" releaseInfo={releaseInfo} />
  </ResizableContainer>
  );

diff --git a/packages/x-charts/src/BarChart/BarChart.test.tsx b/packages/x-charts/src/BarChart/BarChart.test.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { BarChart } from './BarChart';
+
+describe('<BarChart />', () => {
+ const { render } = createRenderer();
+
+ describeConformance(
+ <BarChart height={100} width={100} series={[{ data: [100, 200] }]} />,
+ () => ({
+ classes: {} as any,
+ inheritComponent: 'svg',
+ render,
+ muiName: 'MuiBarChart',
+ testComponentPropWith: 'div',
+ refInstanceof: window.SVGSVGElement,
+ skip: [
+ 'componentProp',
+ 'componentsProp',
+ 'slotPropsProp',
+ 'slotPropsCallback',
+ 'slotsProp',
+ 'themeDefaultProps',
+ 'themeStyleOverrides',
+ 'themeVariants',
+ 'themeCustomPalette',
+ ],
+ }),
+ );
+});
diff --git a/packages/x-charts/src/BarChart/useBarChartProps.ts b/packages/x-charts/src/BarChart/useBarChartProps.ts
@@ -50,6 +50,8 @@ export const useBarChartProps = (props: BarChartProps) => {
  onHighlightChange,
  borderRadius,
  barLabel,
+ className,
+ ...rest
  } = props;
 
  const id = useId();
@@ -68,6 +70,7 @@ export const useBarChartProps = (props: BarChartProps) => {
  } as const;
 
  const chartContainerProps: ResponsiveChartContainerProps = {
+ ...rest,
  series: series.map((s) => ({
  type: 'bar' as const,
  ...s,
@@ -92,6 +95,7 @@ export const useBarChartProps = (props: BarChartProps) => {
  axisHighlight?.x === 'none' &&
  axisHighlight?.y === 'none' &&
  !onAxisClick,
+ className,
  };
 
  const barPlotProps: BarPlotProps = {

diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.test.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.test.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from '@mui/internal-test-utils';
+import { ChartContainer } from './ChartContainer';
+
+describe('<ChartContainer />', () => {
+ const { render } = createRenderer();
+
+ describeConformance(<ChartContainer height={100} width={100} series={[]} />, () => ({
+ classes: {} as any,
+ inheritComponent: 'svg',
+ render,
+ muiName: 'MuiChartContainer',
+ testComponentPropWith: 'div',
+ refInstanceof: window.SVGSVGElement,
+ skip: [
+ 'componentProp',
+ 'componentsProp',
+ 'slotPropsProp',
+ 'slotPropsCallback',
+ 'slotsProp',
+ 'themeDefaultProps',
+ 'themeStyleOverrides',
+ 'themeVariants',
+ 'themeCustomPalette',
+ ],
+ }));
+});
diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -21,7 +21,7 @@ import {
 } from '../context';
 import { ChartsPluginType } from '../models/plugin';
 import { ChartSeriesType } from '../models/seriesType/config';
-import { useChartContainerHooks } from './useChartContainerHooks';
+import { useChartContainerProps } from './useChartContainerProps';
 
 export type ChartContainerProps = Omit<
  ChartsSurfaceProps &
@@ -42,64 +42,25 @@ export type ChartContainerProps = Omit<
 
 const ChartContainer = React.forwardRef(function ChartContainer(props: ChartContainerProps, ref) {
  const {
- width,
- height,
- series,
- margin,
- xAxis,
- yAxis,
- zAxis,
- colors,
- dataset,
- sx,
- title,
- desc,
- disableAxisListener,
- highlightedItem,
- onHighlightChange,
- plugins,
  children,
- } = props;
- const {
- svgRef,
- handleRef,
- xExtremumGetters,
- yExtremumGetters,
- seriesFormatters,
- colorProcessors,
- } = useChartContainerHooks(ref, plugins);
+ drawingProviderProps,
+ colorProviderProps,
+ seriesContextProps,
+ cartesianContextProps,
+ zAxisContextProps,
+ highlightedProviderProps,
+ chartsSurfaceProps,
+ } = useChartContainerProps(props, ref);
 
  return (
- <DrawingProvider width={width} height={height} margin={margin} svgRef={svgRef}>
- <ColorProvider colorProcessors={colorProcessors}>
- <SeriesContextProvider
- series={series}
- colors={colors}
- dataset={dataset}
- seriesFormatters={seriesFormatters}
- >
- <CartesianContextProvider
- xAxis={xAxis}
- yAxis={yAxis}
- dataset={dataset}
- xExtremumGetters={xExtremumGetters}
- yExtremumGetters={yExtremumGetters}
- >
- <ZAxisContextProvider zAxis={zAxis} dataset={dataset}>
+ <DrawingProvider {...drawingProviderProps}>
+ <ColorProvider {...colorProviderProps}>
+ <SeriesContextProvider {...seriesContextProps}>
+ <CartesianContextProvider {...cartesianContextProps}>
+ <ZAxisContextProvider {...zAxisContextProps}>
  <InteractionProvider>
- <HighlightedProvider
- highlightedItem={highlightedItem}
- onHighlightChange={onHighlightChange}
- >
- <ChartsSurface
- width={width}
- height={height}
- ref={handleRef}
- sx={sx}
- title={title}
- desc={desc}
- disableAxisListener={disableAxisListener}
- >
+ <HighlightedProvider {...highlightedProviderProps}>
+ <ChartsSurface {...chartsSurfaceProps}>
  <ChartsAxesGradients />
  {children}
  </ChartsSurface>

diff --git a/packages/x-charts/src/ChartContainer/useChartContainerHooks.ts b/packages/x-charts/src/ChartContainer/useChartContainerHooks.ts
@@ -10,15 +10,15 @@ export const useChartContainerHooks = (
  plugins?: ChartsPluginType<ChartSeriesType>[],
 ) => {
  const svgRef = React.useRef<SVGSVGElement>(null);
- const handleRef = useForkRef(ref, svgRef);
+ const chartSurfaceRef = useForkRef(ref, svgRef);
 
  const { xExtremumGetters, yExtremumGetters, seriesFormatters, colorProcessors } =
  usePluginsMerge(plugins);
  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
  return {
  svgRef,
- handleRef,
+ chartSurfaceRef,
  xExtremumGetters,
  yExtremumGetters,
  seriesFormatters,