Angular

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

Installation

To get started make sure to install the package using your favorite package manager.

npm i @vizzly/dashboard-webcomponent --legacy-peer-deps

Usage

To use the Vizzly component in your Angular application you need to import the component and register it in your Angular application. You can do this either in the root of your app or in a specific component.

⚠️

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.

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.

// needed to register the component
import "@vizzly/dashboard-webcomponent";
import type { VizzlyDashboard } from "@vizzly/dashboard-webcomponent";
import { Component, ElementRef, AfterViewInit, ViewChild } from "@angular/core";
 
@Component({
  selector: "dashboard"
  standalone: true,
  template: `
   <vizzly-dashboard ngModel #dashboard>
  `,
})
export class VizzlyDashboard implements AfterViewInit {
  @ViewChild("dashboard") dashboardRef: ElementRef<VizzlyDashboard>;
 
  ngAfterViewInit() {
    this.dashboardRef.nativeElement.render({
      // Pass your props here
    });
  }
}

Examples

In-Browser

import "@vizzly/dashboard-webcomponent";
import type { VizzlyDashboard } from "@vizzly/dashboard-webcomponent";
import { Component, ElementRef, AfterViewInit, ViewChild } from "@angular/core";
 
@Component({
  selector: "dashboard"
  standalone: true,
  template: `
   <vizzly-dashboard ngModel #dashboard>
  `,
})
export class VizzlyDashboard implements AfterViewInit {
  @ViewChild("dashboard") dashboardRef: ElementRef<VizzlyDashboard>;
 
  ngAfterViewInit() {
    this.dashboardRef.nativeElement.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;
    },
  });
  }
}

Self Hosted

import "@vizzly/dashboard-webcomponent";
import type { VizzlyDashboard } from "@vizzly/dashboard-webcomponent";
import { Component, ElementRef, AfterViewInit, ViewChild } from "@angular/core";
 
@Component({
  selector: "dashboard"
  standalone: true,
  template: `
   <vizzly-dashboard ngModel #dashboard>
  `,
})
export class VizzlyDashboard implements AfterViewInit {
  @ViewChild("dashboard") dashboardRef: ElementRef<VizzlyDashboard>;
 
  ngAfterViewInit() {
    this.dashboardRef.nativeElement.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!");
    },
  });
  }
}

Custom

import "@vizzly/dashboard-webcomponent";
import type { VizzlyDashboard } from "@vizzly/dashboard-webcomponent";
import { Component, ElementRef, AfterViewInit, ViewChild } from "@angular/core";
 
@Component({
  selector: "dashboard"
  standalone: true,
  template: `
   <vizzly-dashboard ngModel #dashboard>
  `,
})
export class VizzlyDashboard implements AfterViewInit {
  @ViewChild("dashboard") dashboardRef: ElementRef<VizzlyDashboard>;
 
  ngAfterViewInit() {
    this.dashboardRef.nativeElement.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 [];
    },
  });
  }
}

Svelte Self-hosted