[charts] Add a localization provider #17325

alexfauquette · 2025-04-11T13:20:32Z

This introduces the localisation for charts. It will be more useful when we introduce the toolbar since buttons and helpers will need some text.

For info, the data grid put its locales in its apiRef and the pickers in a dedicated context.

I went with the picker approach because we have a similar issue: defining the locale once and using it in multiple components and their subcomponent.

Having a dedicated provider allows targeting it in the MUI theme's defaultProps.

Preview: https://deploy-preview-17325--material-ui-x.netlify.app/x/react-charts/localization/

github-actions · 2025-04-11T13:20:43Z

Thanks for adding a type label to the PR! 👍

github-actions · 2025-04-11T13:20:43Z

Please add one type label to categorize the purpose of this PR appropriately:

docs, release, bug, regression, maintenance, dependencies, enhancement or new feature

mui-bot · 2025-04-11T13:23:59Z

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

[l10n] Improve Swedish (sv-SE) locale
[l10n] Add Danish (da-DK) locale
Update the documentation of supported locales by running pnpm l10n
Verify that you have added an export line in src/locales/index.ts for the new locale.
Run pnpm docs:api which should add your new translation to the list of exported interfaces.
Clean files with pnpm prettier.

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

Updated pages:

Generated by 🚫 dangerJS against 6ec7df8

codspeed-hq · 2025-04-11T13:28:11Z

CodSpeed Performance Report

Merging #17325 will not alter performance

_{Comparing alexfauquette:add-localization (6ec7df8) with master (03408e3)}

Summary

✅ 8 untouched benchmarks

docs/data/charts/localization/localization.md

bernardobelchior · 2025-04-14T07:37:24Z

docs/data/charts/localization/ChartsLocalisationTableNoSnap.js

Should this be called ChartsLocalizationTableNoSnap? It seems like we're using enUS spelling

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.test.tsx

packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.tsx

packages/x-charts/src/hooks/useChartsLocalization.ts

packages/x-charts/src/locales/frFR.ts

packages/x-charts/src/locales/utils/chartsLocaleTextApi.ts

docs/data/charts/localization/ChartsLocalizationTableNoSnap.js

packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.tsx

github-actions · 2025-04-15T16:15:16Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-04-17T07:46:50Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

oliviertassinari · 2025-04-21T13:01:45Z

How does starting to follow the docs structure for l10n in #17475 feel?

oliviertassinari · 2025-04-21T13:18:50Z

scripts/l10n.ts

+  {
+    key: 'charts',
+    reportName: '📊 Charts',
+    constantsRelativePath: 'packages/x-charts/src/constants/defaultLocale.ts',


How does aligning all of those to the pickers feel? Propose in #17475

Suggested change

constantsRelativePath: 'packages/x-charts/src/constants/defaultLocale.ts',

constantsRelativePath: 'packages/x-charts/src/locales/enUS.ts',

oliviertassinari · 2025-04-21T13:21:24Z

packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.tsx

+ *
+ * - [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
+ */
+function ChartsLocalizationProvider(inProps: ChartsLocalizationProviderProps) {


What's the point of having a ChartsLocalizationProvider? I mean, why do we need this when we have the ThemeProvider?

I guess this is the unstyled version. But then, why don't we have a LocalizationProvider component that is shared between all components?

So overall, it looks like the best path is to:

start without ChartsLocalizationProvider no problem solved today, keep it simple

generalize the pickers's LocalizationProvider

add support for the generalized LocalizationProvider in charts

oliviertassinari · 2025-04-21T13:24:21Z

docs/data/charts/localization/localization.md

+```jsx
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { frFR } from '@mui/x-charts/locales';


Might be clearer

Suggested change

import { frFR } from '@mui/x-charts/locales';

import { chartsfrFR } from '@mui/x-charts/locales';

That would break the logic we use on all packages and their related example.

For now, all packages export locales as follow:

import { xxYY } from '@mui/[packageName]/locales';

And for multiple packages, we encourage them to do

import { xxYY as [packageName]XxYY } from '@mui/[packageName]/locales';

While doing the update, I understood your point. Exporting an object that contained only the localeText content.

I propose to export frFR and frFRLocaleText to be more explicit that chartsfrFR that does not says if the content is made for localText prop of the createTheme()

alexfauquette · 2025-04-22T12:37:30Z

I tried the structure proposed in #17475

I moved the ### Built-in locales higher in the order because I felt the need to introduce the information "We have some translation" before explaining how to use them.

I moved the table of available locales completely at the end of the page because it can grow a lot (like the data grid one ) and then cut the reading experience

github-actions · 2025-04-23T08:50:18Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette added 3 commits April 11, 2025 15:12

[charts] Add a localization provider

8b21dd5

document localization

4362b15

scripts

1033397

alexfauquette added the scope: charts Changes related to the charts. label Apr 11, 2025

alexfauquette added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Apr 11, 2025

alexfauquette added 2 commits April 11, 2025 15:40

typescript:formating

8f05a9e

fix test

896a175

bernardobelchior reviewed Apr 14, 2025

View reviewed changes

alexfauquette added 4 commits April 14, 2025 11:49

feedback

e825b1f

fix link

9c3b2f3

script add .

f0ef6bd

update docs

5b76242

alexfauquette requested a review from bernardobelchior April 14, 2025 13:49

bernardobelchior approved these changes Apr 14, 2025

View reviewed changes

docs/data/charts/localization/ChartsLocalizationTableNoSnap.js Outdated Show resolved Hide resolved

packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.tsx Outdated Show resolved Hide resolved

alexfauquette added 5 commits April 15, 2025 14:16

feedback

7a2dfa1

script

04c984b

Merge remote-tracking branch 'upstream/master' into add-localization

5f5392e

fix proptypes

f59b08b

export localization from pro package

5dcdb10

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 15, 2025

Merge remote-tracking branch 'upstream/master' into add-localization

30b2819

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Apr 16, 2025

oliviertassinari added l10n Localization. type: new feature Expand the scope of the product to solve a new problem. and removed type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Apr 21, 2025

oliviertassinari reviewed Apr 21, 2025

View reviewed changes

alexfauquette added 3 commits April 22, 2025 12:01

Merge remote-tracking branch 'upstream/master' into add-localization

c0fc322

move default locale

5e2576b

feedback

b38fcb3

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 22, 2025

rtl

f26cd4c

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 23, 2025

Merge remote-tracking branch 'upstream/master' into add-localization

6ec7df8

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 23, 2025

alexfauquette merged commit 0b7a6e8 into mui:master Apr 23, 2025
22 checks passed

	constantsRelativePath: 'packages/x-charts/src/constants/defaultLocale.ts',
	constantsRelativePath: 'packages/x-charts/src/locales/enUS.ts',

	import { frFR } from '@mui/x-charts/locales';
	import { chartsfrFR } from '@mui/x-charts/locales';

Uh oh!

[charts] Add a localization provider #17325

[charts] Add a localization provider #17325

Uh oh!

Conversation

alexfauquette commented Apr 11, 2025 • edited by oliviertassinari Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 11, 2025

Uh oh!

mui-bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Localization writing tips ✍️

Uh oh!

codspeed-hq bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #17325 will not alter performance

Summary

Uh oh!

Uh oh!

Uh oh!

bernardobelchior Apr 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 15, 2025

Uh oh!

github-actions bot commented Apr 17, 2025

Uh oh!

oliviertassinari commented Apr 21, 2025

Uh oh!

oliviertassinari Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Apr 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Apr 22, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Apr 22, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette commented Apr 22, 2025

Uh oh!

github-actions bot commented Apr 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

alexfauquette commented Apr 11, 2025 •

edited by oliviertassinari

Loading

github-actions bot commented Apr 11, 2025 •

edited

Loading

mui-bot commented Apr 11, 2025 •

edited

Loading

codspeed-hq bot commented Apr 11, 2025 •

edited

Loading

oliviertassinari Apr 21, 2025 •

edited

Loading