Nextjs

npm install @databrainhq/plugin

"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;
    }
  }
}

<dbn-metric token="token" metric-id="metricId" />

<dbn-dashboard token="3affda8b-7bd4-4a88-9687-105a94cfffab" dashboard-id="ex-demo" />

import '@databrainhq/plugin/web';

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"
        }
      })}
    />
  );
};

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"
        }
      })}
    />
  );
};