[charts-pro] Allow exporting a heatmap chart #17916

bernardobelchior · 2025-05-20T13:45:09Z

Part of #11746.

Also updated the print example to allow selecting different chart types.

github-actions · 2025-05-20T13:45:21Z

Thanks for adding a type label to the PR! 👍

mui-bot · 2025-05-20T13:46:44Z

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

Updated pages:

docs/data/charts/export/export.md

Bundle size report

Total Size Change:^{${\tiny{\color{red}▲}}$}+42B^(0.00%) - Total Gzip Change:^{${\tiny{\color{green}▼}}$}-7B^(0.00%)
Files: 118 total (0 added, 0 removed, 15 changed)

Show 15 more bundle changes

@mui/x-charts-pro parsed:^{${\tiny{\color{red}▲}}$}+21B^(+0.01%) gzip:^{${\tiny{\color{red}▲}}$}+10B^(+0.01%)
@mui/x-charts-pro/Heatmap parsed:^{${\tiny{\color{red}▲}}$}+21B^(+0.01%) gzip:^{${\tiny{\color{green}▼}}$}-16B^(-0.03%)
@mui/x-charts-pro/BarChartPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-2B^(0.00%)
@mui/x-charts-pro/ChartContainerPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-charts-pro/ChartDataProviderPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-charts-pro/FunnelChart parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-charts-pro/ScatterChartPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-data-grid-pro/DataGridPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-2B^(-0.01%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(+0.01%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)
@mui/x-tree-view-pro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{green}▼}}$}-1B^(0.00%)
@mui/x-tree-view-pro/RichTreeViewPro parsed: 0B^(0.00%) gzip:^{${\tiny{\color{red}▲}}$}+1B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 3d939ec

github-actions · 2025-05-20T13:56:10Z

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

bernardobelchior · 2025-05-20T13:57:16Z

packages/x-charts-pro/src/ChartContainerPro/ChartProApi.ts

+type PluginsPerSeriesType = {
+  heatmap: HeatmapPluginsSignatures;
+  line: LineChartProPluginsSignatures;
+  scatter: ScatterChartProPluginsSignatures;
+  bar: BarChartProPluginsSignatures;
+};
+
+export type ChartProApi<
+  TSeries extends ChartSeriesType = ChartSeriesType,
+  TSignatures extends
+    readonly ChartAnyPluginSignature[] = TSeries extends keyof PluginsPerSeriesType
+    ? PluginsPerSeriesType[TSeries]
+    : AllPluginSignatures,
+> = NonNullable<NonNullable<ChartContainerProProps<TSeries, TSignatures>['apiRef']>['current']>;


The previous implementation would show setZoomData as a valid API for the heatmap chart. This implementation isn't breaking (since it defaults to AllPluginSignatures), but IMO we should encourage users to use ChartProApi<'scatter'> or ChartProApi<'heatmap'> for TypeScript to only suggest functions that are valid.

For composition, I think we should add a composition "series type" that uses the DefaultPluginSignatures. This way, when using composition, users should use ChartProApi<'composition'>, and in the next major we can make the TSeries parameter mandatory.

What do you think, @alexfauquette @JCQuintas?

bernardobelchior · 2025-05-20T14:14:31Z

packages/x-charts/src/ChartsRootSurface/ChartsRootSurface.tsx

+ * `ChartsRootSurface` is a wrapper around the `ChartsSurface` component that provides a reference to the chart root element.
+ * This is only needed for charts that aren't wrapped in `ChartsWrapper`.
+ */
+export const ChartsRootSurface = React.forwardRef<SVGSVGElement, ChartsRootSurfaceProps>(


Had to create this to set the chart root ref. An alternative would be to default to svgRef in the useChartProExport plugin, but I thought the current approach would be cleaner.

This PR might solve your issue by introducing the wrapper to heatmap too
#17943

Yes, it will. I can wait for that to be merged

codspeed-hq · 2025-05-20T14:33:24Z

CodSpeed Performance Report

Merging #17916 will not alter performance

_{Comparing bernardobelchior:export-heatmap (3d939ec) with master (48666ad)}

Summary

✅ 9 untouched benchmarks

bernardobelchior · 2025-05-20T15:12:53Z

docs/data/charts/export/ExportChartAsImage.tsx

@@ -73,7 +73,7 @@ function ExportParamsSelector({
 }

 export default function ExportChartAsImage() {
-  const apiRef = React.useRef<ChartProApi>(undefined);
+  const apiRef = React.useRef<ChartProApi<'line'>>(undefined);


Unfortunately, I don't think we can keep the current API for ChartProApi. Either we create a new type, or we need to accept this breaking change as a bug fix.

It is a bug because invalid types are accepted. For example, the heatmap's apiRef doesn't contain a setZoomData property, but the type says it does.

It's unlikely a lot of people are using it as it was released in v8.1.0, but it's technically a breaking change if we don't flag it as a bug.

Another option would be to create another type to avoid breaking users and deprecate this one. What are your thoughts?

We could just go with the generic one but still allow users to narrow the types with the <'seriesType'> notation.

That doesn't work either. I suppose it's the same issue as trying to pass a RefObject<HTMLElement> to a HTMLDivElement.

I don't get it, if the issue is that you are passing a wide type but it expects a narrow type, just make the expectation wide, so it can accept a narrow one.

I think I managed to make it work.

I thought it was another case of this issue with HTMLDivElement and HTMLElement:

I've kept the ChartProApi<'line'> here because we should encourage users to use it, but it's usable without it as well:

github-actions · 2025-05-22T13:06:04Z

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

docs/data/charts/export/ExportCompositionNoSnap.tsx

JCQuintas · 2025-05-22T16:20:42Z

packages/x-charts/src/hooks/useChartRootRef.ts

@@ -6,7 +6,7 @@ import { useChartContext } from '../context/ChartProvider';
 * Get the ref for the root chart element.
 * @returns The root chart element ref.
 */
-export function useChartRootRef(): React.RefObject<HTMLDivElement | null> {
+export function useChartRootRef(): React.RefObject<HTMLElement | SVGElement | null> {


This can probably be reverted?

Not sure to be honest. The reality is that any HTML or SVG elements should be accepted here.

However, I think doing that now would be a breaking change, so I'll revert it. Maybe that's something we want to change for v9?

Oh, if we need to accept HTMLElement and SVGElement IIRC we should use HTMLElement | (HTMLElement & SVGElement)

HTMLElement | (HTMLElement & SVGElement)? Why not HTMLElement | SVGElement?

I'd like to make this change, but it's breaking and it's unfortunate that we need to ask users to cast the ref object to use it. I wonder if there's some way to infer the type 🤔

Nvm I couldn't find the reference, I might have been mistaken then 🤔

I was thinking I used that somewhere to solve this issue of needing to cast the ref, but I tried it out and it doesn't work 😢

If you need a broader definition you can also try to use Element instead

If you need a broader definition you can also try to use Element instead

Yeah, that could also work, but we still have the typing issue. I don't know how to fix it, but I haven't dug deeper.

packages/x-charts/src/internals/components/ChartsWrapper/ChartsWrapper.tsx

packages/x-charts/src/internals/plugins/models/plugin.ts

alexfauquette

The mapping from series type to their pluggin signature is elegant 👍

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 20, 2025

bernardobelchior added type: new feature Introduces a new piece of functionality or capability. scope: charts Changes or issues related to the charts product labels May 20, 2025

bernardobelchior force-pushed the export-heatmap branch from 2daa1de to e40d095 Compare May 20, 2025 14:25

bernardobelchior commented May 20, 2025

View reviewed changes

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 20, 2025

bernardobelchior commented May 20, 2025

View reviewed changes

bernardobelchior marked this pull request as ready for review May 21, 2025 08:28

bernardobelchior requested review from JCQuintas and alexfauquette May 21, 2025 08:28

alexfauquette changed the title ~~[charts-pro] allow exporting a heatmap chart~~ [charts-pro] Allow exporting a heatmap chart May 21, 2025

This was referenced May 22, 2025

[charts] Export/Save as PNG / JPG / PDF #11746

Closed

[charts-pro] Allow exporting a funnel chart #17957

Merged

[charts] Tasks for v9 #17955

Open

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 22, 2025

bernardobelchior added 6 commits May 22, 2025 15:58

[charts-pro] allow exporting a heatmap chart

0d2f117

Add docs showcasing heatmap export

4771210

Gen types, fix static.

839edfb

Add composition field

2184f94

Fix print chart demo

be4fe4c

Fix ChartProApi

86b9995

bernardobelchior force-pushed the export-heatmap branch from e29fac8 to b4b0efe Compare May 22, 2025 14:03

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 22, 2025

Add legend to demo. Remove ChartsRootSurface.

cf5411c

bernardobelchior force-pushed the export-heatmap branch from b4b0efe to cf5411c Compare May 22, 2025 14:05

JCQuintas reviewed May 22, 2025

View reviewed changes

Revert chartRootRef type change

3d939ec

bernardobelchior requested a review from JCQuintas May 23, 2025 06:49

alexfauquette approved these changes May 23, 2025

View reviewed changes

JCQuintas approved these changes May 23, 2025

View reviewed changes

bernardobelchior merged commit ee90fea into mui:master May 23, 2025
24 checks passed

bernardobelchior deleted the export-heatmap branch May 23, 2025 07:40

Uh oh!

[charts-pro] Allow exporting a heatmap chart #17916

[charts-pro] Allow exporting a heatmap chart #17916

Uh oh!

Conversation

bernardobelchior commented May 20, 2025

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codspeed-hq bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #17916 will not alter performance

Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 22, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 20, 2025 •

edited

Loading

mui-bot commented May 20, 2025 •

edited

Loading

codspeed-hq bot commented May 20, 2025 •

edited

Loading