Feature/charts package

[natanfernandes]

Summary

The @vtex/shoreline-charts library wraps echarts in a react component with consistent theming.

Default styles

@vtex/shoreline-charts will contains default styles for all chart, in order to get a easy setup for a chart, in this PR we've a demo with the Bar chart. For the default styles we have variants, which is a pre-defined attributes on theme in addition to a pre-defined values to the series itself, but the user is free to edit and customize the chart as your own.

Installation

pnpm add @vtex/shoreline @vtex/shoreline-charts echarts

Examples

Simple chart setup

<Chart 
  option={{
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: {
      data: [1, 2, 3, 4, 5, 6, 7]
    }
  }} 
  type="bar" 
  style={{
    height: 550
  }} 
/>

Variant chart

<Chart 
  option={{
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
   series: [{
      data: [1, 2, 3, 4, 5, 6, 7]
    }, {
      data: [1, 4, 2, 1, 4, 3, 5]
    }]
  }} 
  type="bar" 
  variant="horizontal"
  style={{
    height: 550
  }} 
/>

[vercel[bot]]

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this project.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

[matheusps]

An API question: What will happen to the variant property when you add another chart (type)? Every chart type will have an "horizontal" variant?

[natanfernandes]

An API question: What will happen to the variant property when you add another chart (type)? Every chart type will have an "horizontal" variant?

After implement the variant this case come to my mind, at this moment, just bar has the horizontal variant, the first solution that i thought was when the type hasnt the variant, return the default. Second solution is create the variant type according to the type variants, like bar.horizontal or something but seems to be more complex

[natanfernandes]

I moved the type and variant props to chartConfig, by this we can validate the variant according to the type

[matheusps]

Updating the status, @beatrizmilhomem and @davicostalf are checking the design part of the PR.