docs(charts): add weather composition demo

[TargiX]

Fix #21842

• I have followed (at least) the PR section of the contributing guide.

[code-infra-dashboard]

Deploy preview

• docs/data/charts/composition/composition.md

Bundle size

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	0B(0.00%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-charts-premium	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)
@mui/x-license	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[JCQuintas]

This is looking nice, maybe we could sync the tooltips and highlights so they both show up and it is easier to navigate?

[alexfauquette]

Thanks for your contribution to the docs

@JCQuintas I've modified the code of this PR. Could you have a look at

• the design aspect. I might have missed something since I focused on refinements and making the code more realistic (removing hardcoded aspects)
• What would you think about moving this demo to the top of the page as an overview?

Learned in the demo

• The bars with different bar size are not do able with our current API. A custom bar plot was needed
• The multiple charts aspect is clearly a blind spot of our API

[JCQuintas]

Thanks for your contribution to the docs

@JCQuintas I've modified the code of this PR. Could you have a look at

• the design aspect. I might have missed something since I focused on refinements and making the code more realistic (removing hardcoded aspects)
• What would you think about moving this demo to the top of the page as an overview?

I've update the charts and tooltips to function more like if they were single chart instead.

• The bars with different bar size are not do able with our current API. A custom bar plot was needed

Could the rangeBar do it?

• The multiple charts aspect is clearly a blind spot of our API

Yeah, I noticed that too 🫠

[TargiX]

✅ What was updated

• Fixed file casing mismatch for weather composition helper files (WeatherCompositionComponents*) to keep TS/JS imports stable.
• Updated imports in WeatherComposition.js and fixed the test fixture path so the docs demo renders correctly.
• The weather demo remains data-driven from weatherForecast with visualization helpers moved to weatherCompositionComponents.tsx (no hardcoded data in the main demo file).

Current status

• Fork branch is already up to date (Everything up-to-date), no additional commits were added after the last push.
• PR: docs(charts): add weather composition demo #22723
• Remaining blockers are currently outside the chart demo code:
  • ci/circleci: test_browser_react_18
  • argos (1 added — waiting for your decision)

[JCQuintas]

@alexfauquette I agree we could move this to the top of the page. I've done it and added a bit of overview text.

The demo looks good from my pov, you can give the final review 😆

Thank you @TargiX for the initiative :)