âī¸Reactjs
@databrainhq/plugin
Databrain app ui web component plugin.
Install
npm install @databrainhq/pluginGithub Repo
Usage
Quick 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
The token 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.
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 see the full list of options:
â
OptionsLast updated