Dashboard
HTML

HTML & JavaScript

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

Usage

To use the Vizzly component in your application you need to import it from either npm or a CDN such as esm.sh.

⚠️

You need to make sure that you imported the @vizzly/dashboard-webcomponent package at least once somewhere in your application. Otherwise the component will not be registered and you will get an error.

You can pass any properties to the component that are supported by the Vizzly component.

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.

<script type="module">
  // you can also use the unpkg.com CDN
  import "https://esm.sh/@vizzly/dashboard-webcomponent";
 
  dashboard.render({
    // Your dashboard properties go here, such as `identity`
  });
</script>
<vizzly-dashboard id="dashboard" />

Examples

In-Browser

<script type="module">
  // you can also use the unpkg.com CDN
  import "https://esm.sh/@vizzly/dashboard-webcomponent";
 
  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" />

Self Hosted

<script type="module">
  // you can also use the unpkg.com CDN
  import "https://esm.sh/@vizzly/dashboard-webcomponent";
 
  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 type="module">
  // you can also use the unpkg.com CDN
  import "https://esm.sh/@vizzly/dashboard-webcomponent";
 
  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" />
VueSvelte