feat: expose resulting Vega View (#59)

Co-authored-by: Alex Cabrera <angel_cabrera@apple.com>
vega · May 20, 2021 · e933cf3 · e933cf3
1 parent 58e524d
commit e933cf3
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 35 deletions.
diff --git a/packages/sample-project/src/App.svelte b/packages/sample-project/src/App.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { Vega, VegaLite } from "svelte-vega";
-  import type { VisualizationSpec } from "svelte-vega";
+  import type { VisualizationSpec, View } from "svelte-vega";
 
-  let dataVL = {
+  const data = {
     table: [
       { category: "A", amount: 28 },
       { category: "B", amount: 55 },
@@ -14,6 +14,8 @@
       { category: "H", amount: 87 },
     ],
   };
+
+  let viewVL: View;
   let specVL: VisualizationSpec = {
     $schema: "https://vega.github.io/schema/vega-lite/v5.json",
     description: "A simple bar chart with embedded data.",
@@ -27,18 +29,7 @@
     },
   };
 
-  const dataV = {
-    table: [
-      { category: "A", amount: 28 },
-      { category: "B", amount: 55 },
-      { category: "C", amount: 43 },
-      { category: "D", amount: 91 },
-      { category: "E", amount: 81 },
-      { category: "F", amount: 53 },
-      { category: "G", amount: 19 },
-      { category: "H", amount: 87 },
-    ],
-  };
+  let viewV: View;
   const specV: VisualizationSpec = {
     $schema: "https://vega.github.io/schema/vega/v5.json",
     width: 400,
@@ -48,16 +39,6 @@
     data: [
       {
         name: "table",
-        values: [
-          { category: "A", amount: 28 },
-          { category: "B", amount: 55 },
-          { category: "C", amount: 43 },
-          { category: "D", amount: 91 },
-          { category: "E", amount: 81 },
-          { category: "F", amount: 53 },
-          { category: "G", amount: 19 },
-          { category: "H", amount: 87 },
-        ],
       },
     ],
 
@@ -132,11 +113,15 @@
       },
     ],
   };
+
+  $: viewVL ? console.log("Vega-Lite view: ", viewVL.data("table")) : "";
+  $: viewV ? console.log("Vega view: ", viewV.data("table")) : "";
+
 </script>
 
 <main>
-  <Vega data={dataV} spec={specV} />
-  <VegaLite data={dataVL} spec={specVL} />
+  <Vega {data} spec={specV} bind:view={viewV} />
+  <VegaLite {data} spec={specVL} bind:view={viewVL} />
 </main>
 
 <style>
@@ -152,4 +137,5 @@
       max-width: none;
     }
   }
+
 </style>
diff --git a/packages/svelte-vega/src/Vega.svelte b/packages/svelte-vega/src/Vega.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
   import type { EmbedOptions, Mode } from "vega-embed";
-  import type { SignalListeners, VisualizationSpec } from "./types";
+  import type { SignalListeners, VisualizationSpec, View } from "./types";
   import VegaEmbed from "./VegaEmbed.svelte";
 
+  export let view: View | undefined;
   export let spec: VisualizationSpec;
   export let options: EmbedOptions = {};
   export let data: Record<string, unknown> = {};
   export let signalListeners: SignalListeners = {};
 
   const mode = "vega" as Mode;
   $: vegaOptions = { ...options, mode: mode };
+
 </script>
 
 <VegaEmbed
   {spec}
   {data}
   {signalListeners}
   options={vegaOptions}
+  bind:view
   on:onNewView
   on:onError
 />
diff --git a/packages/svelte-vega/src/VegaEmbed.svelte b/packages/svelte-vega/src/VegaEmbed.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { createEventDispatcher, onDestroy } from "svelte";
   import type { EmbedOptions, Result } from "vega-embed";
+  import type { SignalListeners, View, VisualizationSpec } from "./types";
+
+  import { createEventDispatcher, onDestroy } from "svelte";
   import vegaEmbed from "vega-embed";
+
   import { WIDTH_HEIGHT } from "./constants";
-  import type { SignalListeners, View, VisualizationSpec } from "./types";
   import {
     addSignalListenersToView,
     updateMultipleDatasetsInView,
@@ -15,6 +17,7 @@
 
   export let options: EmbedOptions;
   export let spec: VisualizationSpec;
+  export let view: View | undefined;
   export let signalListeners: SignalListeners = {};
   export let data: Record<string, unknown> = {};
 
@@ -55,7 +58,7 @@
               newSignalListeners,
               oldSignalListeners
             );
-            const { view } = result;
+            view = result.view;
             if (specChanges.width !== false) {
               view.width(specChanges.width);
             }
@@ -76,7 +79,7 @@
           !shallowEqual(newSignalListeners, oldSignalListeners) &&
           result !== undefined
         ) {
-          const { view } = result;
+          view = result.view;
           if (oldSignalListeners) {
             removeSignalListenersFromView(view, oldSignalListeners);
           }
@@ -99,9 +102,8 @@
   async function createView() {
     clearView();
     try {
-      console.info("Creating new view");
       result = await vegaEmbed(chartContainer, spec, options);
-      const { view } = result;
+      view = result.view;
       if (addSignalListenersToView(view, signalListeners)) {
         view.runAsync();
       }
@@ -115,6 +117,7 @@
     if (result) {
       result.finalize();
       result = undefined;
+      view = undefined;
     }
   }
 
@@ -135,11 +138,12 @@
 
   async function update() {
     if (data && Object.keys(data).length > 0 && result !== undefined) {
-      const { view } = result;
+      view = result.view;
       updateMultipleDatasetsInView(view, data);
       await view.resize().runAsync();
     }
   }
+
 </script>
 
 <div bind:this={chartContainer} />
diff --git a/packages/svelte-vega/src/VegaLite.svelte b/packages/svelte-vega/src/VegaLite.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
   import type { EmbedOptions, Mode } from "vega-embed";
-  import type { SignalListeners, VisualizationSpec } from "./types";
+  import type { SignalListeners, VisualizationSpec, View } from "./types";
   import VegaEmbed from "./VegaEmbed.svelte";
 
+  export let view: View | undefined;
   export let spec: VisualizationSpec;
   export let options: EmbedOptions = {};
   export let data: Record<string, unknown> = {};
   export let signalListeners: SignalListeners = {};
 
   const mode = "vega-lite" as Mode;
   $: vegaLiteOptions = { ...options, mode: mode };
+
 </script>
 
 <VegaEmbed
   {spec}
   {data}
   {signalListeners}
   options={vegaLiteOptions}
+  bind:view
   on:onNewView
   on:onError
 />