feature: add gauge component

[robarbms]

Pull Request

📖 Description

A gauge component for displaying data for a dashboard. Draft for community input.

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

I still need to build out tests.

✅ Checklist

General

• [x] I have included a change request file using $ yarn change
• [ ] I have added tests for my changes.
• [x] I have tested my changes.
• [ ] I have updated the project documentation to reflect my changes.
• [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• [x] I have added a new component
• [ ] I have modified an existing component
• [ ] I have updated the definition file
• [ ] I have updated the configuration file

⏭ Next Steps

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-sand-03fe10e10-5373.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://blue-coast-0df7a6610-5373.centralus.azurestaticapps.net

[github-actions[bot]]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-5373.centralus.azurestaticapps.net

[scomea]

What makes this different from a differently styled circular progress?

[chrisdholt]

What makes this different from a differently styled circular progress?

Thanks for this draft @robarbms! I have a similar question to @scomea - without the visuals, what is the semantic representation of this component? What role might it map to for AT, etc?

[robarbms]

This started as a larger concept. A set of data visualizations. The gauge component became the simplest to implement so I thought I'd go ahead and post a draft for feedback. I was thinking of all the types that might be needed for a dashboard like PowerBI. A gauge is a pretty common one. It's semantically different than the progress ring. I'm not sure how much overlap there might be or how flexible progress ring is. Here are some examples that I was playing around with:

Gauge component examples

I also created a rough pie chart component. But it needs a lot more refining and there is possible overlap between it and other components that I was envisioning.

Pie chart component

I also created a basic background component for graphs. I saw this used for bar graphs, line graphs, point clouds, etc.

Graph background component

I'm still working out the best way to handle data encapsulation between the various components.

[stale[bot]]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.