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