In-browser

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 dashboard to load the entirety of a user's data set into the browser. The dashboard will then process all queries on the client and therefore no further network calls or database queries will be made.


Example usage

Install scripts

The in-browser query engine relies on our in-memory database. You will install this by adding a script tag in the head tag of your webpage.

<html>
  <head>
    <!-- ... -->
    <meta charset="utf-8" />
 
    <!-- 
      [REQUIRED FOR IN-BROWSER ONLY]  
      If you are running Vizzly's in-browser query engine, install Vizzly's in-memory DB
    -->
    <script src="https://static.app.vizzly.co/query-engine/0.8.11/vizzly-in-memory-db.umd.js"></script>
 
    <!--
      [REQUIRED]
      Install Vizzly's dashboard
    -->
    <script src="https://static.app.vizzly.co/embedded/0.9.0/bundle.js"></script>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Code example

Learn more about our React offering here

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 15mb for example.

FetchingIntegrations