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 for each render of the chart.
Example usage
import Head from "next/head";
import Vizzly from "@vizzly/dashboard";
export default function InBrowser() {
return (
<>
<Head>
<title>Vizzly in-browser example</title>
</Head>
<header
style={{
marginBottom: "10px",
height: "45px",
background: "rgba(0, 0, 0, .8)",
}}
/>
<Vizzly.Dashboard
type="in-browser"
loadDataSetsCallback={async () => {
return [
{
id: "das_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"],
},
],
},
];
}}
loadDataCallback={async (dataSet) => {
if (dataSet.id == "das_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.";
}
}}
identityCallback={async () => {
const response = await fetch("/api/identity");
if (response.ok) {
const tokens = await response.json();
return tokens;
}
return null;
}}
/>
</>
);
}
Callbacks
We have more information on the identity, and load data callbacks available to you.
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’s available to a user for querying.
This option should only be used if the total size of the data sets are small, under 1MB.