@databrainhq/plugin NPM

@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"
      dashboardId="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 (
    <Metric
      token="Your Guest Token"
      metricId="Your Metric Id"
      width="500px"
      height="300px"
      chartRendererType="canvas"
      chartColors={[
        'violet',
        'indigo',
        'blue',
        'green',
        'yellow',
        'orange',
        'red',
        'pink',
        'gray',
      ]}
      theme={YOUR_THEME}
    />
  );
};

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*/"
    :dashboardId="/*YOUR DASHBORD ID*/"
  ></dbn-dashboard>
</template>

Integrating Metric

<script setup lang="ts">
  // your component logic
</script>
<template>
  <dbn-metric
    :token="/*YOUR GUEST TOKEN*/"
    chartRendererType="canvas"
    :theme="/*YOUR THEME*/"
    :dashboardId="/*YOUR DASHBORD ID*/"
    width="500"
    height="400"
    :style="/* YOUR STYLEs */"
    className="YOUR CLASS"
  ></dbn-metric>
</template>

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*/}
    dashboardId={/*YOUR DASHBORD ID*/}
  ></dbn-dashboard>
</main>

Integrating Metric

<script lang="ts">
// your component logic
</script>
<main>
  <dbn-metric
    token={/*YOUR GUEST TOKEN*/}
    chartRendererType="canvas"
    theme={/*YOUR THEME*/}
    dashboardId="/*YOUR DASHBORD ID*/"
    width="500"
    height="400"
    style={/* YOUR STYLEs */}
    className="YOUR CLASS"
  ></dbn-metric>
</main>

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"
  dashboardId="YOUR DASHBORD ID"
></dbn-dashboard>

Integrating Metric

<dbn-metric
  token="YOUR GUEST TOKEN"
  chartRendererType="canvas"
  theme="YOUR THEME"
  dashboardId="YOUR DASHBORD ID"
  width="500"
  height="400"
  style="YOUR STYLE"
  className="YOUR CLASS"
></dbn-metric>

License

12 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

11 months ago