# Class DashboardComponent Beta

An Angular component used for easily rendering a dashboard created in Sisense Fusion.

Note: Dashboard extensions based on JS scripts and add-ons in Fusion are not supported.

# Example

<csdk-dashboard
 *ngIf="dashboard"
 [title]="dashboard.title"
 [layoutOptions]="dashboard.layoutOptions"
 [widgets]="dashboard.widgets"
 [filters]="dashboard.filters"
 [defaultDataSource]="dashboard.defaultDataSource"
 [widgetsOptions]="dashboard.widgetsOptions"
/>

import { Component } from '@angular/core';
import {
  type DashboardProps,
  DashboardService,
  dashboardModelTranslator,
} from '@sisense/sdk-ui-angular';

@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent {

 dashboard: DashboardProps | null = null;

 constructor(private dashboardService: DashboardService) {}

 async ngOnInit(): Promise<void> {
   const dashboardModel = await this.dashboardService.getDashboardModel('your-dashboard-oid', { includeWidgets: true, includeFilters: true });
   this.dashboard = dashboardModelTranslator.toDashboardProps(dashboardModel);
 }

To learn more about this and related dashboard components, see Embedded Dashboards.

# Implements

AfterViewInit
OnChanges
OnDestroy

# Constructors

# constructor

new DashboardComponent(sisenseContextService, themeService): DashboardComponent

Constructor for the Dashboard component.

# Parameters

Parameter	Type	Description
`sisenseContextService`	`SisenseContextService`	Sisense context service
`themeService`	`ThemeService`	Theme service

# Returns

DashboardComponent

# Properties

# Constructor

# sisenseContextService

sisenseContextService: SisenseContextService

Sisense context service

# themeService

themeService: ThemeService

Theme service

# Other

# defaultDataSource

defaultDataSource: DataSource | undefined

The default data source to use for the dashboard

# filters

filters: Filter[] | undefined

The dashboard filters to be applied to each of the widgets based on the widget filter options

# layoutOptions

layoutOptions: DashboardLayoutOptions | undefined

Dashboard layout options

# styleOptions

styleOptions: DashboardStyleOptions | undefined

The style options for the dashboard

# title

title: string | undefined

The title of the dashboard

# widgets

widgets: WidgetProps[]

The widgets to render in the dashboard

# widgetsOptions

widgetsOptions: WidgetsOptions | undefined

The options for each of the widgets