From c73fe82b9b7ae47480c905657b96090e14440d59 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Wed, 23 Aug 2023 15:43:48 +0200
Subject: [PATCH] [docs] Address charts docs feedback (#10119)

---
 docs/data/charts/legend/DimensionsNoSnap.js   |  2 +-
 .../legend/LegendCustomizationNoSnap.js       |  2 +-
 docs/data/charts/lines/InterpolationDemo.tsx  | 48 -------------------
 ...tionDemo.js => InterpolationDemoNoSnap.js} | 14 +++++-
 docs/data/charts/lines/lines.md               |  5 +-
 5 files changed, 19 insertions(+), 52 deletions(-)
 delete mode 100644 docs/data/charts/lines/InterpolationDemo.tsx
 rename docs/data/charts/lines/{InterpolationDemo.js => InterpolationDemoNoSnap.js} (73%)

diff --git a/docs/data/charts/legend/DimensionsNoSnap.js b/docs/data/charts/legend/DimensionsNoSnap.js
index b303e053c727..7752737248c0 100644
--- a/docs/data/charts/legend/DimensionsNoSnap.js
+++ b/docs/data/charts/legend/DimensionsNoSnap.js
@@ -82,7 +82,7 @@ export default function DimensionsNoSnap() {
           `<ScatterChart`,
           '  {/** ... */}',
           '  legend={{',
-          `    directon: "${props.direction}"`,
+          `    direction: "${props.direction}"`,
           '  }}',
           '  sx={{',
           ...[
diff --git a/docs/data/charts/legend/LegendCustomizationNoSnap.js b/docs/data/charts/legend/LegendCustomizationNoSnap.js
index afb3ffc57868..ac46041150c3 100644
--- a/docs/data/charts/legend/LegendCustomizationNoSnap.js
+++ b/docs/data/charts/legend/LegendCustomizationNoSnap.js
@@ -86,7 +86,7 @@ export default function LegendCustomizationNoSnap() {
           '  margin={{ top: 70, bottom: 70, left: 100, right:100 }}',
           '  {/** ... */}',
           '  legend={{',
-          `    directon: "${props.direction}"`,
+          `    direction: "${props.direction}"`,
           '    position: {',
           `      vertical: "${props.vertical}",`,
           `      horizontal: "${props.horizontal}"`,
diff --git a/docs/data/charts/lines/InterpolationDemo.tsx b/docs/data/charts/lines/InterpolationDemo.tsx
deleted file mode 100644
index 7dae4b6350c9..000000000000
--- a/docs/data/charts/lines/InterpolationDemo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-import { LineChart } from '@mui/x-charts/LineChart';
-import { CurveType } from '@mui/x-charts/models';
-
-const curveTypes: CurveType[] = [
-  'catmullRom',
-  'linear',
-  'monotoneX',
-  'monotoneY',
-  'natural',
-  'step',
-  'stepBefore',
-  'stepAfter',
-];
-
-export default function InterpolationDemo() {
-  const [curveType, setCurveType] = React.useState<CurveType>('linear');
-
-  return (
-    <Box sx={{ p: 2, width: 1, maxWidth: 600 }}>
-      <TextField
-        select
-        label="interpolation method"
-        value={curveType}
-        sx={{ minWidth: 200, mb: 2 }}
-        onChange={(event) => setCurveType(event.target.value as CurveType)}
-      >
-        {curveTypes.map((curve) => (
-          <MenuItem key={curve} value={curve}>
-            {curve}
-          </MenuItem>
-        ))}
-      </TextField>
-      <LineChart
-        xAxis={[{ data: [1, 3, 5, 6, 7, 9], min: 0, max: 10 }]}
-        series={[
-          { curve: curveType, data: [0, 5, 2, 6, 3, 9.3] },
-          { curve: curveType, data: [6, 3, 7, 9.5, 4, 2] },
-        ]}
-        height={300}
-        margin={{ top: 10, bottom: 30 }}
-      />
-    </Box>
-  );
-}
diff --git a/docs/data/charts/lines/InterpolationDemo.js b/docs/data/charts/lines/InterpolationDemoNoSnap.js
similarity index 73%
rename from docs/data/charts/lines/InterpolationDemo.js
rename to docs/data/charts/lines/InterpolationDemoNoSnap.js
index 71cc402daf00..9ee64cc05e75 100644
--- a/docs/data/charts/lines/InterpolationDemo.js
+++ b/docs/data/charts/lines/InterpolationDemoNoSnap.js
@@ -4,6 +4,8 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { LineChart } from '@mui/x-charts/LineChart';
 
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+
 const curveTypes = [
   'catmullRom',
   'linear',
@@ -15,7 +17,16 @@ const curveTypes = [
   'stepAfter',
 ];
 
-export default function InterpolationDemo() {
+function getExample(curveType) {
+  return `<LineChart
+  series={[
+    { curve: "${curveType}", data: [0, 5, 2, 6, 3, 9.3] },
+    { curve: "${curveType}", data: [6, 3, 7, 9.5, 4, 2] },
+  ]}
+  {/* ... */}
+/>`;
+}
+export default function InterpolationDemoNoSnap() {
   const [curveType, setCurveType] = React.useState('linear');
 
   return (
@@ -42,6 +53,7 @@ export default function InterpolationDemo() {
         height={300}
         margin={{ top: 10, bottom: 30 }}
       />
+      <HighlightedCode code={getExample(curveType)} language="tsx" />
     </Box>
   );
 }
diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md
index a1ee7f32eca9..ab300ed717bf 100644
--- a/docs/data/charts/lines/lines.md
+++ b/docs/data/charts/lines/lines.md
@@ -59,7 +59,10 @@ For more information, see [stacking docs](/x/react-charts/stacking/).
 The interpolation between data points can be customized by the `curve` property.
 This property expects one of the following string values, corresponding to the interpolation method: `'catmullRom'`, `'linear'`, `'monotoneX'`, `'monotoneY'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`.
 
-{{"demo": "InterpolationDemo.js", "hideToolbar": true, "bg": "inline"}}
+This series property adds the option to control the interpolation of a series.
+Different series could even have different interpolations.
+
+{{"demo": "InterpolationDemoNoSnap.js", "hideToolbar": true, "bg": "inline"}}
 
 ### CSS