Skip to content

Commit

Permalink
Stabilize useSeries hooks.
Browse files Browse the repository at this point in the history
Cherry-picked from mui#15545
  • Loading branch information
bernardobelchior committed Feb 4, 2025
1 parent 919dd36 commit 08b05c4
Show file tree
Hide file tree
Showing 12 changed files with 199 additions and 161 deletions.
19 changes: 19 additions & 0 deletions docs/data/migration/migration-charts-v7/migration-charts-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -242,3 +242,22 @@ The `labelFontSize` and `tickFontSize` props have been removed in favor of the s
+ }}
/>
```

## Stabilize `useSeries` and `useXxxSeries` hooks ✅

The `useSeries` hook family has been stabilized and renamed accordingly.

```diff
import {
- unstable_useSeries,
+ useSeries,
- unstable_usePieSeries,
+ usePieSeries,
- unstable_useLineSeries,
+ useLineSeries,
- unstable_useBarSeries,
+ useBarSeries,
- unstable_useScatterSeries,
+ useScatterSeries,
} from '@mui/x-charts/hooks';
```
19 changes: 19 additions & 0 deletions packages/x-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,25 @@ Remove the `<ChartsOnAxisClickHandler />` and move the associated `onAxisClick`
</ChartContainer>
```

#### `rename-unstable-use-series`

Renames multiple `useSeries` components from their unstable, as they have now become stable.

```diff
import {
- unstable_useSeries,
+ useSeries,
- unstable_usePieSeries,
+ usePieSeries,
- unstable_useLineSeries,
+ useLineSeries,
- unstable_useBarSeries,
+ useBarSeries,
- unstable_useScatterSeries,
+ useScatterSeries,
} from '@mui/x-charts/hooks';
```

### Data Grid codemods

#### `preset-safe` for Data Grid v8.0.0
Expand Down
59 changes: 24 additions & 35 deletions packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,29 @@
// @ts-nocheck
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import { BarPlot, BarChart } from '@mui/x-charts/BarChart';
import { LineChart } from '@mui/x-charts/LineChart';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { LegendPosition } from '@mui/x-charts/ChartsLegend';
import {
unstable_useSeries,
unstable_usePieSeries,
unstable_useLineSeries,
unstable_useBarSeries,
unstable_useScatterSeries,
} from '@mui/x-charts/hooks';

// prettier-ignore
<div>
<PieChart legend={{ hidden: true }} />
<PieChart legend={{ hidden: true }} slotProps={{ tooltip: { trigger: 'axis' } }} />
<ResponsiveChartContainer>
<ChartsOnAxisClickHandler onAxisClick={onAxisClickHandler} />
<BarPlot />
</ResponsiveChartContainer>
<ChartsXAxis labelFontSize={18} tickFontSize={20} />
<ChartsXAxis
labelFontSize={18}
tickFontSize={20}
labelStyle={{ fontWeight: 'bold' }}
tickStyle={{ fontWeight: 'bold' }}
/>
<ChartsXAxis
labelFontSize={18}
tickFontSize={20}
labelStyle={{ fontWeight: 'bold', fontSize: 10 }}
tickStyle={{ fontWeight: 'bold', fontSize: 12 }}
/>
<LineChart series={[{}]} experimentalMarkRendering />
<BarChart slotProps={{ legend: { direction: 'row' } }} />
<BarChart slotProps={{ legend: { direction: 'column', position: { vertical: 'top', horizontal: 'middle' } } }} />
<BarChart slotProps={{ legend: { direction: 'wrong' } }} />
<BarChart legend={{ position: { vertical: 'middle', horizontal: 'left' } }} />
<BarChart slotProps={{ legend: { position: { vertical: 'top', horizontal: 'middle' } } }} />
<BarChart slotProps={{ legend: { position: { vertical: 'bottom', horizontal: 'right' } } }} />
<BarChart slotProps={{ legend: { position: { vertical: 'wrong', horizontal: 'wrong' } } }} />
</div>;
function App() {
const series = unstable_useSeries();
const pieSeries = unstable_usePieSeries();
const lineSeries = unstable_useLineSeries();
const barSeries = unstable_useBarSeries();
const scatterSeries = unstable_useScatterSeries();

// prettier-ignore
<div>
<PieChart legend={{ hidden: true }} />
<PieChart legend={{ hidden: true }} slotProps={{ tooltip: { trigger: 'axis' } }} />
<ResponsiveChartContainer>
<BarPlot />
</ResponsiveChartContainer>
</div>;
}
134 changes: 30 additions & 104 deletions packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,110 +1,36 @@
// @ts-nocheck
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import { BarPlot, BarChart } from '@mui/x-charts/BarChart';
import { LineChart } from '@mui/x-charts/LineChart';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { Position } from '@mui/x-charts/models';
import {
useSeries,
usePieSeries,
useLineSeries,
useBarSeries,
useScatterSeries,
} from '@mui/x-charts/hooks';

// prettier-ignore
<div>
<PieChart
slotProps={{
legend: { hidden: true }
}} />
<PieChart
slotProps={{
tooltip: { trigger: 'axis' },
legend: { hidden: true }
}} />
<ChartContainer onAxisClick={onAxisClickHandler}>
function App() {
const series = useSeries();
const pieSeries = usePieSeries();
const lineSeries = useLineSeries();
const barSeries = useBarSeries();
const scatterSeries = useScatterSeries();

<BarPlot />
</ChartContainer>
<ChartsXAxis
labelStyle={{
fontSize: 18
}}
tickStyle={{
fontSize: 20
}} />
<ChartsXAxis
labelStyle={{
fontWeight: 'bold',
fontSize: 18
}}
tickStyle={{
fontWeight: 'bold',
fontSize: 20
}} />
<ChartsXAxis
labelStyle={{
fontWeight: 'bold',
fontSize: 10
}}
tickStyle={{
fontWeight: 'bold',
fontSize: 12
}} />
<LineChart series={[{}]} />
<BarChart
slotProps={{
legend: {
direction: "horizontal"
}
}} />
<BarChart
slotProps={{
legend: {
direction: "vertical",

position: {
vertical: 'top',
horizontal: "center"
}
}
}} />
<BarChart
slotProps={{
legend: {
direction: 'wrong'
}
}} />
<BarChart
slotProps={{
legend: {
position: {
vertical: 'middle',
horizontal: "start"
}
}
}} />
<BarChart
slotProps={{
legend: {
position: {
vertical: 'top',
horizontal: "center"
}
}
}} />
<BarChart
slotProps={{
legend: {
position: {
vertical: 'bottom',
horizontal: "end"
}
}
}} />
<BarChart
slotProps={{
legend: {
position: {
vertical: 'wrong',
horizontal: 'wrong'
}
}
}} />
</div>;
// prettier-ignore
<div>
<PieChart
slotProps={{
legend: { hidden: true }
}} />
<PieChart
slotProps={{
tooltip: { trigger: 'axis' },
legend: { hidden: true }
}} />
<ChartContainer>
<BarPlot />
</ChartContainer>
</div>;
}
14 changes: 2 additions & 12 deletions packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
import transformLegendToSlots from '../rename-legend-to-slots-legend';
import transformRemoveResponsiveContainer from '../rename-responsive-chart-container';
import transformRenameLabelAndTickFontSize from '../rename-label-and-tick-font-size';
import transformReplaceLegendDirectionValues from '../replace-legend-direction-values';
import transformLegendPositionValues from '../replace-legend-position-values';
import transformRemoveExperimentalMarkRendering from '../remove-experimental-mark-rendering';
import transformRenameLegendPositionType from '../rename-legend-position-type';
import transformReplaceAxisClickHandler from '../remove-on-axis-click-handler';
import transformRenameUnstableUseSeries from '../rename-unstable-use-series';

import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';

export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
file.source = transformLegendToSlots(file, api, options);
file.source = transformRemoveResponsiveContainer(file, api, options);
file.source = transformRenameLabelAndTickFontSize(file, api, options);
file.source = transformReplaceLegendDirectionValues(file, api, options);
file.source = transformLegendPositionValues(file, api, options);
file.source = transformRemoveExperimentalMarkRendering(file, api, options);
file.source = transformRenameLegendPositionType(file, api, options);
file.source = transformReplaceAxisClickHandler(file, api, options);
file.source = transformRenameUnstableUseSeries(file, api, options);

return file.source;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {
unstable_useSeries,
unstable_usePieSeries,
unstable_useLineSeries,
unstable_useBarSeries,
unstable_useScatterSeries,
} from '@mui/x-charts/hooks';

function useThings() {
const series = unstable_useSeries();
const pieSeries = unstable_usePieSeries();
const lineSeries = unstable_useLineSeries();
const barSeries = unstable_useBarSeries();
const scatterSeries = unstable_useScatterSeries();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/* eslint-disable no-restricted-imports */
import {
unstable_useSeries,
unstable_usePieSeries,
unstable_useLineSeries,
unstable_useBarSeries,
unstable_useScatterSeries,
} from '@mui/x-charts';

function useThings() {
const series = unstable_useSeries();
const pieSeries = unstable_usePieSeries();
const lineSeries = unstable_useLineSeries();
const barSeries = unstable_useBarSeries();
const scatterSeries = unstable_useScatterSeries();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {
useSeries,
usePieSeries,
useLineSeries,
useBarSeries,
useScatterSeries,
} from '@mui/x-charts/hooks';

function useThings() {
const series = useSeries();
const pieSeries = usePieSeries();
const lineSeries = useLineSeries();
const barSeries = useBarSeries();
const scatterSeries = useScatterSeries();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/* eslint-disable no-restricted-imports */
import {
useSeries,
usePieSeries,
useLineSeries,
useBarSeries,
useScatterSeries,
} from '@mui/x-charts';

function useThings() {
const series = useSeries();
const pieSeries = usePieSeries();
const lineSeries = useLineSeries();
const barSeries = useBarSeries();
const scatterSeries = useScatterSeries();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
import { renameImports } from '../../../util/renameImports';

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,
wrapColumn: 40,
};

renameImports({
j,
root,
packageNames: ['@mui/x-charts', '@mui/x-charts-pro'],
imports: [
{
oldEndpoint: 'hooks',
importsMapping: {
unstable_useSeries: 'useSeries',
unstable_usePieSeries: 'usePieSeries',
unstable_useLineSeries: 'useLineSeries',
unstable_useBarSeries: 'useBarSeries',
unstable_useScatterSeries: 'useScatterSeries',
},
},
],
});

return root.toSource(printOptions);
}
Loading

0 comments on commit 08b05c4

Please sign in to comment.