[docs][charts] Docs refinement (mui#9499)

alexfauquette · Jun 30, 2023 · d27fcda · d27fcda
1 parent 5c5762f
commit d27fcda
Show file tree

Hide file tree

Showing 22 changed files with 57 additions and 53 deletions.
diff --git a/docs/data/charts/areas-demo/areas-demo.md b/docs/data/charts/areas-demo/areas-demo.md
@@ -9,16 +9,16 @@ title: Charts - Areas demonstration
 
 ## SimpleAreaChart
 
-{{"demo": "SimpleAreaChart.js", "bg": "inline"}}
+{{"demo": "SimpleAreaChart.js"}}
 
 ## StackedAreaChart
 
-{{"demo": "StackedAreaChart.js", "bg": "inline"}}
+{{"demo": "StackedAreaChart.js"}}
 
 ## TinyAreaChart
 
-{{"demo": "TinyAreaChart.js", "bg": "inline"}}
+{{"demo": "TinyAreaChart.js"}}
 
 ## PercentAreaChart
 
-{{"demo": "PercentAreaChart.js", "bg": "inline"}}
+{{"demo": "PercentAreaChart.js"}}
diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md
@@ -23,7 +23,7 @@ But one uses a linear, and the other a log axis.
 Each axis definition is identified by its property `id`.
 And series specify the axis they use with `xAxisKey` and `yAxisKey` properties.
 
-{{"demo": "ScaleExample.js", "bg": "inline"}}
+{{"demo": "ScaleExample.js"}}
 
 :::info
 The management of those ids is for advanced use cases, such as charts with multiple axes.
@@ -66,7 +66,7 @@ To show a specific range of values, you can provide properties `min` and/or `max
 xAxis={[{ min: 10, max: 50, }]}
 ```
 
-{{"demo": "MinMaxExample.js", "bg": "inline"}}
+{{"demo": "MinMaxExample.js"}}
 
 ## Axis customization
 
@@ -81,7 +81,7 @@ Those pros can accept three type of value:
 - `string` which should correspond to the id of a `xAxis` for top and bottom. Or to the id of a `yAxis` for left and right.
 - `object` which will be passed as props to `<XAxis />` or `<YAxis />`. It allows to specify which axis should be represent, and to customize the design of the axis.
 
-{{"demo": "ModifyAxisPosition.js", "bg": "inline"}}
+{{"demo": "ModifyAxisPosition.js"}}
 
 ### Rendering
 
@@ -99,4 +99,4 @@ Those components require an `axisId` prop to link them to an axis you defined in
 You can choose their position with `position` props which accept `'top'`/`'bottom'` for `<XAxis />` and `'left'`/`'right'` for `<YAxis />`.
 Other props are similar to the ones defined in the [previous section](/x/react-charts/axis/#rendering).
 
-{{"demo": "AxisWithComposition.js", "bg": "inline"}}
+{{"demo": "AxisWithComposition.js"}}
diff --git a/docs/data/charts/bar-demo/bar-demo.md b/docs/data/charts/bar-demo/bar-demo.md
@@ -9,24 +9,24 @@ title: Charts - Bar demonstration
 
 ## TinyBarChart
 
-{{"demo": "TinyBarChart.js", "bg": "inline"}}
+{{"demo": "TinyBarChart.js"}}
 
 ## SimpleBarChart
 
-{{"demo": "SimpleBarChart.js", "bg": "inline"}}
+{{"demo": "SimpleBarChart.js"}}
 
 ## StackedBarChart
 
-{{"demo": "StackedBarChart.js", "bg": "inline"}}
+{{"demo": "StackedBarChart.js"}}
 
 ## MixedBarChart
 
-{{"demo": "MixedBarChart.js", "bg": "inline"}}
+{{"demo": "MixedBarChart.js"}}
 
 ## BarChartStackedBySign
 
-{{"demo": "BarChartStackedBySign.js", "bg": "inline"}}
+{{"demo": "BarChartStackedBySign.js"}}
 
 ## BiaxialBarChart
 
-{{"demo": "BiaxialBarChart.js", "bg": "inline"}}
+{{"demo": "BiaxialBarChart.js"}}
diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md
@@ -14,14 +14,14 @@ Bar charts series should contain a `data` property containing an array of values
 You can customize bar ticks with the `xAxis`.
 This axis might have `scaleType='band'` and its `data` should have the same length as your series.
 
-{{"demo": "BasicBars.js", "bg": "inline"}}
+{{"demo": "BasicBars.js"}}
 
 ## Stacking
 
 Each bar series can get a `stack` property expecting a string value.
 Series with the same `stack` will be stacked on top of each other.
 
-{{"demo": "StackBars.js", "bg": "inline"}}
+{{"demo": "StackBars.js"}}
 
 ### Stacking strategy
 

diff --git a/docs/data/charts/legend/legend.md b/docs/data/charts/legend/legend.md
@@ -11,7 +11,7 @@ title: Charts - Legend
 
 In chart components, the legend links series with `label` properties and their color.
 
-{{"demo": "BasicLegend.js", "bg": "inline"}}
+{{"demo": "BasicLegend.js"}}
 
 ## Placement
 
@@ -26,7 +26,7 @@ The `position` places the legend just next to the drawing area, and offset value
 
 Defaults are such that the legend is placed on top of the charts.
 
-{{"demo": "LegendCustomizationNoSnap.js", "bg": "inline"}}
+{{"demo": "LegendCustomizationNoSnap.js", "hideToolbar": true, "bg": "inline", "disableAd": true}}
 
 ## Dimensions
 
@@ -37,4 +37,4 @@ The dimension of the legend is defined by some CSS variables:
 - `--ChartsLegend-labelSpacing`: The space between the mark and the label.
 - `--ChartsLegend-rootSpacing`: The space between two series.
 
-{{"demo": "DimensionsNoSnap.js", "bg": "inline"}}
+{{"demo": "DimensionsNoSnap.js", "hideToolbar": true, "bg": "inline", "disableAd": true}}
diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md
@@ -9,16 +9,16 @@ title: Charts - Line demonstration
 
 ## SimpleLineChart
 
-{{"demo": "SimpleLineChart.js", "bg": "inline"}}
+{{"demo": "SimpleLineChart.js"}}
 
 ## TinyLineChart
 
-{{"demo": "TinyLineChart.js", "bg": "inline"}}
+{{"demo": "TinyLineChart.js"}}
 
 ## DashedLineChart
 
-{{"demo": "DashedLineChart.js", "bg": "inline"}}
+{{"demo": "DashedLineChart.js"}}
 
 ## BiaxialLineChart
 
-{{"demo": "BiaxialLineChart.js", "bg": "inline"}}
+{{"demo": "BiaxialLineChart.js"}}
diff --git a/docs/data/charts/lines/CSSCustomization.js b/docs/data/charts/lines/CSSCustomization.js
@@ -97,8 +97,9 @@ export default function CSSCustomization() {
  area: true,
  },
  ]}
+ margin={{ left: 60, top: 10, right: 20 }}
  width={600}
- height={400}
+ height={300}
  >
  <defs>
  <linearGradient id="myGradient" gradientTransform="rotate(90)">

diff --git a/docs/data/charts/lines/CSSCustomization.tsx b/docs/data/charts/lines/CSSCustomization.tsx
@@ -97,8 +97,9 @@ export default function CSSCustomization() {
  area: true,
  },
  ]}
+ margin={{ left: 60, top: 10, right: 20 }}
  width={600}
- height={400}
+ height={300}
  >
  <defs>
  <linearGradient id="myGradient" gradientTransform="rotate(90)">

diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md
@@ -17,20 +17,20 @@ This `data` array corresponds to y values.
 By default, those y values will be associated with integers starting from 0 (0, 1, 2, 3, ...).
 To modify the x values, you should provide a `xAxis` with data property.
 
-{{"demo": "BasicLineChart.js", "bg": "inline"}}
+{{"demo": "BasicLineChart.js"}}
 
 ### Area
 
 You can fill the area of the line by setting the series' `area` property to `true`.
 
-{{"demo": "BasicArea.js", "bg": "inline"}}
+{{"demo": "BasicArea.js"}}
 
 ## Stacking
 
 Each line series can get a `stack` property which expects a string value.
 Series with the same `stack` will be stacked on top of each other.
 
-{{"demo": "StackedAreas.js", "bg": "inline"}}
+{{"demo": "StackedAreas.js"}}
 
 ### Stacking strategy
 
@@ -47,7 +47,7 @@ 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", "bg": "inline"}}
+{{"demo": "InterpolationDemo.js", "hideToolbar": true, "bg": "inline", "disableAd": true}}
 
 ### CSS
 
@@ -75,4 +75,4 @@ sx={{
 }}
 ```
 
-{{"demo": "CSSCustomization.js", "bg": "inline"}}
+{{"demo": "CSSCustomization.js"}}
diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md
@@ -7,7 +7,9 @@ title: Charts - Overview
 
 <p class="description">This page groups general topics that are common to multiple charts.</p>
 
-> ⚠️ This library is in the alpha phase. This means it might receive some breaking changes if they are needed to improve the components.
+:::warning
+⚠️ This library is in the alpha phase. This means it might receive some breaking changes if they are needed to improve the components.
+:::
 
 ## Overview
 
@@ -45,15 +47,15 @@ Those components' name ends with "Chart" and only require the `series` prop, des
 
 They also have plenty of other props to customize the chart behavior.
 
-{{"demo": "SimpleCharts.js", "bg": "inline"}}
+{{"demo": "SimpleCharts.js"}}
 
 ### Multiple charts
 
 To combine different charts, like lines with bars, you can use composition with `<ChartContainer />` wrapper.
 
 Inside this wrapper, you can render `<XAxis />`, `<YAxis />`, or any plot component (`<BarPlot />`, `<LinePlot />`, `<AreaPlot />`, `<ScatterPlot />`)
 
-{{"demo": "Combining.js", "bg": "inline"}}
+{{"demo": "Combining.js"}}
 
 ## Axis management
 

diff --git a/docs/data/charts/scatter-demo/scatter-demo.md b/docs/data/charts/scatter-demo/scatter-demo.md
@@ -9,8 +9,8 @@ title: Charts - Scatter demonstration
 
 ## SimpleScatterChart
 
-{{"demo": "SimpleScatterChart.js", "bg": "inline"}}
+{{"demo": "SimpleScatterChart.js"}}
 
 ## MultipleYAxesScatterChart
 
-{{"demo": "MultipleYAxesScatterChart.js", "bg": "inline"}}
+{{"demo": "MultipleYAxesScatterChart.js"}}
diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
@@ -12,7 +12,7 @@ title: Charts - Scatter
 Scatter chart series should contain a `data` property containing an array of objects.
 Those objects require `x`, `y`, and `id` properties.
 
-{{"demo": "BasicScatter.js", "bg": "inline"}}
+{{"demo": "BasicScatter.js"}}
 
 ## Styling
 

diff --git a/docs/data/charts/stacking/StackOrderDemo.js b/docs/data/charts/stacking/StackOrderDemo.js
@@ -74,7 +74,7 @@ const xAxis = {
 
 const series = [
  { label: 'Car', data: car, stack: 'total' },
- { label: 'Common Transportation', data: commonTransportation, stack: 'total' },
+ { label: 'Public T.', data: commonTransportation, stack: 'total' },
  { label: 'Motorcycle', data: motorcycle, stack: 'total' },
  { label: 'Walk', data: walking, stack: 'total' },
  { label: 'Bike', data: biking, stack: 'total' },
@@ -127,6 +127,7 @@ export default function StackOrderDemo() {
  transform: 'translateY(15px)',
  },
  },
+ '--ChartsLegend-itemWidth': '110px',
  }}
  />
  </Box>

diff --git a/docs/data/charts/stacking/StackOrderDemo.tsx b/docs/data/charts/stacking/StackOrderDemo.tsx
@@ -69,7 +69,7 @@ const xAxis = {
 
 const series = [
  { label: 'Car', data: car, stack: 'total' },
- { label: 'Common Transportation', data: commonTransportation, stack: 'total' },
+ { label: 'Public T.', data: commonTransportation, stack: 'total' },
  { label: 'Motorcycle', data: motorcycle, stack: 'total' },
  { label: 'Walk', data: walking, stack: 'total' },
  { label: 'Bike', data: biking, stack: 'total' },
@@ -122,6 +122,7 @@ export default function StackOrderDemo() {
  transform: 'translateY(15px)',
  },
  },
+ '--ChartsLegend-itemWidth': '110px',
  }}
  />
  </Box>

diff --git a/docs/data/charts/stacking/stacking.md b/docs/data/charts/stacking/stacking.md
@@ -31,7 +31,7 @@ Otherwise, the stacked rectangle will overlap.
 
 To show series evolution relative to other stacked series (instead of their absolute values), you can use `'expand'`.
 
-| value | description |
+| Value | Description |
 | :------------ | :-------------------------------------------------------- |
 | `'none'` | Set baseline at 0 and stack data on top of each other. |
 | `'expand'` | Set baseline at zero and scale data to end up at 1. |
@@ -61,7 +61,7 @@ With `'appearance'`, the position of the maximal series value is taken into cons
 With `'ascending'` and `'descending'`, the sum of values is taken into consideration.
 Which corresponds to the area taken by the series on the chart.
 
-| value | description |
+| Value | Description |
 | :------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
 | `'none'` | Respect the order the series are provided in. |
 | `'reverse'` | Reverse the order the series are provided in. |

diff --git a/docs/data/charts/styling/styling.md b/docs/data/charts/styling/styling.md
@@ -17,7 +17,7 @@ Series accepts a property `color` which is the base color used to render its com
 <LineChart series={[{ ..., color: '#fdb462'}]} />
 ```
 
-{{"demo": "BasicColor.js", "bg": "inline"}}
+{{"demo": "BasicColor.js"}}
 
 ### Color palette
 
@@ -31,7 +31,7 @@ This prop takes an array of colors, or callback whose input is the theme's mode
 
 The library includes three palettes.
 
-{{"demo": "MuiColorTemplate.js", "bg": "inline"}}
+{{"demo": "MuiColorTemplate.js"}}
 
 #### Custom palettes
 
@@ -40,7 +40,7 @@ Or any color manipulation library you like.
 
 Here is an example of the d3 Categorical color palette.
 
-{{"demo": "ColorTemplate.js", "bg": "inline"}}
+{{"demo": "ColorTemplate.js"}}
 
 ## Styling
 

diff --git a/docs/data/charts/tooltip/ElementHighlights.js b/docs/data/charts/tooltip/ElementHighlights.js
@@ -168,7 +168,6 @@ export default function ElementHighlights() {
  <FormControlLabel
  control={
  <Switch
- defaultChecked
  checked={withArea}
  onChange={(event) => setWithArea(event.target.checked)}
  />

diff --git a/docs/data/charts/tooltip/ElementHighlights.tsx b/docs/data/charts/tooltip/ElementHighlights.tsx
@@ -166,7 +166,6 @@ export default function ElementHighlights() {
  <FormControlLabel
  control={
  <Switch
- defaultChecked
  checked={withArea}
  onChange={(event) => setWithArea(event.target.checked)}
  />

diff --git a/docs/data/charts/tooltip/Interaction.js b/docs/data/charts/tooltip/Interaction.js
@@ -22,7 +22,7 @@ const barChartsParams = {
 export default function Interaction() {
  return (
  <Box>
- <Stack direction={{ xs: 'column', md: 'row' }}>
+ <Stack direction="column">
  <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
  <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
  </Stack>

diff --git a/docs/data/charts/tooltip/Interaction.tsx b/docs/data/charts/tooltip/Interaction.tsx
@@ -22,7 +22,7 @@ const barChartsParams = {
 export default function Interaction() {
  return (
  <Box>
- <Stack direction={{ xs: 'column', md: 'row' }}>
+ <Stack direction="column">
  <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
  <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
  </Stack>

diff --git a/docs/data/charts/tooltip/Interaction.tsx.preview b/docs/data/charts/tooltip/Interaction.tsx.preview
@@ -1,4 +1,4 @@
-<Stack direction={{ xs: 'column', md: 'row' }}>
+<Stack direction="column">
  <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
  <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
 </Stack>