diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 733d559d019ea..ece30e5605441 100644 --- 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": "", diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json index 823f299ffea2b..6468bfbf8ffa6 100644 --- 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": "", diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index a80423dcca651..c3ec43f7ece63 100644 --- 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": "", diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 0ea4ae0132081..d917936072632 100644 --- 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": "", diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json index b04b83407c931..2552d93bbf2bf 100644 --- 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": "", diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index 96bb86d6ba1e9..ffaf8a55ba727 100644 --- 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": "", diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index fd1187097d97a..47bc927c2fe48 100644 --- 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": "", diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index 8c0e759232b2c..fef94af210ca2 100644 --- 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 ( - - - + + + - - + + - - + + {children} diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx index e65ebb933b405..44f9857c0482e 100644 --- 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 ( - - {width && height ? ( - - ) : null} + + {hasIntrinsicSize ? : null} ); diff --git a/packages/x-charts/src/BarChart/BarChart.test.tsx b/packages/x-charts/src/BarChart/BarChart.test.tsx new file mode 100644 index 0000000000000..a6b9157a1f0a8 --- /dev/null +++ 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('', () => { + const { render } = createRenderer(); + + describeConformance( + , + () => ({ + 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 index 4370f5d67389a..4b3cf9e042cbb 100644 --- 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 new file mode 100644 index 0000000000000..273c07e8a4d3c --- /dev/null +++ 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('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + 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 index 1305694424e5d..1d7554b5612c1 100644 --- 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 ( - - - - - + + + + + - - + + {children} diff --git a/packages/x-charts/src/ChartContainer/useChartContainerHooks.ts b/packages/x-charts/src/ChartContainer/useChartContainerHooks.ts index da8d4834f986b..7866295afec91 100644 --- a/packages/x-charts/src/ChartContainer/useChartContainerHooks.ts +++ b/packages/x-charts/src/ChartContainer/useChartContainerHooks.ts @@ -10,7 +10,7 @@ export const useChartContainerHooks = ( plugins?: ChartsPluginType[], ) => { const svgRef = React.useRef(null); - const handleRef = useForkRef(ref, svgRef); + const chartSurfaceRef = useForkRef(ref, svgRef); const { xExtremumGetters, yExtremumGetters, seriesFormatters, colorProcessors } = usePluginsMerge(plugins); @@ -18,7 +18,7 @@ export const useChartContainerHooks = ( return { svgRef, - handleRef, + chartSurfaceRef, xExtremumGetters, yExtremumGetters, seriesFormatters, diff --git a/packages/x-charts/src/ChartContainer/useChartContainerProps.ts b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts new file mode 100644 index 0000000000000..ce7fc2156366a --- /dev/null +++ b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts @@ -0,0 +1,103 @@ +import type { DrawingProviderProps } from '../context/DrawingProvider'; +import type { ColorProviderProps } from '../context/ColorProvider'; +import type { CartesianContextProviderProps } from '../context/CartesianProvider'; +import type { SeriesContextProviderProps } from '../context/SeriesContextProvider'; +import type { ZAxisContextProviderProps } from '../context/ZAxisContextProvider'; +import type { ChartContainerProps } from './ChartContainer'; + +import { useChartContainerHooks } from './useChartContainerHooks'; +import { HighlightedProviderProps } from '../context'; +import { ChartsSurfaceProps } from '../ChartsSurface'; + +export const useChartContainerProps = ( + props: ChartContainerProps, + ref: React.ForwardedRef, +) => { + const { + width, + height, + series, + margin, + xAxis, + yAxis, + zAxis, + colors, + dataset, + sx, + title, + desc, + disableAxisListener, + highlightedItem, + onHighlightChange, + plugins, + children, + ...rest + } = props; + + const { + svgRef, + chartSurfaceRef, + xExtremumGetters, + yExtremumGetters, + seriesFormatters, + colorProcessors, + } = useChartContainerHooks(ref, plugins); + + const drawingProviderProps: Omit = { + width, + height, + margin, + svgRef, + }; + + const colorProviderProps: Omit = { + colorProcessors, + }; + + const seriesContextProps: Omit = { + series, + colors, + dataset, + seriesFormatters, + }; + + const cartesianContextProps: Omit = { + xAxis, + yAxis, + dataset, + xExtremumGetters, + yExtremumGetters, + }; + + const zAxisContextProps: Omit = { + zAxis, + dataset, + }; + + const highlightedProviderProps: Omit = { + highlightedItem, + onHighlightChange, + }; + + const chartsSurfaceProps: ChartsSurfaceProps & { ref: any } = { + ...rest, + width, + height, + ref: chartSurfaceRef, + sx, + title, + desc, + disableAxisListener, + }; + + return { + children, + drawingProviderProps, + colorProviderProps, + seriesContextProps, + cartesianContextProps, + zAxisContextProps, + highlightedProviderProps, + chartsSurfaceProps, + }; +}; diff --git a/packages/x-charts/src/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface.tsx index adb8a944260e6..47147d81f2a0a 100644 --- a/packages/x-charts/src/ChartsSurface.tsx +++ b/packages/x-charts/src/ChartsSurface.tsx @@ -66,6 +66,7 @@ const ChartsSurface = React.forwardRef(functi height={height} viewBox={`${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`} ref={ref} + className={className} {...other} > {title} diff --git a/packages/x-charts/src/Gauge/Gauge.tsx b/packages/x-charts/src/Gauge/Gauge.tsx index 14b04b897d802..e0847a614b49d 100644 --- a/packages/x-charts/src/Gauge/Gauge.tsx +++ b/packages/x-charts/src/Gauge/Gauge.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; +import clsx from 'clsx'; import { GaugeContainer, GaugeContainerProps } from './GaugeContainer'; import { GaugeValueArc } from './GaugeValueArc'; import { GaugeReferenceArc } from './GaugeReferenceArc'; @@ -25,18 +26,18 @@ const useUtilityClasses = (props: GaugeProps) => { return composeClasses(slots, getGaugeUtilityClass, classes); }; -function Gauge(props: GaugeProps) { - const { text, children, classes: propsClasses, ...other } = props; +const Gauge = React.forwardRef(function Gauge(props: GaugeProps, ref) { + const { text, children, classes: propsClasses, className, ...other } = props; const classes = useUtilityClasses(props); return ( - + {children} ); -} +}); Gauge.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx index 5c803ee68a2b3..48e61b403238d 100644 --- a/packages/x-charts/src/Gauge/GaugeContainer.tsx +++ b/packages/x-charts/src/Gauge/GaugeContainer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import useForkRef from '@mui/utils/useForkRef'; import { styled } from '@mui/material/styles'; +import useForkRef from '@mui/utils/useForkRef'; import { useChartContainerDimensions } from '../ResponsiveChartContainer/useChartContainerDimensions'; import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface'; import { DrawingProvider, DrawingProviderProps } from '../context/DrawingProvider'; @@ -64,10 +64,10 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont children, ...other } = props; - const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight); + const { containerRef, width, height } = useChartContainerDimensions(inWidth, inHeight); const svgRef = React.useRef(null); - const handleRef = useForkRef(ref, svgRef); + const chartSurfaceRef = useForkRef(ref, svgRef); return ( ', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes: {} as any, + inheritComponent: 'svg', + render, + muiName: 'MuiGauge', + testComponentPropWith: 'div', + refInstanceof: window.SVGSVGElement, + skip: [ + 'componentProp', + 'componentsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotsProp', + 'themeDefaultProps', + 'themeStyleOverrides', + 'themeVariants', + 'themeCustomPalette', + ], + })); +}); diff --git a/packages/x-charts/src/LineChart/LineChart.test.tsx b/packages/x-charts/src/LineChart/LineChart.test.tsx new file mode 100644 index 0000000000000..9d0cb4da21ace --- /dev/null +++ b/packages/x-charts/src/LineChart/LineChart.test.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { LineChart } from './LineChart'; + +describe('', () => { + const { render } = createRenderer(); + describeConformance( + , + () => ({ + classes: {} as any, + inheritComponent: 'svg', + render, + muiName: 'MuiLineChart', + testComponentPropWith: 'div', + refInstanceof: window.SVGSVGElement, + skip: [ + 'componentProp', + 'componentsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotsProp', + 'themeDefaultProps', + 'themeStyleOverrides', + 'themeVariants', + 'themeCustomPalette', + ], + }), + ); +}); diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 47bbcbc7bd42b..5a3e59b6a0e7d 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -53,12 +53,15 @@ export const useLineChartProps = (props: LineChartProps) => { loading, highlightedItem, onHighlightChange, + className, + ...rest } = props; const id = useId(); const clipPathId = `${id}-clip-path`; const chartContainerProps: ResponsiveChartContainerProps = { + ...rest, series: series.map((s) => ({ disableHighlight: !!disableLineItemHighlight, type: 'line' as const, @@ -88,6 +91,7 @@ export const useLineChartProps = (props: LineChartProps) => { axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick, + className, }; const axisClickHandlerProps: ChartsOnAxisClickHandlerProps = { diff --git a/packages/x-charts/src/PieChart/PieChart.test.tsx b/packages/x-charts/src/PieChart/PieChart.test.tsx new file mode 100644 index 0000000000000..6694aa2a95e5b --- /dev/null +++ b/packages/x-charts/src/PieChart/PieChart.test.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { PieChart } from './PieChart'; + +describe('', () => { + const { render } = createRenderer(); + describeConformance( + , + () => ({ + classes: {} as any, + inheritComponent: 'svg', + render, + muiName: 'MuiPieChart', + testComponentPropWith: 'div', + refInstanceof: window.SVGSVGElement, + skip: [ + 'componentProp', + 'componentsProp', + '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 index 856052afdc282..42071539e0cbf 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -123,7 +123,7 @@ const defaultRTLMargin = { top: 5, bottom: 5, left: 100, right: 5 }; * * - [PieChart API](https://mui.com/x/api/charts/pie-chart/) */ -function PieChart(props: PieChartProps) { +const PieChart = React.forwardRef(function PieChart(props: PieChartProps, ref) { const { xAxis, yAxis, @@ -148,6 +148,8 @@ function PieChart(props: PieChartProps) { loading, highlightedItem, onHighlightChange, + className, + ...rest } = props; const isRTL = useIsRTL(); @@ -160,6 +162,8 @@ function PieChart(props: PieChartProps) { return ( ({ type: 'pie', ...s }))} width={width} height={height} @@ -183,6 +187,7 @@ function PieChart(props: PieChartProps) { } highlightedItem={highlightedItem} onHighlightChange={onHighlightChange} + className={className} > ); -} +}); PieChart.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.test.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.test.tsx new file mode 100644 index 0000000000000..72ac40d309532 --- /dev/null +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.test.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { ResponsiveChartContainer } from './ResponsiveChartContainer'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes: {} as any, + inheritComponent: 'svg', + render, + muiName: 'MuiResponsiveChartContainer', + testComponentPropWith: 'div', + refInstanceof: window.SVGSVGElement, + skip: [ + 'componentProp', + 'componentsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotsProp', + 'themeDefaultProps', + 'themeStyleOverrides', + 'themeVariants', + 'themeCustomPalette', + ], + })); +}); diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx index 8ea518934c3b3..3797aaf7b864a 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { ChartContainer, ChartContainerProps } from '../ChartContainer'; -import { useChartContainerDimensions } from './useChartContainerDimensions'; import { ResizableContainer } from './ResizableContainer'; +import { useResponsiveChartContainerProps } from './useResponsiveChartContainerProps'; export interface ResponsiveChartContainerProps extends Omit { @@ -20,14 +20,12 @@ const ResponsiveChartContainer = React.forwardRef(function ResponsiveChartContai props: ResponsiveChartContainerProps, ref, ) { - const { width: inWidth, height: inHeight, ...other } = props; - const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight); + const { hasIntrinsicSize, chartContainerProps, resizableChartContainerProps } = + useResponsiveChartContainerProps(props, ref); return ( - - {width && height ? ( - - ) : null} + + {hasIntrinsicSize ? : null} ); }); diff --git a/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts b/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts index 4e82a43889af0..cb6001d1588f7 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts +++ b/packages/x-charts/src/ResponsiveChartContainer/useChartContainerDimensions.ts @@ -2,12 +2,9 @@ import * as React from 'react'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import ownerWindow from '@mui/utils/ownerWindow'; -export const useChartContainerDimensions = ( - inWidth?: number, - inHeight?: number, -): [React.RefObject, number, number] => { - const rootRef = React.useRef(null); +export const useChartContainerDimensions = (inWidth?: number, inHeight?: number) => { const displayError = React.useRef(false); + const rootRef = React.useRef(null); const [width, setWidth] = React.useState(0); const [height, setHeight] = React.useState(0); @@ -84,5 +81,5 @@ export const useChartContainerDimensions = ( } } - return [rootRef, inWidth ?? width, inHeight ?? height]; + return { containerRef: rootRef, width: inWidth ?? width, height: inHeight ?? height }; }; diff --git a/packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts b/packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts new file mode 100644 index 0000000000000..25718ce52c090 --- /dev/null +++ b/packages/x-charts/src/ResponsiveChartContainer/useResponsiveChartContainerProps.ts @@ -0,0 +1,70 @@ +import { ChartContainerProps } from '../ChartContainer'; +import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer'; +import { useChartContainerDimensions } from './useChartContainerDimensions'; + +export const useResponsiveChartContainerProps = ( + props: ResponsiveChartContainerProps, + ref: React.ForwardedRef, +) => { + const { + width, + height, + margin, + children, + series, + colors, + dataset, + desc, + disableAxisListener, + highlightedItem, + onHighlightChange, + plugins, + sx, + title, + viewBox, + xAxis, + yAxis, + zAxis, + ...rest + } = props; + + const { + containerRef, + width: dWidth, + height: dHeight, + } = useChartContainerDimensions(width, height); + + const resizableChartContainerProps = { + ...rest, + ownerState: { width, height }, + ref: containerRef, + }; + + const chartContainerProps: ChartContainerProps & { ref: React.ForwardedRef } = { + margin, + children, + series, + colors, + dataset, + desc, + disableAxisListener, + highlightedItem, + onHighlightChange, + plugins, + sx, + title, + viewBox, + xAxis, + yAxis, + zAxis, + width: dWidth, + height: dHeight, + ref, + }; + + return { + hasIntrinsicSize: dWidth && dHeight, + chartContainerProps, + resizableChartContainerProps, + }; +}; diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx new file mode 100644 index 0000000000000..a2d1cc81e7018 --- /dev/null +++ b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { ScatterChart } from './ScatterChart'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance( + , + () => ({ + classes: {} as any, + inheritComponent: 'svg', + render, + muiName: 'MuiScatterChart', + testComponentPropWith: 'div', + refInstanceof: window.SVGSVGElement, + skip: [ + 'componentProp', + 'componentsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotsProp', + 'themeDefaultProps', + 'themeStyleOverrides', + 'themeVariants', + 'themeCustomPalette', + ], + }), + ); +}); diff --git a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts index b3fe96a66fc6f..1ea95292d3f5f 100644 --- a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts +++ b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts @@ -45,9 +45,12 @@ export const useScatterChartProps = (props: ScatterChartProps) => { loading, highlightedItem, onHighlightChange, + className, + ...rest } = props; const chartContainerProps: ResponsiveChartContainerProps = { + ...rest, series: series.map((s) => ({ type: 'scatter' as const, ...s })), width, height, @@ -58,6 +61,7 @@ export const useScatterChartProps = (props: ScatterChartProps) => { sx, highlightedItem, onHighlightChange, + className, }; const zAxisProps: Omit = { zAxis, diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.test.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.test.tsx new file mode 100644 index 0000000000000..49302b3ca8d66 --- /dev/null +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.test.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { SparkLineChart } from './SparkLineChart'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes: {} as any, + inheritComponent: 'svg', + render, + muiName: 'MuiSparkLineChart', + testComponentPropWith: 'div', + refInstanceof: window.SVGSVGElement, + skip: [ + 'componentProp', + 'componentsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotsProp', + 'themeDefaultProps', + 'themeStyleOverrides', + 'themeVariants', + 'themeCustomPalette', + ], + })); +}); diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index d46ac24e85bd2..91f4940b429a0 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -155,6 +155,8 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine valueFormatter = (value: number | null) => (value === null ? '' : value.toString()), area, curve = 'linear', + className, + ...rest } = props; const defaultXHighlight: { x: 'band' | 'none' } = @@ -166,6 +168,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine return ( { handleMediaChange(mql); - mql.addEventListener('change', handleMediaChange); + // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener + mql.addEventListener?.('change', handleMediaChange); return () => { - mql.removeEventListener('change', handleMediaChange); + mql.removeEventListener?.('change', handleMediaChange); }; }, []); }; diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index 924017fab51c0..5ab8260e3d1ec 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -9,10 +9,11 @@ export { useReducedMotion } from '../hooks/useReducedMotion'; export { useSeries } from '../hooks/useSeries'; export { useInteractionItemProps } from '../hooks/useInteractionItemProps'; export { useDrawingArea } from '../hooks/useDrawingArea'; -export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks'; export { useScatterChartProps } from '../ScatterChart/useScatterChartProps'; export { useLineChartProps } from '../LineChart/useLineChartProps'; export { useBarChartProps } from '../BarChart/useBarChartProps'; +export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps'; +export { useChartContainerProps } from '../ChartContainer/useChartContainerProps'; // utils export * from './defaultizeValueFormatter'; diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 3dfc2afb4eeca..60a8f7e387253 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -143,7 +143,7 @@ { "name": "Direction", "kind": "TypeAlias" }, { "name": "ExtremumGettersConfig", "kind": "TypeAlias" }, { "name": "FadeOptions", "kind": "TypeAlias" }, - { "name": "Gauge", "kind": "Function" }, + { "name": "Gauge", "kind": "Variable" }, { "name": "gaugeClasses", "kind": "Variable" }, { "name": "GaugeClasses", "kind": "Interface" }, { "name": "GaugeClassKey", "kind": "TypeAlias" }, @@ -244,7 +244,7 @@ { "name": "PieArcPlotSlotProps", "kind": "Interface" }, { "name": "PieArcPlotSlots", "kind": "Interface" }, { "name": "PieArcProps", "kind": "TypeAlias" }, - { "name": "PieChart", "kind": "Function" }, + { "name": "PieChart", "kind": "Variable" }, { "name": "PieChartProps", "kind": "Interface" }, { "name": "PieChartSlotProps", "kind": "Interface" }, { "name": "PieChartSlots", "kind": "Interface" },