Created by: vovakulikov
Closes https://github.com/sourcegraph/sourcegraph/issues/39032
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.
<BarChart />
component to smart axes components[Sourcegraph test]
[Chart storybook demo]
Check out the client app preview documentation to learn more.