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'.

Query Engine

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

To run our in-browser solution, you will set the identity, data and dataSets properties. The following React code will 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 will 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 [];
  }}
/>