Skip to content

Web: Add chart package with stat vis components [Line Chart]

Administrator requested to merge vk/create-brand-new-line-chart into main

Created by: vovakulikov

Context

This PR introduces a new shared package for static visualization components /charts. The problem at the moment is we have a few separate implementations of the charts (admin statistic page, batch changes burndown chart, code stats pie chart, insight charts) which is not good obviously in terms of the codebase and different designs/UI/UX aspects. This package should provide all needed charts components and by this solve problems with inconsistencies in charts codebases/designs.

In particular, this PR adds just the <LineChart /> chart as a first component. Since we have this component in many places it makes sense to start with it.

Tech Details

In code insights charts we've been facing a lot of problems with customization of @visx/xychart primitives (like tooltip position, or data shape manipulation, hover chart state, ...etc). Because of this in new charts, we don't use this high-level abstraction anymore. Instead of this, we use more low-level blocks and primitives such as @visx/shape, @visx/glyph ... etc.

For chart tooltip positioning in this PR, we use floating UI package. In this PR we created a special separate component for chart tooltip only. But it might be a part of the wildcard component as a primitive and would be useful I believe in all components that have floating/popover parts (comboboxes, menu buttons, dropdowns, selects...)

Next step

  • Bar and bar-stack charts
  • Pie chart
  • Adopting these charts in different consumers and removing in place chart implementations.
  • Update @visx packages versions

For reviewers

Note this PR has a larger size than average PR. I tried to divide this PR into separate PRs but it turned out it would be a lot of small and sequence PRs (I've found that this sequence PRs approach doesn't work really well when we work on something in one place like one separated component) Instead of multi PRs approach I divided changes into small commits

Merge request reports