đŸ› ī¸
Developer docs
Start BuildingGuides
  • ✨Getting Started
  • đŸŽ›ī¸Self Hosted Config
  • âœī¸SSO Login
    • Saml Identity Provider (Idp)
    • Oidc Identity Provider (Idp)
  • đŸŽžī¸Framework Specific Guide
    • âš›ī¸Reactjs
    • âš›ī¸Nextjs
    • âš›ī¸Vuejs
    • âš›ī¸Angular
    • âš›ī¸Svelte
    • âš›ī¸Solid
    • âš›ī¸Vanilla JS
  • â„šī¸Token
  • đŸ›ī¸Multi-Tenant Access Control
  • Embed using iFrame
  • 🔑License Key Validation for Self-Hosted App
  • Test
  • 👩‍đŸ’ģHelpers
    • âœŗī¸Token Body
    • ✅Options
      • Custom Fiscal Year filter setup in DataBrain
    • đŸˆ‚ī¸Server Event
    • Embed Functions
    • Override Language
    • âœˆī¸Embedding Architecture
    • âœˆī¸LLM Architecture
    • ✨LLM Connectors
      • Open AI
      • Claude AI
      • Azure Open AI
      • Llama
      • Mixtral
    • 🆔Dashboard ID
    • 🆔Metric ID
    • 🆔API Token
    • 🆔End User Metric Creation
    • Embedding APIs
      • Sync Datasource
  • Metric App Filter
  • Dashboard App Filter
  • Chat Mode
    • Step 1: Create Datamart and Workspace
    • Step 2: Create Data App and Embed ID
  • ✨Solutions Alchemy
    • Dashboards for Client Groups
    • Dashboard for Multiple Clients
    • Embedding: Role based Dashboard Filtering
    • Localized Currency Symbols
    • Manage Metrics
Powered by GitBook
On this page
  • @databrainhq/plugin
  • Install
  • Github Repo Link
  • Usage
  1. Framework Specific Guide

Nextjs

PreviousReactjsNextVuejs

Last updated 9 months ago

@databrainhq/plugin

Databrain app ui web component plugin.

Install

npm install @databrainhq/plugin

Github Repo Link

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" />

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 see more

To see the full list of options

đŸŽžī¸
âš›ī¸
see here
see here
token
about it here.
please check the options list
https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-next
NPM
JavaScript Style Guide