Initializing Vizzly Services

Install

npm install @vizzly/services

Setup

If you used npm or yarn to install the services package, you can import Vizzly from the service package;

import { Vizzly } from "@vizzly/services;

Or if you have used the CDN, you will have Vizzly globally available on the browser window object.

Once the services package is available in your codebase, we need to configure it depending on the strategy used to implement Vizzly.

const vizzly = await Vizzly.load({
  // The URL of your Query Engine (Including prefix `https://`)
  queryEngine: '<< Your Query Engine Endpoint >>',
 
  // https://docs.vizzly.co/dashboard/properties/identity
  identity: async () => ({dashboardAccessToken: '...', dataAccessToken: '...'}),
});

Faster loading

To improve performance, you can start the loading process on page-load. To achieve this, you can call the Vizzly.load function at the top level. For example

Vizzly.load(/* properties */)
 
export const doSomethingWithVizzly = () => {
  const vizzly = Vizzly.use();
 
  // use vizzly class here as usual
};

Usage

Now you have Vizzly instantiated, you can build, store, fetch, update and delete dashboards.

Wrappers

React

For react, we wrap the services package in a useVizzly hook from the dashboard package. This hook provides;

• loading - Boolean to show if the hook still loading.
• A helper function to filter dashboards
• A function to create more child dashboards for the user - createDashboard
• A function to update a dashboard for a user - updateDashboard

For creating and updating dashboards, see the programmatic usage documentation

Example

import { useVizzly } from '@vizzly/dashboard';
 
export const PrintDashboards = () => {
  const vizzly = useVizzly({
    // The URL of your Query Engine (Including prefix `https://`)
    queryEngine: '<< Your Query Engine Endpoint >>',
 
    // https://docs.vizzly.co/dashboard/properties/identity
    identity: async () => ({dashboardAccessToken: '...', dataAccessToken: '...'}),
  });
 
  if(vizzly.loading) return <p>Loading</p>
 
  return <pre>{JSON.stringify(vizzly.dashboards, null, 2)}</pre>
};