diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx new file mode 100644 index 0000000000000..4f474bf9de4b0 --- /dev/null +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -0,0 +1,64 @@ +import * as React from 'react'; +import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart'; +import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; +import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; +import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; +import { ChartsAxis } from '@mui/x-charts/ChartsAxis'; +import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; +import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; +import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { useBarChartProps } from '@mui/x-charts/internals'; +import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro'; + +export interface BarChartProProps extends BarChartProps { + // TODO: Add zoom props +} + +/** + * Demos: + * + * - [Bars](https://mui.com/x/react-charts/bars/) + * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/) + * - [Stacking](https://mui.com/x/react-charts/stacking/) + * + * API: + * + * - [BarChart API](https://mui.com/x/api/charts/bar-chart/) + */ +const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProps, ref) { + const { + chartContainerProps, + barPlotProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + legendProps, + tooltipProps, + + children, + } = useBarChartProps(props); + + return ( + + {props.onAxisClick && } + {props.grid && } + + + + + + + + {!props.loading && } + + {children} + + ); +}); + +export { BarChartPro }; diff --git a/packages/x-charts-pro/src/BarChartPro/index.ts b/packages/x-charts-pro/src/BarChartPro/index.ts new file mode 100644 index 0000000000000..94ca1c12f2c42 --- /dev/null +++ b/packages/x-charts-pro/src/BarChartPro/index.ts @@ -0,0 +1 @@ +export * from './BarChartPro'; diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx new file mode 100644 index 0000000000000..384a56b509a41 --- /dev/null +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; +import { + AreaPlot, + LineChartProps, + LineHighlightPlot, + LinePlot, + MarkPlot, +} from '@mui/x-charts/LineChart'; +import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; +import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; +import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; +import { ChartsAxis } from '@mui/x-charts/ChartsAxis'; +import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; +import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; +import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; +import { useLineChartProps } from '@mui/x-charts/internals'; +import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro'; + +export interface LineChartProProps extends LineChartProps { + // TODO: Add zoom props +} + +/** + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Line demonstration](https://mui.com/x/react-charts/line-demo/) + * + * API: + * + * - [LineChart API](https://mui.com/x/api/charts/line-chart/) + */ +const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProProps, ref) { + const { + chartContainerProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + areaPlotProps, + linePlotProps, + markPlotProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + lineHighlightPlotProps, + legendProps, + tooltipProps, + + children, + } = useLineChartProps(props); + + return ( + + {props.onAxisClick && } + {props.grid && } + + + + + + + + + + + {!props.loading && } + + {children} + + ); +}); + +export { LineChartPro }; diff --git a/packages/x-charts-pro/src/LineChartPro/index.ts b/packages/x-charts-pro/src/LineChartPro/index.ts new file mode 100644 index 0000000000000..d2cfab909445c --- /dev/null +++ b/packages/x-charts-pro/src/LineChartPro/index.ts @@ -0,0 +1 @@ +export * from './LineChartPro'; diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx new file mode 100644 index 0000000000000..ad91bb1f9005f --- /dev/null +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; +import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart'; +import { ZAxisContextProvider } from '@mui/x-charts/context'; +import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler'; +import { ChartsAxis } from '@mui/x-charts/ChartsAxis'; +import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; +import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; +import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; +import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; +import { useScatterChartProps } from '@mui/x-charts/internals'; +import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro'; + +export interface ScatterChartProProps extends ScatterChartProps { + // TODO: Add zoom props +} + +/** + * Demos: + * + * - [Scatter](https://mui.com/x/react-charts/scatter/) + * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/) + * + * API: + * + * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/) + */ +const ScatterChartPro = React.forwardRef(function ScatterChartPro( + props: ScatterChartProProps, + ref, +) { + const { + chartContainerProps, + zAxisProps, + voronoiHandlerProps, + chartsAxisProps, + gridProps, + scatterPlotProps, + overlayProps, + legendProps, + axisHighlightProps, + tooltipProps, + children, + } = useScatterChartProps(props); + return ( + + + {!props.disableVoronoi && } + + {props.grid && } + + + + + {!props.loading && } + {children} + + + ); +}); + +export { ScatterChartPro }; diff --git a/packages/x-charts-pro/src/ScatterChartPro/index.ts b/packages/x-charts-pro/src/ScatterChartPro/index.ts new file mode 100644 index 0000000000000..f206422edc8f1 --- /dev/null +++ b/packages/x-charts-pro/src/ScatterChartPro/index.ts @@ -0,0 +1 @@ +export * from './ScatterChartPro'; diff --git a/packages/x-charts-pro/src/index.ts b/packages/x-charts-pro/src/index.ts index 244186c6588ef..63807ba5f1f2c 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -24,4 +24,7 @@ export * from '@mui/x-charts/Gauge'; export * from '@mui/x-charts/ChartsSurface'; export * from './ResponsiveChartContainerPro'; +export * from './ScatterChartPro'; +export * from './BarChartPro'; +export * from './LineChartPro'; export * from './ChartContainerPro'; diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index b36d1fdaac1ae..9cafc9ab03e1c 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import useId from '@mui/utils/useId'; import PropTypes from 'prop-types'; import { BarPlot, BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot'; import { @@ -9,7 +8,6 @@ import { import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis'; import { BarSeriesType } from '../models/seriesType/bar'; import { MakeOptional } from '../models/helpers'; -import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants'; import { ChartsTooltip, ChartsTooltipProps, @@ -36,6 +34,7 @@ import { ChartsOverlaySlotProps, ChartsOverlaySlots, } from '../ChartsOverlay/ChartsOverlay'; +import { useBarChartProps } from './useBarChartProps'; export interface BarChartSlots extends ChartsAxisSlots, @@ -112,112 +111,33 @@ export interface BarChartProps */ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { const { - xAxis, - yAxis, - series, - width, - height, - margin, - colors, - dataset, - sx, - layout, - tooltip, - axisHighlight, - legend, - grid, - topAxis, - leftAxis, - rightAxis, - bottomAxis, - skipAnimation, - borderRadius, - onItemClick, - onAxisClick, + chartContainerProps, + barPlotProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + legendProps, + tooltipProps, children, - slots, - slotProps, - loading, - barLabel, - highlightedItem, - onHighlightChange, - } = props; + } = useBarChartProps(props); - const id = useId(); - const clipPathId = `${id}-clip-path`; - - const hasHorizontalSeries = - layout === 'horizontal' || - (layout === undefined && series.some((item) => item.layout === 'horizontal')); - - const defaultAxisConfig = { - scaleType: 'band', - data: Array.from( - { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) }, - (_, index) => index, - ), - } as const; - - const defaultizedAxisHighlight = { - ...(hasHorizontalSeries ? ({ y: 'band' } as const) : ({ x: 'band' } as const)), - ...axisHighlight, - }; return ( - ({ - type: 'bar', - ...s, - layout: hasHorizontalSeries ? 'horizontal' : 'vertical', - }))} - width={width} - height={height} - margin={margin} - xAxis={ - xAxis ?? - (hasHorizontalSeries ? undefined : [{ id: DEFAULT_X_AXIS_KEY, ...defaultAxisConfig }]) - } - yAxis={ - yAxis ?? - (hasHorizontalSeries ? [{ id: DEFAULT_Y_AXIS_KEY, ...defaultAxisConfig }] : undefined) - } - colors={colors} - dataset={dataset} - sx={sx} - disableAxisListener={ - tooltip?.trigger !== 'axis' && - axisHighlight?.x === 'none' && - axisHighlight?.y === 'none' && - !onAxisClick - } - highlightedItem={highlightedItem} - onHighlightChange={onHighlightChange} - > - {onAxisClick && } - {grid && } - - - + + {props.onAxisClick && } + {props.grid && } + + + - - - - {!loading && } - + + + + {!props.loading && } + {children} ); diff --git a/packages/x-charts/src/BarChart/useBarChartProps.ts b/packages/x-charts/src/BarChart/useBarChartProps.ts new file mode 100644 index 0000000000000..b8c9e00ceea9b --- /dev/null +++ b/packages/x-charts/src/BarChart/useBarChartProps.ts @@ -0,0 +1,159 @@ +import useId from '@mui/utils/useId'; +import type { BarChartProps } from './BarChart'; +import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants'; + +/** + * A helper function that extracts BarChartProps from the input props + * and returns an object with props for the children components of BarChart. + * + * @param props The input props for BarChart + * @returns An object with props for the children components of BarChart + */ +export const useBarChartProps = (props: BarChartProps) => { + const { + xAxis, + yAxis, + series, + width, + height, + margin, + colors, + dataset, + sx, + tooltip, + onAxisClick, + axisHighlight, + legend, + grid, + topAxis, + leftAxis, + rightAxis, + bottomAxis, + children, + slots, + slotProps, + skipAnimation, + loading, + layout, + onItemClick, + highlightedItem, + onHighlightChange, + borderRadius, + barLabel, + } = props; + + const id = useId(); + const clipPathId = `${id}-clip-path`; + + const hasHorizontalSeries = + layout === 'horizontal' || + (layout === undefined && series.some((item) => item.layout === 'horizontal')); + + const defaultAxisConfig = { + scaleType: 'band', + data: Array.from( + { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) }, + (_, index) => index, + ), + } as const; + + const chartContainerProps = { + series: series.map((s) => ({ + type: 'bar' as const, + ...s, + layout: hasHorizontalSeries ? ('horizontal' as const) : ('vertical' as const), + })), + width, + height, + margin, + colors, + dataset, + xAxis: + xAxis ?? + (hasHorizontalSeries ? undefined : [{ id: DEFAULT_X_AXIS_KEY, ...defaultAxisConfig }]), + yAxis: + yAxis ?? + (hasHorizontalSeries ? [{ id: DEFAULT_Y_AXIS_KEY, ...defaultAxisConfig }] : undefined), + sx, + highlightedItem, + onHighlightChange, + disableAxisListener: + tooltip?.trigger !== 'axis' && + axisHighlight?.x === 'none' && + axisHighlight?.y === 'none' && + !onAxisClick, + }; + + const barPlotProps = { + onItemClick, + slots, + slotProps, + skipAnimation, + borderRadius, + barLabel, + }; + + const axisClickHandlerProps = { + onAxisClick, + }; + + const gridProps = { + vertical: grid?.vertical, + horizontal: grid?.horizontal, + }; + + const clipPathGroupProps = { + clipPath: `url(#${clipPathId})`, + }; + + const clipPathProps = { + id: clipPathId, + }; + + const overlayProps = { + slots, + slotProps, + loading, + }; + + const chartsAxisProps = { + topAxis, + leftAxis, + rightAxis, + bottomAxis, + slots, + slotProps, + }; + + const axisHighlightProps = { + ...(hasHorizontalSeries ? ({ y: 'band' } as const) : ({ x: 'band' } as const)), + ...axisHighlight, + }; + + const legendProps = { + ...legend, + slots, + slotProps, + }; + + const tooltipProps = { + ...tooltip, + slots, + slotProps, + }; + + return { + chartContainerProps, + barPlotProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + legendProps, + tooltipProps, + children, + }; +}; diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 33015b56d69ec..3a865af2044c9 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import useId from '@mui/utils/useId'; import PropTypes from 'prop-types'; import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot'; import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot'; @@ -11,7 +10,6 @@ import { MarkPlot, MarkPlotProps, MarkPlotSlotProps, MarkPlotSlots } from './Mar import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis/ChartsAxis'; import { LineSeriesType } from '../models/seriesType/line'; import { MakeOptional } from '../models/helpers'; -import { DEFAULT_X_AXIS_KEY } from '../constants'; import { ChartsTooltip, ChartsTooltipProps, @@ -43,6 +41,7 @@ import { ChartsOverlaySlotProps, ChartsOverlaySlots, } from '../ChartsOverlay'; +import { useLineChartProps } from './useLineChartProps'; export interface LineChartSlots extends ChartsAxisSlots, @@ -138,112 +137,39 @@ export interface LineChartProps */ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref) { const { - xAxis, - yAxis, - series, - width, - height, - margin, - colors, - dataset, - sx, - tooltip, - onAxisClick, - onAreaClick, - onLineClick, - onMarkClick, - axisHighlight = { x: 'line' }, - disableLineItemHighlight, - legend, - grid, - topAxis, - leftAxis, - rightAxis, - bottomAxis, + chartContainerProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + areaPlotProps, + linePlotProps, + markPlotProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + lineHighlightPlotProps, + legendProps, + tooltipProps, children, - slots, - slotProps, - skipAnimation, - loading, - highlightedItem, - onHighlightChange, - } = props; - - const id = useId(); - const clipPathId = `${id}-clip-path`; + } = useLineChartProps(props); return ( - ({ - disableHighlight: !!disableLineItemHighlight, - type: 'line', - ...s, - }))} - width={width} - height={height} - margin={margin} - xAxis={ - xAxis ?? [ - { - id: DEFAULT_X_AXIS_KEY, - scaleType: 'point', - data: Array.from( - { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) }, - (_, index) => index, - ), - }, - ] - } - yAxis={yAxis} - colors={colors} - dataset={dataset} - sx={sx} - disableAxisListener={ - tooltip?.trigger !== 'axis' && - axisHighlight?.x === 'none' && - axisHighlight?.y === 'none' && - !onAxisClick - } - highlightedItem={highlightedItem} - onHighlightChange={onHighlightChange} - > - {onAxisClick && } - {grid && } - - - - + + {props.onAxisClick && } + {props.grid && } + + + + - - - - - - {!loading && } - + + + + + + {!props.loading && } + {children} ); diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts new file mode 100644 index 0000000000000..226061be2a17a --- /dev/null +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -0,0 +1,172 @@ +import useId from '@mui/utils/useId'; +import { DEFAULT_X_AXIS_KEY } from '../constants'; +import type { LineChartProps } from './LineChart'; + +/** + * A helper function that extracts LineChartProps from the input props + * and returns an object with props for the children components of LineChart. + * + * @param props The input props for LineChart + * @returns An object with props for the children components of LineChart + */ +export const useLineChartProps = (props: LineChartProps) => { + const { + xAxis, + yAxis, + series, + width, + height, + margin, + colors, + dataset, + sx, + tooltip, + onAxisClick, + onAreaClick, + onLineClick, + onMarkClick, + axisHighlight, + disableLineItemHighlight, + legend, + grid, + topAxis, + leftAxis, + rightAxis, + bottomAxis, + children, + slots, + slotProps, + skipAnimation, + loading, + highlightedItem, + onHighlightChange, + } = props; + + const id = useId(); + const clipPathId = `${id}-clip-path`; + + const chartContainerProps = { + series: series.map((s) => ({ + disableHighlight: !!disableLineItemHighlight, + type: 'line' as const, + ...s, + })), + width, + height, + margin, + colors, + dataset, + xAxis: xAxis ?? [ + { + id: DEFAULT_X_AXIS_KEY, + scaleType: 'point', + data: Array.from( + { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) }, + (_, index) => index, + ), + }, + ], + yAxis, + sx, + highlightedItem, + onHighlightChange, + disableAxisListener: + tooltip?.trigger !== 'axis' && + axisHighlight?.x === 'none' && + axisHighlight?.y === 'none' && + !onAxisClick, + }; + + const axisClickHandlerProps = { + onAxisClick, + }; + + const gridProps = { + vertical: grid?.vertical, + horizontal: grid?.horizontal, + }; + + const clipPathGroupProps = { + clipPath: `url(#${clipPathId})`, + }; + + const clipPathProps = { + id: clipPathId, + }; + + const areaPlotProps = { + slots, + slotProps, + onAreaClick, + skipAnimation, + }; + + const linePlotProps = { + slots, + slotProps, + onLineClick, + skipAnimation, + }; + + const markPlotProps = { + slots, + slotProps, + onMarkClick, + skipAnimation, + }; + + const overlayProps = { + slots, + slotProps, + loading, + }; + + const chartsAxisProps = { + topAxis, + leftAxis, + rightAxis, + bottomAxis, + slots, + slotProps, + }; + + const axisHighlightProps = { + x: 'line' as const, + ...axisHighlight, + }; + + const lineHighlightPlotProps = { + slots, + slotProps, + }; + + const legendProps = { + ...legend, + slots, + slotProps, + }; + + const tooltipProps = { + ...tooltip, + slots, + slotProps, + }; + + return { + chartContainerProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + areaPlotProps, + linePlotProps, + markPlotProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + lineHighlightPlotProps, + legendProps, + tooltipProps, + children, + }; +}; diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 7afb59255eb3d..f86111b664085 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -39,6 +39,7 @@ import { } from '../ChartsVoronoiHandler/ChartsVoronoiHandler'; import { ChartsGrid, ChartsGridProps } from '../ChartsGrid'; import { ZAxisContextProvider, ZAxisContextProviderProps } from '../context/ZAxisContextProvider'; +import { useScatterChartProps } from './useScatterChartProps'; export interface ScatterChartSlots extends ChartsAxisSlots, @@ -119,75 +120,29 @@ export interface ScatterChartProps */ const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartProps, ref) { const { - xAxis, - yAxis, - zAxis, - series, - tooltip, - axisHighlight, - voronoiMaxRadius, - disableVoronoi, - legend, - width, - height, - margin, - colors, - sx, - grid, - topAxis, - leftAxis, - rightAxis, - bottomAxis, - onItemClick, + chartContainerProps, + zAxisProps, + voronoiHandlerProps, + chartsAxisProps, + gridProps, + scatterPlotProps, + overlayProps, + legendProps, + axisHighlightProps, + tooltipProps, children, - slots, - slotProps, - loading, - highlightedItem, - onHighlightChange, - } = props; + } = useScatterChartProps(props); return ( - ({ type: 'scatter', ...s }))} - width={width} - height={height} - margin={margin} - colors={colors} - xAxis={xAxis} - yAxis={yAxis} - sx={sx} - highlightedItem={highlightedItem} - onHighlightChange={onHighlightChange} - > - - {!disableVoronoi && ( - - )} - - - {grid && } - - - - - {!loading && } + + + {!props.disableVoronoi && } + + {props.grid && } + + + + + {!props.loading && } {children} diff --git a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts new file mode 100644 index 0000000000000..9f57a8c01c74f --- /dev/null +++ b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts @@ -0,0 +1,119 @@ +import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler'; +import type { ScatterChartProps } from './ScatterChart'; +import type { ScatterPlotProps } from './ScatterPlot'; + +/** + * A helper function that extracts ScatterChartProps from the input props + * and returns an object with props for the children components of ScatterChart. + * + * @param props The input props for ScatterChart + * @returns An object with props for the children components of ScatterChart + */ +export const useScatterChartProps = (props: ScatterChartProps) => { + const { + xAxis, + yAxis, + zAxis, + series, + tooltip, + axisHighlight, + voronoiMaxRadius, + disableVoronoi, + legend, + width, + height, + margin, + colors, + sx, + grid, + topAxis, + leftAxis, + rightAxis, + bottomAxis, + onItemClick, + children, + slots, + slotProps, + loading, + highlightedItem, + onHighlightChange, + } = props; + + const chartContainerProps = { + series: series.map((s) => ({ type: 'scatter' as const, ...s })), + width, + height, + margin, + colors, + xAxis, + yAxis, + sx, + highlightedItem, + onHighlightChange, + }; + const zAxisProps = { + zAxis, + }; + const voronoiHandlerProps = { + voronoiMaxRadius, + onItemClick: onItemClick as ChartsVoronoiHandlerProps['onItemClick'], + }; + const chartsAxisProps = { + topAxis, + leftAxis, + rightAxis, + bottomAxis, + slots, + slotProps, + }; + + const gridProps = { + vertical: grid?.vertical, + horizontal: grid?.horizontal, + }; + + const scatterPlotProps = { + onItemClick: disableVoronoi ? (onItemClick as ScatterPlotProps['onItemClick']) : undefined, + slots, + slotProps, + }; + + const overlayProps = { + loading, + slots, + slotProps, + }; + + const legendProps = { + ...legend, + slots, + slotProps, + }; + + const axisHighlightProps = { + y: 'none' as const, + x: 'none' as const, + ...axisHighlight, + }; + + const tooltipProps = { + trigger: 'item' as const, + ...tooltip, + slots, + slotProps, + }; + + return { + chartContainerProps, + zAxisProps, + voronoiHandlerProps, + chartsAxisProps, + gridProps, + scatterPlotProps, + overlayProps, + legendProps, + axisHighlightProps, + tooltipProps, + children, + }; +}; diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index 0b1e7a623bad5..ba3ecc5de8a86 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -8,6 +8,9 @@ export * from '../ResponsiveChartContainer/ResizableContainer'; export { useReducedMotion } from '../hooks/useReducedMotion'; export { useSeries } from '../hooks/useSeries'; export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks'; +export { useScatterChartProps } from '../ScatterChart/useScatterChartProps'; +export { useLineChartProps } from '../LineChart/useLineChartProps'; +export { useBarChartProps } from '../BarChart/useBarChartProps'; // utils export * from './defaultizeValueFormatter';