From bd27654057a04d3d43e92617c0c5f1e1653856cb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 25 Apr 2025 01:50:47 +0200 Subject: [PATCH 1/3] [charts][docs] Improve Charts export docs --- docs/data/charts/export/ExportChartAsImage.js | 22 +++++------- .../data/charts/export/ExportChartAsImage.tsx | 22 +++++------- .../charts/export/ExportCompositionNoSnap.js | 11 ++++-- .../charts/export/ExportCompositionNoSnap.tsx | 11 ++++-- docs/data/charts/export/PrintChart.js | 30 ---------------- docs/data/charts/export/PrintChart.tsx | 30 ---------------- .../data/charts/export/PrintChart.tsx.preview | 15 -------- docs/data/charts/export/PrintChartNoSnap.js | 34 +++++++++++++++++++ docs/data/charts/export/PrintChartNoSnap.tsx | 34 +++++++++++++++++++ .../export/PrintChartNoSnap.tsx.preview | 8 +++++ docs/data/charts/export/export.md | 8 ++--- 11 files changed, 114 insertions(+), 111 deletions(-) delete mode 100644 docs/data/charts/export/PrintChart.js delete mode 100644 docs/data/charts/export/PrintChart.tsx delete mode 100644 docs/data/charts/export/PrintChart.tsx.preview create mode 100644 docs/data/charts/export/PrintChartNoSnap.js create mode 100644 docs/data/charts/export/PrintChartNoSnap.tsx create mode 100644 docs/data/charts/export/PrintChartNoSnap.tsx.preview diff --git a/docs/data/charts/export/ExportChartAsImage.js b/docs/data/charts/export/ExportChartAsImage.js index 327bb269c498c..55d78718b5d83 100644 --- a/docs/data/charts/export/ExportChartAsImage.js +++ b/docs/data/charts/export/ExportChartAsImage.js @@ -15,13 +15,7 @@ function ExportParamsSelector({ apiRef }) { const quality = Math.max(0, Math.min(1, Number.parseFloat(rawQuality))); return ( - + Image Format @@ -59,12 +53,14 @@ function ExportParamsSelector({ apiRef }) { helperText="Only applicable to lossy formats." /> - +
+ +
); } diff --git a/docs/data/charts/export/ExportChartAsImage.tsx b/docs/data/charts/export/ExportChartAsImage.tsx index cfd5bb60156a3..b1ebea18faf81 100644 --- a/docs/data/charts/export/ExportChartAsImage.tsx +++ b/docs/data/charts/export/ExportChartAsImage.tsx @@ -20,13 +20,7 @@ function ExportParamsSelector({ const quality = Math.max(0, Math.min(1, Number.parseFloat(rawQuality))); return ( - + Image Format @@ -66,12 +60,14 @@ function ExportParamsSelector({ helperText="Only applicable to lossy formats." /> - +
+ +
); } diff --git a/docs/data/charts/export/ExportCompositionNoSnap.js b/docs/data/charts/export/ExportCompositionNoSnap.js index 11f38f7f1ddce..eea60139f615e 100644 --- a/docs/data/charts/export/ExportCompositionNoSnap.js +++ b/docs/data/charts/export/ExportCompositionNoSnap.js @@ -28,7 +28,14 @@ export default function ExportCompositionNoSnap() { const apiRef = React.useRef(undefined); return ( - + + - - ); } diff --git a/docs/data/charts/export/ExportCompositionNoSnap.tsx b/docs/data/charts/export/ExportCompositionNoSnap.tsx index b8a560f473f70..0f0d03c85e464 100644 --- a/docs/data/charts/export/ExportCompositionNoSnap.tsx +++ b/docs/data/charts/export/ExportCompositionNoSnap.tsx @@ -28,7 +28,14 @@ export default function ExportCompositionNoSnap() { const apiRef = React.useRef(undefined); return ( - + + - - ); } diff --git a/docs/data/charts/export/PrintChart.js b/docs/data/charts/export/PrintChart.js deleted file mode 100644 index 259c26ac740a0..0000000000000 --- a/docs/data/charts/export/PrintChart.js +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; - -import { data } from './randomData'; - -export default function PrintChart() { - const apiRef = React.useRef(undefined); - - return ( - - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - }, - ]} - /> - - - ); -} diff --git a/docs/data/charts/export/PrintChart.tsx b/docs/data/charts/export/PrintChart.tsx deleted file mode 100644 index e46bc5cf3d6bb..0000000000000 --- a/docs/data/charts/export/PrintChart.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import { ChartProApi } from '@mui/x-charts-pro/ChartContainerPro'; -import { data } from './randomData'; - -export default function PrintChart() { - const apiRef = React.useRef(undefined); - - return ( - - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - }, - ]} - /> - - - ); -} diff --git a/docs/data/charts/export/PrintChart.tsx.preview b/docs/data/charts/export/PrintChart.tsx.preview deleted file mode 100644 index 97b2517e4b01b..0000000000000 --- a/docs/data/charts/export/PrintChart.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - }, - ]} -/> - \ No newline at end of file diff --git a/docs/data/charts/export/PrintChartNoSnap.js b/docs/data/charts/export/PrintChartNoSnap.js new file mode 100644 index 0000000000000..d5586db7454fb --- /dev/null +++ b/docs/data/charts/export/PrintChartNoSnap.js @@ -0,0 +1,34 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; + +import { data } from './randomData'; + +const series = [ + { + label: 'Series A', + data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), + }, + { + label: 'Series B', + data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), + }, +]; + +export default function PrintChartNoSnap() { + const apiRef = React.useRef(undefined); + + return ( + + + + + ); +} diff --git a/docs/data/charts/export/PrintChartNoSnap.tsx b/docs/data/charts/export/PrintChartNoSnap.tsx new file mode 100644 index 0000000000000..3cc54634c95fd --- /dev/null +++ b/docs/data/charts/export/PrintChartNoSnap.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; +import { ChartProApi } from '@mui/x-charts-pro/ChartContainerPro'; +import { data } from './randomData'; + +const series = [ + { + label: 'Series A', + data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), + }, + { + label: 'Series B', + data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), + }, +]; + +export default function PrintChartNoSnap() { + const apiRef = React.useRef(undefined); + + return ( + + + + + ); +} diff --git a/docs/data/charts/export/PrintChartNoSnap.tsx.preview b/docs/data/charts/export/PrintChartNoSnap.tsx.preview new file mode 100644 index 0000000000000..4014a2409237b --- /dev/null +++ b/docs/data/charts/export/PrintChartNoSnap.tsx.preview @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/docs/data/charts/export/export.md b/docs/data/charts/export/export.md index cbe6bdd344c1f..afee01b15bdcf 100644 --- a/docs/data/charts/export/export.md +++ b/docs/data/charts/export/export.md @@ -12,11 +12,11 @@ Export is available on the **Pro**[](/x/introducti ## Print/Export as PDF -The `apiRef` prop exposes a `exportAsPrint` method that can be used to open the browser's print dialog. +The `apiRef` prop exposes a `exportAsPrint()` method that can be used to open the browser's print dialog. The print dialog allows you to print the chart or save it as a PDF, as well as configuring other settings. -{{"demo": "PrintChart.js"}} +{{"demo": "PrintChartNoSnap.js"}} ## Export as image @@ -24,7 +24,7 @@ The `apiRef` prop also exposes a `exportAsImage()` method to export the chart as ### Dependency -For `exportAsImage()` to work, you need to add `rasterizehtml` as a dependency in your project. +For `exportAsImage()` to work, you need to add the`rasterizehtml` npm dependency in your project. @@ -63,6 +63,6 @@ As detailed in the [Composition](/x/react-charts/composition/) section, charts c When exporting a chart, the `ChartsWrapper` element is considered the root element of the chart, and every descendant is included in the export. As such, you need to ensure that the `ChartsWrapper` element is the root element of the chart you want to export. -If you want to use a custom wrapper element, you need to use the `useChartRootRef` hook to set the reference to the chart's root element so that exporting works properly, as exemplified below. +If you want to use a custom wrapper element, you need to use the `useChartRootRef()` hook to set the reference to the chart's root element so that exporting works properly, as exemplified below. {{"demo": "ExportCompositionNoSnap.js"}} From c3cae3c702dddf4e267d3ccaba8304824e7b23a4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 28 Apr 2025 02:19:15 +0200 Subject: [PATCH 2/3] fix ci --- test/regressions/index.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/regressions/index.test.ts b/test/regressions/index.test.ts index a2e3b3e7329c3..fd86093c9fadf 100644 --- a/test/regressions/index.test.ts +++ b/test/regressions/index.test.ts @@ -259,7 +259,7 @@ async function main() { it('should take a screenshot of the charts print preview', async function test() { this.timeout(20000); - const route = '/docs-charts-export/PrintChart'; + const route = '/docs-charts-export/PrintChartNoSnap'; const screenshotPath = path.resolve(screenshotDir, `.${route}Print.png`); await fse.ensureDir(path.dirname(screenshotPath)); From 098fba293ee02893d7864f5622ff3d135197043a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 28 Apr 2025 04:06:14 +0200 Subject: [PATCH 3/3] fix CI --- docs/data/charts/export/{PrintChartNoSnap.js => PrintChart.js} | 2 +- .../data/charts/export/{PrintChartNoSnap.tsx => PrintChart.tsx} | 2 +- .../{PrintChartNoSnap.tsx.preview => PrintChart.tsx.preview} | 0 docs/data/charts/export/export.md | 2 +- test/regressions/index.test.ts | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) rename docs/data/charts/export/{PrintChartNoSnap.js => PrintChart.js} (94%) rename docs/data/charts/export/{PrintChartNoSnap.tsx => PrintChart.tsx} (95%) rename docs/data/charts/export/{PrintChartNoSnap.tsx.preview => PrintChart.tsx.preview} (100%) diff --git a/docs/data/charts/export/PrintChartNoSnap.js b/docs/data/charts/export/PrintChart.js similarity index 94% rename from docs/data/charts/export/PrintChartNoSnap.js rename to docs/data/charts/export/PrintChart.js index d5586db7454fb..9fd8617952a03 100644 --- a/docs/data/charts/export/PrintChartNoSnap.js +++ b/docs/data/charts/export/PrintChart.js @@ -16,7 +16,7 @@ const series = [ }, ]; -export default function PrintChartNoSnap() { +export default function PrintChart() { const apiRef = React.useRef(undefined); return ( diff --git a/docs/data/charts/export/PrintChartNoSnap.tsx b/docs/data/charts/export/PrintChart.tsx similarity index 95% rename from docs/data/charts/export/PrintChartNoSnap.tsx rename to docs/data/charts/export/PrintChart.tsx index 3cc54634c95fd..aa7b6d8a20d9c 100644 --- a/docs/data/charts/export/PrintChartNoSnap.tsx +++ b/docs/data/charts/export/PrintChart.tsx @@ -16,7 +16,7 @@ const series = [ }, ]; -export default function PrintChartNoSnap() { +export default function PrintChart() { const apiRef = React.useRef(undefined); return ( diff --git a/docs/data/charts/export/PrintChartNoSnap.tsx.preview b/docs/data/charts/export/PrintChart.tsx.preview similarity index 100% rename from docs/data/charts/export/PrintChartNoSnap.tsx.preview rename to docs/data/charts/export/PrintChart.tsx.preview diff --git a/docs/data/charts/export/export.md b/docs/data/charts/export/export.md index afee01b15bdcf..b803f8b58b917 100644 --- a/docs/data/charts/export/export.md +++ b/docs/data/charts/export/export.md @@ -16,7 +16,7 @@ The `apiRef` prop exposes a `exportAsPrint()` method that can be used to open th The print dialog allows you to print the chart or save it as a PDF, as well as configuring other settings. -{{"demo": "PrintChartNoSnap.js"}} +{{"demo": "PrintChart.js"}} ## Export as image diff --git a/test/regressions/index.test.ts b/test/regressions/index.test.ts index fd86093c9fadf..a2e3b3e7329c3 100644 --- a/test/regressions/index.test.ts +++ b/test/regressions/index.test.ts @@ -259,7 +259,7 @@ async function main() { it('should take a screenshot of the charts print preview', async function test() { this.timeout(20000); - const route = '/docs-charts-export/PrintChartNoSnap'; + const route = '/docs-charts-export/PrintChart'; const screenshotPath = path.resolve(screenshotDir, `.${route}Print.png`); await fse.ensureDir(path.dirname(screenshotPath));