Databrain app ui web component plugin.
npm install @databrainhq/plugin
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}
/>
);
};
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*/"
: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>
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*/}
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>
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"
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>
MIT © databrainhq