[charts] Clean the axis rendering #8948
Conversation
alexfauquette
added
the
component: charts
Netlify deploy previewNetlify deploy preview: https://deploy-preview-8948--material-ui-x.netlify.app/ Updated pagesNo updates. These are the results for the performance tests:
|
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
|
@flaviendelangle I think this PR solves your comment about letting some padding (Argos is useful to verify it). It's not perfect, especially when charts data match round values. But most of the real-world data do not have their maximal at 1500 or 2000. It's more likely number such as 1378 or 2167 which let some space on top to ba able top place round ticks such as 1400 and 2200 |
|
It's a good first step indeed 👍 |
| unstable_generateUtilityClasses as generateUtilityClasses, | ||
| } from '@mui/utils'; | ||
|
|
||
| export interface XAxisClasses { |
There was a problem hiding this comment.
Would it make sense to have the same classes for the X and Y axes (to avoid duplication) and a class directionX / directionY to differentiate the two ?
There was a problem hiding this comment.
Nice ide, I update it such that roo get the direction and the position:
For example bottom x axis will get MuiAxis-root MuiAxis-directionX MuiAxis-bottom classes
There was a problem hiding this comment.
Actually, I wonder if MuiAxis-directionX is needed, since we have MuiAxis-bottom
In which scenario would you need directionX ?
There was a problem hiding this comment.
To get the same style on top and bottom without having to care about the position
For example you you show both axis, you could customize bottom and top ticks the same way, with directionX classe and remove only top ticks labels with top classe
nice()methods on continuouse scale. This method rounds the axis scale such that ticks fall on round numbersnice()method (improve the computation)