[charts] Add Gauge component #11996

alexfauquette · 2024-02-08T14:34:57Z

Fix #2903

Tasks

Display arc elements
Manage a11y
Make it customizable (still to document CSS behavior)
Support animation? -> maybe wait for feedback
Display value
- Where?
- How? (can be SVG Text or a simple <p> displayed bellow or on top)
Document how to use the gauge with other component to encourage using the component with other standard HTML

Preview https://deploy-preview-11996--material-ui-x.netlify.app/x/react-charts/gauge/

mui-bot · 2024-02-08T14:39:30Z

Deploy preview: https://deploy-preview-11996--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/gauge/gauge.md

Generated by 🚫 dangerJS against 8dfeffd

joserodolfofreitas · 2024-02-09T19:50:56Z

Just a quick comment, I believe the gauge charts component should be able to display a pointer/needle as well and not rely exclusively on the "progress bar" behavior (in fact, the use of pointers feels like should be the default behavior).
A search for "gauge" shows how dominant the visualization with "pointer" is.

alexfauquette · 2024-02-09T20:55:49Z

The issue is that the single component can not do all at once.

I made it such that it should be easy to add/remove components. From the issue benchmark, other libraries are at 50/50 between having a pointers or not.
https://www.notion.so/mui-org/Gauge-benchmark-1ca05e2b69b34be1ab1bdc5f2076d0f9

The idea of this default gauge come from this issue (by the way @johnsonav1992 you might be interested in this new component) Assuming that if a user created it might interest others. I'm going to ask in the issue
#11309

After there is the technical aspect. The pointer only make sens if we create a reference to point. So either displaying ticks, or arc colors. That's additional complex components I would prefer to share with other charts (for example supporting varying colors according to the value could also benefit to line and bar chart) to have it working well on all it's a non negligeable API thinking

johnsonav1992 · 2024-02-11T19:35:15Z

@alexfauquette This is great!! I was hoping for a default "donut" chart option like what you are building here (you are calling it a gauge but same thing) when I was building the donut for our app at my work, but I was able to do it with the pie charts after some tinkering around to get everything to look right (getting the color of the back arc of the donut to be different than the front was probably the hardest part). However, this will definitely reduce the overhead that people will need to deal with in terms of using the documentation to create such a donut chart. Appreciate all your hard work and innovation in this library! We are loving using it so far!

alexfauquette · 2024-02-12T13:51:52Z

docs/src/modules/components/ChartComponentsGrid.js

+    // {
+    //   title: 'Gauge',
+    //   srcLight: '/static/x/component-illustrations/gauge-light.png',
+    //   srcDark: '/static/x/component-illustrations/gauge-dark.png',
+    //   href: '/x/react-charts/gauge/',
+    // },


I will remove comments when the image is available

Added illustrations for that in a separate PR → #12041

danilo-leal

Quick copywriting improvements here and there!

docs/data/charts/gauge/gauge.md

danilo-leal · 2024-02-12T20:56:12Z

docs/data/charts/gauge/gauge.md

+- GaugeReferenceArc
+- GaugeValueArc
+- GaugeValueText


Suggested change

- GaugeReferenceArc

- GaugeValueArc

- GaugeValueText

- `<GaugeReferenceArc />`

- `<GaugeValueArc />`

- `<GaugeValueText />`

docs/data/charts/gauge/gauge.md

LukasTy

Great work! 👏
Very nice improvement to the charts portfolio. 👍

WDYT about adding this component to themeAugmentation?
Do we want it?
Based on the styled components it would seem that we expect the theme to be overridden, but it's not doable at the moment. 🤔

docs/data/charts/gauge/gauge.md

packages/x-charts/src/Gauge/GaugeProvider.tsx

packages/x-charts/src/Gauge/utils.ts

packages/x-charts/src/Gauge/Gauge.tsx

TheOneTheOnlyJJ · 2024-02-14T15:34:34Z

The Arcs configuration demo from the docs breaks if either the innerRadius or the outerRadius values are empty (deleted): https://deploy-preview-11996--material-ui-x.netlify.app/x/react-charts/gauge/#arcs-configuration

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

github-actions · 2024-02-15T10:10:26Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…auge

alexfauquette · 2024-02-15T12:44:41Z

Based on the styled components it would seem that we expect the theme to be overridden, but it's not doable at the moment.

I mostly use them to get access to the theme, to pick colors. And for root components to support sx props

LukasTy

Great job! 👏 🚀

oliviertassinari

Cool nice to see this land 👍 .

Ideas on things that developers might raise going forward:

Animation
Component behavior when the value goes outside of the [0, 100] range.
Support areas (red, green, yellow) https://www.metabase.com/docs/latest/questions/sharing/visualizations/gauge
A built-in GaugePointer component that can be composed with the Gauge?
The docs says to use value={null} to not show the value, but it shows NaN

oliviertassinari · 2024-02-15T16:03:02Z

packages/x-charts/src/Gauge/Gauge.tsx

+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
+  height: PropTypes.number,


Comment moved to mui/material-ui#41139

alexfauquette · 2024-02-16T09:22:06Z

Ideas on things that developers might raise going forward

It's done on purpose. I'm waiting for their feedback to prioritise

Animation: I plan to use slots to replace the current arcs with an animated one
Component behavior when the value goes outside of the [0, 100] range: That's very weird
Support areas (red, green, yellow) metabase.com/docs/latest/questions/sharing/visualizations/gauge: Will be the opportunity to do it also for line chart
A built-in GaugePointer component that can be composed with the Gauge?: Not sure. You could have so many design for pointer that the demo could be the simplest way to let them customize it
The docs says to use value={null} to not show the value, but it shows NaN: Can be customized with the text props. I had no idea about who to inform users that there is no value

oliviertassinari · 2024-02-16T18:55:24Z

metabase.com/docs/latest/questions/sharing/visualizations/gauge

@alexfauquette I was almost going to use this for a finance use case (showing how much cash is in our EUR bank account, and triggering an error email if it's too low https://mui.metabaseapp.com/question/305-finance-qonto-insufficient-funds) but Metabase doesn't support this Gauge charts for email reports so I used another chart that is supported (linear gauge) 😅

Not sure. You could have so many designs for pointer that the demo could be the simplest way to let them customize it

Maybe Toolpad pro code API could have a default opinionated design which is fair enough for MUI X.

Can be customized with the text props. I had no idea about who to inform users that there is no value

Maybe with …, I guess the use case is to have a skeleton as the data is loading.

But en empty string '' might even be better.

TheOneTheOnlyJJ · 2024-02-17T12:36:02Z

A built-in GaugePointer component that can be composed with the Gauge?: Not sure. You could have so many design for pointer that the demo could be the simplest way to let them customize it

I suggest there be at least 1 built-in pointer (or maybe 2), making the DX as smooth as possible, and assuring the dev that Material Design principles are properly followed, unlike potential custom-made solutions.
This would standardize the look of most MUI gauge pointers around the entire web (if provided with a good-looking default option, how many devs would really make their own?).

As an example, with a single customizable pointer, it would be possible to implement both a pointer that starts from the center of the circle, like the one currently illustrated in the docs, and a pointer that consists of a tiny indicator near the inner arc border itself, like this one: https://ft.syncfusion.com/featuretour/essential-js2/images/circular-gauge/javascript-circular-gauge-redndered-with-marker-pointer.jpg

For more customization, developers would be able to create custom pointers just like suggested in the docs as of now.

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com>

alexfauquette added 4 commits February 8, 2024 15:19

[charts] Add Gauge component

b631eb9

Run scripts

821beba

docs

b8c38c6

Remove fix size

d4710a9

alexfauquette added the component: charts This is the name of the generic UI component, not the React module! label Feb 8, 2024

alexfauquette added 4 commits February 8, 2024 18:16

support joy palette

3a5304e

export classes

57b8f6b

Add text support

38c5906

scripts

78d9bc8

joserodolfofreitas self-requested a review February 9, 2024 19:51

alexfauquette added 7 commits February 12, 2024 11:31

modify default

4d6fd72

provide the maxRadius (usefull for custom component)

fbdb7a7

Docs customization

8b1d937

Remove useless stack

3dcebae

Add composition docs

a94d904

docs

a1886ff

scripts

b4b9d62

alexfauquette marked this pull request as ready for review February 12, 2024 13:50

alexfauquette requested review from flaviendelangle and LukasTy February 12, 2024 13:51

alexfauquette commented Feb 12, 2024

View reviewed changes

danilo-leal reviewed Feb 12, 2024

View reviewed changes

LukasTy reviewed Feb 14, 2024

View reviewed changes

Apply suggestions from code review

ebaefbe

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 15, 2024

alexfauquette added 4 commits February 15, 2024 13:23

Merge remote-tracking branch 'upstream/next' into add-gauge

e0973c4

Merge branch 'add-gauge' of github.com:alexfauquette/mui-x into add-g…

78d2abb

…auge

scripts

fe2328a

prevent deleting numbers

a4f4769

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 15, 2024

alexfauquette added 2 commits February 15, 2024 14:03

feedback

5b3111f

script

8dfeffd

LukasTy approved these changes Feb 15, 2024

View reviewed changes

alexfauquette merged commit d246a1f into mui:next Feb 15, 2024
17 checks passed

oliviertassinari added the new feature New feature or request label Feb 15, 2024

oliviertassinari reviewed Feb 15, 2024

View reviewed changes

oliviertassinari mentioned this pull request Feb 15, 2024

[docs-infra] Fix display when the default props is undefined mui/material-ui#41114

Merged

oliviertassinari reviewed Feb 15, 2024

View reviewed changes

alexfauquette mentioned this pull request Feb 16, 2024

[docs-infra] Prevent to set undefined as a default value mui/material-ui#41139

Open

alexfauquette mentioned this pull request Feb 19, 2024

[charts] Don't display text if no value provided #12127

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[charts] Add Gauge component #11996

[charts] Add Gauge component #11996

alexfauquette commented Feb 8, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Feb 8, 2024 •

edited

Loading

joserodolfofreitas commented Feb 9, 2024 •

edited

Loading

alexfauquette commented Feb 9, 2024 •

edited

Loading

johnsonav1992 commented Feb 11, 2024 •

edited

Loading

alexfauquette Feb 12, 2024

danilo-leal Feb 12, 2024

danilo-leal left a comment

danilo-leal Feb 12, 2024

LukasTy left a comment

TheOneTheOnlyJJ commented Feb 14, 2024 •

edited

Loading

github-actions bot commented Feb 15, 2024

alexfauquette commented Feb 15, 2024

LukasTy left a comment

oliviertassinari left a comment

oliviertassinari Feb 15, 2024 •

edited

Loading

alexfauquette commented Feb 16, 2024

oliviertassinari commented Feb 16, 2024 •

edited

Loading

TheOneTheOnlyJJ commented Feb 17, 2024

[charts] Add Gauge component #11996

[charts] Add Gauge component #11996

Conversation

alexfauquette commented Feb 8, 2024 • edited by oliviertassinari Loading

Tasks

mui-bot commented Feb 8, 2024 • edited Loading

joserodolfofreitas commented Feb 9, 2024 • edited Loading

alexfauquette commented Feb 9, 2024 • edited Loading

johnsonav1992 commented Feb 11, 2024 • edited Loading

alexfauquette Feb 12, 2024

Choose a reason for hiding this comment

danilo-leal Feb 12, 2024

Choose a reason for hiding this comment

danilo-leal left a comment

Choose a reason for hiding this comment

danilo-leal Feb 12, 2024

Choose a reason for hiding this comment

LukasTy left a comment

Choose a reason for hiding this comment

TheOneTheOnlyJJ commented Feb 14, 2024 • edited Loading

github-actions bot commented Feb 15, 2024

alexfauquette commented Feb 15, 2024

LukasTy left a comment

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Feb 15, 2024 • edited Loading

Choose a reason for hiding this comment

alexfauquette commented Feb 16, 2024

oliviertassinari commented Feb 16, 2024 • edited Loading

TheOneTheOnlyJJ commented Feb 17, 2024

alexfauquette commented Feb 8, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Feb 8, 2024 •

edited

Loading

joserodolfofreitas commented Feb 9, 2024 •

edited

Loading

alexfauquette commented Feb 9, 2024 •

edited

Loading

johnsonav1992 commented Feb 11, 2024 •

edited

Loading

TheOneTheOnlyJJ commented Feb 14, 2024 •

edited

Loading

oliviertassinari Feb 15, 2024 •

edited

Loading

oliviertassinari commented Feb 16, 2024 •

edited

Loading