React library

The react package can be used to display the list of dashboards available to a user or single dashboard. The components are also completely customizable.

Installation

In your frontend environment, install the @onvo-ai/react package, this lets you display the list of dashboards and individual dashboards.

npm install @onvo-ai/react 

Usage

Begin by creating an API key by going to https://dashboard.onvo.ai/api-keys (opens in a new tab), filling in a name for your API key and clicking Generate. Use this token to setup a backend endpoint that can fetch the user access token from a secure environment.

import { Wrapper, DashboardList } from "@onvo-ai/react";
const baseUrl = "https://dashboard.onvo.ai";
 
const ListPage = () => {
const [accessToken, setAccessToken] = useState("");
const userId = "123456";
 
useEffect(() => {
fetch("/api/get-token/" + userId)
.then((data) => data.json())
.then((data) => {
setAccessToken(data.token);
});
}, []);
 
return (
 
<Wrapper baseUrl={baseUrl} token={accessToken}>
  <DashboardList
    columns={3}
    variant="grid"
    onClickItem={(dashboard) => console.log(dashboard)}
  />
</Wrapper>
); };
 
const DashboardPage = (id) => {
const [accessToken, setAccessToken] = useState("");
const userId = "123456";
 
useEffect(() => {
fetch("/api/get-token/" + userId)
.then((data) => data.json())
.then((data) => {
setAccessToken(data.token);
});
}, []);
 
return (
 
<Wrapper baseUrl={baseUrl} token={accessToken}>
  <Dashboard id={id}>
    <DashboardHeader />
    <DashboardGrid />
  </Dashboard>
</Wrapper>
); };
 

Library Reference

Wrapper

The Wrapper provides the rest of the components with the authentication necessary to function. All components would be required to be wrapped with this and so it makes sense to initialize it at the highest level possible (preferably at the root)

import { Wrapper } from "@onvo-ai/react";
 
<Wrapper token="token" baseURL="https://dashboard.onvo.ai">
  {
    /// ...other components go here
  }
</Wrapper>;

DashboardList

The Dashboard list provides a list of all the dashboards an embed user has access to. You can render it as a list or as a grid and you get a callback when a dashboard is clicked.

import { Wrapper, DashboardList } from "@onvo-ai/react";
 
<Wrapper token="token" baseURL="https://dashboard.onvo.ai">
  <DashboardList 
    variant="grid|list" 
    columns={3} 
    onClickItem={dashboard => {
      console.log(dashboard)
    }} 
  />
</Wrapper>;

Dashboard

This component is used to show a single dashboard. By itself, this component does not render anything and is merely a wrapper for other components listed below.

import { Wrapper, Dashboard } from "@onvo-ai/react";
 
<Wrapper token="token" baseURL="https://dashboard.onvo.ai">
  <Dashboard id="dashboardId">
    {
      /// ...other components go here
    }
  </Dashboard>
</Wrapper>;

DashboardHeader

This component is show a header for a dashboard. This includes the title, the subtitle and a button to export the dashboard in various formats.

import { Wrapper, Dashboard, DashboardHeader } from "@onvo-ai/react";
 
<Wrapper token="token" baseURL="https://dashboard.onvo.ai">
  <Dashboard id="dashboardId">
    <DashboardHeader />
    {
      /// ...other components go here
    }
  </Dashboard>
</Wrapper>;

DashboardGrid

This component is show the grid of all widgets in the dashboard.

import { Wrapper, Dashboard, DashboardGrid } from "@onvo-ai/react";
 
<Wrapper token="token" baseURL="https://dashboard.onvo.ai">
  <Dashboard id="dashboardId">
    <DashboardGrid spacing={10} />
    {
      /// ...other components go here
    }
  </Dashboard>
</Wrapper>;

QuestionModal

This component allows a user to ask questions to the dashboard and create new widgets.

import { Wrapper, Dashboard, QuestionModal } from "@onvo-ai/react";
 
<Wrapper token="token" baseURL="https://dashboard.onvo.ai">
  <Dashboard id="dashboardId">
    <QuestionModal />
    {
      /// ...other components go here
    }
  </Dashboard>
</Wrapper>;

Links