Dashboard

The Vizzly Dashboard is the main component that renders the entire dashboard.

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 < 3mb in total, 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/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 [];
  }}
/>

Dynamic Data Set identity