[charts] Use new text component to avoid tick label overflow on x-axis #10648
Conversation
|
Deploy preview: https://deploy-preview-10648--material-ui-x.netlify.app/ Updated pages: |
alexfauquette
changed the title
alexfauquette
changed the title
zannager
added
the
component: charts
| [`.${axisClasses.bottom}`]: { | ||
| [`.${axisClasses.tickLabel}`]: { | ||
| transform: 'rotate(45deg)', | ||
| xAxis={[ |
There was a problem hiding this comment.
Basically here all the styling is moved in the axis properties
| dominantBaseline: 'central', | ||
| textAnchor: 'start', |
There was a problem hiding this comment.
Those properties moved into the style prop
|
🤩 That's some impressive evolution!
Maybe we can just refuse angles we don't handle correctly (either throwing an error or displaying an console warning). |
|
Just noticed an issue remains: When the axis automatically removes some tick labels, it leads to a hydration error. Not sure about how to deal with it. Should the computation of the tick label to remove be done after the first render 🤔 |
|
I guess it's because on SSR you don't have a notion of component width so we can't guess the ticks to render. For me either you refuse the usage of the automatic mode on app that use SSR |
alexfauquette
force-pushed
the
nice-ticks
branch
from
70a4cb8 to
44089a3
Compare
Co-authored-by: Lukas <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>
Co-authored-by: Lukas <[email protected]> Co-authored-by: Sam Sycamore <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>
Part of #10140 and #7801
This PR introduces multiple concepts:
the tick selection: You can now select which tick to display. For that, you can provide a function similar to a filtering method
the tick label selection: You can display labels on a subset of ticks. The same method, you provide a filtering method. But it is applied on the result of the tick filtering. In other words you can not get a label without a tick.
automatic label filtering: By default, we keep all ticks, and we display the first label. Then we display the next label that does not overflow, and so on.
The ability to rotate the text
Pass all the customization in the
styleobject.textBaselineas a standard CSS property.textBaselineorrotatethat are used for the custom<ChartsText />computation and then restricted to a subset of options.Tech aspect:
To know if a label overflows (especially if they are rotated), we compute its bounding box, and we get interested by how much do we need to translate them to avoid the overflow (the red line)
For small angles, I approximate them to 0° or 90°.
Hypothesis are: all text boxes are the same height, and angles are between -90° and 90°. Without those hypotheses, computing this minimal gap would require getting the dimension of the next rectangle.
Here is a demo where each rectangle is aligned according to the minimal translation to avoid overflow. You can see that when width are different it fails for angles larger than 90° But not sure it is worth fixing it since I assume nobody displays labels rotated by 180°
rotation.mp4