# Class Dashboard

A component used for easily rendering a dashboard.

# Example

Here's how you can use the Dashboard component in a Vue application:

<template>
 <Dashboard
   v-if="dashboardProps"
   :title="dashboardProps.title"
   :layoutOptions="dashboardProps.layoutOptions"
   :widgets="dashboardProps.widgets"
   :filters="dashboardProps.filters"
   :defaultDataSource="dashboardProps.defaultDataSource"
   :widgetsOptions="dashboardProps.widgetsOptions"
   :styleOptions="dashboardProps.styleOptions"
 />
</template>

<script setup lang="ts">
import { dashboardModelTranslator, useGetDashboardModel, Dashboard } from '@sisense/sdk-ui-vue';
import { computed } from 'vue';

const { dashboard } = useGetDashboardModel({
 dashboardOid: '6441e728dac1920034bce737',
 includeWidgets: true,
 includeFilters: true,
});

const dashboardProps = computed(() =>
  dashboard.value ? dashboardModelTranslator.toDashboardProps(dashboard.value) : null,
);
</script>

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

# Properties

# config

readonly config?: DashboardConfig

The configuration for the dashboard

# defaultDataSource

readonly defaultDataSource?: DataSource

The default data source to use for the dashboard

# filters

readonly filters?: FilterRelations | Filter[]

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

# layoutOptions

readonly layoutOptions?: DashboardLayoutOptions

Dashboard layout options

# styleOptions

readonly styleOptions?: DashboardStyleOptions

The style options for the dashboard

# title

readonly title?: string

The title of the dashboard

# widgets

readonly widgets: WidgetProps[]

The widgets to render in the dashboard

# widgetsOptions

readonly widgetsOptions?: WidgetsOptions

The options for each of the widgets