⚛️Nextjs

@databrainhq/plugin

Databrain app ui web component plugin.

Install

npm install @databrainhq/plugin

Github Repo Link

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 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 please check the options list