mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard
verified publisher icon mui

[WIP] [DataGridPremium] [charts-pro] Grid-Charts integration

Open arminmeh opened this issue 6 months ago • 3 comments

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

To keep the packages independent from each other, configuration type is being duplicated on both sides. Technically, this is not a requirement, but it allows seamless integration between our packages as you don't have to do any transformation of the structure.

Thing that are still missing (list not final):

  • [ ] Add more options for the line chart
  • [ ] Add more options for the pie chart
  • [x] Add area chart
  • [x] Add donut chart
  • [x] Handle row grouping better (remove regular column from the list and automatically pick up grouped values)
  • [x] Allow control of which columns should be available for categories/series
  • [ ] Add support for multiple categories
  • [ ] Support pivoting
  • [ ] Verify chart integration with live data update
  • [ ] Highlight columns used for chart in the grid
  • [ ] 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
  • [ ] Add tests
  • [ ] Update the docs on grid side
  • [ ] Add docs on charts side
  • [ ] Extract common components between pivoting panel and chart integration panel
  • [ ] Update side panel to work the same as the preference panel (allowing multiple panel contents and swapping between them automatically)
  • [ ] 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
  • [ ] Define how multiple charts can be controlled with one grid

Out of scope:

  • [ ] Handle charts click event (focus on the cell providing the value?)

arminmeh avatar May 27 '25 10:05 arminmeh

Localization writing tips :writing_hand:

Seems you are updating localization :earth_africa: files.

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

  • [ ] 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:

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 :no_entry_sign: dangerJS against 3ef4d6994f3698385820a094ee8b345124273377

mui-bot avatar May 27 '25 10:05 mui-bot

CodSpeed Performance Report

Merging #18021 will not alter performance

Comparing arminmeh:charts-integration (3ef4d69) with master (edfd946)[^unexpected-base] [^unexpected-base]: 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.

Summary

✅ 12 untouched

codspeed-hq[bot] avatar May 27 '25 14:05 codspeed-hq[bot]

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

github-actions[bot] avatar May 28 '25 11:05 github-actions[bot]

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

github-actions[bot] avatar Jun 27 '25 07:06 github-actions[bot]

Just sharing to be sure you've seen it. Jan did a quick UI to display version downloads.

That's a nice charts+row grouping example in case you're looking for some realistic data

https://github.com/mui/mui-public/pull/369

alexfauquette avatar Jul 02 '25 13:07 alexfauquette

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

github-actions[bot] avatar Jul 17 '25 11:07 github-actions[bot]

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

github-actions[bot] avatar Jul 25 '25 05:07 github-actions[bot]

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

github-actions[bot] avatar Jul 28 '25 11:07 github-actions[bot]

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

github-actions[bot] avatar Jul 30 '25 17:07 github-actions[bot]

Seem their is an out of sync issue. If I remove and add back the grid update but the chart stay in "no data available" state https://github.com/user-attachments/assets/0db22c29-27b6-4831-8705-d131147480b8

alexfauquette avatar Jul 31 '25 10:07 alexfauquette

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

github-actions[bot] avatar Jul 31 '25 14:07 github-actions[bot]

Seem their is an out of sync issue. If I remove and add back the grid update but the chart stay in "no data available" state

This happens because the chart is using dynamically created columns for the series. Once you disable that field from the pivoting, the series columns do not exist anymore and they get cleared from the selection state by the chart integration hook. Enabling that column in pivoting brings back those columns, but they are not selected anymore for the charts integration.

There are two approaches we can take here

  1. Ask for a confirmation when columns are about to be removed but they are used for charts
  2. Do not clean up non existent fields for the charts integration and continue using them once they are available

I am more for option 1, because I feel that it might also be annoying if your chart suddenly gets updated because there is again data that was there long time ago, but it reappeared because of some non-chart related action/event

thoughts @mui/xgrid @mui/xcharts

arminmeh avatar Aug 01 '25 13:08 arminmeh

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

github-actions[bot] avatar Aug 05 '25 06:08 github-actions[bot]

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

github-actions[bot] avatar Aug 07 '25 08:08 github-actions[bot]

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

github-actions[bot] avatar Aug 11 '25 15:08 github-actions[bot]

In the deploy-preview-18021--material-ui-x.netlify.app/x/react-data-grid/charts-integration#row-grouping demo, the pie chart breaks, if it's not supported could be remove it from the options?

There was a problem in the demo code (custom renderer didn't account for some pie chart specifics). It is fixed now

The demos look great and area pretty easy to follow :)

Thanks

arminmeh avatar Aug 20 '25 14:08 arminmeh

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

github-actions[bot] avatar Aug 27 '25 14:08 github-actions[bot]

There are two approaches we can take here

  1. Ask for a confirmation when columns are about to be removed but they are used for charts
  2. Do not clean up non existent fields for the charts integration and continue using them once they are available

I am more for option 1, because I feel that it might also be annoying if your chart suddenly gets updated because there is again data that was there long time ago, but it reappeared because of some non-chart related action/event

I agree, option 1 sounds good to me, can be done in a follow-up.

cherniavskii avatar Aug 29 '25 20:08 cherniavskii

Really cool work @arminmeh .

I noticed that the demo in the Charts docs has Pivot enabled by default. Without pivot there are total 36k rows. So when I play with the integration with pivot disabled, the page goes unresponsive. We should replace it with the basic integration demo. All charts on the grid page have max 1k rows, so those work well.

There are instances where axis labels or legends act weird, we'll explore that later under Charts scope.

In the future, it would be interesting to see if we can process natural language and create charts. For an end user, it will save the time to manually figure out the data grid configuration.

prakhargupta1 avatar Sep 02 '25 12:09 prakhargupta1

Really cool work @arminmeh .

Thanks :)

I noticed that the demo in the Charts docs has Pivot enabled by default. Without pivot there are total 36k rows. So when I play with the integration with pivot disabled, the page goes unresponsive. We should replace it with the basic integration demo. All charts on the grid page have max 1k rows, so those work well.

On the Charts side, the only demo is actually the customization demo from the Grid's page https://deploy-preview-18021--material-ui-x.netlify.app/x/react-data-grid/charts-integration/#customization I've used that one because it actually has real-world data.

Regarding the performance, in a follow-up, we will allow partial data visualization https://github.com/mui/mui-x/pull/18021#discussion_r2315096975 which should help with the grid displaying a lot of rows at once.

Additionally, chart performance updates will be helpful as well.

There are instances where axis labels or legends act weird, we'll explore that later under Charts scope.

I think that this is a general problem with any data visualization. Labels are based on values that you can't know upfront. This is why I didn't bother making our demos too complicated, but we show how you can customize the renderer and provide label formatters (supported by our charts library).

In the future, it would be interesting to see if we can process natural language and create charts. For an end user, it will save the time to manually figure out the data grid configuration.

This is actually in our plans for this year.

arminmeh avatar Sep 02 '25 13:09 arminmeh

On the Charts side, the only demo is actually the customization demo from the Grid's page https://deploy-preview-18021--material-ui-x.netlify.app/x/react-data-grid/charts-integration/#customization I've used that one because it actually has real-world data.

Since it's the only demo there, let's start with a simple one so that a user can explore the integration without any hindrance? We can add a second demo with real-data once we fix the performance.

prakhargupta1 avatar Sep 02 '25 14:09 prakhargupta1

Regarding the performance, in a follow-up, we will allow partial data visualization #18021 (comment) which should help with the grid displaying a lot of rows at once.

Additionally, chart performance updates will be helpful as well.

I'll try to play with downsampling as part of a charts feature. It might be useful for other use-cases as well 🤔

https://github.com/mui/mui-x/issues/19412

JCQuintas avatar Sep 02 '25 15:09 JCQuintas

On the Charts side, the only demo is actually the customization demo from the Grid's page deploy-preview-18021--material-ui-x.netlify.app/x/react-data-grid/charts-integration#customization I've used that one because it actually has real-world data.

Since it's the only demo there, let's start with a simple one so that a user can explore the integration without any hindrance? We can add a second demo with real-data once we fix the performance.

Updated to the basic example.

arminmeh avatar Sep 02 '25 20:09 arminmeh

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

github-actions[bot] avatar Sep 17 '25 08:09 github-actions[bot]