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]

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]

It looks to me that this naming could be simpler. For example: 100, 200, 300, 400, 500... OR 1, 2, 3, 4, 5... You would write less and semantic actually gets lost after quaternary, for example. What do you think?

[natanfernandes]

Maybe we can achieve a better way to name it, for now i'm was following the token names defined in Figma

[matheusps]

What do you think about this naming, @beatrizmilhomem, @davicostalf ?

[matheusps]

Suggested change

"@types/lodash": "^4.17.4",

[matheusps]

You're not using it, right?

Suggested change

"lodash": "^4.17.21",

[natanfernandes]

Right, i'll remove it

[matheusps]

vistest is already on the global scope.

Suggested change

"vitest": "^1.6.0",

[matheusps]

Why this undefined?

[natanfernandes]

I was facing a type error with ref, on the useImperativeHandle and tried the undefined

[matheusps]

What does this echarts.ECartsType return? Some HTMLDivElement?

[natanfernandes]

It returns the Chart instance, the same as in chartRef.current.getEchartsInstance()

[matheusps]

You can add a check for dom. It is useful for SSR. You can use the canUseDom util from @vtex/shoreline utils

Suggested change

	useEffect(() => {
	window.addEventListener('resize', handleResize)
	return () => {
	window.removeEventListener('resize', handleResize)
	}
	}, [handleResize])
	useEffect(() => {
	if(!canUseDom) return
	window.addEventListener('resize', handleResize)
	return () => {
	window.removeEventListener('resize', handleResize)
	}
	}, [handleResize])

[natanfernandes]

Nice tip!

[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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoreline-docs	✅ Ready (Inspect)	Visit Preview	Jan 3, 2025 2:22pm