Svelte

Svelte

Vizzly offers a Web Component that can be used in any Svelte application. It is highly recommended to read the general introduction to the Vizzly component before using it in your Svelte application. You can find the general introduction here.

Importing Vizzly

To get started you'll need to add a script tag to the <head> of your index.html.

<script src="https://static.app.vizzly.co/embedded/0.8.0/bundle.js"></script>

Usage

It is important that you give the component an id attribute. This is required to identify the component in your application. You can then reference the component in a script tag and call the render function to render the component.

We've created a simple component which you can copy and paste into your application.

You can pass any props to the component which are supported by the Vizzly component Props Reference.

<script>
  import { onMount } from 'svelte';
 
  onMount(() => {
    dashboard.render({
      // Pass your props here
    });
  });
 
</script>
 
<vizzly-dashboard id="dashboard" />

Examples

In-Browser

<script>
  import { onMount } from 'svelte';
 
  onMount(() => {
    dashboard.render({
      dataSets: async () => {
        return [
          {
            id: "data_set_1",
            name: "My first data set",
            fields: [
              {
                dataType: "number" as const,
                publicName: "Player age",
                id: "fie_1",
                canBeDimension: false,
                canBeMeasure: true,
              },
              {
                dataType: "string" as const,
                publicName: "Game",
                id: "fie_2",
                canBeDimension: true,
                canBeMeasure: false,
              },
              {
                dataType: "number" as const,
                publicName: "Score",
                id: "fie_3",
                canBeDimension: false,
                canBeMeasure: true,
              },
              {
                dataType: "date_time" as const,
                publicName: "Recorded at",
                id: "fie_4",
                canBeDimension: false,
                canBeMeasure: true,
                allowedGranularities: ["month", "year"],
              },
            ],
          },
        ];
      },
      data: async (dataSet) => {
        if (dataSet.id == "data_set_1") {
          return [
            {
              fie_1: 16,
              fie_2: "Space invaders",
              fie_3: 54,
              fie_4: "2023-01-30T08:21:25.459Z",
            },
            {
              fie_1: 12,
              fie_2: "Space invaders",
              fie_3: 54,
              fie_4: "2023-02-13T08:21:25.459Z",
            },
            {
              fie_1: 9,
              fie_2: "Space invaders",
              fie_3: 4,
              fie_4: "2023-03-13T08:21:25.459Z",
            },
            {
              fie_1: 19,
              fie_2: "Space invaders",
              fie_3: 140,
              fie_4: "2023-04-07T08:21:25.459Z",
            },
            {
              fie_1: 90,
              fie_2: "Tetris",
              fie_3: 7,
              fie_4: "2023-03-13T08:21:25.459Z",
            },
            {
              fie_1: 73,
              fie_2: "Tetris",
              fie_3: 68,
              fie_4: "2023-04-07T08:21:25.459Z",
            },
          ];
        } else {
          throw "Unknown data set.";
        }
      },
      identity: async () => {
        const response = await fetch("<< Your identity endpoint >>");
        if (response.ok) {
          const responseBody = await response.json();
          return responseBody.accessTokens;
        }
        return null;
      },
    })
  });
</script>
 
<vizzly-dashboard id="dashboard" />

Query Engine

<script>
  import { onMount } from 'svelte';
 
  let dashboard;
 
  onMount(() => {
    dashboard = window.dashboard;
    dashboard.render({
      queryEngineEndpoint: "<< The endpoint of your Vizzly query engine >>",
 
      // https://docs.vizzly.co/callbacks/identity
      identity: async () => {
        // Opens a guide... replace this when you're ready!
        throw new Error("Not implemented yet!");
      },
    });
  });
</script>
 
<vizzly-dashboard id="dashboard" />

Custom

<script>
  // needed to register the component
  import "@vizzly/dashboard-webcomponent";
  import { onMount } from "svelte";
 
  onMount(() => {
    dashboard.render({
      // https://docs.vizzly.co/dashboard/properties/identity
      identity: async () => {
        // Opens a guide... replace this when you're ready!
        throw new Vizzly.NewVizzlyImplementation();
      },
 
      // https://docs.vizzly.co/dashboard/properties/runQueries
      runQueries: async (queries, params) => {
        {
          /*
        TODO: Return results for the queries, in the Result format.
        https://docs.vizzly.co/concepts/result
        */
        }
        return [];
      },
 
      // https://docs.vizzly.co/dashboard/properties/dataSets
      dataSets: async () => {
        {
          /*
        TODO: Return a list of data set schemas that are available to your
        user.
        */
        }
        return [];
      },
    });
  });
</script>
 
<vizzly-dashboard id="dashboard" />