Stabilize useSeries hooks.

Cherry-picked from mui#15545
bernardobelchior · Feb 4, 2025 · 9ced267 · 9ced267
1 parent 919dd36
commit 9ced267
Show file tree

Hide file tree

Showing 12 changed files with 194 additions and 211 deletions.
diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md
@@ -19,9 +19,6 @@ In `package.json`, change the version of the charts package to `next`.
 ```diff
 -"@mui/x-charts": "^7.0.0",
 +"@mui/x-charts": "next",
-
--"@mui/x-charts-pro": "^7.0.0",
-+"@mui/x-charts-pro": "next",
 ```
 
 Using `next` ensures that it will always use the latest v8 pre-release version, but you can also use a fixed version, like `8.0.0-alpha.0`.
@@ -191,54 +188,21 @@ 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 `<circle />` 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.
-
-## Replacing `useHighlighted` by `useItemHighlighted` and `useItemHighlightedGetter`
-
-The `useHighlighted` hook that gave access to the internal highlight state has been removed.
-
-To know if your item is highlighted, it is recommended to use the `useItemHighlighted` hook instead:
-
-```jsx
-const { isFaded, isHighlighted } = useItemHighlighted({
-  seriesId,
-  dataIndex,
-});
-```
-
-If you're in a case where you have multiple series id to test (for example in the tooltip), you can use the lower level hook `useItemHighlightedGetter`.
-This hook being lower level only test is the item match with the highlight or fade scope.
-So an item could at the same time have `isFaded` and `isHighlighted` returning `true`.
-
-```jsx
-const { isFaded, isHighlighted } = useItemHighlightedGetter();
-
-const itemIsHighlighted = isHighlighted({ seriesId, dataIndex });
-
-// First make sure the item is not highlighted.
-const itemIsFaded = !itemIsHighlighted && isFaded({ seriesId, dataIndex });
-```
-
-## Rename `labelFontSize` and `tickFontSize` props ✅
+## Stabilize `useSeries` and `useXxxSeries` hooks ✅
 
-The `labelFontSize` and `tickFontSize` props have been removed in favor of the style objects `labelStyle` and `tickStyle` respectively.
+The `useSeries` hook family has been stabilized and renamed accordingly.
 
 ```diff
-  <ChartsXAxis
--   labelFontSize={18}
-+   labelStyle={{
-+     fontSize: 18
-+   }}
--   tickFontSize={20}
-+   tickStyle={{
-+     fontSize: 20
-+   }}
-  />
+  import {
+-   unstable_useSeries,
++   useSeries,
+-   unstable_usePieSeries,
++   usePieSeries,
+-   unstable_useLineSeries,
++   useLineSeries,
+-   unstable_useBarSeries,
++   useBarSeries,
+-   unstable_useScatterSeries,
++   useScatterSeries,
+  } from '@mui/x-charts/hooks';
 ```
diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md
@@ -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

diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx
@@ -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>;
+}
diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx
@@ -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>;
+}
diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts
@@ -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;
 }
diff --git a/...ges/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx b/...ges/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx
@@ -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();
+}
diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx
@@ -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();
+}
diff --git a/...s/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx b/...s/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx
@@ -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();
+}