The widget that displays the current value of all thing metrics.

Metrics Data

Metrics are automatically grouped in different boxes by using the Group property defined on each metric.

The following information is displayed for each metric:

The localized Label or the Name as fallback
In case the label is too long, it is truncated, and a tooltip allows displaying the full label.
The description, which can be visible as tooltip on the information icon.
The last value, by using a default filter and unit of measurement.
The Quick History, allowing to inspect the historical values of each metric, which can also be exported.

Configuration

Template Syntax

Below you can find some examples of how to use the component within a template.


<metrics-data-widget class="flex-fill" [title]="'All Metrics Value'"></metrics-data-widget>

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Export Enabled	The boolean flag indicating whether the data export is enabled. Type: BOOLEAN \| Optional Default Value: false `[config]="{exportEnabled: true}"`
Max Columns Per Group	The maximum number of columns used to spread the metrics of a single group. Type: INTEGER \| Optional Default Value: 3 `[config]="{maxColumnsPerGroup: 123}"`
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional `[title]="'Details'"`
Rendering
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional `class="my-custom-class"`
Visibility Condition	The expression that allows you to reduce the visibility of the element. Type: STRING \| Optional `*ngIf="getUser().organizationId != null"`