Reactjs
Last updated
Last updated
Databrain app ui web component plugin.
npm install @databrainhq/pluginQuick usage:
import React, { useState, useEffect } from 'react';
import '@databrainhq/plugin/web';
import "./App.css";
declare global {
namespace JSX {
interface IntrinsicElements {
"dbn-dashboard": any;
"dbn-metric": any;
}
}
}
function App() {
const [token, setToken] = useState<string | null>(null);
const dashboardId = 'your-dashboard-id'; // Replace with your actual dashboard ID
useEffect(() => {
const fetchToken = async () => {
try {
const response = await fetch('/fetch-guest-token');
if (!response.ok) {
throw new Error('Failed to fetch token');
}
const data = await response.json();
setToken(data.token); // Assuming the API returns the token in a 'token' field
} catch (error) {
console.error('Error fetching token:', error);
}
};
fetchToken();
}, []);
if (!token) {
return <div>Loading...</div>;
}
return (
<dbn-dashboard token={token} dashboard-id={dashboardId} />
);
}
export default App;For embedding a Metric Card you can use the dbn-metric webcomponent:
<dbn-metric token="guest-token" metric-id="metricId" />Token
Here is an example with sample token and dashboardId that you can use in your frontend app to get started without a backend.
<dbn-dashboard token="3affda8b-7bd4-4a88-9687-105a94cfffab" dashboard-id="ex-demo" />Breakdown:
Import the library main or index or App or layout file
import '@databrainhq/plugin/web';Once the library is imported, the web-components dbn-dashboard, dbn-metrics are available to use anywhere inside your app. And you use it anywhere in your app like:
const Example = () => {
return (
<dbn-dashboard
token="Your Guest Token"
dashboard-id="Your Dashboard Id"
is-hide-table-preview // in full screen view defaults to false
is-hide-chart-settings // in full screen view defaults to false
enable-download-csv // in metric card more icon actions defaults to false
enable-email-csv // in metric card more icon actions defaults to false
options-icon="kebab-menu-vertical | download" // one of the options defaults to kebab-menu-vertical
enable-multi-metric-filters // in metric card allow multiple metric filters
disable-fullscreen // to disable fullscreen view
theme-name="Name of the theme you want to apply from app settings ui theming"
custom-messages={JSON.stringify({
tokenExpiry: "Some custom message you want to show here."
})} // optional all keys as well
options={JSON.stringify({
disableMetricCreation: false,
disableMetricUpdation: false,
disableMetricDeletion: false,
disableLayoutCustomization: false,
hideDashboardName: false,
chartColors: [
'violet',
'indigo',
'blue',
'green',
'yellow',
'orange',
'red',
'pink',
'gray',
],
})}
theme={YOUR_THEME}
/>
);
};Integrating Metric
const Example = () => {
return (
<dbn-metric
token="Your Guest Token"
metric-id="Your Metric Id"
width="500"
height="300"
is-hide-chart-settings // in full screen view defaults to false
is-hide-table-preview // in full screen view defaults to false
enable-download-csv // in metric card more icon actions defaults to false
enable-email-csv // in metric card more icon actions defaults to false
enable-multi-metric-filters // in metric card allow multiple metric filters
options-icon="kebab-menu-vertical | download" // one of the options defaults to kebab-menu-vertical
metric-filter-position="outside | inside" // one of the option defaults to outside (from beta version 0.13.0-beta.8 only)
chart-renderer-type="canvas"
disable-fullscreen // to disable fullscreen view
theme-name="Name of the theme you want to apply from app settings ui theming"
custom-messages={JSON.stringify({
tokenExpiry: "Some custom message you want to show here."
})} // optional all keys as well
chart-colors={JSON.stringify([
'violet',
'indigo',
'blue',
'green',
'yellow',
'orange',
'red',
'pink',
'gray',
])}
metric-filter-options={JSON.stringify({ // note that invalid options will be filtered out
"Filter name for a string datatype": {
options: ['hello', 'hi'], // should have unique elements
defaultOption: 'hello', // name of the option
},
"Filter name for a number datatype": {
options: [9, 19, 23], // should have unique elements
defaultOption: 19, // name of the option
},
"Filter name for a date datatype": {
options: [{
range: 'Last|This|Custom', // one of the three option
time: 'Day|Week|Month|Quarter|Year', // one of the five option ignored for range = "Custom"
name: 'Last 10 Years', // will be shown in the list
count: 10, // required for range = "Last" else ignored
fromDate: new Date(), // optional if you don't want date picker for custom range else ignored
toDate: new Date(), // optional if you don't want date picker for custom range else ignored
minDate: new Date(), // optional for custom range else ignored
maxDate: new Date(), // optional for custom range else ignored
},{
range: 'Last|This|Custom', // one of the three option
time: 'Day|Week|Month|Quarter|Year', // one of the five option for range "Custom" nit required
name: 'This Year', // will be shown in the list
count: 0, // required for range "Last" else not required
minDate: new Date(), // optional for custom range
maxDate: new Date(), // optional for custom range
}],
defaultOption: 'Last 10 Years', // name of the option
},
})}
theme={YOUR_THEME}
appearance-options={JSON.stringify({
appearanceOptionsPosition: 'top-left|top-right|bottom-left|bottom-right', // one of the four options, by default it is bottom-right
cumulativeBar: {
isEnabled: true|false, // can be used with bar and time series charts (if series type is bar)
label: 'Cumulative' // change the label for the property
},
stackedBars: {
isEnabled: true|false, // can be used with stack chart only
label: '100% stacked bars', // change the label for the property
},
dynamicBehaviour: {
isEnabled: true|false, // can be used with bar, line, area, stacked area and time series charts
label: 'Dynamic' //change the label for the property
},
})}
/>
);
};To find dashboardId please .
To find metricId please .
The should be a guest token, fetched from your backend based on the current user's login information. You can follow the document below for guest token generation.
