From 483f290b4ba3f29465e8a0b23fac372f823c63a3 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Wed, 19 Jun 2024 14:29:21 +0200 Subject: [PATCH 01/11] Export ScatterChartPro --- .../src/ScatterChartPro/ScatterChartPro.tsx | 464 ++++++++++++++++++ .../x-charts-pro/src/ScatterChartPro/index.ts | 1 + packages/x-charts-pro/src/index.ts | 1 + 3 files changed, 466 insertions(+) create mode 100644 packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx create mode 100644 packages/x-charts-pro/src/ScatterChartPro/index.ts 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..e67410618f7c6 --- /dev/null +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -0,0 +1,464 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; +import { ScatterChartProps, ScatterPlot, ScatterPlotProps } from '@mui/x-charts/ScatterChart'; +import { ZAxisContextProvider } from '@mui/x-charts/context'; +import { + ChartsVoronoiHandler, + ChartsVoronoiHandlerProps, +} 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 { 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 { + 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; + 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 && } + {children} + + + ); +}); + +ScatterChartPro.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "pnpm proptypes" | + // ---------------------------------------------------------------------- + /** + * The configuration of axes highlight. + * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details. + * @default { x: 'none', y: 'none' } + */ + axisHighlight: PropTypes.shape({ + x: PropTypes.oneOf(['band', 'line', 'none']), + y: PropTypes.oneOf(['band', 'line', 'none']), + }), + /** + * Indicate which axis to display the bottom of the charts. + * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. + * @default xAxisIds[0] The id of the first provided axis + */ + bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + /** + * Color palette used to colorize multiple series. + * @default blueberryTwilightPalette + */ + colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), + /** + * An array of objects that can be used to populate series and axes data using their `dataKey` property. + */ + dataset: PropTypes.arrayOf(PropTypes.object), + desc: PropTypes.string, + /** + * If `true`, the charts will not listen to the mouse move event. + * It might break interactive features, but will improve performance. + * @default false + */ + disableAxisListener: PropTypes.bool, + /** + * If true, the interaction will not use the Voronoi cell and fall back to hover events. + * @default false + */ + disableVoronoi: PropTypes.bool, + /** + * Option to display a cartesian grid in the background. + */ + grid: PropTypes.shape({ + horizontal: PropTypes.bool, + vertical: PropTypes.bool, + }), + /** + * The height of the chart in px. If not defined, it takes the height of the parent element. + */ + height: PropTypes.number, + /** + * The item currently highlighted. Turns highlighting into a controlled prop. + */ + highlightedItem: PropTypes.shape({ + dataIndex: PropTypes.number, + seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + }), + /** + * Indicate which axis to display the left of the charts. + * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. + * @default yAxisIds[0] The id of the first provided axis + */ + leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + /** + * @deprecated Consider using `slotProps.legend` instead. + */ + legend: PropTypes.shape({ + classes: PropTypes.object, + direction: PropTypes.oneOf(['column', 'row']), + hidden: PropTypes.bool, + position: PropTypes.shape({ + horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, + vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, + }), + slotProps: PropTypes.object, + slots: PropTypes.object, + }), + /** + * If `true`, a loading overlay is displayed. + * @default false + */ + loading: PropTypes.bool, + /** + * The margin between the SVG and the drawing area. + * It's used for leaving some space for extra information such as the x- and y-axis or legend. + * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`. + * @default object Depends on the charts type. + */ + margin: PropTypes.shape({ + bottom: PropTypes.number, + left: PropTypes.number, + right: PropTypes.number, + top: PropTypes.number, + }), + /** + * The callback fired when the highlighted item changes. + * + * @param {HighlightItemData | null} highlightedItem The newly highlighted item. + */ + onHighlightChange: PropTypes.func, + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event The mouse event recorded on the `` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`. + * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. + */ + onItemClick: PropTypes.func, + /** + * Indicate which axis to display the right of the charts. + * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. + * @default null + */ + rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + /** + * The series to display in the scatter chart. + * An array of [[ScatterSeriesType]] objects. + */ + series: PropTypes.arrayOf(PropTypes.object).isRequired, + /** + * The props used for each component slot. + * @default {} + */ + slotProps: PropTypes.object, + /** + * Overridable component slots. + * @default {} + */ + slots: PropTypes.object, + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + title: PropTypes.string, + /** + * The configuration of the tooltip. + * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details. + * @default { trigger: 'item' } + */ + tooltip: PropTypes.shape({ + axisContent: PropTypes.elementType, + classes: PropTypes.object, + itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, + trigger: PropTypes.oneOf(['axis', 'item', 'none']), + }), + /** + * Indicate which axis to display the top of the charts. + * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. + * @default null + */ + topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + viewBox: PropTypes.shape({ + height: PropTypes.number, + width: PropTypes.number, + x: PropTypes.number, + y: PropTypes.number, + }), + /** + * Defines the maximal distance between a scatter point and the pointer that triggers the interaction. + * If `undefined`, the radius is assumed to be infinite. + */ + voronoiMaxRadius: PropTypes.number, + /** + * The width of the chart in px. If not defined, it takes the width of the parent element. + */ + width: PropTypes.number, + /** + * The configuration of the x-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + xAxis: PropTypes.arrayOf( + PropTypes.shape({ + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + classes: PropTypes.object, + colorMap: PropTypes.oneOfType([ + PropTypes.shape({ + color: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string.isRequired), + PropTypes.func, + ]).isRequired, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + type: PropTypes.oneOf(['continuous']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + thresholds: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, + ).isRequired, + type: PropTypes.oneOf(['piecewise']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + type: PropTypes.oneOf(['ordinal']).isRequired, + unknownColor: PropTypes.string, + values: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) + .isRequired, + ), + }), + ]), + data: PropTypes.array, + dataKey: PropTypes.string, + disableLine: PropTypes.bool, + disableTicks: PropTypes.bool, + fill: PropTypes.string, + hideTooltip: PropTypes.bool, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + label: PropTypes.string, + labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + position: PropTypes.oneOf(['bottom', 'top']), + reverse: PropTypes.bool, + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), + slotProps: PropTypes.object, + slots: PropTypes.object, + stroke: PropTypes.string, + tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), + tickLabelStyle: PropTypes.object, + tickMaxStep: PropTypes.number, + tickMinStep: PropTypes.number, + tickNumber: PropTypes.number, + tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), + tickSize: PropTypes.number, + valueFormatter: PropTypes.func, + }), + ), + /** + * The configuration of the y-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + yAxis: PropTypes.arrayOf( + PropTypes.shape({ + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + classes: PropTypes.object, + colorMap: PropTypes.oneOfType([ + PropTypes.shape({ + color: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string.isRequired), + PropTypes.func, + ]).isRequired, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + type: PropTypes.oneOf(['continuous']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + thresholds: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, + ).isRequired, + type: PropTypes.oneOf(['piecewise']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + type: PropTypes.oneOf(['ordinal']).isRequired, + unknownColor: PropTypes.string, + values: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) + .isRequired, + ), + }), + ]), + data: PropTypes.array, + dataKey: PropTypes.string, + disableLine: PropTypes.bool, + disableTicks: PropTypes.bool, + fill: PropTypes.string, + hideTooltip: PropTypes.bool, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + label: PropTypes.string, + labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + position: PropTypes.oneOf(['left', 'right']), + reverse: PropTypes.bool, + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), + slotProps: PropTypes.object, + slots: PropTypes.object, + stroke: PropTypes.string, + tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), + tickLabelStyle: PropTypes.object, + tickMaxStep: PropTypes.number, + tickMinStep: PropTypes.number, + tickNumber: PropTypes.number, + tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), + tickSize: PropTypes.number, + valueFormatter: PropTypes.func, + }), + ), + /** + * The configuration of the z-axes. + */ + zAxis: PropTypes.arrayOf( + PropTypes.shape({ + colorMap: PropTypes.oneOfType([ + PropTypes.shape({ + color: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string.isRequired), + PropTypes.func, + ]).isRequired, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + type: PropTypes.oneOf(['continuous']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + thresholds: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, + ).isRequired, + type: PropTypes.oneOf(['piecewise']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + type: PropTypes.oneOf(['ordinal']).isRequired, + unknownColor: PropTypes.string, + values: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) + .isRequired, + ), + }), + ]), + data: PropTypes.array, + dataKey: PropTypes.string, + id: PropTypes.string, + }), + ), +} as any; + +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 6aa3762c874ed..7d283c353edc8 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -24,3 +24,4 @@ export * from '@mui/x-charts/Gauge'; export * from '@mui/x-charts/ChartsSurface'; export * from './ResponsiveChartContainerPro'; +export * from './ScatterChartPro'; From af0cb89da37054cfaa46f897d5ebedcf944ff701 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Wed, 19 Jun 2024 14:33:52 +0200 Subject: [PATCH 02/11] Export BarChartPro --- .../src/BarChartPro/BarChartPro.tsx | 478 ++++++++++++++++++ .../x-charts-pro/src/BarChartPro/index.ts | 1 + packages/x-charts-pro/src/index.ts | 1 + 3 files changed, 480 insertions(+) create mode 100644 packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx create mode 100644 packages/x-charts-pro/src/BarChartPro/index.ts 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..9bc0d4db489c5 --- /dev/null +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -0,0 +1,478 @@ +import * as React from 'react'; +import useId from '@mui/utils/useId'; +import PropTypes from 'prop-types'; +import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart'; +import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants'; +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 { 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 { + xAxis, + yAxis, + series, + width, + height, + margin, + colors, + dataset, + sx, + layout, + tooltip, + axisHighlight, + legend, + grid, + topAxis, + leftAxis, + rightAxis, + bottomAxis, + skipAnimation, + borderRadius, + onItemClick, + onAxisClick, + children, + slots, + slotProps, + loading, + barLabel, + highlightedItem, + onHighlightChange, + } = 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 && } + + + + + + + + {!loading && } + + {children} + + ); +}); + +BarChartPro.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "pnpm proptypes" | + // ---------------------------------------------------------------------- + /** + * The configuration of axes highlight. + * Default is set to 'band' in the bar direction. + * Depends on `layout` prop. + * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details. + */ + axisHighlight: PropTypes.shape({ + x: PropTypes.oneOf(['band', 'line', 'none']), + y: PropTypes.oneOf(['band', 'line', 'none']), + }), + /** + * If provided, the function will be used to format the label of the bar. + * It can be set to 'value' to display the current value. + * @param {BarItem} item The item to format. + * @param {BarLabelContext} context data about the bar. + * @returns {string} The formatted label. + */ + barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]), + /** + * Defines the border radius of the bar element. + */ + borderRadius: PropTypes.number, + /** + * Indicate which axis to display the bottom of the charts. + * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. + * @default xAxisIds[0] The id of the first provided axis + */ + bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + /** + * Color palette used to colorize multiple series. + * @default blueberryTwilightPalette + */ + colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), + /** + * An array of objects that can be used to populate series and axes data using their `dataKey` property. + */ + dataset: PropTypes.arrayOf(PropTypes.object), + desc: PropTypes.string, + /** + * If `true`, the charts will not listen to the mouse move event. + * It might break interactive features, but will improve performance. + * @default false + */ + disableAxisListener: PropTypes.bool, + /** + * Option to display a cartesian grid in the background. + */ + grid: PropTypes.shape({ + horizontal: PropTypes.bool, + vertical: PropTypes.bool, + }), + /** + * The height of the chart in px. If not defined, it takes the height of the parent element. + */ + height: PropTypes.number, + /** + * The item currently highlighted. Turns highlighting into a controlled prop. + */ + highlightedItem: PropTypes.shape({ + dataIndex: PropTypes.number, + seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + }), + /** + * The direction of the bar elements. + * @default 'vertical' + */ + layout: PropTypes.oneOf(['horizontal', 'vertical']), + /** + * Indicate which axis to display the left of the charts. + * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. + * @default yAxisIds[0] The id of the first provided axis + */ + leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + /** + * @deprecated Consider using `slotProps.legend` instead. + */ + legend: PropTypes.shape({ + classes: PropTypes.object, + direction: PropTypes.oneOf(['column', 'row']), + hidden: PropTypes.bool, + position: PropTypes.shape({ + horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, + vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, + }), + slotProps: PropTypes.object, + slots: PropTypes.object, + }), + /** + * If `true`, a loading overlay is displayed. + * @default false + */ + loading: PropTypes.bool, + /** + * The margin between the SVG and the drawing area. + * It's used for leaving some space for extra information such as the x- and y-axis or legend. + * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`. + * @default object Depends on the charts type. + */ + margin: PropTypes.shape({ + bottom: PropTypes.number, + left: PropTypes.number, + right: PropTypes.number, + top: PropTypes.number, + }), + /** + * The function called for onClick events. + * The second argument contains information about all line/bar elements at the current mouse position. + * @param {MouseEvent} event The mouse event recorded on the `` element. + * @param {null | AxisData} data The data about the clicked axis and items associated with it. + */ + onAxisClick: PropTypes.func, + /** + * The callback fired when the highlighted item changes. + * + * @param {HighlightItemData | null} highlightedItem The newly highlighted item. + */ + onHighlightChange: PropTypes.func, + /** + * Callback fired when a bar item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {BarItemIdentifier} barItemIdentifier The bar item identifier. + */ + onItemClick: PropTypes.func, + /** + * Indicate which axis to display the right of the charts. + * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. + * @default null + */ + rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + /** + * The series to display in the bar chart. + * An array of [[BarSeriesType]] objects. + */ + series: PropTypes.arrayOf(PropTypes.object).isRequired, + /** + * If `true`, animations are skipped. + * @default false + */ + skipAnimation: PropTypes.bool, + /** + * The props used for each component slot. + * @default {} + */ + slotProps: PropTypes.object, + /** + * Overridable component slots. + * @default {} + */ + slots: PropTypes.object, + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + title: PropTypes.string, + /** + * The configuration of the tooltip. + * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details. + */ + tooltip: PropTypes.shape({ + axisContent: PropTypes.elementType, + classes: PropTypes.object, + itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, + trigger: PropTypes.oneOf(['axis', 'item', 'none']), + }), + /** + * Indicate which axis to display the top of the charts. + * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. + * @default null + */ + topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + viewBox: PropTypes.shape({ + height: PropTypes.number, + width: PropTypes.number, + x: PropTypes.number, + y: PropTypes.number, + }), + /** + * The width of the chart in px. If not defined, it takes the width of the parent element. + */ + width: PropTypes.number, + /** + * The configuration of the x-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + xAxis: PropTypes.arrayOf( + PropTypes.shape({ + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + classes: PropTypes.object, + colorMap: PropTypes.oneOfType([ + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + type: PropTypes.oneOf(['ordinal']).isRequired, + unknownColor: PropTypes.string, + values: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) + .isRequired, + ), + }), + PropTypes.shape({ + color: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string.isRequired), + PropTypes.func, + ]).isRequired, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + type: PropTypes.oneOf(['continuous']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + thresholds: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, + ).isRequired, + type: PropTypes.oneOf(['piecewise']).isRequired, + }), + ]), + data: PropTypes.array, + dataKey: PropTypes.string, + disableLine: PropTypes.bool, + disableTicks: PropTypes.bool, + fill: PropTypes.string, + hideTooltip: PropTypes.bool, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + label: PropTypes.string, + labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + position: PropTypes.oneOf(['bottom', 'top']), + reverse: PropTypes.bool, + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), + slotProps: PropTypes.object, + slots: PropTypes.object, + stroke: PropTypes.string, + tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), + tickLabelStyle: PropTypes.object, + tickMaxStep: PropTypes.number, + tickMinStep: PropTypes.number, + tickNumber: PropTypes.number, + tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), + tickSize: PropTypes.number, + valueFormatter: PropTypes.func, + }), + ), + /** + * The configuration of the y-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + yAxis: PropTypes.arrayOf( + PropTypes.shape({ + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + classes: PropTypes.object, + colorMap: PropTypes.oneOfType([ + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + type: PropTypes.oneOf(['ordinal']).isRequired, + unknownColor: PropTypes.string, + values: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) + .isRequired, + ), + }), + PropTypes.shape({ + color: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string.isRequired), + PropTypes.func, + ]).isRequired, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + type: PropTypes.oneOf(['continuous']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + thresholds: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, + ).isRequired, + type: PropTypes.oneOf(['piecewise']).isRequired, + }), + ]), + data: PropTypes.array, + dataKey: PropTypes.string, + disableLine: PropTypes.bool, + disableTicks: PropTypes.bool, + fill: PropTypes.string, + hideTooltip: PropTypes.bool, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + label: PropTypes.string, + labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + position: PropTypes.oneOf(['left', 'right']), + reverse: PropTypes.bool, + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), + slotProps: PropTypes.object, + slots: PropTypes.object, + stroke: PropTypes.string, + tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), + tickLabelStyle: PropTypes.object, + tickMaxStep: PropTypes.number, + tickMinStep: PropTypes.number, + tickNumber: PropTypes.number, + tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), + tickSize: PropTypes.number, + valueFormatter: PropTypes.func, + }), + ), +} as any; + +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/index.ts b/packages/x-charts-pro/src/index.ts index 7d283c353edc8..58631981e89a2 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -25,3 +25,4 @@ export * from '@mui/x-charts/ChartsSurface'; export * from './ResponsiveChartContainerPro'; export * from './ScatterChartPro'; +export * from './BarChartPro'; From dd5b00b9bc4bbee9a8ee5cb886b6fab6e8e66116 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Wed, 19 Jun 2024 14:38:57 +0200 Subject: [PATCH 03/11] Export LineChartPro --- .../src/LineChartPro/LineChartPro.tsx | 476 ++++++++++++++++++ .../x-charts-pro/src/LineChartPro/index.ts | 1 + 2 files changed, 477 insertions(+) create mode 100644 packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx create mode 100644 packages/x-charts-pro/src/LineChartPro/index.ts 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..60c07b65044d0 --- /dev/null +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -0,0 +1,476 @@ +import * as React from 'react'; +import useId from '@mui/utils/useId'; +import PropTypes from 'prop-types'; +import { + AreaPlot, + LineChartProps, + LineHighlightPlot, + LinePlot, + MarkPlot, +} from '@mui/x-charts/LineChart'; +import { DEFAULT_X_AXIS_KEY } from '@mui/x-charts/constants'; +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 { 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 { + xAxis, + yAxis, + series, + width, + height, + margin, + colors, + dataset, + sx, + tooltip, + onAxisClick, + onAreaClick, + onLineClick, + onMarkClick, + axisHighlight = { x: 'line' }, + disableLineItemHighlight, + legend, + grid, + topAxis, + leftAxis, + rightAxis, + bottomAxis, + children, + slots, + slotProps, + skipAnimation, + loading, + highlightedItem, + onHighlightChange, + } = props; + + const id = useId(); + const clipPathId = `${id}-clip-path`; + + 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 && } + + + + + + + + + + + {!loading && } + + {children} + + ); +}); + +LineChartPro.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "pnpm proptypes" | + // ---------------------------------------------------------------------- + /** + * The configuration of axes highlight. + * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details. + * @default { x: 'line' } + */ + axisHighlight: PropTypes.shape({ + x: PropTypes.oneOf(['band', 'line', 'none']), + y: PropTypes.oneOf(['band', 'line', 'none']), + }), + /** + * Indicate which axis to display the bottom of the charts. + * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. + * @default xAxisIds[0] The id of the first provided axis + */ + bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + /** + * Color palette used to colorize multiple series. + * @default blueberryTwilightPalette + */ + colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), + /** + * An array of objects that can be used to populate series and axes data using their `dataKey` property. + */ + dataset: PropTypes.arrayOf(PropTypes.object), + desc: PropTypes.string, + /** + * If `true`, the charts will not listen to the mouse move event. + * It might break interactive features, but will improve performance. + * @default false + */ + disableAxisListener: PropTypes.bool, + /** + * If `true`, render the line highlight item. + */ + disableLineItemHighlight: PropTypes.bool, + /** + * Option to display a cartesian grid in the background. + */ + grid: PropTypes.shape({ + horizontal: PropTypes.bool, + vertical: PropTypes.bool, + }), + /** + * The height of the chart in px. If not defined, it takes the height of the parent element. + */ + height: PropTypes.number, + /** + * The item currently highlighted. Turns highlighting into a controlled prop. + */ + highlightedItem: PropTypes.shape({ + dataIndex: PropTypes.number, + seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + }), + /** + * Indicate which axis to display the left of the charts. + * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. + * @default yAxisIds[0] The id of the first provided axis + */ + leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + /** + * @deprecated Consider using `slotProps.legend` instead. + */ + legend: PropTypes.shape({ + classes: PropTypes.object, + direction: PropTypes.oneOf(['column', 'row']), + hidden: PropTypes.bool, + position: PropTypes.shape({ + horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, + vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, + }), + slotProps: PropTypes.object, + slots: PropTypes.object, + }), + /** + * If `true`, a loading overlay is displayed. + * @default false + */ + loading: PropTypes.bool, + /** + * The margin between the SVG and the drawing area. + * It's used for leaving some space for extra information such as the x- and y-axis or legend. + * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`. + * @default object Depends on the charts type. + */ + margin: PropTypes.shape({ + bottom: PropTypes.number, + left: PropTypes.number, + right: PropTypes.number, + top: PropTypes.number, + }), + /** + * Callback fired when an area element is clicked. + */ + onAreaClick: PropTypes.func, + /** + * The function called for onClick events. + * The second argument contains information about all line/bar elements at the current mouse position. + * @param {MouseEvent} event The mouse event recorded on the `` element. + * @param {null | AxisData} data The data about the clicked axis and items associated with it. + */ + onAxisClick: PropTypes.func, + /** + * The callback fired when the highlighted item changes. + * + * @param {HighlightItemData | null} highlightedItem The newly highlighted item. + */ + onHighlightChange: PropTypes.func, + /** + * Callback fired when a line element is clicked. + */ + onLineClick: PropTypes.func, + /** + * Callback fired when a mark element is clicked. + */ + onMarkClick: PropTypes.func, + /** + * Indicate which axis to display the right of the charts. + * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. + * @default null + */ + rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + /** + * The series to display in the line chart. + * An array of [[LineSeriesType]] objects. + */ + series: PropTypes.arrayOf(PropTypes.object).isRequired, + /** + * If `true`, animations are skipped. + * @default false + */ + skipAnimation: PropTypes.bool, + /** + * The props used for each component slot. + * @default {} + */ + slotProps: PropTypes.object, + /** + * Overridable component slots. + * @default {} + */ + slots: PropTypes.object, + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + title: PropTypes.string, + /** + * The configuration of the tooltip. + * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details. + * @default { trigger: 'item' } + */ + tooltip: PropTypes.shape({ + axisContent: PropTypes.elementType, + classes: PropTypes.object, + itemContent: PropTypes.elementType, + slotProps: PropTypes.object, + slots: PropTypes.object, + trigger: PropTypes.oneOf(['axis', 'item', 'none']), + }), + /** + * Indicate which axis to display the top of the charts. + * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. + * @default null + */ + topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), + viewBox: PropTypes.shape({ + height: PropTypes.number, + width: PropTypes.number, + x: PropTypes.number, + y: PropTypes.number, + }), + /** + * The width of the chart in px. If not defined, it takes the width of the parent element. + */ + width: PropTypes.number, + /** + * The configuration of the x-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + xAxis: PropTypes.arrayOf( + PropTypes.shape({ + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + classes: PropTypes.object, + colorMap: PropTypes.oneOfType([ + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + type: PropTypes.oneOf(['ordinal']).isRequired, + unknownColor: PropTypes.string, + values: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) + .isRequired, + ), + }), + PropTypes.shape({ + color: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string.isRequired), + PropTypes.func, + ]).isRequired, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + type: PropTypes.oneOf(['continuous']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + thresholds: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, + ).isRequired, + type: PropTypes.oneOf(['piecewise']).isRequired, + }), + ]), + data: PropTypes.array, + dataKey: PropTypes.string, + disableLine: PropTypes.bool, + disableTicks: PropTypes.bool, + fill: PropTypes.string, + hideTooltip: PropTypes.bool, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + label: PropTypes.string, + labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + position: PropTypes.oneOf(['bottom', 'top']), + reverse: PropTypes.bool, + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), + slotProps: PropTypes.object, + slots: PropTypes.object, + stroke: PropTypes.string, + tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), + tickLabelStyle: PropTypes.object, + tickMaxStep: PropTypes.number, + tickMinStep: PropTypes.number, + tickNumber: PropTypes.number, + tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), + tickSize: PropTypes.number, + valueFormatter: PropTypes.func, + }), + ), + /** + * The configuration of the y-axes. + * If not provided, a default axis config is used. + * An array of [[AxisConfig]] objects. + */ + yAxis: PropTypes.arrayOf( + PropTypes.shape({ + axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + classes: PropTypes.object, + colorMap: PropTypes.oneOfType([ + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + type: PropTypes.oneOf(['ordinal']).isRequired, + unknownColor: PropTypes.string, + values: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) + .isRequired, + ), + }), + PropTypes.shape({ + color: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string.isRequired), + PropTypes.func, + ]).isRequired, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + type: PropTypes.oneOf(['continuous']).isRequired, + }), + PropTypes.shape({ + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + thresholds: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, + ).isRequired, + type: PropTypes.oneOf(['piecewise']).isRequired, + }), + ]), + data: PropTypes.array, + dataKey: PropTypes.string, + disableLine: PropTypes.bool, + disableTicks: PropTypes.bool, + fill: PropTypes.string, + hideTooltip: PropTypes.bool, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + label: PropTypes.string, + labelFontSize: PropTypes.number, + labelStyle: PropTypes.object, + max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), + position: PropTypes.oneOf(['left', 'right']), + reverse: PropTypes.bool, + scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), + slotProps: PropTypes.object, + slots: PropTypes.object, + stroke: PropTypes.string, + tickFontSize: PropTypes.number, + tickInterval: PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.array, + PropTypes.func, + ]), + tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), + tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), + tickLabelStyle: PropTypes.object, + tickMaxStep: PropTypes.number, + tickMinStep: PropTypes.number, + tickNumber: PropTypes.number, + tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), + tickSize: PropTypes.number, + valueFormatter: PropTypes.func, + }), + ), +} as any; + +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'; From cee58beb3e8b9d3bd6e394e8e7af23155d6d5aed Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Wed, 19 Jun 2024 14:52:07 +0200 Subject: [PATCH 04/11] Correctly export linechartpro from index --- packages/x-charts-pro/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-charts-pro/src/index.ts b/packages/x-charts-pro/src/index.ts index 58631981e89a2..a1eb9365dcfe9 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -26,3 +26,4 @@ export * from '@mui/x-charts/ChartsSurface'; export * from './ResponsiveChartContainerPro'; export * from './ScatterChartPro'; export * from './BarChartPro'; +export * from './LineChartPro'; From dcc170e95a2a26699d59dfb4769bc1d7ccbacf22 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 20 Jun 2024 12:30:59 +0200 Subject: [PATCH 05/11] add useScatterChartProps --- .../src/ScatterChartPro/ScatterChartPro.tsx | 96 ++++---------- .../src/ScatterChart/ScatterChart.tsx | 89 ++++--------- .../src/ScatterChart/useScatterChartProps.ts | 119 ++++++++++++++++++ packages/x-charts/src/internals/index.ts | 1 + 4 files changed, 166 insertions(+), 139 deletions(-) create mode 100644 packages/x-charts/src/ScatterChart/useScatterChartProps.ts diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index e67410618f7c6..ecc0e26a86a23 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -2,17 +2,15 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; -import { ScatterChartProps, ScatterPlot, ScatterPlotProps } from '@mui/x-charts/ScatterChart'; +import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart'; import { ZAxisContextProvider } from '@mui/x-charts/context'; -import { - ChartsVoronoiHandler, - ChartsVoronoiHandlerProps, -} from '@mui/x-charts/ChartsVoronoiHandler'; +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 { @@ -34,75 +32,29 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro( 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/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..ff4a803062b10 --- /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: T) => { + 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, + ...rest + } = 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, + }; + + return { + chartContainerProps, + zAxisProps, + voronoiHandlerProps, + chartsAxisProps, + gridProps, + scatterPlotProps, + overlayProps, + legendProps, + axisHighlightProps, + tooltipProps, + children, + ...rest, + }; +}; diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index 0b1e7a623bad5..a2592c3b2fddc 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -8,6 +8,7 @@ export * from '../ResponsiveChartContainer/ResizableContainer'; export { useReducedMotion } from '../hooks/useReducedMotion'; export { useSeries } from '../hooks/useSeries'; export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks'; +export { useScatterChartProps } from '../ScatterChart/useScatterChartProps'; // utils export * from './defaultizeValueFormatter'; From 2e01a3b06a16e616e8fa5f846da21ac79f9aa195 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 20 Jun 2024 14:50:26 +0200 Subject: [PATCH 06/11] Add slots/slotProps to tooltip in scatter chart --- packages/x-charts/src/ScatterChart/useScatterChartProps.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts index ff4a803062b10..21f965d63e411 100644 --- a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts +++ b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts @@ -100,6 +100,8 @@ export const useScatterChartProps = (props: T) => { const tooltipProps = { trigger: 'item' as const, ...tooltip, + slots, + slotProps, }; return { @@ -113,6 +115,7 @@ export const useScatterChartProps = (props: T) => { legendProps, axisHighlightProps, tooltipProps, + children, ...rest, }; From b580a58a40fa590b2757536af51b456dbe1edfcf Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 20 Jun 2024 14:52:54 +0200 Subject: [PATCH 07/11] add useLineChartProps --- .../src/LineChartPro/LineChartPro.tsx | 135 ++++---------- packages/x-charts/src/LineChart/LineChart.tsx | 135 ++++---------- .../src/LineChart/useLineChartProps.ts | 175 ++++++++++++++++++ packages/x-charts/src/internals/index.ts | 1 + 4 files changed, 238 insertions(+), 208 deletions(-) create mode 100644 packages/x-charts/src/LineChart/useLineChartProps.ts diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 60c07b65044d0..0975a720aeb37 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import useId from '@mui/utils/useId'; import PropTypes from 'prop-types'; import { AreaPlot, @@ -8,7 +7,6 @@ import { LinePlot, MarkPlot, } from '@mui/x-charts/LineChart'; -import { DEFAULT_X_AXIS_KEY } from '@mui/x-charts/constants'; import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; @@ -17,6 +15,7 @@ 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 { @@ -35,112 +34,40 @@ export interface LineChartProProps extends LineChartProps { */ const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProProps, 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, - children, - slots, - slotProps, - skipAnimation, - loading, - highlightedItem, - onHighlightChange, - } = props; + chartContainerProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + areaPlotProps, + linePlotProps, + markPlotProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + lineHighlightPlotProps, + legendProps, + tooltipProps, - const id = useId(); - const clipPathId = `${id}-clip-path`; + children, + } = 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/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 33015b56d69ec..2b19e455183c3 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,40 @@ 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, - children, - slots, - slotProps, - skipAnimation, - loading, - highlightedItem, - onHighlightChange, - } = props; + chartContainerProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + areaPlotProps, + linePlotProps, + markPlotProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + lineHighlightPlotProps, + legendProps, + tooltipProps, - const id = useId(); - const clipPathId = `${id}-clip-path`; + children, + } = 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..9da21a23f92e8 --- /dev/null +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -0,0 +1,175 @@ +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: T) => { + 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, + ...rest + } = 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, + ...rest, + }; +}; diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index a2592c3b2fddc..fe912307781f3 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -9,6 +9,7 @@ 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'; // utils export * from './defaultizeValueFormatter'; From e0aa4abd6f5df084599c8ae7f44a4d3e95fdb828 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 20 Jun 2024 15:12:52 +0200 Subject: [PATCH 08/11] Add useBarChartProps --- .../src/BarChartPro/BarChartPro.tsx | 129 +++----------- packages/x-charts/src/BarChart/BarChart.tsx | 129 +++----------- .../x-charts/src/BarChart/useBarChartProps.ts | 162 ++++++++++++++++++ packages/x-charts/src/internals/index.ts | 1 + 4 files changed, 213 insertions(+), 208 deletions(-) create mode 100644 packages/x-charts/src/BarChart/useBarChartProps.ts diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 9bc0d4db489c5..832e87160d4b5 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; -import useId from '@mui/utils/useId'; import PropTypes from 'prop-types'; import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart'; -import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants'; import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; @@ -11,6 +9,7 @@ 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 { @@ -30,112 +29,34 @@ export interface BarChartProProps extends BarChartProps { */ const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProps, ref) { const { - xAxis, - yAxis, - series, - width, - height, - margin, - colors, - dataset, - sx, - layout, - tooltip, - axisHighlight, - legend, - grid, - topAxis, - leftAxis, - rightAxis, - bottomAxis, - skipAnimation, - borderRadius, - onItemClick, - onAxisClick, - children, - slots, - slotProps, - loading, - barLabel, - highlightedItem, - onHighlightChange, - } = props; - - const id = useId(); - const clipPathId = `${id}-clip-path`; + chartContainerProps, + barPlotProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + legendProps, + tooltipProps, - 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; + children, + } = useBarChartProps(props); - 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/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index b36d1fdaac1ae..414fa3bc69874 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,34 @@ 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, - children, - slots, - slotProps, - loading, - barLabel, - highlightedItem, - onHighlightChange, - } = props; - - const id = useId(); - const clipPathId = `${id}-clip-path`; + chartContainerProps, + barPlotProps, + axisClickHandlerProps, + gridProps, + clipPathProps, + clipPathGroupProps, + overlayProps, + chartsAxisProps, + axisHighlightProps, + legendProps, + tooltipProps, - 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; + children, + } = useBarChartProps(props); - 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..7add67e89c56c --- /dev/null +++ b/packages/x-charts/src/BarChart/useBarChartProps.ts @@ -0,0 +1,162 @@ +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: T) => { + 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, + ...rest + } = 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, + ...rest, + }; +}; diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index fe912307781f3..ba3ecc5de8a86 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -10,6 +10,7 @@ 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'; From faa4fc3e86d25d456911eb0f3b8f7556bdba114f Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 20 Jun 2024 16:56:17 +0200 Subject: [PATCH 09/11] prettify --- packages/x-charts/src/BarChart/BarChart.tsx | 1 - packages/x-charts/src/LineChart/LineChart.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 414fa3bc69874..9cafc9ab03e1c 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -122,7 +122,6 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { axisHighlightProps, legendProps, tooltipProps, - children, } = useBarChartProps(props); diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 2b19e455183c3..3a865af2044c9 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -151,7 +151,6 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref lineHighlightPlotProps, legendProps, tooltipProps, - children, } = useLineChartProps(props); From b500f9a75f78e3280876a3aaaa509dca00a6cf15 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 20 Jun 2024 16:56:25 +0200 Subject: [PATCH 10/11] Remove handmade proptypes --- .../src/BarChartPro/BarChartPro.tsx | 335 ----------------- .../src/LineChartPro/LineChartPro.tsx | 328 ---------------- .../src/ScatterChartPro/ScatterChartPro.tsx | 354 ------------------ 3 files changed, 1017 deletions(-) diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 832e87160d4b5..4f474bf9de4b0 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart'; import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; @@ -62,338 +61,4 @@ const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProp ); }); -BarChartPro.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "pnpm proptypes" | - // ---------------------------------------------------------------------- - /** - * The configuration of axes highlight. - * Default is set to 'band' in the bar direction. - * Depends on `layout` prop. - * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details. - */ - axisHighlight: PropTypes.shape({ - x: PropTypes.oneOf(['band', 'line', 'none']), - y: PropTypes.oneOf(['band', 'line', 'none']), - }), - /** - * If provided, the function will be used to format the label of the bar. - * It can be set to 'value' to display the current value. - * @param {BarItem} item The item to format. - * @param {BarLabelContext} context data about the bar. - * @returns {string} The formatted label. - */ - barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]), - /** - * Defines the border radius of the bar element. - */ - borderRadius: PropTypes.number, - /** - * Indicate which axis to display the bottom of the charts. - * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. - * @default xAxisIds[0] The id of the first provided axis - */ - bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - children: PropTypes.node, - className: PropTypes.string, - /** - * Color palette used to colorize multiple series. - * @default blueberryTwilightPalette - */ - colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), - /** - * An array of objects that can be used to populate series and axes data using their `dataKey` property. - */ - dataset: PropTypes.arrayOf(PropTypes.object), - desc: PropTypes.string, - /** - * If `true`, the charts will not listen to the mouse move event. - * It might break interactive features, but will improve performance. - * @default false - */ - disableAxisListener: PropTypes.bool, - /** - * Option to display a cartesian grid in the background. - */ - grid: PropTypes.shape({ - horizontal: PropTypes.bool, - vertical: PropTypes.bool, - }), - /** - * The height of the chart in px. If not defined, it takes the height of the parent element. - */ - height: PropTypes.number, - /** - * The item currently highlighted. Turns highlighting into a controlled prop. - */ - highlightedItem: PropTypes.shape({ - dataIndex: PropTypes.number, - seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - }), - /** - * The direction of the bar elements. - * @default 'vertical' - */ - layout: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * Indicate which axis to display the left of the charts. - * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. - * @default yAxisIds[0] The id of the first provided axis - */ - leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - /** - * @deprecated Consider using `slotProps.legend` instead. - */ - legend: PropTypes.shape({ - classes: PropTypes.object, - direction: PropTypes.oneOf(['column', 'row']), - hidden: PropTypes.bool, - position: PropTypes.shape({ - horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, - vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, - }), - slotProps: PropTypes.object, - slots: PropTypes.object, - }), - /** - * If `true`, a loading overlay is displayed. - * @default false - */ - loading: PropTypes.bool, - /** - * The margin between the SVG and the drawing area. - * It's used for leaving some space for extra information such as the x- and y-axis or legend. - * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`. - * @default object Depends on the charts type. - */ - margin: PropTypes.shape({ - bottom: PropTypes.number, - left: PropTypes.number, - right: PropTypes.number, - top: PropTypes.number, - }), - /** - * The function called for onClick events. - * The second argument contains information about all line/bar elements at the current mouse position. - * @param {MouseEvent} event The mouse event recorded on the `` element. - * @param {null | AxisData} data The data about the clicked axis and items associated with it. - */ - onAxisClick: PropTypes.func, - /** - * The callback fired when the highlighted item changes. - * - * @param {HighlightItemData | null} highlightedItem The newly highlighted item. - */ - onHighlightChange: PropTypes.func, - /** - * Callback fired when a bar item is clicked. - * @param {React.MouseEvent} event The event source of the callback. - * @param {BarItemIdentifier} barItemIdentifier The bar item identifier. - */ - onItemClick: PropTypes.func, - /** - * Indicate which axis to display the right of the charts. - * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. - * @default null - */ - rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - /** - * The series to display in the bar chart. - * An array of [[BarSeriesType]] objects. - */ - series: PropTypes.arrayOf(PropTypes.object).isRequired, - /** - * If `true`, animations are skipped. - * @default false - */ - skipAnimation: PropTypes.bool, - /** - * The props used for each component slot. - * @default {} - */ - slotProps: PropTypes.object, - /** - * Overridable component slots. - * @default {} - */ - slots: PropTypes.object, - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - title: PropTypes.string, - /** - * The configuration of the tooltip. - * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details. - */ - tooltip: PropTypes.shape({ - axisContent: PropTypes.elementType, - classes: PropTypes.object, - itemContent: PropTypes.elementType, - slotProps: PropTypes.object, - slots: PropTypes.object, - trigger: PropTypes.oneOf(['axis', 'item', 'none']), - }), - /** - * Indicate which axis to display the top of the charts. - * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. - * @default null - */ - topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - viewBox: PropTypes.shape({ - height: PropTypes.number, - width: PropTypes.number, - x: PropTypes.number, - y: PropTypes.number, - }), - /** - * The width of the chart in px. If not defined, it takes the width of the parent element. - */ - width: PropTypes.number, - /** - * The configuration of the x-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - xAxis: PropTypes.arrayOf( - PropTypes.shape({ - axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelFontSize: PropTypes.number, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['bottom', 'top']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - }), - ), - /** - * The configuration of the y-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - yAxis: PropTypes.arrayOf( - PropTypes.shape({ - axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelFontSize: PropTypes.number, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['left', 'right']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - }), - ), -} as any; - export { BarChartPro }; diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 0975a720aeb37..384a56b509a41 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import { AreaPlot, LineChartProps, @@ -73,331 +72,4 @@ const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProP ); }); -LineChartPro.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "pnpm proptypes" | - // ---------------------------------------------------------------------- - /** - * The configuration of axes highlight. - * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details. - * @default { x: 'line' } - */ - axisHighlight: PropTypes.shape({ - x: PropTypes.oneOf(['band', 'line', 'none']), - y: PropTypes.oneOf(['band', 'line', 'none']), - }), - /** - * Indicate which axis to display the bottom of the charts. - * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. - * @default xAxisIds[0] The id of the first provided axis - */ - bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - children: PropTypes.node, - className: PropTypes.string, - /** - * Color palette used to colorize multiple series. - * @default blueberryTwilightPalette - */ - colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), - /** - * An array of objects that can be used to populate series and axes data using their `dataKey` property. - */ - dataset: PropTypes.arrayOf(PropTypes.object), - desc: PropTypes.string, - /** - * If `true`, the charts will not listen to the mouse move event. - * It might break interactive features, but will improve performance. - * @default false - */ - disableAxisListener: PropTypes.bool, - /** - * If `true`, render the line highlight item. - */ - disableLineItemHighlight: PropTypes.bool, - /** - * Option to display a cartesian grid in the background. - */ - grid: PropTypes.shape({ - horizontal: PropTypes.bool, - vertical: PropTypes.bool, - }), - /** - * The height of the chart in px. If not defined, it takes the height of the parent element. - */ - height: PropTypes.number, - /** - * The item currently highlighted. Turns highlighting into a controlled prop. - */ - highlightedItem: PropTypes.shape({ - dataIndex: PropTypes.number, - seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - }), - /** - * Indicate which axis to display the left of the charts. - * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. - * @default yAxisIds[0] The id of the first provided axis - */ - leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - /** - * @deprecated Consider using `slotProps.legend` instead. - */ - legend: PropTypes.shape({ - classes: PropTypes.object, - direction: PropTypes.oneOf(['column', 'row']), - hidden: PropTypes.bool, - position: PropTypes.shape({ - horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, - vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, - }), - slotProps: PropTypes.object, - slots: PropTypes.object, - }), - /** - * If `true`, a loading overlay is displayed. - * @default false - */ - loading: PropTypes.bool, - /** - * The margin between the SVG and the drawing area. - * It's used for leaving some space for extra information such as the x- and y-axis or legend. - * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`. - * @default object Depends on the charts type. - */ - margin: PropTypes.shape({ - bottom: PropTypes.number, - left: PropTypes.number, - right: PropTypes.number, - top: PropTypes.number, - }), - /** - * Callback fired when an area element is clicked. - */ - onAreaClick: PropTypes.func, - /** - * The function called for onClick events. - * The second argument contains information about all line/bar elements at the current mouse position. - * @param {MouseEvent} event The mouse event recorded on the `` element. - * @param {null | AxisData} data The data about the clicked axis and items associated with it. - */ - onAxisClick: PropTypes.func, - /** - * The callback fired when the highlighted item changes. - * - * @param {HighlightItemData | null} highlightedItem The newly highlighted item. - */ - onHighlightChange: PropTypes.func, - /** - * Callback fired when a line element is clicked. - */ - onLineClick: PropTypes.func, - /** - * Callback fired when a mark element is clicked. - */ - onMarkClick: PropTypes.func, - /** - * Indicate which axis to display the right of the charts. - * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. - * @default null - */ - rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - /** - * The series to display in the line chart. - * An array of [[LineSeriesType]] objects. - */ - series: PropTypes.arrayOf(PropTypes.object).isRequired, - /** - * If `true`, animations are skipped. - * @default false - */ - skipAnimation: PropTypes.bool, - /** - * The props used for each component slot. - * @default {} - */ - slotProps: PropTypes.object, - /** - * Overridable component slots. - * @default {} - */ - slots: PropTypes.object, - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - title: PropTypes.string, - /** - * The configuration of the tooltip. - * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details. - * @default { trigger: 'item' } - */ - tooltip: PropTypes.shape({ - axisContent: PropTypes.elementType, - classes: PropTypes.object, - itemContent: PropTypes.elementType, - slotProps: PropTypes.object, - slots: PropTypes.object, - trigger: PropTypes.oneOf(['axis', 'item', 'none']), - }), - /** - * Indicate which axis to display the top of the charts. - * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. - * @default null - */ - topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - viewBox: PropTypes.shape({ - height: PropTypes.number, - width: PropTypes.number, - x: PropTypes.number, - y: PropTypes.number, - }), - /** - * The width of the chart in px. If not defined, it takes the width of the parent element. - */ - width: PropTypes.number, - /** - * The configuration of the x-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - xAxis: PropTypes.arrayOf( - PropTypes.shape({ - axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelFontSize: PropTypes.number, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['bottom', 'top']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - }), - ), - /** - * The configuration of the y-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - yAxis: PropTypes.arrayOf( - PropTypes.shape({ - axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelFontSize: PropTypes.number, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['left', 'right']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - }), - ), -} as any; - export { LineChartPro }; diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index ecc0e26a86a23..ad91bb1f9005f 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -1,6 +1,4 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; - import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart'; import { ZAxisContextProvider } from '@mui/x-charts/context'; @@ -61,356 +59,4 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro( ); }); -ScatterChartPro.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "pnpm proptypes" | - // ---------------------------------------------------------------------- - /** - * The configuration of axes highlight. - * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details. - * @default { x: 'none', y: 'none' } - */ - axisHighlight: PropTypes.shape({ - x: PropTypes.oneOf(['band', 'line', 'none']), - y: PropTypes.oneOf(['band', 'line', 'none']), - }), - /** - * Indicate which axis to display the bottom of the charts. - * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. - * @default xAxisIds[0] The id of the first provided axis - */ - bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - children: PropTypes.node, - className: PropTypes.string, - /** - * Color palette used to colorize multiple series. - * @default blueberryTwilightPalette - */ - colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), - /** - * An array of objects that can be used to populate series and axes data using their `dataKey` property. - */ - dataset: PropTypes.arrayOf(PropTypes.object), - desc: PropTypes.string, - /** - * If `true`, the charts will not listen to the mouse move event. - * It might break interactive features, but will improve performance. - * @default false - */ - disableAxisListener: PropTypes.bool, - /** - * If true, the interaction will not use the Voronoi cell and fall back to hover events. - * @default false - */ - disableVoronoi: PropTypes.bool, - /** - * Option to display a cartesian grid in the background. - */ - grid: PropTypes.shape({ - horizontal: PropTypes.bool, - vertical: PropTypes.bool, - }), - /** - * The height of the chart in px. If not defined, it takes the height of the parent element. - */ - height: PropTypes.number, - /** - * The item currently highlighted. Turns highlighting into a controlled prop. - */ - highlightedItem: PropTypes.shape({ - dataIndex: PropTypes.number, - seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - }), - /** - * Indicate which axis to display the left of the charts. - * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. - * @default yAxisIds[0] The id of the first provided axis - */ - leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - /** - * @deprecated Consider using `slotProps.legend` instead. - */ - legend: PropTypes.shape({ - classes: PropTypes.object, - direction: PropTypes.oneOf(['column', 'row']), - hidden: PropTypes.bool, - position: PropTypes.shape({ - horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, - vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, - }), - slotProps: PropTypes.object, - slots: PropTypes.object, - }), - /** - * If `true`, a loading overlay is displayed. - * @default false - */ - loading: PropTypes.bool, - /** - * The margin between the SVG and the drawing area. - * It's used for leaving some space for extra information such as the x- and y-axis or legend. - * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`. - * @default object Depends on the charts type. - */ - margin: PropTypes.shape({ - bottom: PropTypes.number, - left: PropTypes.number, - right: PropTypes.number, - top: PropTypes.number, - }), - /** - * The callback fired when the highlighted item changes. - * - * @param {HighlightItemData | null} highlightedItem The newly highlighted item. - */ - onHighlightChange: PropTypes.func, - /** - * Callback fired when clicking on a scatter item. - * @param {MouseEvent} event The mouse event recorded on the `` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`. - * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. - */ - onItemClick: PropTypes.func, - /** - * Indicate which axis to display the right of the charts. - * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. - * @default null - */ - rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - /** - * The series to display in the scatter chart. - * An array of [[ScatterSeriesType]] objects. - */ - series: PropTypes.arrayOf(PropTypes.object).isRequired, - /** - * The props used for each component slot. - * @default {} - */ - slotProps: PropTypes.object, - /** - * Overridable component slots. - * @default {} - */ - slots: PropTypes.object, - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - title: PropTypes.string, - /** - * The configuration of the tooltip. - * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details. - * @default { trigger: 'item' } - */ - tooltip: PropTypes.shape({ - axisContent: PropTypes.elementType, - classes: PropTypes.object, - itemContent: PropTypes.elementType, - slotProps: PropTypes.object, - slots: PropTypes.object, - trigger: PropTypes.oneOf(['axis', 'item', 'none']), - }), - /** - * Indicate which axis to display the top of the charts. - * Can be a string (the id of the axis) or an object `ChartsXAxisProps`. - * @default null - */ - topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - viewBox: PropTypes.shape({ - height: PropTypes.number, - width: PropTypes.number, - x: PropTypes.number, - y: PropTypes.number, - }), - /** - * Defines the maximal distance between a scatter point and the pointer that triggers the interaction. - * If `undefined`, the radius is assumed to be infinite. - */ - voronoiMaxRadius: PropTypes.number, - /** - * The width of the chart in px. If not defined, it takes the width of the parent element. - */ - width: PropTypes.number, - /** - * The configuration of the x-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - xAxis: PropTypes.arrayOf( - PropTypes.shape({ - axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelFontSize: PropTypes.number, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['bottom', 'top']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - }), - ), - /** - * The configuration of the y-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - yAxis: PropTypes.arrayOf( - PropTypes.shape({ - axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelFontSize: PropTypes.number, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['left', 'right']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - tickFontSize: PropTypes.number, - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - }), - ), - /** - * The configuration of the z-axes. - */ - zAxis: PropTypes.arrayOf( - PropTypes.shape({ - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - id: PropTypes.string, - }), - ), -} as any; - export { ScatterChartPro }; From 43a0f49d20788bbf824e0da43269167977a1194a Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 20 Jun 2024 17:11:25 +0200 Subject: [PATCH 11/11] remove unnecessary typing in useXChartProps --- packages/x-charts/src/BarChart/useBarChartProps.ts | 5 +---- packages/x-charts/src/LineChart/useLineChartProps.ts | 5 +---- packages/x-charts/src/ScatterChart/useScatterChartProps.ts | 5 +---- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/x-charts/src/BarChart/useBarChartProps.ts b/packages/x-charts/src/BarChart/useBarChartProps.ts index 7add67e89c56c..b8c9e00ceea9b 100644 --- a/packages/x-charts/src/BarChart/useBarChartProps.ts +++ b/packages/x-charts/src/BarChart/useBarChartProps.ts @@ -9,7 +9,7 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants'; * @param props The input props for BarChart * @returns An object with props for the children components of BarChart */ -export const useBarChartProps = (props: T) => { +export const useBarChartProps = (props: BarChartProps) => { const { xAxis, yAxis, @@ -40,7 +40,6 @@ export const useBarChartProps = (props: T) => { onHighlightChange, borderRadius, barLabel, - ...rest } = props; const id = useId(); @@ -155,8 +154,6 @@ export const useBarChartProps = (props: T) => { axisHighlightProps, legendProps, tooltipProps, - children, - ...rest, }; }; diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 9da21a23f92e8..226061be2a17a 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -9,7 +9,7 @@ import type { LineChartProps } from './LineChart'; * @param props The input props for LineChart * @returns An object with props for the children components of LineChart */ -export const useLineChartProps = (props: T) => { +export const useLineChartProps = (props: LineChartProps) => { const { xAxis, yAxis, @@ -40,7 +40,6 @@ export const useLineChartProps = (props: T) => { loading, highlightedItem, onHighlightChange, - ...rest } = props; const id = useId(); @@ -168,8 +167,6 @@ export const useLineChartProps = (props: T) => { lineHighlightPlotProps, legendProps, tooltipProps, - children, - ...rest, }; }; diff --git a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts index 21f965d63e411..9f57a8c01c74f 100644 --- a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts +++ b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts @@ -9,7 +9,7 @@ import type { ScatterPlotProps } from './ScatterPlot'; * @param props The input props for ScatterChart * @returns An object with props for the children components of ScatterChart */ -export const useScatterChartProps = (props: T) => { +export const useScatterChartProps = (props: ScatterChartProps) => { const { xAxis, yAxis, @@ -37,7 +37,6 @@ export const useScatterChartProps = (props: T) => { loading, highlightedItem, onHighlightChange, - ...rest } = props; const chartContainerProps = { @@ -115,8 +114,6 @@ export const useScatterChartProps = (props: T) => { legendProps, axisHighlightProps, tooltipProps, - children, - ...rest, }; };