From 0cd3b4f63afa8f4e3d4afd016a3e76d5b11d58b5 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 16 Feb 2024 11:51:24 -0300 Subject: [PATCH] [charts][docs] Add small improvements to the Gauge page (#12076) --- docs/data/charts/gauge/ArcPlaygroundNoSnap.js | 10 +++---- .../data/charts/gauge/TextPlaygroundNoSnap.js | 9 +++--- docs/data/charts/gauge/gauge.md | 30 +++++++++---------- docs/data/pages.ts | 2 +- .../modules/components/ChartComponentsGrid.js | 2 +- 5 files changed, 27 insertions(+), 26 deletions(-) diff --git a/docs/data/charts/gauge/ArcPlaygroundNoSnap.js b/docs/data/charts/gauge/ArcPlaygroundNoSnap.js index 5ab80a7592067..f1bc45e892ba2 100644 --- a/docs/data/charts/gauge/ArcPlaygroundNoSnap.js +++ b/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) => ( - - + )} getCode={({ props }) => { const { innerRadius, outerRadius, ...numberProps } = props; @@ -75,13 +75,13 @@ export default function ArcPlaygroundNoSnap() { `import { Gauge } from '@mui/x-charts/Gauge';`, '', ` ` ${name}={${value}}`, ), ...Object.entries({ innerRadius, outerRadius }).map( ([name, value]) => ` ${name}="${value}%"`, ), + ` // ...`, '/>', ].join('\n'); }} diff --git a/docs/data/charts/gauge/TextPlaygroundNoSnap.js b/docs/data/charts/gauge/TextPlaygroundNoSnap.js index aa30b24d6df3a..347be09681fae 100644 --- a/docs/data/charts/gauge/TextPlaygroundNoSnap.js +++ b/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) => ( - `${value} / ${valueMax}`} /> - + )} getCode={({ props }) => { return [ diff --git a/docs/data/charts/gauge/gauge.md b/docs/data/charts/gauge/gauge.md index 8e64e50022d05..d332a02318681 100644 --- a/docs/data/charts/gauge/gauge.md +++ b/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 diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 62529e1d67f83..fc7f2d4ee534b 100644 --- a/docs/data/pages.ts +++ b/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', diff --git a/docs/src/modules/components/ChartComponentsGrid.js b/docs/src/modules/components/ChartComponentsGrid.js index 0e00d7ad80783..272f16bc6ddf4 100644 --- a/docs/src/modules/components/ChartComponentsGrid.js +++ b/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}`, }),