Chart Visualization

[SeamusLeonardHPE]

Overview

There are currently gaps between design patterns available in grommet, and those inside the design system library. Data visualisation is such a case and we aim to build, test & socialise figma designs to bridge the gap. In this case the template library will serve as a testing ground and “nursery” for smaller atomic designs that will in the future be graduated into figma components.

Considerations The grommet component meter can represent data in multiple visual layouts in the story book links below:

https://v2.grommet.io/chart https://storybook.grommet.io/?path=/story/visualizations-chart-point--point https://storybook.grommet.io/?path=/story/visualizations-chart-range--range https://storybook.grommet.io/?path=/story/visualizations-chart-rich--rich https://storybook.grommet.io/?path=/story/visualizations-chart-scan--scan https://storybook.grommet.io/?path=/story/visualizations-chart-value-style--value-style-chart https://storybook.grommet.io/?path=/story/visualizations-chart-zoom--zoom https://storybook.grommet.io/?path=/story/visualizations-chart-labelled--labelled-charts

Steps

• Gather use cases from external teams that have created their own chart visualisation.
• Iterate on chart & data labels

Deliverables

• [ ] Rich chart
• [ ] Labelled Chart
• [x] Scan Chart

What other teams & designers have made progress & have expertise we can use to build on?

[halocline]

It would be good for us to break this issue down into sub-issues. Too large as is.