diff --git a/docs/data/charts/sparkline/CustomYAxis.js b/docs/data/charts/sparkline/CustomYAxis.js index 6eafce4df02a7..d29283e067962 100644 --- a/docs/data/charts/sparkline/CustomYAxis.js +++ b/docs/data/charts/sparkline/CustomYAxis.js @@ -19,7 +19,7 @@ export default function CustomYAxis() { Without fixed y-range - + @@ -34,7 +34,7 @@ export default function CustomYAxis() { min: 0, max: 100, }} - colors={['red']} + color="red" {...settings} /> diff --git a/docs/data/charts/sparkline/CustomYAxis.tsx b/docs/data/charts/sparkline/CustomYAxis.tsx index 0e9b561c154ba..8727064660ddf 100644 --- a/docs/data/charts/sparkline/CustomYAxis.tsx +++ b/docs/data/charts/sparkline/CustomYAxis.tsx @@ -19,7 +19,7 @@ export default function CustomYAxis() { Without fixed y-range - + @@ -34,7 +34,7 @@ export default function CustomYAxis() { min: 0, max: 100, }} - colors={['red']} + color="red" {...settings} /> 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 21031cda96bb5..909c1e458603f 100644 --- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md +++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md @@ -265,3 +265,22 @@ The `useSeries` hook family has been stabilized and renamed accordingly. + useHeatmapSeries, } from '@mui/x-charts-pro/hooks'; ``` + +## Rename `colors` prop in `SparkLineChart` + +The `colors` prop in `SparkLineChart` has been renamed to `color`. It now accepts a single color or a function that returns a color. + +```diff + +``` + +We provide a codemod to fix simple cases of this change, which you can run as follows: + +```bash +npx @mui/x-codemod@latest v8.0.0/charts/rename-sparkline-colors-to-color +``` + +For more complex cases, you may need to adjust the code manually. To aid you in finding these cases, the codemod adds a comment prefixed by `mui-x-codemod`, which you can search for in your codebase. diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 59f27a48c528a..d099a4cc8f7cc 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -9,12 +9,6 @@ "type": { "name": "union", "description": "func
| string" }, "default": "rainbowSurgePalette[0]" }, - "colors": { - "type": { "name": "union", "description": "Array<string>
| func" }, - "default": "rainbowSurgePalette", - "deprecated": true, - "deprecationInfo": "use the color prop instead" - }, "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, "disableVoronoi": { "type": { "name": "bool" } }, diff --git a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json index 8b491143e2a84..1f2f12372061a 100644 --- a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json +++ b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json @@ -5,7 +5,6 @@ "description": "Set to true to fill spark line area. Has no effect if plotType='bar'." }, "color": { "description": "Color used to colorize the sparkline." }, - "colors": { "description": "Color palette used to colorize multiple series." }, "data": { "description": "Data to plot." }, "dataset": { "description": "An array of objects that can be used to populate series and axes data using their dataKey property." diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 39059f86f4046..bd7de3ac7675f 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -35,7 +35,10 @@ export interface SparkLineChartSlotProps ChartsTooltipSlotProps {} export interface SparkLineChartProps - extends Omit { + extends Omit< + ChartContainerProps, + 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins' | 'colors' + > { /** * The xAxis configuration. * Notice it is a single [[AxisConfig]] object, not an array of configuration. @@ -108,13 +111,6 @@ export interface SparkLineChartProps */ slotProps?: SparkLineChartSlotProps; - /** - * Color palette used to colorize multiple series. - * @default rainbowSurgePalette - * @deprecated use the `color` prop instead - */ - colors?: ChartContainerProps['colors']; - /** * Color used to colorize the sparkline. * @default rainbowSurgePalette[0] @@ -149,7 +145,6 @@ const SparkLineChart = React.forwardRef(function SparkLineChart( height, margin = SPARKLINE_DEFAULT_MARGIN, color, - colors: deprecatedColors, sx, showTooltip, showHighlight, @@ -214,7 +209,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart( ...yAxis, }, ]} - colors={colors ?? deprecatedColors} + colors={colors} sx={sx} disableAxisListener={ (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && @@ -265,12 +260,6 @@ SparkLineChart.propTypes = { * @default rainbowSurgePalette[0] */ color: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - /** - * Color palette used to colorize multiple series. - * @default rainbowSurgePalette - * @deprecated use the `color` prop instead - */ - colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), /** * @default 'linear' */ diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 86f51c94bb243..4763f8e891d89 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -279,6 +279,36 @@ Remove `unstable_` prefix from `useSeries` and `use*Series` hooks, as they have } from '@mui/x-charts-pro/hooks'; ``` +#### `rename-sparkline-colors-to-color` + +Renames the `colors` prop of a `SparkLineChart` to `color` and accesses its first element. + +```diff + +``` + +If `colors` is a function, it will be wrapped in another function that returns its first element. + +```diff + fn(mode)[0] : fn[0]} + /> +``` + +If there are cases that the codemod cannot handle, you should see a comment with a `mui-x-codemod` prefix in the code. + +```diff + (mode === 'light' ? ['black'] : ['white'])} ++ /* mui-x-codemod: We renamed the `colors` prop to `color`, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. */ ++ color={(mode) => (mode === 'light' ? ['black'] : ['white'])} + /> +``` + ### Data Grid codemods #### `preset-safe` for Data Grid v8.0.0 diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/actual.spec.tsx new file mode 100644 index 0000000000000..1bed0bd5c671a --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/actual.spec.tsx @@ -0,0 +1,20 @@ +// @ts-nocheck +/* eslint-disable no-restricted-imports */ +import * as React from 'react'; +import { SparkLineChart } from '@mui/x-charts'; + +const data = [1, 2]; + +function Chart() { + const fn = (mode) => (mode === 'light' ? ['black'] : ['white']); + + // prettier-ignore + return ( + + + + (mode === 'light' ? ['black'] : ['white'])} /> + + + ); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/expected.spec.tsx new file mode 100644 index 0000000000000..7569bd68ee986 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/expected.spec.tsx @@ -0,0 +1,26 @@ +// @ts-nocheck +/* eslint-disable no-restricted-imports */ +import * as React from 'react'; +import { SparkLineChart } from '@mui/x-charts'; + +const data = [1, 2]; + +function Chart() { + const fn = (mode) => (mode === 'light' ? ['black'] : ['white']); + + // prettier-ignore + return ( + ( + + fn(mode)?.[0] : fn} /> + (mode === 'light' ? ['black'] : ['white'])} /> + + ) + ); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/index.ts b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/index.ts new file mode 100644 index 0000000000000..89db0592e5e15 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/index.ts @@ -0,0 +1,80 @@ +import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + const j = api.jscodeshift; + + const printOptions = options.printOptions; + + const root = j(file.source); + const componentNames = ['SparkLineChart']; + const props = { colors: 'color' }; + + const colorAttributes = root + .find(j.JSXElement) + .filter((path) => { + return componentNames.includes((path.value.openingElement.name as any).name); + }) + .find(j.JSXAttribute) + .filter((attribute) => Object.keys(props).includes(attribute.node.name.name as string)); + + return colorAttributes + .forEach((attribute) => { + const colorsAttributeExpression = + attribute.node.value?.type === 'JSXExpressionContainer' + ? attribute.node.value.expression + : null; + + let colorAttributeExpression; + + if (colorsAttributeExpression?.type === 'ArrayExpression') { + colorAttributeExpression = colorsAttributeExpression.elements[0]; + } else if (colorsAttributeExpression?.type === 'Identifier') { + colorAttributeExpression = j.conditionalExpression( + j.binaryExpression( + '===', + j.unaryExpression('typeof', colorsAttributeExpression), + j.literal('function'), + ), + j.arrowFunctionExpression( + [j.identifier('mode')], + j.chainExpression( + j.optionalMemberExpression( + j.callExpression(colorsAttributeExpression, [j.identifier('mode')]), + j.literal(0), + ), + ), + ), + colorsAttributeExpression, + ); + } else { + // Don't know how to handle this case + } + + // Only transform the value if we know how to handle it, otherwise rename the prop and add a comment + if (colorAttributeExpression) { + j(attribute).replaceWith( + j.jsxAttribute( + j.jsxIdentifier(props[attribute.node.name.name as string]), + j.jsxExpressionContainer(colorAttributeExpression), + ), + ); + } else { + j(attribute) + .replaceWith( + j.jsxAttribute( + j.jsxIdentifier(props[attribute.node.name.name as string]), + attribute.node.value, + ), + ) + .insertBefore( + j.commentBlock( + " mui-x-codemod: We renamed the `colors` prop to `color`, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. ", + ), + ); + } + }) + .toSource(printOptions); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/rename-sparkline-colors-to-color.test.ts b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/rename-sparkline-colors-to-color.test.ts new file mode 100644 index 0000000000000..94a5ee5813912 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-sparkline-colors-to-color/rename-sparkline-colors-to-color.test.ts @@ -0,0 +1,27 @@ +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('rename-sparkline-colors-to-color', () => { + it('transforms code as needed', () => { + const actual = transform( + { + source: read('./actual.spec.tsx'), + path: require.resolve('./actual.spec.tsx'), + }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read('./expected.spec.tsx'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +});