[DataGridPremium] [charts-premium] Grid-Charts integration

[arminmeh]

Previews:

https://deploy-preview-18021--material-ui-x.netlify.app/x/react-data-grid/charts-integration/
https://deploy-preview-18021--material-ui-x.netlify.app/x/react-charts/data-grid-integration/

Todo:

• Add more options for the line chart
• Add more options for the pie chart
• Add area chart
• Add donut chart
• Handle row grouping better (remove regular column from the list and automatically pick up grouped values)
• Allow control of which columns should be available for categories/series
• Add support for multiple categories - Initially charts will be limited to one category. Multiple categories support is a follow-up
• Limit number of categories/series
• Support pivoting
• Verify chart integration with live data update
• Add show/hide toggle for categories/series to allow quick updates (like in pivoting)
• Update drag and drop UI to clearly show that string columns cannot go to series
• Adjust (create new) data set to better demo the feature Pivoting examples are looking nice
• Improve empty data overlays
• Add tests
• Update the docs on the grid side
• Add docs on charts side
• Update side panel to work the same as the preference panel (allowing multiple panel contents and swapping between them automatically) - extracted to [DataGridPremium] Sidebar content and state is managed the same way as for preference panel #18741
• Add charts panel to the sidebar value - depends on [DataGridPremium] Sidebar content and state is managed the same way as for preference panel #18741
• Allow setting the initial state for the chart config form
• Allow customization of the chart renderer
• Add column menu item to open the charts configuration panel (like pivoting)
• Add localization strings
• Improve tabs a11y
• Add checks for the type compatibility between grid and charts
• Allow multiple charts to be controlled with one grid
• Allow chart to be excluded from the grid changes
• Add data source example
• Allow string fields in the series if row grouping is enabled and they are aggregated by size
• Update grouping/pivoting model when categories are updated
• Put integration feature under an opt-in flag
• Add support for multiple categories - [charts] Grouped axes #17931
• Prepare x-charts-premium for release - [charts-premium] Make x-charts-premium releasable #18959
• Define the behavior when pivoting fields that were previously removed are being added again - Follow-up point added

Out of scope:
Points added to the follow-up issue #19435

• Support Radar, Heatmap, and Sankey charts (context)
• Allow charts event handling
• Highlight columns used for the chart in the grid
• Allow the source of the data to be set to the selected rows or just the current page instead of all visible data
• Improve grouping state updates when categories are updated (context)
• Add a warning when pivoting change will affect charts configuration (context).

[mui-bot]

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
• Clean files with pnpm prettier.

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

Updated pages:

• docs/data/charts/data-grid-integration/data-grid-integration.md
• docs/data/data-grid/charts-integration/charts-integration.md
• docs/data/data-grid/components/charts-panel/charts-panel.md
• docs/data/data-grid/components/ai-assistant-panel/ai-assistant-panel.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+2.4KB(+0.62%)	🔺+777B(+0.66%)
@mui/x-data-grid-pro	🔺+2.42KB(+0.52%)	🔺+727B(+0.51%)
@mui/x-data-grid-premium	🔺+37.8KB(+6.41%)	🔺+10.3KB(+5.77%)
@mui/x-charts	🔺+3.93KB(+1.22%)	🔺+1.01KB(+1.01%)
@mui/x-charts-pro	🔺+3.93KB(+0.95%)	🔺+974B(+0.75%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	🔺+5B(+0.01%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	🔺+2B(+0.01%)

Details of bundle changes

Generated by 🚫 dangerJS against 3ef4d69

[codspeed-hq]

CodSpeed Performance Report

Merging #18021 will not alter performance

_{Comparing arminmeh:charts-integration (3ef4d69) with master (edfd946)¹}

Summary

✅ 12 untouched

Footnotes

1. No successful run was found on master (cf468cd) during the generation of this report, so edfd946 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[cherniavskii]

Great start!