diff --git a/docs/data/charts/line-demo/CustomLineMarks.js b/docs/data/charts/line-demo/CustomLineMarks.js new file mode 100644 index 0000000000000..5c36b4448533f --- /dev/null +++ b/docs/data/charts/line-demo/CustomLineMarks.js @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function CustomLineMarks() { + return ( + index % 2 === 0, + }, + { + data: uData, + label: 'uv', + shape: 'diamond', + showMark: ({ index }) => index % 2 === 0, + }, + ]} + xAxis={[{ scaleType: 'point', data: xLabels }]} + /> + ); +} diff --git a/docs/data/charts/line-demo/CustomLineMarks.tsx b/docs/data/charts/line-demo/CustomLineMarks.tsx new file mode 100644 index 0000000000000..5c36b4448533f --- /dev/null +++ b/docs/data/charts/line-demo/CustomLineMarks.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; +const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; +const xLabels = [ + 'Page A', + 'Page B', + 'Page C', + 'Page D', + 'Page E', + 'Page F', + 'Page G', +]; + +export default function CustomLineMarks() { + return ( + index % 2 === 0, + }, + { + data: uData, + label: 'uv', + shape: 'diamond', + showMark: ({ index }) => index % 2 === 0, + }, + ]} + xAxis={[{ scaleType: 'point', data: xLabels }]} + /> + ); +} diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md index e74ae9c5cadec..fd9141a2d5d2e 100644 --- a/docs/data/charts/line-demo/line-demo.md +++ b/docs/data/charts/line-demo/line-demo.md @@ -43,3 +43,10 @@ To do so, the `slots.line` is set with a custom components that render the defau - The second one is clipped to show predictions (from the limit to the right of the chart) with dash styling. {{"demo": "LineWithPrediction.js"}} + +## CustomLineMarks + +Notice that using another shape than "circle" renders a `` instead of the `` for mark elements. +This modification implies a small drop of rendering performances (around +50ms to render 1.000 marks). + +{{"demo": "CustomLineMarks.js"}} diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md index 68df47f3abe3e..566f62d77c6a8 100644 --- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md +++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md @@ -148,6 +148,15 @@ If you used axes in a pie chart please open an issue, we would be curious to get The `resolveSizeBeforeRender` prop has been removed from all components. If you were using this prop, you can safely remove it. +## Remove `experimentalMarkRendering` prop ✅ + +The `experimentalMarkRendering` prop has been removed from the LineChart component. +The line mark are now `` element by default. +And you can chose another shape by adding a `shape` property to your line series. + +The codemod only removes the `experimentalMarkRendering` prop. +If you relied on the fact that marks were `path` elements, you need to update your logic. + ## Rename `labelFontSize` and `tickFontSize` props ✅ The `labelFontSize` and `tickFontSize` props have been removed in favor of the style objects `labelStyle` and `tickStyle` respectively. diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 83f6174cd1b0c..c91338467a4f6 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -26,7 +26,6 @@ "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 }" } }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 2fbaa24f937ff..a3797c7c394c2 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -26,7 +26,6 @@ "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 }" } }, diff --git a/docs/pages/x/api/charts/line-series-type.json b/docs/pages/x/api/charts/line-series-type.json index 605b9697736aa..53141b8ebfcd1 100644 --- a/docs/pages/x/api/charts/line-series-type.json +++ b/docs/pages/x/api/charts/line-series-type.json @@ -20,6 +20,12 @@ "type": { "description": "string | ((location: 'tooltip' | 'legend') => string)" } }, "labelMarkType": { "type": { "description": "ChartsLabelMarkProps['type']" } }, + "shape": { + "type": { + "description": "'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'" + }, + "default": "'circle'" + }, "showMark": { "type": { "description": "boolean | ((params: ShowMarkParams) => boolean)" } }, "stack": { "type": { "description": "string" } }, "stackOffset": { "type": { "description": "StackOffsetType" }, "default": "'none'" }, diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index 1495fd7d03d75..f38a9e1044bb8 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -1,6 +1,5 @@ { "props": { - "experimentalRendering": { "type": { "name": "bool" }, "default": "false" }, "onItemClick": { "type": { "name": "func" }, "signature": { 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 827d16ab4cd1c..7fabb29d713e1 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,9 +18,6 @@ "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." 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 efd9317f9eb43..5a07ad76387aa 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -18,9 +18,6 @@ "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." diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json index 7855b3617b0ab..7bbab7f06299a 100644 --- a/docs/translations/api-docs/charts/line-series-type.json +++ b/docs/translations/api-docs/charts/line-series-type.json @@ -26,6 +26,9 @@ "labelMarkType": { "description": "Defines the mark type for the series.

There is a default mark type for each series type.

It allows custom values which will be passed to the mark component if it was customized." }, + "shape": { + "description": "The shape of the mark elements.
Using 'circle' renders a &lt;circle /&gt; element, while all other options render a &lt;path /&gt; instead. The path causes a small decrease in performance." + }, "showMark": { "description": "Define which items of the series should display a mark.
If can be a boolean that applies to all items.
Or a callback that gets some item properties and returns true if the item should be displayed." }, 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 4e5a009bf7d54..521be58519194 100644 --- a/docs/translations/api-docs/charts/mark-plot/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot/mark-plot.json @@ -1,9 +1,6 @@ { "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": { diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index b56f0cc3ff725..79020713fc3b6 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -104,12 +104,6 @@ MarkPlotZoom.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. @@ -246,10 +240,6 @@ 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. */ diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx index 47986228c3d15..f72a11dff750a 100644 --- a/packages/x-charts/src/LineChart/CircleMarkElement.tsx +++ b/packages/x-charts/src/LineChart/CircleMarkElement.tsx @@ -2,7 +2,6 @@ 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 { useInteractionItemProps } from '../hooks/useInteractionItemProps'; import { useItemHighlighted } from '../context'; @@ -13,10 +12,6 @@ import { useStore } from '../internals/store/useStore'; 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 @@ -50,19 +45,9 @@ function CircleMarkElement(props: CircleMarkElementProps) { 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 \`experimentalRendering=true\`.`, - 'Only "circle" are supported with `experimentalRendering`.', - ].join('\n'), - 'error', - ); - } const theme = useTheme(); const getInteractionItemProps = useInteractionItemProps(); const { isFaded, isHighlighted } = useItemHighlighted({ diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index b6887f8937299..341f031c27b8d 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -111,10 +111,6 @@ export interface LineChartProps * @default false */ skipAnimation?: boolean; - /** - * If `true` marks will render `` instead of `` and drop theme override for faster rendering. - */ - experimentalMarkRendering?: boolean; } /** @@ -226,10 +222,6 @@ 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. */ diff --git a/packages/x-charts/src/LineChart/LineHighlightElement.tsx b/packages/x-charts/src/LineChart/LineHighlightElement.tsx index 695b090368d87..289eeed2b4c66 100644 --- a/packages/x-charts/src/LineChart/LineHighlightElement.tsx +++ b/packages/x-charts/src/LineChart/LineHighlightElement.tsx @@ -1,11 +1,13 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape'; 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 { SeriesId } from '../models/seriesType/common'; +import { getSymbol } from '../internals/getSymbol'; export interface LineHighlightElementClasses { /** Styles applied to the root element. */ @@ -40,7 +42,7 @@ const useUtilityClasses = (ownerState: LineHighlightElementOwnerState) => { return composeClasses(slots, getHighlightElementUtilityClass, classes); }; -const HighlightElement = styled('circle', { +const HighlightPathElement = styled('path', { name: 'MuiHighlightElement', slot: 'Root', overridesResolver: (_, styles) => styles.root, @@ -50,8 +52,22 @@ const HighlightElement = styled('circle', { fill: ownerState.color, })); -export type LineHighlightElementProps = LineHighlightElementOwnerState & - Omit, 'ref' | 'id'>; +const HighlightCircleElement = styled('circle', { + name: 'MuiHighlightElement', + slot: 'Root', + overridesResolver: (_, styles) => styles.root, +})<{ ownerState: LineHighlightElementOwnerState }>(({ ownerState }) => ({ + transform: `translate(${ownerState.x}px, ${ownerState.y}px)`, + transformOrigin: `${ownerState.x}px ${ownerState.y}px`, + fill: ownerState.color, +})); + +export type LineHighlightElementProps = + | (LineHighlightElementOwnerState & + ({ shape: 'circle' } & Omit, 'ref' | 'id'>)) + | (LineHighlightElementOwnerState & { + shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'; + } & Omit, 'ref' | 'id'>); /** * Demos: @@ -64,7 +80,7 @@ export type LineHighlightElementProps = LineHighlightElementOwnerState & * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/) */ function LineHighlightElement(props: LineHighlightElementProps) { - const { x, y, id, classes: innerClasses, color, ...other } = props; + const { x, y, id, classes: innerClasses, color, shape, ...other } = props; const ownerState = { id, @@ -75,14 +91,20 @@ function LineHighlightElement(props: LineHighlightElementProps) { }; const classes = useUtilityClasses(ownerState); + const Element = shape === 'circle' ? HighlightCircleElement : HighlightPathElement; + + const additionalProps = + shape === 'circle' + ? { cx: 0, cy: 0, r: other.r === undefined ? 5 : other.r } + : { + d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()!, + }; return ( - ); @@ -95,6 +117,8 @@ LineHighlightElement.propTypes = { // ---------------------------------------------------------------------- classes: PropTypes.object, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']) + .isRequired, } as any; export { LineHighlightElement }; diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx index d51de6a7ecbf7..d4d194a4edd31 100644 --- a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx +++ b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx @@ -80,6 +80,7 @@ function LineHighlightPlot(props: LineHighlightPlotProps) { stackedData, data, disableHighlight, + shape = 'circle', } = series[seriesId]; if (disableHighlight || data[highlightedIndex] == null) { @@ -114,6 +115,7 @@ function LineHighlightPlot(props: LineHighlightPlotProps) { color={colorGetter(highlightedIndex)} x={x} y={y} + shape={shape} {...slotProps?.lineHighlight} /> ); diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 7731eba6392fb..1fe8606b72409 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -44,12 +44,6 @@ export interface MarkPlotProps event: React.MouseEvent, lineItemIdentifier: LineItemIdentifier, ) => void; - /** - * 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?: boolean; } /** @@ -63,14 +57,7 @@ export interface MarkPlotProps * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/) */ function MarkPlot(props: MarkPlotProps) { - const { - slots, - slotProps, - skipAnimation: inSkipAnimation, - onItemClick, - experimentalRendering, - ...other - } = props; + const { slots, slotProps, skipAnimation: inSkipAnimation, onItemClick, ...other } = props; const skipAnimation = useSkipAnimation(inSkipAnimation); const seriesData = useLineSeries(); @@ -78,8 +65,6 @@ function MarkPlot(props: MarkPlotProps) { const chartId = useChartId(); const drawingArea = useDrawingArea(); - const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement); - if (seriesData === undefined) { return null; } @@ -98,6 +83,7 @@ function MarkPlot(props: MarkPlotProps) { stackedData, data, showMark = true, + shape = 'circle', } = series[seriesId]; if (showMark === false) { @@ -122,6 +108,8 @@ function MarkPlot(props: MarkPlotProps) { const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]); + const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement); + return ( {xData @@ -161,7 +149,7 @@ function MarkPlot(props: MarkPlotProps) { key={`${seriesId}-${index}`} id={seriesId} dataIndex={index} - shape="circle" + shape={shape} color={colorGetter(index)} x={x} y={y!} // Don't know why TS doesn't get from the filter that y can't be null @@ -188,12 +176,6 @@ 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. diff --git a/packages/x-charts/src/LineChart/checkClickEvent.test.tsx b/packages/x-charts/src/LineChart/checkClickEvent.test.tsx index 79f1297706e2f..b1006cbc823ed 100644 --- a/packages/x-charts/src/LineChart/checkClickEvent.test.tsx +++ b/packages/x-charts/src/LineChart/checkClickEvent.test.tsx @@ -85,7 +85,7 @@ describe('LineChart - click event', () => { onMarkClick={() => {}} />, ); - const marks = document.querySelectorAll('path.MuiMarkElement-root'); + const marks = document.querySelectorAll('.MuiMarkElement-root'); expect(Array.from(marks).map((mark) => mark.getAttribute('cursor'))).to.deep.equal([ 'pointer', @@ -122,7 +122,7 @@ describe('LineChart - click event', () => { , ); - const marks = document.querySelectorAll('path.MuiMarkElement-root'); + const marks = document.querySelectorAll('.MuiMarkElement-root'); fireEvent.click(marks[0]); expect(onMarkClick.lastCall.args[1]).to.deep.equal({ diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 09f084b96b962..49c6b84c0ed5d 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -55,7 +55,6 @@ export const useLineChartProps = (props: LineChartProps) => { highlightedItem, onHighlightChange, className, - experimentalMarkRendering, ...other } = props; @@ -130,7 +129,6 @@ export const useLineChartProps = (props: LineChartProps) => { slotProps, onItemClick: onMarkClick, skipAnimation, - experimentalRendering: experimentalMarkRendering, }; const overlayProps: ChartsOverlayProps = { diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts index 298d95b30cac6..b2477ea62628d 100644 --- a/packages/x-charts/src/models/seriesType/line.ts +++ b/packages/x-charts/src/models/seriesType/line.ts @@ -72,6 +72,12 @@ export interface LineSeriesType * Or a callback that gets some item properties and returns true if the item should be displayed. */ showMark?: boolean | ((params: ShowMarkParams) => boolean); + /** + * The shape of the mark elements. + * Using 'circle' renders a `` element, while all other options render a `` instead. The path causes a small decrease in performance. + * @default 'circle' + */ + shape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'; /** * Do not render the line highlight item if set to `true`. * @default false diff --git a/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/actual.spec.tsx new file mode 100644 index 0000000000000..2e76e09eb69f5 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/actual.spec.tsx @@ -0,0 +1,13 @@ +// @ts-nocheck +import * as React from 'react'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { LineChart, MarkPlot } from '@mui/x-charts/LineChart'; +import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; + +
+ + + + + +
; diff --git a/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/expected.spec.tsx new file mode 100644 index 0000000000000..b6a11d282a097 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/expected.spec.tsx @@ -0,0 +1,13 @@ +// @ts-nocheck +import * as React from 'react'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { LineChart, MarkPlot } from '@mui/x-charts/LineChart'; +import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; + +
+ + + + + +
; diff --git a/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/index.ts b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/index.ts new file mode 100644 index 0000000000000..d44b552ac65c0 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/index.ts @@ -0,0 +1,17 @@ +import removeProps from '../../../util/removeProps'; +import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; + +const componentNames = ['LineChart', 'LineChartPro', 'MarkPlot']; +const props = ['experimentalMarkRendering']; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + const j = api.jscodeshift; + const root = j(file.source); + + const printOptions = options.printOptions || { + quote: 'single', + trailingComma: true, + }; + + return removeProps({ root, j, props, componentNames }).toSource(printOptions); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/remove-experimental-mark-rendering.test.ts b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/remove-experimental-mark-rendering.test.ts new file mode 100644 index 0000000000000..26b9f364307c5 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/remove-experimental-mark-rendering/remove-experimental-mark-rendering.test.ts @@ -0,0 +1,38 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from '.'; +import readFile from '../../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('v8.0.0/charts', () => { + describe('remove-experimental-mark-rendering', () => { + const actualPath = `./actual.spec.tsx`; + const expectedPath = `./expected.spec.tsx`; + + it('transforms imports as needed', () => { + const actual = transform( + { source: read(actualPath) }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read(expectedPath); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read(expectedPath) }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read(expectedPath); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts index 0d3f4daddffaa..9a30655959da8 100644 --- a/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts +++ b/packages/x-codemod/src/v8.0.0/charts/rename-label-and-tick-font-size/rename-label-and-tick-font-size.test.ts @@ -9,7 +9,7 @@ function read(fileName) { } describe('v8.0.0/charts', () => { - describe('rename-label-and-tick-font-size.test', () => { + describe('rename-label-and-tick-font-size', () => { const actualPath = `./actual.spec.tsx`; const expectedPath = `./expected.spec.tsx`; diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/rename-responsive-chart-container.test.ts b/packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/rename-responsive-chart-container.test.ts index 152d1750ccd88..9ab2e4a9f5584 100644 --- a/packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/rename-responsive-chart-container.test.ts +++ b/packages/x-codemod/src/v8.0.0/charts/rename-responsive-chart-container/rename-responsive-chart-container.test.ts @@ -11,7 +11,7 @@ function read(fileName) { const TEST_FILES = ['nested-imports', 'root-imports']; describe('v8.0.0/charts', () => { - describe('rename-responsive-chart-container.test', () => { + describe('rename-responsive-chart-container', () => { TEST_FILES.forEach((testFile) => { const actualPath = `./actual-${testFile}.spec.tsx`; const expectedPath = `./expected-${testFile}.spec.tsx`; diff --git a/test/performance-charts/tests/LineChart.bench.tsx b/test/performance-charts/tests/LineChart.bench.tsx index 81b63a0238e3b..4f18e8a7ff6e3 100644 --- a/test/performance-charts/tests/LineChart.bench.tsx +++ b/test/performance-charts/tests/LineChart.bench.tsx @@ -28,7 +28,6 @@ describe('LineChart', () => { ]} width={500} height={300} - experimentalMarkRendering />, );