[charts] Add Gauge components

[oliviertassinari]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Gauge displays one metric with a bounded scale.

Examples 🌈

Motivation 🔦

A sub-items of #1408. There are 2 types of gauge: circular and linear.

Benchmarks

• https://wattenberger.com/blog/gauge
• https://demo.dashboardpack.com/architectui-react-pro/#/charts/gauges
• https://martin36.github.io/react-gauge-chart/
• https://twitter.com/Wattenberger/status/1248232309234466820
• https://www.telerik.com/kendo-react-ui/components/gauges/
• https://www.syncfusion.com/react-ui-components/react-circular-gauge
• https://www.syncfusion.com/react-ui-components/react-linear-gauge
• https://react-spectrum.adobe.com/react-aria/useMeter.html

MUI X Gauge

https://mui.com/x/react-charts/gauge/

[eps1lon]

That's a styled <meter> element. Why did you include react-aria's Meter component in mui/material-ui#22472 but not here?

[oliviertassinari]

@eps1lon Thanks, adding https://react-spectrum.adobe.com/react-aria/useMeter.html to the relevant resources for the Gauge. I have missed it.

[eps1lon]

Thanks, adding react-spectrum.adobe.com/react-aria/useMeter.html to the relevant resources for the Gauge. I have missed it.

How does Gauge relate to Stat? Is it a kind of Stat or used in a slot of Stat? The relation is currently not explained.

[akamfoad]

Hi @oliviertassinari I'd like to pick this up if no one is working on it.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.