@mui/x-charts-pro 8.7.0 → 8.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/BarChartPro/BarChartPro.d.ts +1 -1
  2. package/BarChartPro/BarChartPro.js +32 -0
  3. package/CHANGELOG.md +98 -0
  4. package/ChartDataProviderPro/ChartDataProviderPro.js +7 -1
  5. package/ChartZoomSlider/internals/ChartAxisZoomSlider.js +31 -16
  6. package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts +4 -0
  7. package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +27 -12
  8. package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts +18 -0
  9. package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js +102 -0
  10. package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts +11 -0
  11. package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js +62 -0
  12. package/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts +14 -0
  13. package/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +61 -0
  14. package/ChartZoomSlider/internals/previews/BarPreviewPlot.d.ts +10 -0
  15. package/ChartZoomSlider/internals/previews/BarPreviewPlot.js +62 -0
  16. package/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts +14 -0
  17. package/ChartZoomSlider/internals/previews/LinePreviewPlot.js +59 -0
  18. package/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts +4 -0
  19. package/ChartZoomSlider/internals/previews/PreviewPlot.types.js +5 -0
  20. package/ChartZoomSlider/internals/previews/ScatterPreviewPlot.d.ts +16 -0
  21. package/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js +93 -0
  22. package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js +2 -0
  23. package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js +3 -1
  24. package/ChartsToolbarPro/ChartsToolbarPro.js +2 -0
  25. package/FunnelChart/FunnelChart.d.ts +1 -1
  26. package/FunnelChart/FunnelPlot.js +1 -1
  27. package/FunnelChart/funnel.types.d.ts +14 -9
  28. package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts +1 -1
  29. package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts +3 -3
  30. package/FunnelChart/seriesConfig/seriesProcessor.js +24 -48
  31. package/Heatmap/Heatmap.d.ts +1 -1
  32. package/LineChartPro/LineChartPro.js +38 -0
  33. package/PieChartPro/PieChartPro.d.ts +1 -1
  34. package/RadarChartPro/RadarChartPro.d.ts +1 -1
  35. package/ScatterChartPro/ScatterChartPro.d.ts +1 -1
  36. package/ScatterChartPro/ScatterChartPro.js +16 -0
  37. package/esm/BarChartPro/BarChartPro.d.ts +1 -1
  38. package/esm/BarChartPro/BarChartPro.js +32 -0
  39. package/esm/ChartDataProviderPro/ChartDataProviderPro.js +7 -1
  40. package/esm/ChartZoomSlider/internals/ChartAxisZoomSlider.js +33 -18
  41. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts +4 -0
  42. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +28 -13
  43. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts +18 -0
  44. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js +94 -0
  45. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts +11 -0
  46. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js +54 -0
  47. package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts +14 -0
  48. package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +53 -0
  49. package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.d.ts +10 -0
  50. package/esm/ChartZoomSlider/internals/previews/BarPreviewPlot.js +55 -0
  51. package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts +14 -0
  52. package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.js +51 -0
  53. package/esm/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts +4 -0
  54. package/esm/ChartZoomSlider/internals/previews/PreviewPlot.types.js +1 -0
  55. package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.d.ts +16 -0
  56. package/esm/ChartZoomSlider/internals/previews/ScatterPreviewPlot.js +86 -0
  57. package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js +2 -0
  58. package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js +3 -1
  59. package/esm/ChartsToolbarPro/ChartsToolbarPro.js +2 -0
  60. package/esm/FunnelChart/FunnelChart.d.ts +1 -1
  61. package/esm/FunnelChart/FunnelPlot.js +1 -1
  62. package/esm/FunnelChart/funnel.types.d.ts +14 -9
  63. package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts +1 -1
  64. package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts +3 -3
  65. package/esm/FunnelChart/seriesConfig/seriesProcessor.js +24 -48
  66. package/esm/Heatmap/Heatmap.d.ts +1 -1
  67. package/esm/LineChartPro/LineChartPro.js +38 -0
  68. package/esm/PieChartPro/PieChartPro.d.ts +1 -1
  69. package/esm/RadarChartPro/RadarChartPro.d.ts +1 -1
  70. package/esm/ScatterChartPro/ScatterChartPro.d.ts +1 -1
  71. package/esm/ScatterChartPro/ScatterChartPro.js +16 -0
  72. package/esm/index.js +1 -1
  73. package/esm/internals/plugins/useChartProExport/exportImage.js +9 -3
  74. package/esm/internals/plugins/useChartProExport/print.d.ts +3 -1
  75. package/esm/internals/plugins/useChartProExport/print.js +7 -2
  76. package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts +22 -12
  77. package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +4 -4
  78. package/index.js +1 -1
  79. package/internals/plugins/useChartProExport/exportImage.js +9 -3
  80. package/internals/plugins/useChartProExport/print.d.ts +3 -1
  81. package/internals/plugins/useChartProExport/print.js +7 -2
  82. package/internals/plugins/useChartProExport/useChartProExport.types.d.ts +22 -12
  83. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +4 -4
  84. package/package.json +6 -6
@@ -313,6 +313,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
313
313
  panning: PropTypes.bool,
314
314
  slider: PropTypes.shape({
315
315
  enabled: PropTypes.bool,
316
+ preview: PropTypes.bool,
316
317
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
317
318
  size: PropTypes.number
318
319
  }),
@@ -378,6 +379,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
378
379
  panning: PropTypes.bool,
379
380
  slider: PropTypes.shape({
380
381
  enabled: PropTypes.bool,
382
+ preview: PropTypes.bool,
381
383
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
382
384
  size: PropTypes.number
383
385
  }),
@@ -438,6 +440,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
438
440
  panning: PropTypes.bool,
439
441
  slider: PropTypes.shape({
440
442
  enabled: PropTypes.bool,
443
+ preview: PropTypes.bool,
441
444
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
442
445
  size: PropTypes.number
443
446
  }),
@@ -498,6 +501,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
498
501
  panning: PropTypes.bool,
499
502
  slider: PropTypes.shape({
500
503
  enabled: PropTypes.bool,
504
+ preview: PropTypes.bool,
501
505
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
502
506
  size: PropTypes.number
503
507
  }),
@@ -558,6 +562,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
558
562
  panning: PropTypes.bool,
559
563
  slider: PropTypes.shape({
560
564
  enabled: PropTypes.bool,
565
+ preview: PropTypes.bool,
561
566
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
562
567
  size: PropTypes.number
563
568
  }),
@@ -618,6 +623,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
618
623
  panning: PropTypes.bool,
619
624
  slider: PropTypes.shape({
620
625
  enabled: PropTypes.bool,
626
+ preview: PropTypes.bool,
621
627
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
622
628
  size: PropTypes.number
623
629
  }),
@@ -678,6 +684,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
678
684
  panning: PropTypes.bool,
679
685
  slider: PropTypes.shape({
680
686
  enabled: PropTypes.bool,
687
+ preview: PropTypes.bool,
681
688
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
682
689
  size: PropTypes.number
683
690
  }),
@@ -738,6 +745,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
738
745
  panning: PropTypes.bool,
739
746
  slider: PropTypes.shape({
740
747
  enabled: PropTypes.bool,
748
+ preview: PropTypes.bool,
741
749
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
742
750
  size: PropTypes.number
743
751
  }),
@@ -810,6 +818,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
810
818
  panning: PropTypes.bool,
811
819
  slider: PropTypes.shape({
812
820
  enabled: PropTypes.bool,
821
+ preview: PropTypes.bool,
813
822
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
814
823
  size: PropTypes.number
815
824
  }),
@@ -874,6 +883,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
874
883
  panning: PropTypes.bool,
875
884
  slider: PropTypes.shape({
876
885
  enabled: PropTypes.bool,
886
+ preview: PropTypes.bool,
877
887
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
878
888
  size: PropTypes.number
879
889
  }),
@@ -933,6 +943,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
933
943
  panning: PropTypes.bool,
934
944
  slider: PropTypes.shape({
935
945
  enabled: PropTypes.bool,
946
+ preview: PropTypes.bool,
936
947
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
937
948
  size: PropTypes.number
938
949
  }),
@@ -992,6 +1003,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
992
1003
  panning: PropTypes.bool,
993
1004
  slider: PropTypes.shape({
994
1005
  enabled: PropTypes.bool,
1006
+ preview: PropTypes.bool,
995
1007
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
996
1008
  size: PropTypes.number
997
1009
  }),
@@ -1051,6 +1063,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
1051
1063
  panning: PropTypes.bool,
1052
1064
  slider: PropTypes.shape({
1053
1065
  enabled: PropTypes.bool,
1066
+ preview: PropTypes.bool,
1054
1067
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
1055
1068
  size: PropTypes.number
1056
1069
  }),
@@ -1110,6 +1123,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
1110
1123
  panning: PropTypes.bool,
1111
1124
  slider: PropTypes.shape({
1112
1125
  enabled: PropTypes.bool,
1126
+ preview: PropTypes.bool,
1113
1127
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
1114
1128
  size: PropTypes.number
1115
1129
  }),
@@ -1169,6 +1183,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
1169
1183
  panning: PropTypes.bool,
1170
1184
  slider: PropTypes.shape({
1171
1185
  enabled: PropTypes.bool,
1186
+ preview: PropTypes.bool,
1172
1187
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
1173
1188
  size: PropTypes.number
1174
1189
  }),
@@ -1228,6 +1243,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
1228
1243
  panning: PropTypes.bool,
1229
1244
  slider: PropTypes.shape({
1230
1245
  enabled: PropTypes.bool,
1246
+ preview: PropTypes.bool,
1231
1247
  showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
1232
1248
  size: PropTypes.number
1233
1249
  }),
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts-pro v8.7.0
2
+ * @mui/x-charts-pro v8.8.0
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
@@ -15,7 +15,9 @@ export async function exportImage(element, params) {
15
15
  const {
16
16
  fileName,
17
17
  type = 'image/png',
18
- quality = 0.9
18
+ quality = 0.9,
19
+ onBeforeExport,
20
+ copyStyles = true
19
21
  } = params ?? {};
20
22
  const drawDocumentPromise = getDrawDocument();
21
23
  const {
@@ -43,11 +45,15 @@ export async function exportImage(element, params) {
43
45
  exportDoc.body.style.margin = '0px';
44
46
  const rootCandidate = element.getRootNode();
45
47
  const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
46
- await Promise.all(loadStyleSheets(exportDoc, root));
48
+ if (copyStyles) {
49
+ await Promise.all(loadStyleSheets(exportDoc, root));
50
+ }
47
51
  resolve();
48
52
  };
49
53
  doc.body.appendChild(iframe);
50
- const [drawDocument] = await Promise.all([drawDocumentPromise, iframeLoadPromise]);
54
+ await iframeLoadPromise;
55
+ await onBeforeExport?.(iframe);
56
+ const drawDocument = await drawDocumentPromise;
51
57
  try {
52
58
  await drawDocument(iframe.contentDocument, canvas, {
53
59
  // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
@@ -1,4 +1,6 @@
1
1
  import { ChartPrintExportOptions } from "./useChartProExport.types.js";
2
2
  export declare function printChart(element: HTMLElement | SVGElement, {
3
- fileName
3
+ fileName,
4
+ onBeforeExport,
5
+ copyStyles
4
6
  }?: ChartPrintExportOptions): void;
@@ -2,7 +2,9 @@ import ownerDocument from '@mui/utils/ownerDocument';
2
2
  import { loadStyleSheets } from '@mui/x-internals/export';
3
3
  import { createExportIframe } from "./common.js";
4
4
  export function printChart(element, {
5
- fileName
5
+ fileName,
6
+ onBeforeExport,
7
+ copyStyles = true
6
8
  } = {}) {
7
9
  const printWindow = createExportIframe(fileName);
8
10
  const doc = ownerDocument(element);
@@ -14,7 +16,9 @@ export function printChart(element, {
14
16
  printDoc.body.innerHTML = container.innerHTML;
15
17
  const rootCandidate = element.getRootNode();
16
18
  const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
17
- await Promise.all(loadStyleSheets(printDoc, root));
19
+ if (copyStyles) {
20
+ await Promise.all(loadStyleSheets(printDoc, root));
21
+ }
18
22
  const mediaQueryList = printWindow.contentWindow.matchMedia('print');
19
23
  mediaQueryList.addEventListener('change', mql => {
20
24
  const isAfterPrint = mql.matches === false;
@@ -22,6 +26,7 @@ export function printChart(element, {
22
26
  doc.body.removeChild(printWindow);
23
27
  }
24
28
  });
29
+ await onBeforeExport?.(printWindow);
25
30
  printWindow.contentWindow.print();
26
31
  };
27
32
  doc.body.appendChild(printWindow);
@@ -4,29 +4,39 @@ export type UseChartProExportDefaultizedParameters = UseChartProExportParameters
4
4
  export interface UseChartProExportState {
5
5
  export: {};
6
6
  }
7
- /**
8
- * The options to apply on the Print export.
9
- * @demos
10
- * - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
11
- */
12
- export interface ChartPrintExportOptions {
7
+ export interface ChartExportOptions {
13
8
  /**
14
9
  * The name of the file without the extension.
15
10
  * @default The title of the document the chart belongs to
16
11
  */
17
12
  fileName?: string;
13
+ /**
14
+ * Callback function that is called before the export is triggered.
15
+ * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
16
+ * removing elements, etc.
17
+ * @param {HTMLIFrameElement} iframe containing the chart to be exported.
18
+ * @returns {Promise<void> | void} A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
19
+ */
20
+ onBeforeExport?: (iframe: HTMLIFrameElement) => Promise<void> | void;
21
+ /**
22
+ * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
23
+ * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
24
+ * @default true
25
+ */
26
+ copyStyles?: boolean;
18
27
  }
28
+ /**
29
+ * The options to apply on the Print export.
30
+ * @demos
31
+ * - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
32
+ */
33
+ export interface ChartPrintExportOptions extends ChartExportOptions {}
19
34
  /**
20
35
  * The options to apply on the image export.
21
36
  * @demos
22
37
  * - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
23
38
  */
24
- export interface ChartImageExportOptions {
25
- /**
26
- * The name of the file without the extension.
27
- * @default The title of the document the chart belongs to
28
- */
29
- fileName?: string;
39
+ export interface ChartImageExportOptions extends ChartExportOptions {
30
40
  /**
31
41
  * The format of the image to be exported.
32
42
  * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
@@ -1,12 +1,12 @@
1
1
  import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
2
2
  import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
3
3
  export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
4
- export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
4
+ export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
5
5
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
6
6
  } & {
7
7
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
8
8
  }, boolean, any[]>;
9
- export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
9
+ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
10
10
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
11
11
  } & {
12
12
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -14,7 +14,7 @@ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<imp
14
14
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
15
15
  }, boolean, []>;
16
16
  export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
17
- export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
17
+ export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
18
18
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
19
19
  } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
20
20
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartCanZoomOut: import("reselect").Selector<import
23
23
  } & {
24
24
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
25
25
  }, boolean, any[]>;
26
- export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
26
+ export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
27
27
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
28
28
  } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
29
29
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-charts-pro v8.7.0
2
+ * @mui/x-charts-pro v8.8.0
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
@@ -25,7 +25,9 @@ async function exportImage(element, params) {
25
25
  const {
26
26
  fileName,
27
27
  type = 'image/png',
28
- quality = 0.9
28
+ quality = 0.9,
29
+ onBeforeExport,
30
+ copyStyles = true
29
31
  } = params ?? {};
30
32
  const drawDocumentPromise = getDrawDocument();
31
33
  const {
@@ -53,11 +55,15 @@ async function exportImage(element, params) {
53
55
  exportDoc.body.style.margin = '0px';
54
56
  const rootCandidate = element.getRootNode();
55
57
  const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
56
- await Promise.all((0, _export.loadStyleSheets)(exportDoc, root));
58
+ if (copyStyles) {
59
+ await Promise.all((0, _export.loadStyleSheets)(exportDoc, root));
60
+ }
57
61
  resolve();
58
62
  };
59
63
  doc.body.appendChild(iframe);
60
- const [drawDocument] = await Promise.all([drawDocumentPromise, iframeLoadPromise]);
64
+ await iframeLoadPromise;
65
+ await onBeforeExport?.(iframe);
66
+ const drawDocument = await drawDocumentPromise;
61
67
  try {
62
68
  await drawDocument(iframe.contentDocument, canvas, {
63
69
  // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
@@ -1,4 +1,6 @@
1
1
  import { ChartPrintExportOptions } from "./useChartProExport.types.js";
2
2
  export declare function printChart(element: HTMLElement | SVGElement, {
3
- fileName
3
+ fileName,
4
+ onBeforeExport,
5
+ copyStyles
4
6
  }?: ChartPrintExportOptions): void;
@@ -9,7 +9,9 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
9
9
  var _export = require("@mui/x-internals/export");
10
10
  var _common = require("./common");
11
11
  function printChart(element, {
12
- fileName
12
+ fileName,
13
+ onBeforeExport,
14
+ copyStyles = true
13
15
  } = {}) {
14
16
  const printWindow = (0, _common.createExportIframe)(fileName);
15
17
  const doc = (0, _ownerDocument.default)(element);
@@ -21,7 +23,9 @@ function printChart(element, {
21
23
  printDoc.body.innerHTML = container.innerHTML;
22
24
  const rootCandidate = element.getRootNode();
23
25
  const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
24
- await Promise.all((0, _export.loadStyleSheets)(printDoc, root));
26
+ if (copyStyles) {
27
+ await Promise.all((0, _export.loadStyleSheets)(printDoc, root));
28
+ }
25
29
  const mediaQueryList = printWindow.contentWindow.matchMedia('print');
26
30
  mediaQueryList.addEventListener('change', mql => {
27
31
  const isAfterPrint = mql.matches === false;
@@ -29,6 +33,7 @@ function printChart(element, {
29
33
  doc.body.removeChild(printWindow);
30
34
  }
31
35
  });
36
+ await onBeforeExport?.(printWindow);
32
37
  printWindow.contentWindow.print();
33
38
  };
34
39
  doc.body.appendChild(printWindow);
@@ -4,29 +4,39 @@ export type UseChartProExportDefaultizedParameters = UseChartProExportParameters
4
4
  export interface UseChartProExportState {
5
5
  export: {};
6
6
  }
7
- /**
8
- * The options to apply on the Print export.
9
- * @demos
10
- * - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
11
- */
12
- export interface ChartPrintExportOptions {
7
+ export interface ChartExportOptions {
13
8
  /**
14
9
  * The name of the file without the extension.
15
10
  * @default The title of the document the chart belongs to
16
11
  */
17
12
  fileName?: string;
13
+ /**
14
+ * Callback function that is called before the export is triggered.
15
+ * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
16
+ * removing elements, etc.
17
+ * @param {HTMLIFrameElement} iframe containing the chart to be exported.
18
+ * @returns {Promise<void> | void} A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
19
+ */
20
+ onBeforeExport?: (iframe: HTMLIFrameElement) => Promise<void> | void;
21
+ /**
22
+ * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
23
+ * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
24
+ * @default true
25
+ */
26
+ copyStyles?: boolean;
18
27
  }
28
+ /**
29
+ * The options to apply on the Print export.
30
+ * @demos
31
+ * - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
32
+ */
33
+ export interface ChartPrintExportOptions extends ChartExportOptions {}
19
34
  /**
20
35
  * The options to apply on the image export.
21
36
  * @demos
22
37
  * - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
23
38
  */
24
- export interface ChartImageExportOptions {
25
- /**
26
- * The name of the file without the extension.
27
- * @default The title of the document the chart belongs to
28
- */
29
- fileName?: string;
39
+ export interface ChartImageExportOptions extends ChartExportOptions {
30
40
  /**
31
41
  * The format of the image to be exported.
32
42
  * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
@@ -1,12 +1,12 @@
1
1
  import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
2
2
  import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
3
3
  export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
4
- export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
4
+ export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
5
5
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
6
6
  } & {
7
7
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
8
8
  }, boolean, any[]>;
9
- export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
9
+ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
10
10
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
11
11
  } & {
12
12
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -14,7 +14,7 @@ export declare const selectorChartZoomIsEnabled: import("reselect").Selector<imp
14
14
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
15
15
  }, boolean, []>;
16
16
  export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
17
- export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
17
+ export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
18
18
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
19
19
  } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
20
20
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartCanZoomOut: import("reselect").Selector<import
23
23
  } & {
24
24
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
25
25
  }, boolean, any[]>;
26
- export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
26
+ export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
27
27
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
28
28
  } & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
29
29
  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-charts-pro",
3
- "version": "8.7.0",
3
+ "version": "8.8.0",
4
4
  "author": "MUI Team",
5
5
  "description": "The Pro plan edition of the MUI X Charts components.",
6
6
  "main": "./index.js",
@@ -30,14 +30,14 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@babel/runtime": "^7.27.6",
33
- "@mui/utils": "^7.1.1",
33
+ "@mui/utils": "^7.2.0",
34
34
  "clsx": "^2.1.1",
35
35
  "prop-types": "^15.8.1",
36
- "@mui/x-charts": "8.7.0",
37
- "@mui/x-internal-gestures": "0.2.0",
38
36
  "@mui/x-charts-vendor": "8.5.3",
39
- "@mui/x-license": "8.7.0",
40
- "@mui/x-internals": "8.7.0"
37
+ "@mui/x-charts": "8.8.0",
38
+ "@mui/x-license": "8.8.0",
39
+ "@mui/x-internal-gestures": "0.2.1",
40
+ "@mui/x-internals": "8.8.0"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "@emotion/react": "^11.9.0",