[charts] Replace legend.position.horizontal from `"left" | "middle"…

… | "right"` to `"start" | "center" | "end"` (#16315)

Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

docs/data/charts/bars/BorderRadius.js

@@ -78,7 +78,7 @@ const chartSettingsH = {
   slotProps: {
     legend: {
       direction: 'horizontal',
-      position: { vertical: 'bottom', horizontal: 'middle' },
+      position: { vertical: 'bottom', horizontal: 'center' },
     },
   },
 };

docs/data/charts/bars/BorderRadius.tsx

@@ -80,7 +80,7 @@ const chartSettingsH: Partial<BarChartProps> = {
   slotProps: {
     legend: {
       direction: 'horizontal',
-      position: { vertical: 'bottom', horizontal: 'middle' },
+      position: { vertical: 'bottom', horizontal: 'center' },
     },
   },
 };

docs/data/charts/legend/LegendPositionNoSnap.js

@@ -42,8 +42,8 @@ export default function LegendPositionNoSnap() {
         {
           propName: 'horizontal',
           knob: 'select',
-          defaultValue: 'middle',
-          options: ['left', 'middle', 'right'],
+          defaultValue: 'center',
+          options: ['start', 'center', 'end'],
         },
         {
           propName: 'itemsNumber',
@@ -54,7 +54,7 @@ export default function LegendPositionNoSnap() {
         },
       ]}
       renderDemo={(
-        /** @type {{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "left" | "middle" | "right"; }} */
+        /** @type {{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "start" | "center" | "end"; }} */
         props,
       ) => (
         <PieChart
@@ -74,7 +74,7 @@ export default function LegendPositionNoSnap() {
         />
       )}
       getCode={(
-        /** @type {{props:{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "left" | "middle" | "right";}}} */
+        /** @type {{props:{ itemsNumber: number | undefined; direction: "horizontal" | "vertical";  vertical: "top" | "middle" | "bottom"; horizontal: "start" | "center" | "end";}}} */
         { props },
       ) => {
         return `

docs/data/charts/styling/ColorTemplate.js

@@ -30,7 +30,7 @@ const legendPlacement = {
     legend: {
       position: {
         vertical: 'middle',
-        horizontal: 'right',
+        horizontal: 'end',
       },
       direction: 'vertical',
     },

docs/data/charts/styling/ColorTemplate.tsx

@@ -34,7 +34,7 @@ const legendPlacement: Partial<ScatterChartProps> = {
     legend: {
       position: {
         vertical: 'middle',
-        horizontal: 'right',
+        horizontal: 'end',
       },
       direction: 'vertical',
     },

docs/data/migration/migration-charts-v7/migration-charts-v7.md

@@ -107,6 +107,33 @@ The `direction` prop of the legend has been changed to accept `'vertical'` and `
  />
 ```
 
+## Legend position value change ✅
+
+Replace `"left" | "middle" | "right"` values with `"start" | "center" | "end"` respectively.
+This is to align with the CSS values and reflect the RTL ability of the legend component.
+
+```diff
+ <BarChart
+    slotProps={{
+      legend: {
+        position: {
+-          horizontal: "left",
++          horizontal: "start",
+        }
+      }
+    }}
+ />
+```
+
+## Rename `LegendPosition` type to `Position` ✅
+
+Renames `LegendPosition` to `Position`.
+
+```diff
+-import { LegendPosition } from '@mui/x-charts/ChartsLegend';
++import { Position } from '@mui/x-charts/models';
+```
+
 ## The `getSeriesToDisplay` function was removed
 
 The `getSeriesToDisplay` function was removed in favor of the `useLegend` hook. You can check the [HTML Components example](/x/react-charts/components/#html-components) for usage information.

packages/x-charts/src/ChartsLegend/legend.types.ts

@@ -1,19 +1,10 @@
-export type LegendPosition = {
-  /**
-   * The vertical position of the legend.
-   */
-  vertical?: 'top' | 'middle' | 'bottom';
-  /**
-   * The horizontal position of the legend.
-   */
-  horizontal?: 'left' | 'middle' | 'right';
-};
+import { Position } from '../models/position';
 
 export type ChartsLegendPosition = {
   /**
    * The position of the legend in relation to the chart.
    * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
    * If customization is needed, simply use the composition pattern.
    */
-  position?: LegendPosition;
+  position?: Position;
 };

packages/x-charts/src/internals/calculateMargins.ts

@@ -20,7 +20,7 @@ export const calculateMargins = <
   }
 
   if (props.slotProps?.legend?.direction === 'vertical') {
-    if (props.slotProps?.legend?.position?.horizontal === 'left') {
+    if (props.slotProps?.legend?.position?.horizontal === 'start') {
       return {
         ...DEFAULT_MARGINS,
         left: DEFAULT_LEGEND_FACING_MARGIN,

packages/x-charts/src/internals/components/ChartsWrapper/ChartsWrapper.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { styled, SxProps, Theme } from '@mui/material/styles';
-import { Direction, LegendPosition } from '../../../ChartsLegend';
+import { Direction } from '../../../ChartsLegend';
+import { Position } from '../../../models';
 
 export interface ChartsWrapperProps {
   // eslint-disable-next-line react/no-unused-prop-types
-  legendPosition?: LegendPosition;
+  legendPosition?: Position;
   // eslint-disable-next-line react/no-unused-prop-types
   legendDirection?: Direction;
   children: React.ReactNode;
   sx?: SxProps<Theme>;
 }
 
-const getDirection = (direction?: Direction, position?: LegendPosition) => {
+const getDirection = (direction?: Direction, position?: Position) => {
   if (direction === 'vertical') {
-    if (position?.horizontal === 'left') {
+    if (position?.horizontal === 'start') {
       return 'row';
     }
 
@@ -27,7 +28,7 @@ const getDirection = (direction?: Direction, position?: LegendPosition) => {
   return 'column';
 };
 
-const getAlign = (direction?: Direction, position?: LegendPosition) => {
+const getAlign = (direction?: Direction, position?: Position) => {
   if (direction === 'vertical') {
     if (position?.vertical === 'top') {
       return 'flex-start';
@@ -39,11 +40,11 @@ const getAlign = (direction?: Direction, position?: LegendPosition) => {
   }
 
   if (direction === 'horizontal') {
-    if (position?.horizontal === 'left') {
+    if (position?.horizontal === 'start') {
       return 'flex-start';
     }
 
-    if (position?.horizontal === 'right') {
+    if (position?.horizontal === 'end') {
       return 'flex-end';
     }
   }

packages/x-charts/src/models/index.ts

@@ -11,4 +11,5 @@ export type {
 
 // Utils shared across the X packages
 export type { PropsFromSlot } from '@mui/x-internals/slots';
+export type { Position } from './position';
 export type { CurveType } from './curve';

packages/x-charts/src/models/position.ts

@@ -0,0 +1,10 @@
+export type Position = {
+  /**
+   * The vertical position.
+   */
+  vertical?: 'top' | 'middle' | 'bottom';
+  /**
+   * The horizontal position.
+   */
+  horizontal?: 'start' | 'center' | 'end';
+};

packages/x-codemod/README.md

@@ -173,6 +173,24 @@ Replace `row` and `column` values by `horizontal` and `vertical` respectively.
  />
 ```
 
+#### `replace-legend-position-values`
+
+Replace `"left" | "middle" | "right"` values `"start" | "center" | "end"` respectively.
+This is to align with the CSS values and reflect the RTL ability of the legend component.
+
+```diff
+ <BarChart
+    slotProps={{
+      legend: {
+        position: {
+-          horizontal: "left",
++          horizontal: "start",
+        }
+      }
+    }}
+ />
+```
+
 #### `rename-responsive-chart-container`
 
 Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8.
@@ -188,6 +206,15 @@ Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartCo
 +</ChartContainer>
 ```
 
+#### `rename-legend-position-type`
+
+Renames `LegendPosition` to `Position`.
+
+```diff
+-import { LegendPosition } from '@mui/x-charts/ChartsLegend';
++import { Position } from '@mui/x-charts/models';
+```
+
 > [!WARNING]
 > If you imported both `ResponsiveChartContainer` and `ChartContainer` in the same file, you might end up with duplicated import.
 > Verify the git diff to remove the duplicate.

packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx

@@ -2,8 +2,10 @@
 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 { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { LegendPosition } from '@mui/x-charts/ChartsLegend';
 
 // prettier-ignore
 <div>
@@ -25,7 +27,12 @@ import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
     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>;

packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx

@@ -2,8 +2,10 @@
 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 { ChartContainer } from '@mui/x-charts/ChartContainer';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { Position } from '@mui/x-charts/models';
 
 // prettier-ignore
 <div>
@@ -44,6 +46,7 @@ import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
       fontWeight: 'bold',
       fontSize: 12
     }} />
+  <LineChart series={[{}]} />
   <BarChart
     slotProps={{
       legend: {
@@ -53,8 +56,12 @@ import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
   <BarChart
     slotProps={{
       legend: {
-        position: { vertical: 'top', horizontal: 'middle' },
-        direction: "vertical"
+        direction: "vertical",
+
+        position: {
+          vertical: 'top',
+          horizontal: "center"
+        }
       }
     }} />
   <BarChart
@@ -63,4 +70,40 @@ import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
         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>;

packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts

@@ -2,15 +2,20 @@ 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 { 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 = 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);
 
   return file.source;
 }

packages/x-codemod/src/v8.0.0/charts/rename-legend-position-type/actual-nested-imports.spec.tsx

@@ -0,0 +1,5 @@
+import { LegendPosition } from '@mui/x-charts/ChartsLegend';
+
+const legendPosition: LegendPosition = {};
+type LegendPositionType = {} & LegendPosition;
+interface LegendPositionProps extends LegendPosition {}

packages/x-codemod/src/v8.0.0/charts/rename-legend-position-type/actual-root-imports.spec.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable no-restricted-imports */
+import { LegendPosition } from '@mui/x-charts';
+import { LegendPosition as LegendPositionPro } from '@mui/x-charts-pro';
+
+const legendPosition: LegendPosition = {};
+type LegendPositionType = {} & LegendPosition;
+interface LegendPositionProps extends LegendPosition {}
+
+const legendPositionPro: LegendPositionPro = {};
+type LegendPositionProType = {} & LegendPositionPro;
+interface LegendPositionProProps extends LegendPositionPro {}

packages/x-codemod/src/v8.0.0/charts/rename-legend-position-type/expected-nested-imports.spec.tsx

@@ -0,0 +1,5 @@
+import { Position } from '@mui/x-charts/models';
+
+const legendPosition: Position = {};
+type LegendPositionType = {} & Position;
+interface LegendPositionProps extends Position {}

packages/x-codemod/src/v8.0.0/charts/rename-legend-position-type/expected-root-imports.spec.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable no-restricted-imports */
+import { Position } from '@mui/x-charts';
+import { Position as LegendPositionPro } from '@mui/x-charts-pro';
+
+const legendPosition: Position = {};
+type LegendPositionType = {} & Position;
+interface LegendPositionProps extends Position {}
+
+const legendPositionPro: LegendPositionPro = {};
+type LegendPositionProType = {} & LegendPositionPro;
+interface LegendPositionProProps extends LegendPositionPro {}