search

vtex / shoreline

VTEX Design System for back-office experiences. Currently available for internal usage at VTEX.
https://shoreline.vtex.com
23 stars 1 forks source link

Data Visualization Library - Charts #1700

Open Luizfmcosta opened 3 months ago

Luizfmcosta commented 3 months ago

Problem

Data Visualization Library proposal for Shoreline.

Data Visualization is the graphical representation of information and data, such as charts, diagrams, and maps. These visuals help our users gain insights by revealing trends, outliers, and patterns within the data.

Why we’re proposing a data visualization library/guidelines? Because we want to achieve 3 goals: more consistency, clarity and efficiency while working with graphical representations.

Consistency: As our design team grows, maintaining a consistent visual language becomes increasingly important. Consistent data visualizations ensure that our users have a cohesive experience across all platforms and touchpoints.

Clarity: Clear and accurate visual representations of data help our users make informed decisions. By standardizing our approach, we can reduce confusion and increase comprehension.

Efficiency: Having a set of guidelines and components saves time for our designers. Instead of reinventing the wheel for each project, we can rely on these standards to streamline our workflow and focus on what matters most – creating value for our users.

Solution

Charts play a significant role in interfaces, and we use various types to visualize different data.

After mapping all chart usage in VTEX, we concluded that we should start with 3 types: Bar Chart, Line Chart and Area Chart.

The Bar Chart figma component proposal can be seen here

We are also starting to write the guidelines/specs for the components here.

The bar chart is quite ready for dev, we are only finishing these guidelines. Intro

The Line Chart figma component proposal can be seen here

All charts also use a few base components like a Chart Background (with vertical and horizontal axis lines), labels, tooltips and more. You can review those here.

Usage examples

No response

Dependencies

No response

References

https://www.notion.so/vtexhandbook/Analytics-Library-2e2ce235e3f645ccab43035d7401a6be https://carbondesignsystem.com/data-visualization/chart-anatomy/ https://echarts.apache.org/en/index.html

beatrizmilhomem commented 2 months ago

Hello @Luizfmcosta! Me and @davicostalf added some topics to be reviewed in this document. Please, feel free to reach out to us if you have any questions!

biaoliveira28 commented 2 months ago

Hello!

I updated the components according to the document's suggestions. I put everything that I've done in italics to make it easier for you guys to review it.

Besides that, I left some questions, mainly about the Chart Widget and Tooltip.