In-browser

Benefit from Vizzly's in-browser query engine, by fetching the user's data set when the dashboard first loads.

In some cases, the data set you'll want to make available to each of your customers will be small, and in such a case you can instruct the Vizzly React component to load the entirety of a data set into the browser. The Vizzly React component will then manage all of the queries on the client’s browser and therefore no further network calls or database queries will be made.

Example usage

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import Vizzly from '@vizzly/dashboard';

function App() {
  return (
    <Vizzly.Dashboard
      dataSets={async () => {
        return [
          {
            id: 'data_set_1',
            name: 'My first data set',
            fields: [
              {
                dataType: 'number' as const,
                publicName: 'Player age',
                id: 'fie_1',
                canBeDimension: false,
                canBeMeasure: true,
              },
              {
                dataType: 'string' as const,
                publicName: 'Game',
                id: 'fie_2',
                canBeDimension: true,
                canBeMeasure: false,
              },
              {
                dataType: 'number' as const,
                publicName: 'Score',
                id: 'fie_3',
                canBeDimension: false,
                canBeMeasure: true,
              },
              {
                dataType: 'date_time' as const,
                publicName: 'Recorded at',
                id: 'fie_4',
                canBeDimension: false,
                canBeMeasure: true,
                allowedGranularities: ['month', 'year'],
              },
            ],
          },
        ];
      }}
      data={async (dataSet) => {
        if (dataSet.id == 'data_set_1') {
          return [
            {
              fie_1: 16,
              fie_2: 'Space invaders',
              fie_3: 54,
              fie_4: '2023-01-30T08:21:25.459Z',
            },
            {
              fie_1: 12,
              fie_2: 'Space invaders',
              fie_3: 54,
              fie_4: '2023-02-13T08:21:25.459Z',
            },
            {
              fie_1: 9,
              fie_2: 'Space invaders',
              fie_3: 4,
              fie_4: '2023-03-13T08:21:25.459Z',
            },
            {
              fie_1: 19,
              fie_2: 'Space invaders',
              fie_3: 140,
              fie_4: '2023-04-07T08:21:25.459Z',
            },
            {
              fie_1: 90,
              fie_2: 'Tetris',
              fie_3: 7,
              fie_4: '2023-03-13T08:21:25.459Z',
            },
            {
              fie_1: 73,
              fie_2: 'Tetris',
              fie_3: 68,
              fie_4: '2023-04-07T08:21:25.459Z',
            },
          ];
        } else {
          throw 'Unknown data set.';
        }
      }}
      identity={async () => {
        const response = await fetch(
          '<< Your identity endpoint >>'
        );
        if (response.ok) {
          const responseBody = await response.json();
          return responseBody.accessTokens;
        }
        return null;
      }}
    />
  );
}

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);

Component properties

To learn more about the properties you are required to set on the dashboard, please see the identity, and data documentation.

Multi-Tenancy

To make this work in a multi-tenancy environment, the dataset that’s downloaded must only contain data for the currently active user.

As this download happens in a JS callback function, you're in complete control over how that happens, so long as you return the data in the format Vizzly requires.

Limitations

The trade-off here is the initially blocking network call required to load all the data that are available to a user for querying.

This option should only be used if the total size of the data sets is small, under 5mb for example.

Angular Integrations