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
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)
