Skip to main content

​
@databrainhq/plugin

Databrain app ui web component plugin.

npm: @databrainhq/plugin

v0.15.135-uat

Code Style: StandardJS

Enforced using StandardJS styleguide.

​
Install

npm install @databrainhq/plugin
https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-next

​
Usage

​
Quick usage:

"use client";
import '@databrainhq/plugin/web';

export default function Home() {
  const url = new URL(location.href);
  const token = url.searchParams.get("token");
  const dashboardId = url.searchParams.get("dashboardId");
  return (
    <main className="min-h-screen w-full p-2">
      <dbn-dashboard token={token} dashboard-id={dashboardId} />
    </main>
  );
}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "dbn-dashboard": any;
      "dbn-metric": any;
    }
  }
}
For embedding a Metric Card you can use the dbn-metric webcomponent: 
<dbn-metric token="token" metric-id="metricId" />
  • To find dashboardId please see here.
  • To find metricId please see here.

​
Token

The token should be a guest token, fetched from your backend based on the current user’s login information. You can see more about it here. 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 can 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
      is-hide-chart-settings
      enable-download-csv
      enable-email-csv
      options-icon="kebab-menu-vertical"
      enable-multi-metric-filters
      disable-fullscreen
      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."
      })}
      options={JSON.stringify({
        "disableMetricCreation": false,
        "disableMetricUpdation": false,
        "disableMetricDeletion": false,
        "disableLayoutCustomization": false,
        "hideDashboardName": false,
        "chartColors": [
          "violet",
          "indigo",
          "blue",
          "green",
          "yellow",
          "orange",
          "red",
          "pink",
          "gray"
        ]
      })}
      theme={JSON.stringify({
        "button": {
          "primary": "blue",
          "primaryText": "white"
        }
      })}
    />
  );
};

​
Integrating metric

const Example = () => {
  return (
    <dbn-metric
      token="Your Guest Token"
      metric-id="Your Metric Id"
      width="500"
      height="300"
      is-hide-chart-settings
      is-hide-table-preview
      enable-download-csv
      enable-email-csv
      enable-multi-metric-filters
      options-icon="kebab-menu-vertical"
      metric-filter-position="outside"
      chart-renderer-type="canvas"
      disable-fullscreen
      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."
      })}
      chart-colors={JSON.stringify([
        "violet",
        "indigo",
        "blue",
        "green",
        "yellow",
        "orange",
        "red",
        "pink",
        "gray"
      ])}
      metric-filter-options={JSON.stringify({
        "Filter name for a string datatype": {
          "options": ["hello", "hi"],
          "defaultOption": "hello"
        },
        "Filter name for a number datatype": {
          "options": [9, 19, 23],
          "defaultOption": 19
        },
        "Filter name for a date datatype": {
          "options": [{
            "range": "Last",
            "time": "Day",
            "name": "Last 10 Years",
            "count": 10,
            "fromDate": "2024-01-01",
            "toDate": "2024-12-31",
            "minDate": "2023-01-01",
            "maxDate": "2024-12-31"
          },{
            "range": "This",
            "time": "Year",
            "name": "This Year",
            "count": 0,
            "minDate": "2024-01-01",
            "maxDate": "2024-12-31"
          }],
          "defaultOption": "Last 10 Years"
        }
      })}
      theme={JSON.stringify({
        "button": {
          "primary": "blue",
          "primaryText": "white"
        }
      })}
      appearance-options={JSON.stringify({
        "appearanceOptionsPosition": "top-left",
        "cumulativeBar": {
          "isEnabled": true,
          "label": "Cumulative"
        },
        "stackedBars": {
          "isEnabled": true,
          "label": "100% stacked bars"
        },
        "dynamicBehaviour": {
          "isEnabled": true,
          "label": "Dynamic"
        }
      })}
    />
  );
};
To see the full list of options please check the options list.
⌘I