Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Fix RTL legend #12175

Merged
merged 3 commits into from
Mar 8, 2024
Merged

[charts] Fix RTL legend #12175

merged 3 commits into from
Mar 8, 2024

Conversation

alexfauquette
Copy link
Member

@alexfauquette alexfauquette commented Feb 22, 2024

Fix #12118
image

Maybe I should invert the order of square/text : put the square on the right of the text @samueltrevor do you have some insight on this aspect?

@alexfauquette alexfauquette added l10n localization component: charts This is the name of the generic UI component, not the React module! labels Feb 22, 2024
@mui-bot
Copy link

mui-bot commented Feb 22, 2024

Deploy preview: https://deploy-preview-12175--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against be54aa6

@samueltrevor
Copy link

samueltrevor commented Feb 22, 2024 via email

@oliviertassinari oliviertassinari added i18n internationalization and removed l10n localization labels Feb 22, 2024
@alexfauquette
Copy link
Member Author

This symetric aspect is somewhat satisfying :)

RTL/LTR

image

Comment on lines +218 to +229
return [
seriesWithRawPosition.map((item) => ({
...item,
positionY:
item.positionY +
(direction === 'row'
? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
: item.outerHeight / 2), // Get the center of the item
})),
totalWidthUsed,
totalHeightUsed,
];
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before it was absolute position. Non I return the size of the legend, and position are relative to the inside of this box.

The gapX, gapY that are made to align the legend with the border of the chart are moved outside such that we can simply invert

positionX to legendWidth - positionX to revert line order without having to care about where the legend is in the the chart

Copy link
Member

@LukasTy LukasTy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice improvement! 💙

@alexfauquette alexfauquette merged commit 4f8f20a into mui:next Mar 8, 2024
17 checks passed
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module! i18n internationalization
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[charts] labels are incorrect in RTL
5 participants