Use SVG renderer in Vega to drop canvas dependency

Fixes jupyterlab#12726

.github/workflows/benchmark.yml

@@ -185,7 +185,7 @@ jobs:
         run: |
           # Publish image to cml.dev
           echo "" >> ${REPORT}
-          cml-publish ./benchmark-results/lab-benchmark.png --md >> ${REPORT}
+          cml-publish ./benchmark-results/lab-benchmark.svg --md >> ${REPORT}
           echo "" >> ${REPORT}
 
           # Test if metadata have changed

galata/README.md

@@ -411,8 +411,8 @@ A special report will be generated in the folder `benchmark-results` that will c
 
 - `lab-benchmark.json`: The execution time of the tests and some metadata.
 - `lab-benchmark.md`: A report in Markdown
-- `lab-benchmark.png`: A comparison of execution time distribution
-- `lab-benchmark.vl.json`: The [_Vega-Lite_](https://vega.github.io/vega-lite) description used to produce the PNG file.
+- `lab-benchmark.svg`: A comparison of execution time distribution
+- `lab-benchmark.vl.json`: The [_Vega-Lite_](https://vega.github.io/vega-lite) description used to produce the figure.
 
 The reference, tagged _expected_, is stored in `lab-benchmark-expected.json`. It can be
 created using the `-u` option of Playwright; i.e. `jlpm run test:benchmark -u`.

galata/package.json

@@ -59,7 +59,6 @@
     "@lumino/coreutils": "^1.12.0",
     "@playwright/test": "^1.17.0",
     "@stdlib/stats": "~0.0.13",
-    "canvas": "^2.9.1",
     "fs-extra": "^9.0.1",
     "http-server": "^13.0.0",
     "json5": "^2.1.1",

galata/src/benchmarkReporter.ts

@@ -9,7 +9,6 @@ import {
   TestResult
 } from '@playwright/test/reporter';
 import { dists, meanpw, variancepn } from '@stdlib/stats/base';
-import * as canvas from 'canvas';
 import fs from 'fs';
 import path from 'path';
 import si from 'systeminformation';
@@ -466,25 +465,11 @@ class BenchmarkReporter implements Reporter {
       const vegaSpec = vl.compile(config as any).spec;
 
       const view = new vega.View(vega.parse(vegaSpec), {
-        renderer: 'canvas'
+        renderer: 'svg'
       }).initialize();
-      const canvas = (await view.toCanvas()) as any as canvas.Canvas;
-      const graphFile = path.resolve(outputDir, `${baseName}.png`);
-      const fileStream = fs.createWriteStream(graphFile);
-
-      // Wait for pipe operation to finish
-      let resolver: (v: unknown) => void;
-      const waitForPipe = new Promise(resolve => {
-        resolver = resolve;
-      });
-      fileStream.once('finish', () => {
-        resolver(void 0);
-      });
-
-      const stream = canvas.createPNGStream();
-      stream.pipe(fileStream, {});
-
-      await waitForPipe;
+      const svgFigure = await view.toSVG();
+      const graphFile = path.resolve(outputDir, `${baseName}.svg`);
+      fs.writeFileSync(graphFile, svgFigure);
     } else {
       console.log(reportString);
     }