Skip to content

Web [Charts]: Add experimental auto axis components

Administrator requested to merge vk/refactor-axis-chart-layouts into main

Created by: vovakulikov

Closes https://github.com/sourcegraph/sourcegraph/issues/39032

Background

This PR fixes problem with ticks (labels) overlapping for charts with big datasets and small container. It adds label rotations and label optional label truncation.

Before After
Screenshot 2022-08-03 at 18 00 45 Screenshot 2022-08-03 at 18 00 26

In order to support this feature for all code insights charts (currently bar and line charts) we introduced a few new abstractions for building these charts.

  • <SvgRoot /> - the root compound component that stores all information about axes and their sizes
  • <SvgLeftAxis> and <SvgBottomAxis> - smart components that render vertical and horizontal axis inside the chart svg container. They capture their sizes and write this information to the root component in order to adjust chart content sizes accordingly.
  • <SvgContent /> - an extension point to render any custom chart content within content container (group element)

These new smart abstractions are experimental and this is why in this PR we migrated only bar chart component for these smart axes.

Todo

  • Add smart axis components that support rotation
  • Add storybook demo for smart axes components
  • Migrate <BarChart /> component to smart axes components
  • Upate chart readme.md with new information about how to build data visualizations components with our abstractions. (I think this point requires a separate issue)

Test plan

[Sourcegraph test]

  • Create compute powered insight
  • Make sure that compute bar chart with big number of bars (10 and up) looks good with no labels overlapping
  • Check the dashboard page with compute powered insight, make sure that chart doesn't break if you try to resize insight card.
  • Check compute powered insight creation UI live preview. Make sure chart looks good in any layout (desktop, tab, mobile)

[Chart storybook demo]

  • Open new storybook axis demo story (http://localhost:9001/?path=/story/web-charts-axis--demo)
  • Make sure that chart doesn't have any labels overlaping and looks good if you try to change dataset (there is a button in story to do it)
  • Check this demo in all major browsers (Safari, Firefox, Chrome)

Follow ups

App preview:

Check out the client app preview documentation to learn more.

Merge request reports