feat: more Stories

Added additional stories to the storybook. The one with the changing dimensionality is not yet fully
working.

packages/storybook/stories/ChangingDimensionDemo.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+  import type { EmbedOptions } from "vega-embed";
+  import Vega from "../../svelte-vega/src/Vega.svelte";
+  import data1 from "./data1.json";
+  import spec1 from "./spec1";
+  import spec2 from "./spec2";
+
+  let options: EmbedOptions = {
+    width: 100,
+    height: 100,
+    padding: 20,
+  };
+  let grow = true;
+  let interval: NodeJS.Timeout;
+  let info = "";
+  let data = data1;
+  let spec = spec1;
+  const handlers: {
+    tooltip: (...args: unknown[]) => void;
+  } = { tooltip: (...args) => (info = JSON.stringify(args)) };
+
+  function handleToggleSpec() {
+    if (spec === spec1) {
+      spec = spec2;
+    } else {
+      spec = spec1;
+    }
+  }
+
+  function handleUpdateData() {
+    const table = [];
+    for (let i = 1; i <= 20; i++) {
+      table.push({
+        amount: Math.round(Math.random() * 100),
+        category: String.fromCharCode(65 + i),
+      });
+    }
+    data = { table };
+  }
+
+  onMount(() => {
+    interval = setInterval(() => {
+      options = {
+        ...options,
+        width: options.width! + (grow ? 1 : -1),
+        height: options.height! + (grow ? 1 : -1),
+      };
+      grow =
+        (grow && options.width! < 400) || (!grow && options.width! === 100);
+    }, 10);
+  });
+
+  onDestroy(() => {
+    clearInterval(interval);
+  });
+</script>
+
+<main>
+  <div style={"float: right"}>
+    <iframe
+      title="star"
+      src="https://ghbtns.com/github-btn.html?user=vega&repo=svelte-vega&type=star&count=true"
+      frameBorder="0"
+      scrolling="0"
+      width="100px"
+      height="20px"
+    />
+  </div>
+  <button on:click={handleToggleSpec}>Toggle Spec</button>
+  <button on:click={handleUpdateData}>Update Data</button>
+  <div class="content">
+    <h3>
+      <code>&lt;Vega&gt;</code> Svelte Component
+    </h3>
+    Will recompile when spec changes and update when data changes.
+    <Vega {data} {spec} {options} signalListeners={handlers} />
+    <div>
+      Hover info: <code>{info}</code>
+    </div>
+  </div>
+</main>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

packages/storybook/stories/SvelteVegaDemo.stories.js

@@ -1,13 +1,33 @@
 import SvelteVegaDemo from "./SvelteVegaDemo.svelte";
+import ChangingDimensionDemo from "./ChangingDimensionDemo.svelte";
 
 export default {
   title: "svelte-vega/Vega",
   component: SvelteVegaDemo,
   argTypes: {},
 };
 
-const Template = () => ({
+const Template = ({ ...args }) => ({
   Component: SvelteVegaDemo,
+  props: args,
+});
+
+const SizingTemplate = ({ ...args }) => ({
+  Component: ChangingDimensionDemo,
+  props: args,
 });
 
 export const Demo = Template.bind({});
+export const Width300 = Template.bind({});
+Width300.args = {
+  options: {
+    width: 300,
+  },
+};
+export const Height300 = Template.bind({});
+Height300.args = {
+  options: {
+    height: 300,
+  },
+};
+export const ChangingSize = SizingTemplate.bind({});

packages/storybook/stories/SvelteVegaDemo.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
+  import type { EmbedOptions } from "vega-embed";
   import Vega from "../../svelte-vega/src/Vega.svelte";
   import data1 from "./data1.json";
   import spec1 from "./spec1";
   import spec2 from "./spec2";
 
+  export let options: EmbedOptions = {};
+
   let info = "";
   let data = data1;
   let spec = spec1;
   const handlers: {
     tooltip: (...args: unknown[]) => void;
   } = { tooltip: (...args) => (info = JSON.stringify(args)) };
 
-  $: options = {
-    signalListeners: handlers,
-  };
-
   function handleToggleSpec() {
     if (spec === spec1) {
       spec = spec2;

packages/storybook/stories/SvelteVegaLiteDemo.stories.js

@@ -0,0 +1,13 @@
+import SvelteVegaLiteDemo from "./SvelteVegaLiteDemo.svelte";
+
+export default {
+  title: "svelte-vega/VegaLite",
+  component: SvelteVegaLiteDemo,
+  argTypes: {},
+};
+
+const Template = () => ({
+  Component: SvelteVegaLiteDemo,
+});
+
+export const Demo = Template.bind({});

packages/storybook/stories/SvelteVegaLiteDemo.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { EmbedOptions } from "vega-embed";
+  import VegaLite from "../../svelte-vega/src/VegaLite.svelte";
+  import data1 from "./data1.json";
+  import spec1 from "./spec1";
+  import spec2 from "./spec2";
+
+  export let options: EmbedOptions = {};
+
+  let info = "";
+  let data = data1;
+  let spec = spec1;
+  const handlers: {
+    tooltip: (...args: unknown[]) => void;
+  } = { tooltip: (...args) => (info = JSON.stringify(args)) };
+
+  function handleToggleSpec() {
+    if (spec === spec1) {
+      spec = spec2;
+    } else {
+      spec = spec1;
+    }
+  }
+
+  function handleUpdateData() {
+    const table = [];
+    for (let i = 1; i <= 20; i++) {
+      table.push({
+        amount: Math.round(Math.random() * 100),
+        category: String.fromCharCode(65 + i),
+      });
+    }
+    data = { table };
+  }
+</script>
+
+<main>
+  <div style={"float: right"}>
+    <iframe
+      title="star"
+      src="https://ghbtns.com/github-btn.html?user=vega&repo=svelte-vega&type=star&count=true"
+      frameBorder="0"
+      scrolling="0"
+      width="100px"
+      height="20px"
+    />
+  </div>
+  <button on:click={handleToggleSpec}>Toggle Spec</button>
+  <button on:click={handleUpdateData}>Update Data</button>
+  <div class="content">
+    <h3>
+      <code>&lt;VegaLite&gt;</code> Svelte Component
+    </h3>
+    Will recompile when spec changes and update when data changes.
+    <VegaLite {data} {spec} {options} signalListeners={handlers} />
+    <div>
+      Hover info: <code>{info}</code>
+    </div>
+  </div>
+</main>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+</style>