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} />
</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" />
</Wrapper>;

Copilot

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

import { Wrapper, Dashboard, DashboardHeader } from "@onvo-ai/react";
 
<Wrapper token="token" baseURL="https://dashboard.onvo.ai">
    <Copilot trigger={<SomeComponent />} dashboardId="dashboardId" variant="fullscreen|copilot" />
</Wrapper>;

Links