Chart & Data viz components

[ccamel]

Propose a visual feature

Purpose

For the various web3 interfaces we are developing, we need to show data as charts or visual representations.

Visual

Here are 2 illustrations from @SpicySalm0n's current UI/UX work. These are subject to change, but give an interesting perspective to appreciate the expected requirements in terms of visualisation.

Here are some other illustrations taken from different sources:

Use cases

The use cases are very varied. It is a question of being able to visualise data sets of different kind according to different types of charts and representations (2D): evolution of the number of datasets created, evolution of token price...

Specification

The aim is to introduce in the Design System a set of 2D charting and data viz components that meet the following requirements (non exhaustive):

• different kind of charts: bar, column, line, area, pie, treemaps, heatmaps, gauges, radar, candle stick...
• suitable for both Web and mobile (responsive)
• preferably with SVG rendering
• performant (fast rendering)
• interactive (pan, zoom, click...)
• animatable
• highly customizable (theme)
• lightweight

Typology

TBD

Notes

As the implementation of charting components is beyond the functional core of the Design System, it is considered here to study the existing javascript chart libraries to rely on, compatible with our non-functionnal requirements (technology - React, license: open source).

Here's the list of the considered libraries:

• reCharts
• apexcharts
• react-chartjs-2
• visx
• ...

┆Issue is synchronized with this Wrike task by Unito

[ccamel]

up!