Dashboard
There is a single react component that renders the dashboard. The method parameter required depends on the value of the type
property you provide it.
The available types include are in-browser
, self-hosted
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
type='self-hosted'
// e.g 'https://analytics.example.com'
vizzlyDockerImageEndpoint='<< The endpoint of your Vizzly query engine >>'
// https://docs.vizzly.co/callbacks/identity
identityCallback={async () => {
// Opens a guide... replace this when you're ready!
throw new Vizzly.NewVizzlyImplementation();
}}
/>
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
type: 'custom'
// https://docs.vizzly.co/callbacks/identity
identityCallback: VizzlyComponents.identityCallback;
// https://docs.vizzly.co/callbacks/runQueriesCallback
runQueriesCallback: VizzlyComponents.runQueriesCallback;
// https://docs.vizzly.co/callbacks/loadDataSetsCallback
loadDataSetsCallback: VizzlyComponents.loadDataSetsCallback;
/>
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
type: 'in-browser'
// https://docs.vizzly.co/callbacks/identity
identityCallback: VizzlyComponents.identityCallback;
// https://docs.vizzly.co/callbacks/loadDataCallback
loadDataCallback: VizzlyComponents.loadDataCallback;
// https://docs.vizzly.co/callbacks/loadDataSetsCallback
loadDataSetsCallback: VizzlyComponents.loadDataSetsCallback;
/>
Last updated on December 22, 2022