âī¸Angular
Last updated
Last updated
Databrain app ui web component plugin.
npm install @databrainhq/plugin
https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-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';
// server event
(window as any).databrainServerEvent = (error: any) => {
console.log(error);
};
@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"
disable-fullscreen="true | false" // to disable fullscreen view
is-hide-table-preview="true | false" // in full screen view defaults to false
is-hide-chart-settings="true | false" // in full screen view defaults to false
enable-download-csv="true | false" // in metric card more icon actions defaults to false
enable-email-csv="true | false" // 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="true | false" // in metric card allow multiple metric filters
[customMessages]="customMessages" // optional
handle-server-event="databrainServerEvent"
theme-name="Name of the theme you want to apply from app settings ui theming"
></dbn-dashboard>
Integrating Metric
<dbn-metric
[token]="YOUR GUEST TOKEN"
chart-renderer-type="canvas"
theme="YOUR THEME"
[dashboardId]="YOUR DASHBORD ID"
disable-fullscreen="true | false" // to disable fullscreen view
is-hide-table-preview="true | false" // in full screen view defaults to false
is-hide-chart-settings="true | false" // in full screen view defaults to false
enable-download-csv="true | false" // in metric card more icon actions defaults to false
enable-email-csv="true | false" // 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="true | false" // in metric card allow multiple metric filters
metric-filter-position="outside | inside" // one of the option defaults to outside (from beta version 0.13.0-beta.8 only)
width="500"
height="400"
style="YOUR STYLE"
class-name="YOUR CLASS"
[customMessages]="customMessages"
[metricFilterOptions]="metricFilterOptions"
theme-name="Name of the theme you want to apply from app settings ui theming"
[appearanceOptions]="appearanceOptions"
></dbn-metric>
customMessages - In your parent component assign a prop like this.
this.customMessages = {
tokenExpiry: "Some custom message you want to show here."
}
metricFilterOptions - In your parent component assign a prop like this.
this.metricFilterOptions = { // 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
},
}
this.appearanceOptions = {
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
},
}