[docs] Use charts classes objects (#12781)

mui · Apr 15, 2024 · b540a36 · b540a36
1 parent 93e7245
commit b540a36
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 33 deletions.
diff --git a/docs/data/charts/areas-demo/AreaChartFillByValue.js b/docs/data/charts/areas-demo/AreaChartFillByValue.js
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { green, red } from '@mui/material/colors';
 import Stack from '@mui/material/Stack';
 import { useYScale, useDrawingArea } from '@mui/x-charts/hooks';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
 
 const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
 const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
@@ -43,7 +43,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-1)',
           },
         }}
@@ -64,7 +64,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-2)',
           },
         }}

diff --git a/docs/data/charts/areas-demo/AreaChartFillByValue.tsx b/docs/data/charts/areas-demo/AreaChartFillByValue.tsx
@@ -3,7 +3,7 @@ import { ScaleLinear } from 'd3-scale';
 import { green, red } from '@mui/material/colors';
 import Stack from '@mui/material/Stack';
 import { useYScale, useDrawingArea } from '@mui/x-charts/hooks';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';
 
 const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
 const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
@@ -50,7 +50,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-1)',
           },
         }}
@@ -71,7 +71,7 @@ export default function AreaChartFillByValue() {
         height={200}
         margin={{ top: 20, bottom: 30, left: 75 }}
         sx={{
-          '& .MuiAreaElement-root': {
+          [`& .${areaElementClasses.root}`]: {
             fill: 'url(#swich-color-id-2)',
           },
         }}

diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.js b/docs/data/charts/areas-demo/SimpleAreaChart.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [
@@ -20,7 +20,7 @@ export default function SimpleAreaChart() {
       series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx b/docs/data/charts/areas-demo/SimpleAreaChart.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const xLabels = [
@@ -20,7 +20,7 @@ export default function SimpleAreaChart() {
       series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview b/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview
@@ -4,7 +4,7 @@
   series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
   xAxis={[{ scaleType: 'point', data: xLabels }]}
   sx={{
-    '.MuiLineElement-root': {
+    [`& .${lineElementClasses.root}`]: {
       display: 'none',
     },
   }}

diff --git a/docs/data/charts/areas-demo/StackedAreaChart.js b/docs/data/charts/areas-demo/StackedAreaChart.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
@@ -32,7 +32,7 @@ export default function StackedAreaChart() {
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/areas-demo/StackedAreaChart.tsx b/docs/data/charts/areas-demo/StackedAreaChart.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
@@ -32,7 +32,7 @@ export default function StackedAreaChart() {
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           display: 'none',
         },
       }}

diff --git a/docs/data/charts/line-demo/DashedLineChart.js b/docs/data/charts/line-demo/DashedLineChart.js
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import {
+  LineChart,
+  lineElementClasses,
+  markElementClasses,
+} from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
@@ -24,7 +28,7 @@ export default function DashedLineChart() {
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root, .MuiMarkElement-root': {
+        [`.${lineElementClasses.root}, .${markElementClasses.root}`]: {
           strokeWidth: 1,
         },
         '.MuiLineElement-series-pvId': {
@@ -33,10 +37,10 @@ export default function DashedLineChart() {
         '.MuiLineElement-series-uvId': {
           strokeDasharray: '3 4 5 2',
         },
-        '.MuiMarkElement-root:not(.MuiMarkElement-highlighted)': {
+        [`.${markElementClasses.root}:not(.${markElementClasses.highlighted})`]: {
           fill: '#fff',
         },
-        '& .MuiMarkElement-highlighted': {
+        [`& .${markElementClasses.highlighted}`]: {
           stroke: 'none',
         },
       }}

diff --git a/docs/data/charts/line-demo/DashedLineChart.tsx b/docs/data/charts/line-demo/DashedLineChart.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import {
+  LineChart,
+  lineElementClasses,
+  markElementClasses,
+} from '@mui/x-charts/LineChart';
 
 const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
@@ -24,7 +28,7 @@ export default function DashedLineChart() {
       ]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root, .MuiMarkElement-root': {
+        [`.${lineElementClasses.root}, .${markElementClasses.root}`]: {
           strokeWidth: 1,
         },
         '.MuiLineElement-series-pvId': {
@@ -33,10 +37,10 @@ export default function DashedLineChart() {
         '.MuiLineElement-series-uvId': {
           strokeDasharray: '3 4 5 2',
         },
-        '.MuiMarkElement-root:not(.MuiMarkElement-highlighted)': {
+        [`.${markElementClasses.root}:not(.${markElementClasses.highlighted})`]: {
           fill: '#fff',
         },
-        '& .MuiMarkElement-highlighted': {
+        [`& .${markElementClasses.highlighted}`]: {
           stroke: 'none',
         },
       }}

diff --git a/docs/data/charts/line-demo/TinyLineChart.js b/docs/data/charts/line-demo/TinyLineChart.js
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { ChartContainer } from '@mui/x-charts';
-import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
+import {
+  LinePlot,
+  MarkPlot,
+  lineElementClasses,
+  markElementClasses,
+} from '@mui/x-charts/LineChart';
 
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
 const xLabels = [
@@ -21,11 +26,11 @@ export default function TinyLineChart() {
       series={[{ type: 'line', data: pData }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           stroke: '#8884d8',
           strokeWidth: 2,
         },
-        '.MuiMarkElement-root': {
+        [`& .${markElementClasses.root}`]: {
           stroke: '#8884d8',
           scale: '0.6',
           fill: '#fff',

diff --git a/docs/data/charts/line-demo/TinyLineChart.tsx b/docs/data/charts/line-demo/TinyLineChart.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { ChartContainer } from '@mui/x-charts';
-import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
+import {
+  LinePlot,
+  MarkPlot,
+  lineElementClasses,
+  markElementClasses,
+} from '@mui/x-charts/LineChart';
 
 const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
 const xLabels = [
@@ -21,11 +26,11 @@ export default function TinyLineChart() {
       series={[{ type: 'line', data: pData }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
       sx={{
-        '.MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           stroke: '#8884d8',
           strokeWidth: 2,
         },
-        '.MuiMarkElement-root': {
+        [`& .${markElementClasses.root}`]: {
           stroke: '#8884d8',
           scale: '0.6',
           fill: '#fff',

diff --git a/docs/data/charts/lines/CSSCustomization.js b/docs/data/charts/lines/CSSCustomization.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const years = [
   new Date(1990, 0, 1),
@@ -58,7 +58,7 @@ export default function CSSCustomization() {
   return (
     <LineChart
       sx={{
-        '& .MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           strokeDasharray: '10 5',
           strokeWidth: 4,
         },

diff --git a/docs/data/charts/lines/CSSCustomization.tsx b/docs/data/charts/lines/CSSCustomization.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
+import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
 
 const years = [
   new Date(1990, 0, 1),
@@ -58,7 +58,7 @@ export default function CSSCustomization() {
   return (
     <LineChart
       sx={{
-        '& .MuiLineElement-root': {
+        [`& .${lineElementClasses.root}`]: {
           strokeDasharray: '10 5',
           strokeWidth: 4,
         },