feat: update the scaleFactor property to allow setting different va…

…lues (#1051)

* Update scaleFactor to support different values for each type

* Update README

* Add example

* Add unit test

README.md

@@ -190,7 +190,7 @@ var opt = {
 | `height`      | Number        | Sets the view height in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_height) for details. Note that Vega-Lite overrides this option. |
 | `padding`     | Number / Object | Sets the view padding in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_padding) for details. |
 | `actions`     | Boolean / Object | Determines if action links ("Export as PNG/SVG", "View Source", "View Vega" (only for Vega-Lite), "Open in Vega Editor") are included with the embedded view. If the value is `true`, all action links will be shown and none if the value is `false`.  This property can take a key-value mapping object that maps keys (`export`, `source`, `compiled`, `editor`) to boolean values for determining if each action link should be shown.  By default, `export`, `source`, and `editor` are true and `compiled` is false. These defaults can be overridden: for example, if `actions` is `{export: false, source: true}`, the embedded visualization will have two links – "View Source" and "Open in Vega Editor".  The `export` property can take a key-value mapping object that maps keys (svg, png) to boolean values for determining if each export action link should be shown. By default, `svg` and `png` are true. |
-| `scaleFactor` | Number        | The number by which to multiply the width and height (default `1`) of an exported PNG or SVG image. |
+| `scaleFactor` | Number / Object | _Number_: The number by which to multiply the width and height (default `1`) of an exported PNG or SVG image. <br> _Object_: The different multipliers for each format (`{ svg: <Number>, png: <Number> }`). If one of the formats is omitted, the default value is used. |
 | `editorUrl`    | String   | The URL at which to open embedded Vega specs in a Vega editor. Defaults to `"http://vega.github.io/editor/"`. Internally, Vega-Embed uses [HTML5 postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to pass the specification information to the editor. |
 | `sourceHeader` | String   | HTML to inject into the `head` tag of the page generated by the "View Source" and "View Vega" action link. For example, this can be used to add code for [syntax highlighting](https://highlightjs.org/). |
 | `sourceFooter` | String   | HTML to inject into the end of the page generated by the "View Source" and "View Vega" action link. The text will be added immediately before the closing `body` tag. |

src/embed.ts

@@ -8,6 +8,7 @@ import {
   Config as VgConfig,
   EncodeEntryName,
   isBoolean,
+  isObject,
   isString,
   Loader,
   LoaderOptions,
@@ -81,7 +82,7 @@ export interface EmbedOptions<S = string, R = Renderers> {
   width?: number;
   height?: number;
   padding?: number | {left?: number; right?: number; top?: number; bottom?: number};
-  scaleFactor?: number;
+  scaleFactor?: number | {svg?: number; png?: number};
   config?: S | Config;
   sourceHeader?: string;
   sourceFooter?: string;
@@ -462,6 +463,7 @@ async function _embed(
         if (actions === true || actions.export === true || (actions.export as {svg?: boolean; png?: boolean})[ext]) {
           const i18nExportAction = (i18n as {[key: string]: string})[`${ext.toUpperCase()}_ACTION`];
           const exportLink = document.createElement('a');
+          const scaleFactor = isObject(opts.scaleFactor) ? opts.scaleFactor[ext] : opts.scaleFactor;
 
           exportLink.text = i18nExportAction;
           exportLink.href = '#';
@@ -470,7 +472,7 @@ async function _embed(
           // add link on mousedown so that it's correct when the click happens
           exportLink.addEventListener('mousedown', async function (this, e) {
             e.preventDefault();
-            const url = await view.toImageURL(ext, opts.scaleFactor);
+            const url = await view.toImageURL(ext, scaleFactor);
             this.href = url;
           });
 

test-scalefactor.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vega-Embed for Vega-Lite</title>
+
+    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
+    <script src="build/vega-embed.js"></script>
+  </head>
+
+  <body>
+    <div id="vis"></div>
+    <script>
+      async function run() {
+        // const scaleFactor = 5;
+        // or
+        // const scaleFactor = { svg: 2, png: 5 };
+        // or
+        // const scaleFactor = { svg: 2 };
+        // or
+        const scaleFactor = { png: 5 };
+
+        const spec = {
+          $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+          data: {
+            values: [
+              { a: "A", b: 28 },
+              { a: "B", b: 55 },
+              { a: "C", b: 43 },
+              { a: "D", b: 91 },
+              { a: "E", b: 81 },
+              { a: "F", b: 53 },
+              { a: "G", b: 19 },
+              { a: "H", b: 87 },
+              { a: "I", b: 52 },
+            ],
+          },
+          mark: "bar",
+          encoding: {
+            x: { field: "a", type: "nominal" },
+            y: { field: "b", type: "quantitative" },
+            tooltip: { field: "b", type: "quantitative" },
+          },
+        };
+
+        const result = await vegaEmbed("#vis", spec, {
+          scaleFactor,
+          tooltip: { theme: "dark" },
+        });
+
+        console.log(result);
+      }
+      run();
+    </script>
+  </body>
+</html>

test/embed.test.ts

@@ -476,3 +476,11 @@ test('cannot set style via usermeta', async () => {
   expect(result).toBeTruthy();
   expect(result.embedOptions.defaultStyle).toBe(false);
 });
+
+test.each([5, {svg: 2, png: 5}, {svg: 2}, {png: 5}])('can set scaleFactor', async (scaleFactor) => {
+  const el = document.createElement('div');
+  const result = await embed(el, vlSpec, {
+    scaleFactor,
+  });
+  expect(result).toBeTruthy();
+});