# `@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!

```jsx
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.

```jsx
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.

```jsx
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
