> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedatabrain.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular

## @databrainhq/plugin

> Databrain app ui web component plugin.

<Card title="npm: @databrainhq/plugin" icon="box" href="https://www.npmjs.com/package/@databrainhq/plugin">
  v0.15.135-uat
</Card>

<Card title="Code Style: StandardJS" icon="check" href="https://standardjs.com/">
  Enforced using StandardJS styleguide.
</Card>

## Install

```bash theme={"dark"}
npm install @databrainhq/plugin
```

## Github Repo Link

<Card title="Angular Demo Repository" icon="github" href="https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-angular">
  View the complete Angular integration example on GitHub
</Card>

## Usage

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

```ts theme={"dark"}
// 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`

```ts theme={"dark"}
import '@databrainhq/plugin/web';
```

### Then use it anywhere in your app

#### Integrating Dashboard

```html theme={"dark"}
<dbn-dashboard
  [token]="YOUR GUEST TOKEN"
  options="YOUR ACCESS PERMISSION OPTIONS"
  theme="YOUR THEME"
  [dashboardId]="YOUR DASHBOARD 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"
/>
```

#### Integrating Metric

```html theme={"dark"}
<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 the `customMessages` prop like this:

```ts theme={"dark"}
this.customMessages = {
  tokenExpiry: "Some custom message you want to show here."
};
```

metricFilterOptions - In your parent component, assign the `metricFilterOptions` prop like this:

```ts theme={"dark"}
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
        },
  }
```

appearanceOptions - In your parent component, assign the `appearanceOptions` prop like this:

```ts theme={"dark"}
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
      },
  }
```