Vue.js

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

Importing Vizzly

The in-browser query engine relies on our in-memory database. You will install this by adding a script tag in the head tag of your webpage.

<html>
  <head>
    <!-- ... -->
    <meta charset="utf-8" />
 
    <!-- 
      [REQUIRED FOR IN-BROWSER ONLY]  
      If you are running Vizzly's in-browser query engine, install Vizzly's in-memory DB
    -->
    <script src="https://static.app.vizzly.co/query-engine/0.8.29/vizzly-in-memory-db.umd.js"></script>
 
    <!--
      [REQUIRED]
      Install Vizzly's components
    -->
    <script src="https://static.app.vizzly.co/embedded/0.12.13/bundle.js"></script>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

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 setup>
import { onMounted, ref } from 'vue';
const dashboardRef = ref(null);
 
onMounted(() => {
  dashboardRef.value.render({
    // Pass your props here
  });
});
</script>
 
<template>
  <vizzly-dashboard ref="dashboardRef" />
</template>

Examples

In-Browser

<script setup>
import { onMounted, ref } from "vue";
const dashboardRef = ref(null);
 
onMounted(() => {
  dashboardRef.value.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>
 
<template>
  <vizzly-dashboard ref="dashboardRef" />
</template>

Query Engine

<script setup>
import { onMounted, ref } from 'vue';
const dashboardRef = ref(null);
 
onMounted(() => {
  dashboardRef.value.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>
 
<template>
  <vizzly-dashboard id="dashboard"></vizzly-dashboard>
</template>

Custom

<script setup>
import { onMounted, ref } from 'vue';
const dashboardRef = ref(null);
 
onMounted(() => {
  dashboardRef.value.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>
 
<template>
  <vizzly-dashboard id="dashboard"></vizzly-dashboard>
</template>