[website] Updating Charts demo with real charts usage for MUI X marketing page

[richbustos]

Updating the Charts demo in MUI X landing page with real Charts usage. We were previously using images.

This is a continuation of #38027 and @alexfauquette work on #37609.

Preview: https://deploy-preview-38317--material-ui.netlify.app/x/

Before:

After:

[samuelsycamore]

This is awesome! Those color palettes really pop! 🤩

[danilo-leal]

Sweet, this is looking great!

Instead of stacking up two different types of charts, and making the demo container a bit too tall, what do you think of adding chips there so visitors can click on them to see each one? I know there's the downside of having to interact with it to see a different type of chart, but it'd certainly make the overall section/page more polished!

[richbustos]

Instead of stacking up two different types of charts, and making the demo container a bit too tall, what do you think of adding chips there so visitors can click on them to see each one? I know there's the downside of having to interact with it to see a different type of chart, but it'd certainly make the overall section/page more polished!

Love the new designs! I can probably address that in a later PR? Possibly before a beta or stable release?

I wanted to get this one quickly out and not spend too much time on it. @danilo-leal

[oliviertassinari]

A quick look at it:

1. Color intensity. Current:

It feels like the colors could be lighter and the font size less bold, for example, this would feel better on my end (to give an idea).

2. Area opacity. It feels a bit strange with the area chart opacity to be full. Most of the other area charts I'm used to use some level of opacity. Why? I think to be able to see the axis, helping read the data. Examples:

• Google Sheet / https://developers.google.com/chart/interactive/docs/gallery/areachart I guess it's the same.
• https://recharts.org/en-US/examples/StackedAreaChart
• https://www.tremor.so/docs/components/area-chart

So I suspect it would be better to change the default look in https://mui.com/x/react-charts/areas-demo/#simpleareachart cc @gerdadesign & @alexfauquette, I don't know if this is feedback that surfaced before. What do you think? I hear that for data engineering, it's also frequent to see the opposite https://matplotlib.org/stable/plot_types/basic/stackplot.html#sphx-glr-plot-types-basic-stackplot-py, https://vizzingdata.com/discrete-continuous-area-charts/.

[alexfauquette]

Thanks for pushing it

Added small refinements. Their is still an issue with tootlip opacity due to the docs theming
https://github.com/mui/material-ui/blob/a172994c2e15c91a1879897f84d4a711914e5f36/docs/src/modules/brandingTheme.ts/#L968-L969

About opacity, I don't know. From a DX point of view, I think it's easier to have opacity and let dev add an opacity property than having one encoded in the colors

[mui-bot]

Netlify deploy preview

https://deploy-preview-38317--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 45556f5

[mnajdova]

Should I merge this before the release?

[richbustos]

Should I merge this before the release?

We can skip this merge for the next release. I would like to wait for one more sign-off from @danilo-leal or @oliviertassinari.

Thanks!

[danilo-leal]

Sweet, it makes sense to iterate on a more complex demo later!

Just wondering if we shouldn't choose just one of the two charts to preserve the overall section's height ⎯ but aside from this, it's good to go, much better having the real component than illustrations!

[oliviertassinari]

From a DX point of view, I think it's easier to have opacity and let dev add an opacity property than having one encoded in the colors

@alexfauquette We could use plain rga color (and not rgba) combined with fill-opacity. But I think we can also make the case that there is less customization overall for developers to make if the charts are closer to their intended design. e.g. starting from the most popular Figma file for charts: https://www.figma.com/community/plugin/734590934750866002/Chart 80% opacity.

---

Color intensity.

What about this one?

[richbustos]

Sweet, it makes sense to iterate on a more complex demo later!

Just wondering if we shouldn't choose just one of the two charts to preserve the overall section's height ⎯ but aside from this, it's good to go, much better having the real component than illustrations!

I dont think it looks too bad. I also looked at the other components and they seem to exceed the height as well.

[danilo-leal]

Yeah, all of them exceed it by a little, which is definitely not a problem ⎯ just that the Charts will exceed it more than I'd ideally like (the Date Range is already a bit too tall for me but doable). Not a blocker for this immediate release but looking forward to iterating more on it in the near future!