From 000ff4edaa184ca41d6fdd24fe2a47aca32997d3 Mon Sep 17 00:00:00 2001 From: alex Date: Fri, 6 Sep 2024 11:48:49 +0200 Subject: [PATCH 01/10] [charts] Replace `path` by `circle` for perf improvement --- .../src/LineChart/CircleMarkElement.tsx | 120 ++++++++++++++++++ packages/x-charts/src/LineChart/LineChart.tsx | 4 + .../x-charts/src/LineChart/MarkElement.tsx | 43 +------ packages/x-charts/src/LineChart/MarkPlot.tsx | 11 +- .../src/LineChart/markElementClasses.ts | 43 +++++++ .../src/LineChart/useLineChartProps.ts | 2 + 6 files changed, 179 insertions(+), 44 deletions(-) create mode 100644 packages/x-charts/src/LineChart/CircleMarkElement.tsx create mode 100644 packages/x-charts/src/LineChart/markElementClasses.ts diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx new file mode 100644 index 000000000000..a737f786b53d --- /dev/null +++ b/packages/x-charts/src/LineChart/CircleMarkElement.tsx @@ -0,0 +1,120 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { useTheme } from '@mui/material/styles'; +import { animated, useSpring } from '@react-spring/web'; +import { InteractionContext } from '../context/InteractionProvider'; +import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; +import { useItemHighlighted } from '../context'; +import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses'; +import { warnOnce } from '../internals/warning'; + +export type CircleMarkElementProps = Omit & + Omit, 'ref' | 'id'> & { + /** + * The shape of the marker. + */ + shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'; + /** + * If `true`, animations are skipped. + * @default false + */ + skipAnimation?: boolean; + /** + * The index to the element in the series' data array. + */ + dataIndex: number; + }; + +/** + * The line mark element that only render circle for performance improvement. + * + * Demos: + * + * - [Lines](https://mui.com/x/react-charts/lines/) + * - [Line demonstration](https://mui.com/x/react-charts/line-demo/) + * + * API: + * + * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/) + */ +function CircleMarkElement(props: CircleMarkElementProps) { + const { + x, + y, + id, + classes: innerClasses, + color, + dataIndex, + onClick, + skipAnimation, + shape, + ...other + } = props; + + if (shape !== 'circle') { + warnOnce( + [ + `MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`perfUpdate=true\`.`, + 'Only "circle" are supported with `perfUpdate`.', + ].join('\n'), + 'error', + ); + } + const theme = useTheme(); + const getInteractionItemProps = useInteractionItemProps(); + const { isFaded, isHighlighted } = useItemHighlighted({ + seriesId: id, + }); + const { axis } = React.useContext(InteractionContext); + + const position = useSpring({ to: { x, y }, immediate: skipAnimation }); + const ownerState = { + id, + classes: innerClasses, + isHighlighted: axis.x?.index === dataIndex || isHighlighted, + isFaded, + color, + }; + const classes = useUtilityClasses(ownerState); + + return ( + + ); +} + +CircleMarkElement.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "pnpm proptypes" | + // ---------------------------------------------------------------------- + classes: PropTypes.object, + /** + * The index to the element in the series' data array. + */ + dataIndex: PropTypes.number.isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + /** + * The shape of the marker. + */ + shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']) + .isRequired, + /** + * If `true`, animations are skipped. + * @default false + */ + skipAnimation: PropTypes.bool, +} as any; + +export { CircleMarkElement }; diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 6cb98ffb2d42..48e27ce1efae 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -124,6 +124,10 @@ export interface LineChartProps * @default false */ skipAnimation?: boolean; + /** + * If `true` marks will render `` instead of `` and drop theme override for faster rendering. + */ + markPerfUpdate?: boolean; } /** diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx index b86ef162168d..55ba1e273e4c 100644 --- a/packages/x-charts/src/LineChart/MarkElement.tsx +++ b/packages/x-charts/src/LineChart/MarkElement.tsx @@ -1,54 +1,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import composeClasses from '@mui/utils/composeClasses'; -import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { styled } from '@mui/material/styles'; -import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape'; import { animated, to, useSpring } from '@react-spring/web'; import { getSymbol } from '../internals/getSymbol'; import { InteractionContext } from '../context/InteractionProvider'; import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; -import { SeriesId } from '../models/seriesType/common'; import { useItemHighlighted } from '../context'; - -export interface MarkElementClasses { - /** Styles applied to the root element. */ - root: string; - /** Styles applied to the root element when highlighted. */ - highlighted: string; - /** Styles applied to the root element when faded. */ - faded: string; -} - -export type MarkElementClassKey = keyof MarkElementClasses; - -interface MarkElementOwnerState { - id: SeriesId; - color: string; - isFaded: boolean; - isHighlighted: boolean; - classes?: Partial; -} - -export function getMarkElementUtilityClass(slot: string) { - return generateUtilityClass('MuiMarkElement', slot); -} - -export const markElementClasses: MarkElementClasses = generateUtilityClasses('MuiMarkElement', [ - 'root', - 'highlighted', - 'faded', -]); - -const useUtilityClasses = (ownerState: MarkElementOwnerState) => { - const { classes, id, isFaded, isHighlighted } = ownerState; - const slots = { - root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded'], - }; - - return composeClasses(slots, getMarkElementUtilityClass, classes); -}; +import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses'; const MarkElementPath = styled(animated.path, { name: 'MuiMarkElement', diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 70957eeefc67..6afa125e8def 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -10,6 +10,7 @@ import { cleanId } from '../internals/cleanId'; import getColor from './getColor'; import { useLineSeries } from '../hooks/useSeries'; import { useDrawingArea } from '../hooks/useDrawingArea'; +import { CircleMarkElement } from './CircleMarkElement'; export interface MarkPlotSlots { mark?: React.JSXElementConstructor; @@ -41,6 +42,12 @@ export interface MarkPlotProps event: React.MouseEvent, lineItemIdentifier: LineItemIdentifier, ) => void; + /** + * If `true` the mark element will only be able to render circle. + * Giving less customization options, but saving around 40ms per 1.000 marks. + * @default false + */ + perfUpdate?: boolean; } /** @@ -54,14 +61,14 @@ export interface MarkPlotProps * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/) */ function MarkPlot(props: MarkPlotProps) { - const { slots, slotProps, skipAnimation, onItemClick, ...other } = props; + const { slots, slotProps, skipAnimation, onItemClick, perfUpdate, ...other } = props; const seriesData = useLineSeries(); const axisData = useCartesianContext(); const chartId = useChartId(); const drawingArea = useDrawingArea(); - const Mark = slots?.mark ?? MarkElement; + const Mark = slots?.mark ?? (perfUpdate ? CircleMarkElement : MarkElement); if (seriesData === undefined) { return null; diff --git a/packages/x-charts/src/LineChart/markElementClasses.ts b/packages/x-charts/src/LineChart/markElementClasses.ts new file mode 100644 index 000000000000..6ab7c22c81e5 --- /dev/null +++ b/packages/x-charts/src/LineChart/markElementClasses.ts @@ -0,0 +1,43 @@ +import composeClasses from '@mui/utils/composeClasses'; +import generateUtilityClass from '@mui/utils/generateUtilityClass'; +import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; +import { SeriesId } from '../models/seriesType/common'; + + +export interface MarkElementClasses { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element when highlighted. */ + highlighted: string; + /** Styles applied to the root element when faded. */ + faded: string; +} + +export type MarkElementClassKey = keyof MarkElementClasses; + +export interface MarkElementOwnerState { + id: SeriesId; + color: string; + isFaded: boolean; + isHighlighted: boolean; + classes?: Partial; +} + +export function getMarkElementUtilityClass(slot: string) { + return generateUtilityClass('MuiMarkElement', slot); +} + +export const markElementClasses: MarkElementClasses = generateUtilityClasses('MuiMarkElement', [ + 'root', + 'highlighted', + 'faded', +]); + +export const useUtilityClasses = (ownerState: MarkElementOwnerState) => { + const { classes, id, isFaded, isHighlighted } = ownerState; + const slots = { + root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded'], + }; + + return composeClasses(slots, getMarkElementUtilityClass, classes); +}; diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 6841c5e927cd..18c28a1ef999 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -54,6 +54,7 @@ export const useLineChartProps = (props: LineChartProps) => { highlightedItem, onHighlightChange, className, + markPerfUpdate, ...other } = props; @@ -130,6 +131,7 @@ export const useLineChartProps = (props: LineChartProps) => { slotProps, onItemClick: onMarkClick, skipAnimation, + perfUpdate: markPerfUpdate, }; const overlayProps: ChartsOverlayProps = { From b2dac666b7181f6ee3c5f5a40111997fb0be61ac Mon Sep 17 00:00:00 2001 From: alex Date: Fri, 6 Sep 2024 11:49:35 +0200 Subject: [PATCH 02/10] test impact on benchmark --- test/performance-charts/tests/LineChart.bench.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/test/performance-charts/tests/LineChart.bench.tsx b/test/performance-charts/tests/LineChart.bench.tsx index 0fb97433f1f2..dfd5d2ba8836 100644 --- a/test/performance-charts/tests/LineChart.bench.tsx +++ b/test/performance-charts/tests/LineChart.bench.tsx @@ -32,6 +32,7 @@ describe('LineChart', () => { ]} width={500} height={300} + markPerfUpdate />, ); From 08d09458cd15da7aa27eaac38b95878715254e81 Mon Sep 17 00:00:00 2001 From: alex Date: Fri, 6 Sep 2024 12:06:58 +0200 Subject: [PATCH 03/10] fix TS --- packages/x-charts/src/LineChart/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/x-charts/src/LineChart/index.ts b/packages/x-charts/src/LineChart/index.ts index 6ac814459035..a8cedca772e6 100644 --- a/packages/x-charts/src/LineChart/index.ts +++ b/packages/x-charts/src/LineChart/index.ts @@ -11,3 +11,6 @@ export * from './LineElement'; export * from './AnimatedLine'; export * from './MarkElement'; export * from './LineHighlightElement'; + +export type { MarkElementClasses, MarkElementClassKey } from './markElementClasses'; +export { getMarkElementUtilityClass, markElementClasses } from './markElementClasses'; From aee551a96268dd653aec88443dd1aee31722a19e Mon Sep 17 00:00:00 2001 From: alex Date: Fri, 6 Sep 2024 12:10:48 +0200 Subject: [PATCH 04/10] scripts --- docs/pages/x/api/charts/line-chart-pro.json | 1 + docs/pages/x/api/charts/line-chart.json | 1 + docs/pages/x/api/charts/mark-plot.json | 1 + .../api-docs/charts/line-chart-pro/line-chart-pro.json | 3 +++ .../translations/api-docs/charts/line-chart/line-chart.json | 3 +++ docs/translations/api-docs/charts/mark-plot/mark-plot.json | 3 +++ packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx | 4 ++++ packages/x-charts/src/LineChart/LineChart.tsx | 4 ++++ packages/x-charts/src/LineChart/MarkPlot.tsx | 6 ++++++ scripts/buildApiDocs/chartsSettings/index.ts | 1 + 10 files changed, 27 insertions(+) diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 9737b36e65cc..f0f247f97141 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -48,6 +48,7 @@ }, "default": "object Depends on the charts type." }, + "markPerfUpdate": { "type": { "name": "bool" } }, "onAreaClick": { "type": { "name": "func" } }, "onAxisClick": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 51e2f75d22ab..8e38cb2037da 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -48,6 +48,7 @@ }, "default": "object Depends on the charts type." }, + "markPerfUpdate": { "type": { "name": "bool" } }, "onAreaClick": { "type": { "name": "func" } }, "onAxisClick": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index f38a9e1044bb..39de5ce1c5d6 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -7,6 +7,7 @@ "describedArgs": ["event", "lineItemIdentifier"] } }, + "perfUpdate": { "type": { "name": "bool" }, "default": "false" }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json index bc67c9eba65b..91ca6981549b 100644 --- a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json +++ b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json @@ -32,6 +32,9 @@ "margin": { "description": "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." }, + "markPerfUpdate": { + "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." + }, "onAreaClick": { "description": "Callback fired when an area element is clicked." }, "onAxisClick": { "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index 5b85ec4bd7cb..c4f6dcebc170 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -32,6 +32,9 @@ "margin": { "description": "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." }, + "markPerfUpdate": { + "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." + }, "onAreaClick": { "description": "Callback fired when an area element is clicked." }, "onAxisClick": { "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", diff --git a/docs/translations/api-docs/charts/mark-plot/mark-plot.json b/docs/translations/api-docs/charts/mark-plot/mark-plot.json index 521be5851919..4eca3fa271ed 100644 --- a/docs/translations/api-docs/charts/mark-plot/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot/mark-plot.json @@ -8,6 +8,9 @@ "lineItemIdentifier": "The line mark item identifier." } }, + "perfUpdate": { + "description": "If true the mark element will only be able to render circle. Giving less customization options, but saving around 40ms per 1.000 marks." + }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 455c93e70a4f..e802c9b0ee46 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -214,6 +214,10 @@ LineChartPro.propTypes = { right: PropTypes.number, top: PropTypes.number, }), + /** + * If `true` marks will render `` instead of `` and drop theme override for faster rendering. + */ + markPerfUpdate: PropTypes.bool, /** * Callback fired when an area element is clicked. */ diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 48e27ce1efae..c42b01011bf2 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -295,6 +295,10 @@ LineChart.propTypes = { right: PropTypes.number, top: PropTypes.number, }), + /** + * If `true` marks will render `` instead of `` and drop theme override for faster rendering. + */ + markPerfUpdate: PropTypes.bool, /** * Callback fired when an area element is clicked. */ diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 6afa125e8def..81a90c901b41 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -189,6 +189,12 @@ MarkPlot.propTypes = { * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier. */ onItemClick: PropTypes.func, + /** + * If `true` the mark element will only be able to render circle. + * Giving less customization options, but saving around 40ms per 1.000 marks. + * @default false + */ + perfUpdate: PropTypes.bool, /** * If `true`, animations are skipped. * @default false diff --git a/scripts/buildApiDocs/chartsSettings/index.ts b/scripts/buildApiDocs/chartsSettings/index.ts index 5b4fae6ec222..90479273d2a4 100644 --- a/scripts/buildApiDocs/chartsSettings/index.ts +++ b/scripts/buildApiDocs/chartsSettings/index.ts @@ -66,6 +66,7 @@ export default apiPages; 'x-charts/src/ChartsOverlay/ChartsNoDataOverlay.tsx', 'x-charts/src/ChartsOverlay/ChartsLoadingOverlay.tsx', 'x-charts/src/ChartsLegend/LegendPerItem.tsx', + 'x-charts/src/LineChart/CircleMarkElement.tsx', ].some((invalidPath) => filename.endsWith(invalidPath)); }, skipAnnotatingComponentDefinition: true, From 6e365644d359336559f35e89ee9f0b48ac6c9eab Mon Sep 17 00:00:00 2001 From: alex Date: Fri, 6 Sep 2024 12:38:19 +0200 Subject: [PATCH 05/10] prettier --- packages/x-charts/src/LineChart/markElementClasses.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/x-charts/src/LineChart/markElementClasses.ts b/packages/x-charts/src/LineChart/markElementClasses.ts index 6ab7c22c81e5..443823c2e845 100644 --- a/packages/x-charts/src/LineChart/markElementClasses.ts +++ b/packages/x-charts/src/LineChart/markElementClasses.ts @@ -3,7 +3,6 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import { SeriesId } from '../models/seriesType/common'; - export interface MarkElementClasses { /** Styles applied to the root element. */ root: string; From b0f0c4cd4e563a3c45b9038de29ec694a07db0fa Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 9 Sep 2024 09:47:36 +0200 Subject: [PATCH 06/10] wording --- docs/translations/api-docs/charts/mark-plot/mark-plot.json | 2 +- packages/x-charts/src/LineChart/MarkPlot.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/translations/api-docs/charts/mark-plot/mark-plot.json b/docs/translations/api-docs/charts/mark-plot/mark-plot.json index 4eca3fa271ed..0a54c3626431 100644 --- a/docs/translations/api-docs/charts/mark-plot/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot/mark-plot.json @@ -9,7 +9,7 @@ } }, "perfUpdate": { - "description": "If true the mark element will only be able to render circle. Giving less customization options, but saving around 40ms per 1.000 marks." + "description": "If true the mark element will only be able to render circle. Giving fewer customization options, but saving around 40ms per 1.000 marks." }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 81a90c901b41..6b4d63373a12 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -44,7 +44,7 @@ export interface MarkPlotProps ) => void; /** * If `true` the mark element will only be able to render circle. - * Giving less customization options, but saving around 40ms per 1.000 marks. + * Giving fewer customization options, but saving around 40ms per 1.000 marks. * @default false */ perfUpdate?: boolean; @@ -191,7 +191,7 @@ MarkPlot.propTypes = { onItemClick: PropTypes.func, /** * If `true` the mark element will only be able to render circle. - * Giving less customization options, but saving around 40ms per 1.000 marks. + * Giving fewer customization options, but saving around 40ms per 1.000 marks. * @default false */ perfUpdate: PropTypes.bool, From 57340c9bc012cc6ae877cf4f6fec16119c8654d4 Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 11 Sep 2024 10:15:06 +0200 Subject: [PATCH 07/10] renaming --- docs/pages/x/api/charts/line-chart-pro.json | 2 +- docs/pages/x/api/charts/line-chart.json | 2 +- docs/pages/x/api/charts/mark-plot.json | 2 +- .../charts/line-chart-pro/line-chart-pro.json | 2 +- .../api-docs/charts/line-chart/line-chart.json | 2 +- .../api-docs/charts/mark-plot/mark-plot.json | 2 +- .../src/LineChartPro/LineChartPro.tsx | 8 ++++---- .../src/LineChart/CircleMarkElement.tsx | 4 ++-- packages/x-charts/src/LineChart/LineChart.tsx | 10 +++++----- packages/x-charts/src/LineChart/MarkPlot.tsx | 18 +++++++++--------- .../src/LineChart/useLineChartProps.ts | 4 ++-- .../tests/LineChart.bench.tsx | 2 +- 12 files changed, 29 insertions(+), 29 deletions(-) diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index f0f247f97141..5fb52fb8f436 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -48,7 +48,7 @@ }, "default": "object Depends on the charts type." }, - "markPerfUpdate": { "type": { "name": "bool" } }, + "experimentalMarkRendering": { "type": { "name": "bool" } }, "onAreaClick": { "type": { "name": "func" } }, "onAxisClick": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 8e38cb2037da..16ed39d38fc4 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -48,7 +48,7 @@ }, "default": "object Depends on the charts type." }, - "markPerfUpdate": { "type": { "name": "bool" } }, + "experimentalMarkRendering": { "type": { "name": "bool" } }, "onAreaClick": { "type": { "name": "func" } }, "onAxisClick": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index 39de5ce1c5d6..f800225bffb0 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -7,7 +7,7 @@ "describedArgs": ["event", "lineItemIdentifier"] } }, - "perfUpdate": { "type": { "name": "bool" }, "default": "false" }, + "experimentalRendering": { "type": { "name": "bool" }, "default": "false" }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json index 91ca6981549b..0ae084583ca6 100644 --- a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json +++ b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json @@ -32,7 +32,7 @@ "margin": { "description": "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." }, - "markPerfUpdate": { + "experimentalMarkRendering": { "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." }, "onAreaClick": { "description": "Callback fired when an area element is clicked." }, diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index c4f6dcebc170..c8514e18e7f6 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -32,7 +32,7 @@ "margin": { "description": "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." }, - "markPerfUpdate": { + "experimentalMarkRendering": { "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." }, "onAreaClick": { "description": "Callback fired when an area element is clicked." }, diff --git a/docs/translations/api-docs/charts/mark-plot/mark-plot.json b/docs/translations/api-docs/charts/mark-plot/mark-plot.json index 0a54c3626431..e099e5f111dd 100644 --- a/docs/translations/api-docs/charts/mark-plot/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot/mark-plot.json @@ -8,7 +8,7 @@ "lineItemIdentifier": "The line mark item identifier." } }, - "perfUpdate": { + "experimentalRendering": { "description": "If true the mark element will only be able to render circle. Giving fewer customization options, but saving around 40ms per 1.000 marks." }, "skipAnimation": { "description": "If true, animations are skipped." }, diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index e802c9b0ee46..0db76fc1245c 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -145,6 +145,10 @@ LineChartPro.propTypes = { * If `true`, render the line highlight item. */ disableLineItemHighlight: PropTypes.bool, + /** + * If `true` marks will render `` instead of `` and drop theme override for faster rendering. + */ + experimentalMarkRendering: PropTypes.bool, /** * Option to display a cartesian grid in the background. */ @@ -214,10 +218,6 @@ LineChartPro.propTypes = { right: PropTypes.number, top: PropTypes.number, }), - /** - * If `true` marks will render `` instead of `` and drop theme override for faster rendering. - */ - markPerfUpdate: PropTypes.bool, /** * Callback fired when an area element is clicked. */ diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx index a737f786b53d..f8bd5adcd9da 100644 --- a/packages/x-charts/src/LineChart/CircleMarkElement.tsx +++ b/packages/x-charts/src/LineChart/CircleMarkElement.tsx @@ -54,8 +54,8 @@ function CircleMarkElement(props: CircleMarkElementProps) { if (shape !== 'circle') { warnOnce( [ - `MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`perfUpdate=true\`.`, - 'Only "circle" are supported with `perfUpdate`.', + `MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, + 'Only "circle" are supported with `experimentalRendering`.', ].join('\n'), 'error', ); diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index c42b01011bf2..96dce87af364 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -127,7 +127,7 @@ export interface LineChartProps /** * If `true` marks will render `` instead of `` and drop theme override for faster rendering. */ - markPerfUpdate?: boolean; + experimentalMarkRendering?: boolean; } /** @@ -226,6 +226,10 @@ LineChart.propTypes = { * If `true`, render the line highlight item. */ disableLineItemHighlight: PropTypes.bool, + /** + * If `true` marks will render `` instead of `` and drop theme override for faster rendering. + */ + experimentalMarkRendering: PropTypes.bool, /** * Option to display a cartesian grid in the background. */ @@ -295,10 +299,6 @@ LineChart.propTypes = { right: PropTypes.number, top: PropTypes.number, }), - /** - * If `true` marks will render `` instead of `` and drop theme override for faster rendering. - */ - markPerfUpdate: PropTypes.bool, /** * Callback fired when an area element is clicked. */ diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 6b4d63373a12..3d6ea9ec8edd 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -47,7 +47,7 @@ export interface MarkPlotProps * Giving fewer customization options, but saving around 40ms per 1.000 marks. * @default false */ - perfUpdate?: boolean; + experimentalRendering?: boolean; } /** @@ -61,14 +61,14 @@ export interface MarkPlotProps * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/) */ function MarkPlot(props: MarkPlotProps) { - const { slots, slotProps, skipAnimation, onItemClick, perfUpdate, ...other } = props; + const { slots, slotProps, skipAnimation, onItemClick, experimentalRendering, ...other } = props; const seriesData = useLineSeries(); const axisData = useCartesianContext(); const chartId = useChartId(); const drawingArea = useDrawingArea(); - const Mark = slots?.mark ?? (perfUpdate ? CircleMarkElement : MarkElement); + const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement); if (seriesData === undefined) { return null; @@ -183,18 +183,18 @@ MarkPlot.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "pnpm proptypes" | // ---------------------------------------------------------------------- + /** + * If `true` the mark element will only be able to render circle. + * Giving fewer customization options, but saving around 40ms per 1.000 marks. + * @default false + */ + experimentalRendering: PropTypes.bool, /** * Callback fired when a line mark item is clicked. * @param {React.MouseEvent} event The event source of the callback. * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier. */ onItemClick: PropTypes.func, - /** - * If `true` the mark element will only be able to render circle. - * Giving fewer customization options, but saving around 40ms per 1.000 marks. - * @default false - */ - perfUpdate: PropTypes.bool, /** * If `true`, animations are skipped. * @default false diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 18c28a1ef999..2b35bddd7866 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -54,7 +54,7 @@ export const useLineChartProps = (props: LineChartProps) => { highlightedItem, onHighlightChange, className, - markPerfUpdate, + experimentalMarkRendering, ...other } = props; @@ -131,7 +131,7 @@ export const useLineChartProps = (props: LineChartProps) => { slotProps, onItemClick: onMarkClick, skipAnimation, - perfUpdate: markPerfUpdate, + experimentalRendering: experimentalMarkRendering, }; const overlayProps: ChartsOverlayProps = { diff --git a/test/performance-charts/tests/LineChart.bench.tsx b/test/performance-charts/tests/LineChart.bench.tsx index dfd5d2ba8836..6b58a45e65b6 100644 --- a/test/performance-charts/tests/LineChart.bench.tsx +++ b/test/performance-charts/tests/LineChart.bench.tsx @@ -32,7 +32,7 @@ describe('LineChart', () => { ]} width={500} height={300} - markPerfUpdate + experimentalMarkRendering />, ); From 2df8e3045721a494181ac31e37709e0cc68f181f Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 11 Sep 2024 11:15:20 +0200 Subject: [PATCH 08/10] docs:api --- docs/pages/x/api/charts/line-chart-pro.json | 2 +- docs/pages/x/api/charts/line-chart.json | 2 +- docs/pages/x/api/charts/mark-plot.json | 2 +- .../api-docs/charts/line-chart-pro/line-chart-pro.json | 6 +++--- .../translations/api-docs/charts/line-chart/line-chart.json | 6 +++--- docs/translations/api-docs/charts/mark-plot/mark-plot.json | 6 +++--- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 5fb52fb8f436..51abfb3bb0db 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -26,6 +26,7 @@ "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, "disableLineItemHighlight": { "type": { "name": "bool" } }, + "experimentalMarkRendering": { "type": { "name": "bool" } }, "grid": { "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" } }, @@ -48,7 +49,6 @@ }, "default": "object Depends on the charts type." }, - "experimentalMarkRendering": { "type": { "name": "bool" } }, "onAreaClick": { "type": { "name": "func" } }, "onAxisClick": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 16ed39d38fc4..9fa4d4ef823b 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -26,6 +26,7 @@ "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, "disableLineItemHighlight": { "type": { "name": "bool" } }, + "experimentalMarkRendering": { "type": { "name": "bool" } }, "grid": { "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" } }, @@ -48,7 +49,6 @@ }, "default": "object Depends on the charts type." }, - "experimentalMarkRendering": { "type": { "name": "bool" } }, "onAreaClick": { "type": { "name": "func" } }, "onAxisClick": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index f800225bffb0..1495fd7d03d7 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -1,5 +1,6 @@ { "props": { + "experimentalRendering": { "type": { "name": "bool" }, "default": "false" }, "onItemClick": { "type": { "name": "func" }, "signature": { @@ -7,7 +8,6 @@ "describedArgs": ["event", "lineItemIdentifier"] } }, - "experimentalRendering": { "type": { "name": "bool" }, "default": "false" }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json index 0ae084583ca6..dd0182cc0818 100644 --- a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json +++ b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json @@ -18,6 +18,9 @@ "disableLineItemHighlight": { "description": "If true, render the line highlight item." }, + "experimentalMarkRendering": { + "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." + }, "grid": { "description": "Option to display a cartesian grid in the background." }, "height": { "description": "The height of the chart in px. If not defined, it takes the height of the parent element." @@ -32,9 +35,6 @@ "margin": { "description": "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." }, - "experimentalMarkRendering": { - "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." - }, "onAreaClick": { "description": "Callback fired when an area element is clicked." }, "onAxisClick": { "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index c8514e18e7f6..efe9d5f8cf90 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -18,6 +18,9 @@ "disableLineItemHighlight": { "description": "If true, render the line highlight item." }, + "experimentalMarkRendering": { + "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." + }, "grid": { "description": "Option to display a cartesian grid in the background." }, "height": { "description": "The height of the chart in px. If not defined, it takes the height of the parent element." @@ -32,9 +35,6 @@ "margin": { "description": "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." }, - "experimentalMarkRendering": { - "description": "If true marks will render <circle /> instead of <path /> and drop theme override for faster rendering." - }, "onAreaClick": { "description": "Callback fired when an area element is clicked." }, "onAxisClick": { "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", diff --git a/docs/translations/api-docs/charts/mark-plot/mark-plot.json b/docs/translations/api-docs/charts/mark-plot/mark-plot.json index e099e5f111dd..4e5a009bf7d5 100644 --- a/docs/translations/api-docs/charts/mark-plot/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot/mark-plot.json @@ -1,6 +1,9 @@ { "componentDescription": "", "propDescriptions": { + "experimentalRendering": { + "description": "If true the mark element will only be able to render circle. Giving fewer customization options, but saving around 40ms per 1.000 marks." + }, "onItemClick": { "description": "Callback fired when a line mark item is clicked.", "typeDescriptions": { @@ -8,9 +11,6 @@ "lineItemIdentifier": "The line mark item identifier." } }, - "experimentalRendering": { - "description": "If true the mark element will only be able to render circle. Giving fewer customization options, but saving around 40ms per 1.000 marks." - }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } From 35899aa35688553af9b494d594c3427966b42aae Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 11 Sep 2024 20:34:23 +0200 Subject: [PATCH 09/10] fix import --- packages/x-charts/src/LineChart/CircleMarkElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx index f8bd5adcd9da..e8fd3726fe3b 100644 --- a/packages/x-charts/src/LineChart/CircleMarkElement.tsx +++ b/packages/x-charts/src/LineChart/CircleMarkElement.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useTheme } from '@mui/material/styles'; +import { warnOnce } from '@mui/x-internals/warning'; import { animated, useSpring } from '@react-spring/web'; import { InteractionContext } from '../context/InteractionProvider'; import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; import { useItemHighlighted } from '../context'; import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses'; -import { warnOnce } from '../internals/warning'; export type CircleMarkElementProps = Omit & Omit, 'ref' | 'id'> & { From 344aa4487a7eae226030599f5e354d5c15c5bb9a Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 11 Sep 2024 20:48:31 +0200 Subject: [PATCH 10/10] rsc:build --- packages/x-charts/src/LineChart/CircleMarkElement.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx index e8fd3726fe3b..584c15bab4d8 100644 --- a/packages/x-charts/src/LineChart/CircleMarkElement.tsx +++ b/packages/x-charts/src/LineChart/CircleMarkElement.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import { useTheme } from '@mui/material/styles';