⚛️Framework Specific Guide

This article will guide you integrate databrain plugin in your respective UI frameworks/libraries.

@databrainhq/plugin

Databrain app ui web component plugin.

Install

npm install @databrainhq/plugin

Usage

React/Solidjs

Import in main/index/App

import '@databrainhq/plugin/web';

Then use it anywhere in your app

Integrating Dashboard

const Example = () => {
  return (
    <dbn-dashboard
      token="Your Guest Token"
      dashboard-id="Your Dashboard Id"
      options={{
        disableMetricCreation: false,
        disableMetricUpdation: false,
        disableMetricDeletion: false,
        disableLayoutCustomization: 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="500px"
      height="300px"
      chart-renderer-type="canvas"
      chart-colors={[
        'violet',
        'indigo',
        'blue',
        'green',
        'yellow',
        'orange',
        'red',
        'pink',
        'gray',
      ]}
      theme={YOUR_THEME}
    />
  );
};

Vue

Import in main/index/App

<script setup lang="ts">
import '@databrainhq/plugin/web';
</script>

Then use it anywhere in your app

Integrating Dashboard

<script setup lang="ts">
  // your component logic
</script>
<template>
  <dbn-dashboard
    :token="/*YOUR GUEST TOKEN*/"
    :options="/*YOUR ACCESS PERMISSION OPTIONS*/"
    :theme="/*YOUR THEME*/"
    :dashboard-id="/*YOUR DASHBORD ID*/"
  ></dbn-dashboard>
</template>

Integrating Metric

<script setup lang="ts">
  // your component logic
</script>
<template>
  <dbn-metric
    :token="/*YOUR GUEST TOKEN*/"
    chart-renderer-type="canvas"
    :theme="/*YOUR THEME*/"
    :dashboard-id="/*YOUR DASHBORD ID*/"
    width="500"
    height="400"
    :style="/* YOUR STYLEs */"
    class-name="YOUR CLASS"
  ></dbn-metric>
</template>

Svelte

Import in main/index/App

<script lang="ts">
import '@databrainhq/plugin/web';
</script>

Then use it anywhere in your app

Integrating Dashboard

<script lang="ts">
  // your component logic
</script>
<main>
  <dbn-dashboard
    token={/*YOUR GUEST TOKEN*/}
    options={/*YOUR ACCESS PERMISSION OPTIONS*/}
    theme={/*YOUR THEME*/}
    dashboard-id={/*YOUR DASHBORD ID*/}
  ></dbn-dashboard>
</main>

Integrating Metric

<script lang="ts">
// your component logic
</script>
<main>
  <dbn-metric
    token={/*YOUR GUEST TOKEN*/}
    chart-renderer-type="canvas"
    theme={/*YOUR THEME*/}
    dashboard-id="/*YOUR DASHBORD ID*/"
    width="500"
    height="400"
    style={/* YOUR STYLEs */}
    class-name="YOUR CLASS"
  ></dbn-metric>
</main>

Angular

Add suport for custom elements/web components in app.module.ts

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Import in app.component.ts

import '@databrainhq/plugin/web';

Then use it anywhere in your app

Integrating Dashboard

<dbn-dashboard
  token="YOUR GUEST TOKEN"
  options="YOUR ACCESS PERMISSION OPTIONS"
  theme="YOUR THEME"
  dashboard-id="YOUR DASHBORD ID"
></dbn-dashboard>

Integrating Metric

<dbn-metric
  token="YOUR GUEST TOKEN"
  chart-renderer-type="canvas"
  theme="YOUR THEME"
  dashboard-id="YOUR DASHBORD ID"
  width="500"
  height="400"
  style="YOUR STYLE"
  class-name="YOUR CLASS"
></dbn-metric>