Add embed option exportDataSet

If set, this is used to populate the data when opening in Vega editor or viewing Vega source
vega · Jul 20, 2021 · 6dce5b0 · 6dce5b0
1 parent 552c963
commit 6dce5b0
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 2 deletions.
diff --git a/src/embed.ts b/src/embed.ts
@@ -88,6 +88,7 @@ export interface EmbedOptions<S = string, R = Renderers> {
   timeFormatLocale?: Record<string, unknown>;
   ast?: boolean;
   viewClass?: typeof View;
+  exportDataSet?: string;
 }
 
 const NAMES: {[key in Mode]: string} = {
@@ -468,7 +469,15 @@ async function _embed(
       viewSourceLink.text = i18n.SOURCE_ACTION;
       viewSourceLink.href = '#';
       viewSourceLink.addEventListener('click', function (this, e) {
-        viewSource(stringify(spec), opts.sourceHeader ?? '', opts.sourceFooter ?? '', mode);
+        const exportSpec = spec;
+        if (opts.exportDataSet !== undefined) {
+          exportSpec.data = {
+            // We convert from JSON and back to remove the un-serialisable Symbol from view.data
+            values: view.data(opts.exportDataSet).map((d) => JSON.parse(JSON.stringify(d))),
+          };
+        }
+
+        viewSource(stringify(exportSpec), opts.sourceHeader ?? '', opts.sourceFooter ?? '', mode);
         e.preventDefault();
       });
 
@@ -497,11 +506,19 @@ async function _embed(
       editorLink.text = i18n.EDITOR_ACTION;
       editorLink.href = '#';
       editorLink.addEventListener('click', function (this, e) {
+        const exportSpec = spec;
+        if (opts.exportDataSet !== undefined) {
+          exportSpec.data = {
+            // We convert from JSON and back to remove the un-serialisable Symbol from view.data
+            values: view.data(opts.exportDataSet).map((d) => JSON.parse(JSON.stringify(d))),
+          };
+        }
+
         post(window, editorUrl, {
           config: config as Config,
           mode,
           renderer,
-          spec: stringify(spec),
+          spec: stringify(exportSpec),
         });
         e.preventDefault();
       });

diff --git a/test-changeset.html b/test-changeset.html
@@ -0,0 +1,71 @@
+<!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@4"></script>
+    <script src="build/vega-embed.js"></script>
+  </head>
+  <body>
+    <h1>Template for Embedding Vega-Lite Visualization</h1>
+    <div id="vis"></div>
+
+    <script>
+      const vlSpec = {
+        $schema: "https://vega.github.io/schema/vega-lite/v4.json",
+        data: { name: "table" },
+        width: 400,
+        mark: "line",
+        encoding: {
+          x: { field: "x", type: "quantitative", scale: { zero: false } },
+          y: { field: "y", type: "quantitative" },
+          color: { field: "category", type: "nominal" },
+        },
+      };
+      vegaEmbed("#vis", vlSpec, { exportDataSet: "table" }).then(function (res) {
+        /**
+         * Generates a new tuple with random walk.
+         */
+        function newGenerator() {
+          let counter = -1;
+          let previousY = [5, 5, 5, 5];
+          return function () {
+            counter++;
+            const newVals = previousY.map(function (v, c) {
+              return {
+                x: counter,
+                y: v + Math.round(Math.random() * 10 - c * 3),
+                category: c,
+              };
+            });
+            previousY = newVals.map(function (v) {
+              return v.y;
+            });
+            return newVals;
+          };
+        }
+
+        const valueGenerator = newGenerator();
+        let minimumX = -100;
+        let counter = 0;
+        const looper = window.setInterval(function () {
+          minimumX++;
+          const changeSet = vega
+            .changeset()
+            .insert(valueGenerator())
+            .remove(function (t) {
+              return t.x < minimumX;
+            });
+          res.view.change("table", changeSet).run();
+
+          if (counter++ >= 5) {
+            window.clearInterval(looper);
+          }
+        }, 1000);
+      });
+    </script>
+  </body>
+</html>