[charts][docs] Add small improvements to the Gauge page (#12076)

docs/data/charts/gauge/ArcPlaygroundNoSnap.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
 import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
 
 export default function ArcPlaygroundNoSnap() {
@@ -50,9 +50,9 @@ export default function ArcPlaygroundNoSnap() {
         },
       ]}
       renderDemo={(props) => (
-        <Paper
+        <Box
           sx={{
-            width: 200,
+            width: '100%',
             height: 200,
             margin: 'auto',
           }}
@@ -67,21 +67,21 @@ export default function ArcPlaygroundNoSnap() {
             innerRadius={`${props.innerRadius}%`}
             outerRadius={`${props.outerRadius}%`}
           />
-        </Paper>
+        </Box>
       )}
       getCode={({ props }) => {
         const { innerRadius, outerRadius, ...numberProps } = props;
         return [
           `import { Gauge } from '@mui/x-charts/Gauge';`,
           '',
           `<Gauge`,
-          `  // ...`,
           ...Object.entries(numberProps).map(
             ([name, value]) => `  ${name}={${value}}`,
           ),
           ...Object.entries({ innerRadius, outerRadius }).map(
             ([name, value]) => `  ${name}="${value}%"`,
           ),
+          `  // ...`,
           '/>',
         ].join('\n');
       }}

docs/data/charts/gauge/TextPlaygroundNoSnap.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
 import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
 
 export default function TextPlaygroundNoSnap() {
@@ -42,11 +42,12 @@ export default function TextPlaygroundNoSnap() {
         },
       ]}
       renderDemo={(props) => (
-        <Paper
+        <Box
           sx={{
-            width: 300,
+            width: '100%',
             height: 200,
             margin: 'auto',
+            mb: 4,
           }}
         >
           <Gauge
@@ -61,7 +62,7 @@ export default function TextPlaygroundNoSnap() {
             value={props.value}
             text={({ value, valueMax }) => `${value} / ${valueMax}`}
           />
-        </Paper>
+        </Box>
       )}
       getCode={({ props }) => {
         return [

docs/data/charts/gauge/gauge.md

@@ -13,7 +13,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/meter/
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
-## Basic gauge
+## Basics
 
 The Gauge displays a numeric value that varies within a defined range.
 
@@ -28,15 +28,15 @@ To modify it, use the `valueMin` and `valueMax` props.
 
 ## Arcs configuration
 
-You can modify the arc shape with the following props:
+Modify the arc shape with the following props:
 
 - `startAngle` and `endAngle`: The angle range provided in degrees
-- `innerRadius` and `outerRadius`: The arc's radii. It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius.
-- `cornerRadius`: It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius.
+- `innerRadius` and `outerRadius`: The arc's radii. It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius
+- `cornerRadius`: It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius
 
-{{"demo": "ArcPlaygroundNoSnap.js"}}
+{{"demo": "ArcPlaygroundNoSnap.js", "bg": "playground", "hideToolbar": true }}
 
-:::info
+:::success
 Notice that the arc position is computed to let the Gauge chart take as much space as possible in the drawing area.
 
 Use the `cx` and/or `cy` props to fix the coordinate of the arc center.
@@ -52,7 +52,7 @@ In the second case, the formatter argument contains the `value`, `valueMin` and
 
 To modify the text's layout, use the `gaugeClasses.valueText` class name.
 
-{{"demo": "TextPlaygroundNoSnap.js"}}
+{{"demo": "TextPlaygroundNoSnap.js", "bg": "playground", "hideToolbar": true}}
 
 ## Arc design
 
@@ -80,9 +80,9 @@ import { Gauge } from '@mui/x-charts/Gauge';
 
 The second option is to make use of the following elements that are available within the Gauge module:
 
-- GaugeReferenceArc
-- GaugeValueArc
-- GaugeValueText
+- Gauge Reference Arc
+- Gauge Value Arc
+- Gauge Value Text
 
 ```tsx
 import {
@@ -103,11 +103,11 @@ import {
 
 To create your own components, use the `useGaugeState` hook which provides all you need about the gauge configuration:
 
-- information about the value: `value`, `valueMin`, `valueMax`;
-- information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy`;
+- information about the value: `value`, `valueMin`, `valueMax`
+- information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy`
 - computed values:
-  - `maxRadius` the maximal radius that can fit the drawing area;
-  - `valueAngle` the angle associated with the current value.
+  - `maxRadius`: the maximal radius that can fit the drawing area
+  - `valueAngle`: the angle associated with the current value
 
 {{"demo": "CompositionExample.js"}}
 
@@ -118,7 +118,7 @@ The MUI X Gauge chart is compliant with the [Meter ARIA pattern](https://www.w3.
 ### Label
 
 If a visible label is available, reference it by adding `aria-labelledby` attribute.
-Otherwise, the label can be provided by `aria-label`.
+Otherwise, the label can be manually provided by `aria-label`.
 
 ### Presentation
 

docs/data/pages.ts

@@ -407,7 +407,6 @@ const pages: MuiPage[] = [
               { pathname: '/x/react-charts/bar-demo', title: 'Demos' },
             ],
           },
-          { pathname: '/x/react-charts/gauge', title: 'Gauge' },
           {
             pathname: '/x/react-charts-lines',
             title: 'Lines',
@@ -437,6 +436,7 @@ const pages: MuiPage[] = [
             pathname: '/x/react-charts/sparkline',
             title: 'Sparkline',
           },
+          { pathname: '/x/react-charts/gauge', title: 'Gauge' },
           {
             pathname: '/x/api/charts-group',
             title: 'API Reference',

docs/src/modules/components/ChartComponentsGrid.js

@@ -124,7 +124,7 @@ export default function ChartComponentsGrid() {
                 opacity: component.planned ? 0.4 : 1,
                 filter: component.planned ? 'grayscale(100%)' : undefined,
                 ...theme.applyDarkStyles({
-                  opacity: component.planned ? 0.2 : 1,
+                  opacity: component.planned ? 0.4 : 1,
                   content: `url(${component.srcDark})`,
                   background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
                 }),