@vizzly/dashboard

Vizzly dashboard is a JavaScript library for providing the Vizzly dashboard React component.

The @vizzly/dashboard package contains only the functionality necessary to render a Vizzly dashboard. There is a single component, but it can be used in three different ways.

Usage

The dashboard component is supported by what we call a "query engine". There are 3 different query engines available. These are 'self-hosted', 'in-browser' and 'custom'.

Self-hosted

Results are fetched from the Vizzly query engine deployed to your cloud environment. The code snippet below is ready to be copied & pasted into your project!

import Vizzly from '@vizzly/dashboard';

<Vizzly.Dashboard
  // e.g 'https://analytics.example.com'
  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 Vizzly.NewVizzlyImplementation();

  }}
/>

In-browser

If each of your users have very small amounts of data (below < 5mb is recommended), then this option is for you. The following React code is mixed with some typescript type definitions to get you started.

import Vizzly from '@vizzly/dashboard';

<Vizzly.Dashboard
  // https://docs.vizzly.co/callbacks/identity
  identity: VizzlyComponents.identityCallback;

  // https://docs.vizzly.co/dashboard/properties/data
  data={async (dataSet) => {
    {/*
      TODO: Return a list of objects, representing the data for the dataSet
      provided as an argument.
    */}
    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 [];
  }}
/>

Custom

If you have complex query or authentication requirements, then this option is for you. The following React code is mixed with some typescript type definitions to get you started.

import Vizzly from '@vizzly/dashboard';

<Vizzly.Dashboard
  // 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 [];
  }}
/>

Documentation

See https://docs.vizzly.co

Website

See https://vizzly.co