Fix export in chart demo (#28820)

GoodDayForSurf · web-flow · commit d4535f7e9e88 · 2025-01-23T20:33:40.000+04:00
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
@@ -1,6 +1,14 @@
 <div class="chart_environment">
   <div id="custom_markup_container">
     <svg version="1.1" width="820px" height="420px">
+      <path
+        d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
+        stroke="#999999"
+        stroke-width="1"
+        stroke-linecap="butt"
+        fill="white"
+        stroke-linejoin="miter"
+      ></path>
       <path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
       <path
         d="M 46 381 L 161 381 L 265 13 L 46 13"
@@ -34,15 +42,6 @@
         <tspan x="0" y="0">Export a chart with</tspan>
         <tspan x="0" y="19.2">custom elements</tspan>
       </text>
-      <path
-        opacity="0.8"
-        d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
-        stroke="#999999"
-        stroke-width="1"
-        stroke-linecap="butt"
-        fill="none"
-        stroke-linejoin="miter"
-      ></path>
     </svg>
   </div>
   <dx-chart id="chart" [dataSource]="oilProductionData" palette="Violet">
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
@@ -6,7 +6,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxChartModule, DxChartComponent, DxButtonModule } from 'devextreme-angular';
 
 import { exportFromMarkup } from 'devextreme/viz/export';
-// import canvg from 'canvg';
+import { Canvg } from 'canvg';
 import { Service, OilProductionDataItem } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -42,11 +42,12 @@ export class AppComponent {
       format: 'png',
       svgToCanvas(svg, canvas) {
         return new Promise((resolve) => {
-          // canvg(canvas, new XMLSerializer().serializeToString(svg), {
-          //   ignoreDimensions: true,
-          //   ignoreClear: true,
-          //   renderCallback: resolve,
-          // });
+          const v = Canvg.fromString(
+              canvas.getContext("2d"),
+              new XMLSerializer().serializeToString(svg)
+          );
+
+          resolve(v.render());
         });
       },
     });
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx b/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
@@ -4,7 +4,7 @@ import {
 } from 'devextreme-react/chart';
 import { Button } from 'devextreme-react/button';
 import { exportFromMarkup } from 'devextreme/viz/export';
-// import toCanvas from 'canvg';
+import { Canvg } from 'canvg';
 import { dataSource } from './data.ts';
 import Form from './Form.tsx';
 
@@ -39,15 +39,14 @@ function App() {
         height: 420,
         margin: 0,
         format: 'png',
-        // eslint-disable-next-line no-unused-vars
         svgToCanvas(svg: Node, canvas) {
-        // eslint-disable-next-line no-unused-vars
           return new Promise((resolve) => {
-            // toCanvas(canvas, new XMLSerializer().serializeToString(svg), {
-            //   ignoreDimensions: true,
-            //   ignoreClear: true,
-            //   renderCallback: resolve,
-            // });
+            const v = Canvg.fromString(
+                canvas.getContext("2d"),
+                new XMLSerializer().serializeToString(svg)
+            );
+
+            resolve(v.render());
           });
         },
       },
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx b/apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx
@@ -5,6 +5,8 @@ const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-
 const Form = React.forwardRef<HTMLDivElement, {}>((_, ref) => (
   <div id="custom_markup_container" ref={ref}>
     <svg width="820px" height="420px">
+      <path opacity="1" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" strokeWidth="1"
+            strokeLinecap="butt" fill="white" strokeLinejoin="miter"></path>
       <path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
       <path d="M 46 381 L 161 381 L 265 13 L 46 13" opacity="0.5" fill="#6D39C3"></path>
       <text transform="translate(30,89)"
@@ -22,8 +24,6 @@ const Form = React.forwardRef<HTMLDivElement, {}>((_, ref) => (
         <tspan x="0" y="0">Export a chart with</tspan>
         <tspan x="0" y="19.2">custom elements</tspan>
       </text>
-      <path opacity="0.8" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" strokeWidth="1"
-        strokeLinecap="butt" fill="none" strokeLinejoin="miter"></path>
     </svg>
   </div>
 ));
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
@@ -9,7 +9,7 @@ import {
 } from 'devextreme-react/chart';
 import { Button } from 'devextreme-react/button';
 import { exportFromMarkup } from 'devextreme/viz/export';
-// import toCanvas from 'canvg';
+import { Canvg } from 'canvg';
 import { dataSource } from './data.js';
 import Form from './Form.js';
 
@@ -37,15 +37,13 @@ function App() {
       height: 420,
       margin: 0,
       format: 'png',
-      // eslint-disable-next-line no-unused-vars
       svgToCanvas(svg, canvas) {
-        // eslint-disable-next-line no-unused-vars
         return new Promise((resolve) => {
-          // toCanvas(canvas, new XMLSerializer().serializeToString(svg), {
-          //   ignoreDimensions: true,
-          //   ignoreClear: true,
-          //   renderCallback: resolve,
-          // });
+          const v = Canvg.fromString(
+            canvas.getContext('2d'),
+            new XMLSerializer().serializeToString(svg),
+          );
+          resolve(v.render());
         });
       },
     });
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js
@@ -10,6 +10,15 @@ const Form = React.forwardRef((_, ref) => (
       width="820px"
       height="420px"
     >
+      <path
+        opacity="1"
+        d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
+        stroke="#999999"
+        strokeWidth="1"
+        strokeLinecap="butt"
+        fill="white"
+        strokeLinejoin="miter"
+      ></path>
       <path
         d="M 13 407 L 128 407 L 232 39 L 13 39"
         fill="#6D39C3"
@@ -69,15 +78,6 @@ const Form = React.forwardRef((_, ref) => (
           custom elements
         </tspan>
       </text>
-      <path
-        opacity="0.8"
-        d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
-        stroke="#999999"
-        strokeWidth="1"
-        strokeLinecap="butt"
-        fill="none"
-        strokeLinejoin="miter"
-      ></path>
     </svg>
   </div>
 ));
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue
@@ -69,7 +69,7 @@ import {
 } from 'devextreme-vue/chart';
 import { exportFromMarkup } from 'devextreme/viz/export';
 import DxButton from 'devextreme-vue/button';
-// import toCanvas from 'canvg';
+import { Canvg } from 'canvg';
 import { dataSource } from './data.ts';
 import Form from './Form.vue';
 
@@ -102,15 +102,14 @@ function onClick() {
     height: 420,
     margin: 0,
     format: 'png',
-    // eslint-disable-next-line no-unused-vars
     svgToCanvas(svg, canvas) {
-      // eslint-disable-next-line no-unused-vars
       return new Promise((resolve) => {
-        // toCanvas(canvas, new XMLSerializer().serializeToString(svg), {
-        //   ignoreDimensions: true,
-        //   ignoreClear: true,
-        //   renderCallback: resolve,
-        // });
+        const v = Canvg.fromString(
+            canvas.getContext("2d"),
+            new XMLSerializer().serializeToString(svg)
+        );
+
+        resolve(v.render());
       });
     },
   });
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
@@ -7,6 +7,14 @@
       width="820px"
       height="420px"
     >
+      <path
+          d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
+          stroke="#999999"
+          stroke-width="1"
+          stroke-linecap="butt"
+          fill="white"
+          stroke-linejoin="miter"
+      />
       <path
         d="M 13 407 L 128 407 L 232 39 L 13 39"
         fill="#6D39C3"
@@ -46,15 +54,6 @@
           y="19.2"
         >custom elements</tspan>
       </text>
-      <path
-        opacity="0.8"
-        d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
-        stroke="#999999"
-        stroke-width="1"
-        stroke-linecap="butt"
-        fill="none"
-        stroke-linejoin="miter"
-      />
     </svg>
   </div>
 </template>
diff --git a/apps/demos/configs/Angular/config.js b/apps/demos/configs/Angular/config.js
@@ -241,9 +241,7 @@ window.config = {
     /**/
 
     /** canvg */
-    'stackblur-canvas': 'npm:stackblur-canvas/dist/stackblur.min.js',
-    'rgbcolor': 'npm:rgbcolor/index.js',
-    'canvg': 'npm:canvg/dist/browser/canvg.min.js',
+    'canvg': 'externals:canvg.bundle.js',
     /**/
 
     /** vectormap */
diff --git a/apps/demos/configs/React/config.js b/apps/demos/configs/React/config.js
@@ -102,9 +102,7 @@ window.config = {
     /**/
 
     /** canvg */
-    'stackblur-canvas': 'npm:stackblur-canvas/dist/stackblur.min.js',
-    'rgbcolor': 'npm:rgbcolor/index.js',
-    'canvg': 'npm:canvg/dist/browser/canvg.min.js',
+    'canvg': 'externals:canvg.bundle.js',
     /**/
 
     /** whatwg-fetch */
diff --git a/apps/demos/configs/ReactJs/config.js b/apps/demos/configs/ReactJs/config.js
@@ -102,9 +102,7 @@ window.config = {
     /**/
 
     /** canvg */
-    'stackblur-canvas': 'npm:stackblur-canvas/dist/stackblur.min.js',
-    'rgbcolor': 'npm:rgbcolor/index.js',
-    'canvg': 'npm:canvg/dist/browser/canvg.min.js',
+    'canvg': 'externals:canvg.bundle.js',
     /**/
 
     /** whatwg-fetch */
diff --git a/apps/demos/configs/Vue/config.js b/apps/demos/configs/Vue/config.js
@@ -95,9 +95,7 @@ window.config = {
     /**/
 
     /** canvg */
-    'stackblur-canvas': 'npm:stackblur-canvas/dist/stackblur.min.js',
-    'rgbcolor': 'npm:rgbcolor/index.js',
-    'canvg': 'npm:canvg/dist/browser/canvg.min.js',
+    'canvg': 'externals:canvg.bundle.js',
     /**/
 
     /** whatwg-fetch */
diff --git a/apps/demos/package.json b/apps/demos/package.json
@@ -28,6 +28,7 @@
         "@rollup/plugin-commonjs": "19.0.2",
         "@vue/compiler-sfc": "3.4.27",
         "@vue/shared": "^3.2.47",
+        "canvg": "4.0.2",
         "cldr-core": "40.0.0",
         "cldr-data": "36.0.1",
         "cldr-dates-full": "40.0.0",
diff --git a/apps/demos/rollup.external.bundles.config.mjs b/apps/demos/rollup.external.bundles.config.mjs
@@ -109,11 +109,22 @@ export default [
     plugins,
   },
   {
-    input: NG_BASE_DIR + `rehype-minify-whitespace/index.js`,
+      input: NG_BASE_DIR + `rehype-minify-whitespace/index.js`,
+      output: {
+          file: OUTPUT_DIR + `unified/rehype-minify-whitespace.bundle.js`,
+          format,
+          name: 'rehypeRemark',
+          globals: { },
+      },
+      external: [],
+      plugins,
+  },
+  {
+    input: NG_BASE_DIR + `canvg/dist/index.js`,
     output: {
-      file: OUTPUT_DIR + `unified/rehype-minify-whitespace.bundle.js`,
+      file: OUTPUT_DIR + `canvg.bundle.js`,
       format,
-      name: 'rehypeRemark',
+      name: 'canvg',
       globals: { },
     },
     external: [],
diff --git a/apps/demos/testing/widgets/charts/Export.test.js b/apps/demos/testing/widgets/charts/Export.test.js
@@ -0,0 +1,38 @@
+import { ClientFunction } from 'testcafe';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+
+fixture('Charts.Export')
+  .page('http://localhost:8080/')
+  .before(async (ctx) => {
+    ctx.initialWindowSize = [900, 600];
+  });
+
+runManualTest('Charts', 'ExportCustomMarkup', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+  test('Export', async (t) => {
+    let isFileCreateForDownload = false;
+
+    const checkFn = ClientFunction(() => {
+      window.originalCreateObjectURL = URL.createObjectURL;
+      window.testedValue = '';
+
+      URL.createObjectURL = (blob) => {
+        window.testedValue = blob.type;
+
+        return Promise.reject();
+      };
+    });
+
+    await checkFn();
+
+    await t.click('#export,.dx-button[icon=export]');
+
+    isFileCreateForDownload = await ClientFunction(() => {
+      URL.createObjectURL = window.originalCreateObjectURL;
+      const result = window.testedValue === 'image/png';
+      delete window.testedValue;
+      return result;
+    })();
+
+    await t.expect(isFileCreateForDownload).ok('File was created for download');
+  });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
