[charts][docs] Improve landing page #11570
Conversation
oliviertassinari
added
docs
|
Deploy preview: https://deploy-preview-11570--material-ui-x.netlify.app/ Updated pages: |
| Additionally, you can also use all the MUI System tools, such as the theme override or the `sx` prop. | ||
| Additionally, you can also use all the [MUI System](https://mui.com/system/getting-started/) tools, such as the theme override or the `sx` prop. |
There was a problem hiding this comment.
It wasn't super clear to me what "use all the MUI System tools" means, I imagine it won't for developers as well.
Off-topic. Today, it's kind of crap for the charts to have a dependency on @mui/system vs. say Tailwind CSS or even better: a CSS file / inline style for a developer that is outside of the MUI ecosystem and is looking for great charts. Now, we are still at a phase where charts have enough room to grow inside the MUI ecosystem, so it's not important and even helping (it's important for the data grid though).
I believe there are two main changes that we depend on Core we can/should make that will make this great:
- @mui/system moving to runtime-less CSS-in-JS. I would expect https://bundlephobia.com/package/@mui/system@5.15.2 to go from 20KB gzipped to 2KB gzipped if we play this well. I'm not exactly sure how to keep the createTheme helpers super small, but there must be a way. For developers, assuming they configure it correctly (as they would have to configure Tailwind CSS). It means that there is almost no downside for folks who don't want to use MUI System. For example, when using recharts or highcharts, everything is inline style. Now, with a canvas implementation of charts, we would have to get there, making @mui/system an optional peer dependency (peer because I imagine it will host a context, so a singleton). For example, react-data-grid is on Linaria, they pulled it off. I envision this will be almost the same, but that CSS file generated would be theme aware.
- @mui/material moving to not longer having a default theme, forcing the developer to configure
@mui/systemand consume directly from it. For the charts, data grid, this would mean that importing from a Material UI component wouldn't come with as much overhead as it does today. e.g. solving Material-ui is a heavy dependency for a few icons adazzle/react-data-grid#1999
I'm adding @brijeshb42 and @mnajdova for context so they are aware of the need for MUI X, and what's at stake.
There was a problem hiding this comment.
Thanks for the mention, it's good to know. I haven't seen the implementation, so I'll just ask here, do the charts use any Material UI component or it's only about the MUI System? What you are proposing makes sense long term 👍
|
|
||
| ## Using the documentation | ||
|
|
||
| The MUI X Charts documentation has a slightly different structure than other MUI components. | ||
| The MUI X Charts documentation has a slightly different structure than other MUI X components. |
There was a problem hiding this comment.
Per #11556 (comment), moving toward never referencing MUI in the docs.
|
|
||
| ### All MUI X Charts components | ||
| ## All MUI X Charts components | ||
|
|
||
| {{"component": "modules/components/ChartComponentsGrid.js"}} | ||
|
|
||
| ### Supported features | ||
| ## Supported features | ||
|
|
There was a problem hiding this comment.
It feels strange as h3
| component="h2" | ||
| component="h3" |
There was a problem hiding this comment.
Feel like better represent the content of the page https://blog.pope.tech/2022/08/04/5-heading-accessibility-issues-and-how-to-fix-them/.
oliviertassinari
changed the title
oliviertassinari
changed the title
A continuation of #11533
Preview: https://deploy-preview-11570--material-ui-x.netlify.app/x/react-charts/