Dashboard¶

Usage¶

The purpose of a dashboard is helping users to monitor, measure and analyze relevant data from different sources in a at-a-glance fashion.

They provide a quick and easy way to track performance metrics and identify areas for improvement, enabling users to make informed decisions based on real-time data.

Dashboards vary significantly depending on the context in which they are used. Before starting to design a dashboard, it is important to understand the purpose and the goals it aims to achieve. This will help to identify the key metrics and information that need to be displayed.

Best practices¶

• Keep it simple. Avoid clutter caused by too much information or showing irrelevant metrics.
• Choose the right visualizations to represent the data. See the charts chapter.
• Use color to draw attention to important information. Avoid using too many different colors or using them in a way that is visually distracting.
• Use real-time data to ensure that the dashboard is up-to-date and provides the most recent information.
• Use consistent units throughout the dashboard to ensure that the data is easily comparable among itself.
• Use either global (affecting all widgets) or local (affecting only one widget) filters, not both simultaneously.

Design¶

Elements¶

1. Title (optional): A brief and descriptive name of the whole dashboard.
2. Dashboard options (optional): Is the area located just bellow the title that contains filters, menus and other interactive elements that allow users to perform actions affecting the whole dashboard.
3. Content area: Is the main area of the dashboard where the actual data, charts, graphs and other visualizations are displayed.

Progressive disclosure¶

Avoid overwhelming users with all the information being display at once by revealing it gradually and as needed. When dealing with large amount of content, it is better to display a summary or overview of the data with the option to expand or drill down to see further details.

Layout¶

• Place the most important items in areas where the viewer's eye will naturally look first. In left-to-right/LTR languages, this is typically the top-left corner of the screen, followed by the center of the screen.
• Place related items close to each other. This helps to create visual groupings and organizes information for the viewer.
• Charts should be sized and proportioned based on their importance and relevance.

See the flexible dashboards chapter for dashboards with user customizable content.

Code¶

The SiDashboardModule consists of a SiDashboardComponent and the SiDashboardCardComponent. The SiDashboardCardComponent extends the SiCardComponent and adds expand and restore functionality. The dashboard works with content-projection slots to configure the layout, e.g. a Bootstrap grid.

The module has its own entry point to reduce the overall bundle size.

Usage¶

import {
  SiDashboardCardComponent,
  SiDashboardComponent
} from '@siemens/element-ng/dashboard';

@Component({
  :
  imports: [
    :
    SiDashboardCardComponent,
    SiDashboardComponent,
    :
  ]
})

Custom header¶

The heading input renders a plain page title. To show additional context like a description or page actions, project a custom header using the header attribute, as shown in the example above. The custom header replaces the default heading.

Build the custom header according to the page header guidelines using the .si-layout-header CSS classes. Add the .si-layout-top-element CSS class to the title to reserve space for the vertical navigation and the side panel in the mobile viewport.

<si-dashboard>
  <div class="si-layout-header" header>
    <h2 class="si-layout-title si-layout-top-element">Dashboard</h2>
    <p class="si-layout-subtitle">Description</p>
    <si-content-action-bar
      class="si-layout-actions"
      viewType="expanded"
      [primaryActions]="pageActions"
    />
  </div>
  <ng-container menubar>...</ng-container>
  <ng-container dashboard>...</ng-container>
</si-dashboard>

SiDashboardComponent API Documentation¶

Input Properties¶

Attributes and Methods¶

SiDashboardCardComponent API Documentation¶

Input Properties¶

Output Properties¶

Attributes and Methods¶

Types Documentation¶