[docs] Address charts docs feedback (#10119)

mui · Aug 23, 2023 · c73fe82 · c73fe82
1 parent 92d10d9
commit c73fe82
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 52 deletions.
diff --git 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
@@ -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
diff --git a/docs/data/charts/lines/InterpolationDemo.js → ...a/charts/lines/InterpolationDemoNoSnap.js b/docs/data/charts/lines/InterpolationDemo.js → ...a/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
@@ -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