SDFD-15 Feat: Add charts components

italomlp commented 2 years ago

About this PR

This PR adds the basics components for charts. I tried to code them as much "business logic agnostic" as possible, so that it could be easier to extract them to the Design System, if desired. I added some documentation for the props of some of the components, but not for all. I'll create an issue to improve these docs later.

Circular chart
- It's driven by only two values for now
- We can control the "thickness" of the line to make it a Doughnut chart (the default), or a Pie chart (totally filled)
- We also have two variants, the primary with the primary colors for charts, and a secondary one which consists in the combination between the colors success and error.
- Tooltip can be disabled
Battery like chart
- It's self explanatory. We can pass the size and "percentage" via props.
Area chart
- A simple area chart without tooltip nor labels
Vertical bar chart
- It's driven by only two magnitudes for now, that compose a group of two values separated by date
- Date is mandatory for the "two values" group
- We have a ton of props to make possible customization on showing data

This PR is related to #252, but doesn't close it yet, because we still need to apply these charts on the already existing sections. In other words, I didn't use these components on the sections yet, so there is nothing to see on the PR preview for now. But you can see some screenshots below.

Edit: Issue related to the improvement for the charts docs was created: #267