Hexastack / eazychart

EazyChart is a reactive chart library 📈, it allows you to easily add SVG charts in your React and Vue web applications.
https://eazychart.com
MIT License
23 stars 14 forks source link

feat: Add Multi Area Chart #69

Closed IlyesBenAmara closed 2 years ago

IlyesBenAmara commented 2 years ago

Motivation

This PR adds a new chart : multi area chart for the React/Vue packages. I had to change the useToggableDomainKey hook so that it will sort the domain keys based on the max value of each key. The purpose of this is to draw the area with the maximum value first. We will need to add an opacity prop because we might hide a portion of the chart.

image

Type of change

Checklist:

marrouchi commented 2 years ago

@IlyesBenAmara the color of the line should be same as it's area, right ?

IlyesBenAmara commented 2 years ago
IlyesBenAmara commented 2 years ago

I made some changes that were necessary because of the unit tests. One of them is the line color. I will bring the necessary changes once I start working on the Vue version :wink:

IlyesBenAmara commented 2 years ago

The unit tests do not go through as expected. I made the needed changes into another branch for the Vue version of the multi Area chart. So in order to repair the unit tests, we need to merge #88.

marrouchi commented 2 years ago

We need to add the chart to the list of exported charts in both react & vue.

I noticed a few issues :

IlyesBenAmara commented 2 years ago

@marrouchi I have addressed the issue of the provided domain Keys and the opacity. You can now review it again.