Skip to content

Replace recharts library with visx for code insights

Warren Gifford requested to merge vk/add-visx-charts into main

Created by: vovakulikov

Resolve https://github.com/sourcegraph/sourcegraph/issues/19481 Fixes https://github.com/sourcegraph/sourcegraph/issues/18888, https://github.com/sourcegraph/sourcegraph/issues/19285, https://github.com/sourcegraph/sourcegraph/issues/19363

This PR about replacing our existing solution for building chart with new approach with @visx chart framework (I would't say this is a library just because this thing does't provide 100% complete solution for chart instead we have a small building block and relay more on react composition to build our own solution)

You can check this framework here https://airbnb.io/visx/ One of advantage of this solution

Not a charting library. As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.

So we can start with replacing existing type of chart - Line, Pie and Bar chart. It seems like in a future we will be able improve some parts of chart (like animation and accessibility) and have a bit more control over svg with this approach of component composition.

Screenshots

BEFORE AFTER
image image

Side improvements

  • Better links at line chart (now you don't need click exactly on dot point, while mouse hovered over the chart, chart itself will find the nearest point and if this point has a link then you can click on the zone next to the point.
  • Better tooltip. Now we render tooltip outside of chart container. this allows the tooltip not to overlap the chart content (see screenshots above)
  • Better labels at Pie chart. Now if user's cursor hovered over some arc we put label of this arc on top of other labels

Merge request reports