[charts-pro] Add export menu to charts toolbar

[bernardobelchior]

Fixes https://github.com/mui/mui-x/issues/18185.

Adds an export menu to the charts toolbar. It is accessible and can be configured to hide/show options as well as export multiple image formats. Like the other PRs related to the toolbar, most of the code is a copy of the Data Grid's. I've left comments to a link to the original one.

Default toolbar:

https://github.com/user-attachments/assets/aeb54c4f-3d63-4840-873a-42539bfd5ce8

Toolbar made through composition:

https://github.com/user-attachments/assets/9ac612b1-db8d-42ee-8b91-6cbd42174b80

[mui-bot]

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
• [ ] Verify that you have added an export line in src/locales/index.ts for the new locale.
• [ ] Run pnpm docs:api which should add your new translation to the list of exported interfaces.
• [ ] Clean files with pnpm prettier.

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

Updated pages:

• docs/data/charts/export/export.md
• docs/data/charts/toolbar/toolbar.md

Bundle size report

Total Size Change: 🔺+47.4KB^(+0.38%) - Total Gzip Change: 🔺+16.7KB^(+0.43%) Files: 122 total (0 added, 0 removed, 29 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-charts-pro/Heatmap parsed: 🔺+5.42KB^(+2.83%) gzip: 🔺+1.91KB^(+3.02%) @mui/x-charts-pro/BarChartPro parsed: 🔺+5.39KB^(+2.51%) gzip: 🔺+1.87KB^(+2.64%) @mui/x-charts-pro/PieChartPro parsed: 🔺+5.38KB^(+2.78%) gzip: 🔺+1.79KB^(+2.80%) @mui/x-charts-pro parsed: 🔺+5.37KB^(+1.59%) gzip: 🔺+1.77KB^(+1.69%) @mui/x-charts-pro/LineChartPro parsed: 🔺+5.37KB^(+2.32%) gzip: 🔺+1.84KB^(+2.45%) @mui/x-charts-pro/ScatterChartPro parsed: 🔺+5.37KB^(+2.66%) gzip: 🔺+1.87KB^(+2.83%) @mui/x-charts-pro/RadarChartPro parsed: 🔺+3.24KB^(+1.93%) gzip: 🔺+990B^(+1.81%) @mui/x-charts-pro/ChartsToolbarPro parsed: 🔺+3.2KB^(+5.08%) gzip: 🔺+1.06KB^(+4.73%) @mui/x-charts-pro/ChartContainerPro parsed: 🔺+2.36KB^(+1.66%) gzip: 🔺+896B^(+1.87%) @mui/x-charts-pro/ChartDataProviderPro parsed: 🔺+2.35KB^(+1.74%) gzip: 🔺+890B^(+1.96%) @mui/x-charts-pro/FunnelChart parsed: 🔺+2.32KB^(+1.11%) gzip: 🔺+903B^(+1.34%) @mui/x-charts parsed: 🔺+159B^(+0.06%) gzip: 🔺+88B^(+0.11%) @mui/x-charts/BarChart parsed: 🔺+159B^(+0.09%) gzip: 🔺+80B^(+0.14%) @mui/x-charts/ChartContainer parsed: 🔺+159B^(+0.14%) gzip: 🔺+89B^(+0.23%) @mui/x-charts/ChartDataProvider parsed: 🔺+159B^(+0.15%) gzip: 🔺+87B^(+0.24%) @mui/x-charts/LineChart parsed: 🔺+159B^(+0.08%) gzip: 🔺+90B^(+0.15%) @mui/x-charts/PieChart parsed: 🔺+159B^(+0.10%) gzip: 🔺+85B^(+0.16%) @mui/x-charts/RadarChart parsed: 🔺+159B^(+0.10%) gzip: 🔺+90B^(+0.17%) @mui/x-charts/ScatterChart parsed: 🔺+159B^(+0.10%) gzip: 🔺+84B^(+0.16%) @mui/x-charts/SparkLineChart parsed: 🔺+159B^(+0.09%) gzip: 🔺+88B^(+0.15%) @mui/x-charts/ChartsLocalizationProvider parsed: 🔺+157B^(+11.65%) gzip: 🔺+84B^(+11.60%) @mui/x-charts-pro/ChartZoomSlider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxisHighlight parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsClipPath parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLegend parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsOverlay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsReferenceLine parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsSurface parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsText parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsTooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsXAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsYAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Gauge parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-premium parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-premium/DataGridPremium parsed: 0B^(0.00%) gzip: 🔺+2B^(0.00%) @mui/x-data-grid-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-pro/DataGridPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid/DataGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro parsed: 0B^(0.00%) gzip: 🔺+1B^(0.00%) @mui/x-date-pickers-pro/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B^(0.00%) gzip: 🔺+1B^(0.00%) @mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip: 🔺+2B^(0.00%) @mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateTimeRangePicker parsed: 0B^(0.00%) gzip: 🔺+1B^(0.00%) @mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: 🔺+2B^(0.00%) @mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B^(0.00%) gzip: 🔺+1B^(0.00%) @mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/StaticDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/TimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsBase parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DayCalendarSkeleton parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MonthCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersActionBar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against ca0ea1c821a4ea83928c27b9f4628a081973a667

[github-actions[bot]]

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

[github-actions[bot]]

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

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #18210 will not alter performance

_{Comparing bernardobelchior:charts-toolbar-export-menu (ca0ea1c) with master (eb6baad)}

Summary

✅ 9 untouched benchmarks

[github-actions[bot]]

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

[JCQuintas]

Maybe we could rewrite the Customization demo to use the "code preview"? So the users understand what is happening in the code for each option.