Feature - Chart component [Design]

[omarefg]

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The Chart component provided an user friendly way of rendering a chart inside a card.

We'll expose two types of charts, wave and population. We'll use Echarts to achieve this component, and will use the same schema that echarts uses. This component is an layer between echarts and the project using platzily ui. As echarts is a really heavy library we'll take only what we need. These are the links resulted from the research.

• https://echarts.apache.org/examples/en/editor.html?c=area-stack-gradient
• https://echarts.apache.org/examples/en/editor.html?c=map-world-dataRange
• https://echarts.apache.org/en/builder.html
• https://www.npmjs.com/package/echarts

The person in charge of building this component can take information from the links above.

The component will be used like this.

import { Chart } from '@platzily-ui/components'

const options = {} // here will be the schema resulted from the implementation

const MyComponent = () => {
  return (
    <Chart type={'wave' || 'population'} options={options} />
  )
}

Have in mind that we do not have to expose the same schema as echarts, we could expose a minimalist schema of this and take abstration of some fields that could be inherent to Platzily UI design system.

Requirements 🌈

The component must be tested using unit testing.

Motivation 🔦

A way to provide to the user an easy way to render data as charts.