Displays the values of a status metric with the amount of time spent in each status for a given period (default 7 days).

Design View

In the visual editor, you can find the Status Diagram icon under the Charts component palette group.

You can drag and drop the widget in the grid, and then according to your needs configure the following sub-elements:

Metric: the metric providing the statuses to display into the diagram.

Code View

Template Syntax

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


<div class="row">
   <div class="col-md-12 col-sm-12 col-xs-12">
       <period-field class="pull-right" defaultPeriodValue="LAST_7_DAYS"></period-field>
   </div>
   <div class="col-md-12 col-sm-12 col-xs-12">
        <widget name="StatusDiagramWidget" 
                [inputs]="{'period': 'period'}"
                [config]="{'statuses': 'OFFLINE|STANDBY|WARMUP|READY|COOKING|FAILURE'}">
            <metric name="Status"></metric>
        </widget>
   </div>
</div>

Component Reference

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

Status Diagram <status-diagram-widget>

PROPERTIES

CSS Class

The name(s) of the CSS class used to customize the widget layout.
Type: STRING | Optional
class="my-custom-class"

Default Loading Period

The default date and time filtering period applied when entering the page.
Type: ENUM | Optional | Values:

TODAY

YESTERDAY

LAST_1_HOUR

LAST_4_HOURS

LAST_6_HOURS

LAST_12_HOURS

LAST_24_HOURS

LAST_7_DAYS

LAST_30_DAYS

THIS_MONTH

LAST_MONTH

LAST_6_MONTHS

LAST_12_MONTHS

THIS_WEEK

LAST_WEEK

LAST_FULL_7_DAYS

LAST_FULL_30_DAYS

LAST_FULL_12_MONTHS

[config]="{defaultPeriod: 'LAST_7_DAYS'}"

End Date Variable

The <period-field>'s End Variable filtering data by end date.
Type: STRING | Optional
[inputs]="{endDate: 'toDate'}"

[DEPRECATED] Use the Period Variable property instead.

Export Enabled

The boolean flag indicating whether the data export is enabled.
Type: BOOLEAN | Optional | Values:

true

false

[config]="{exportEnabled: true}"

Period Filter Enabled

The boolean flag indicating whether the embedded period filter is available.
Type: BOOLEAN | Optional | Values:

true

false

[config]="{filterEnabled: true}"

Period Variable

The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>.
Type: STRING | Optional
[inputs]="{period: 'period'}"

Start Date Variable

The <period-field>'s Start Variable filtering data by start date.
Type: STRING | Optional
[inputs]="{startDate: 'fromDate'}"

[DEPRECATED] Use the Period Variable property instead.

Statuses

The comma separated list of all known statuses, if not specified only the retrieved metric values will be displayed.
Type: STRING | Optional
[config]="{statuses: 'fooBar'}"

Title

The title displayed on the top part of the widget box.
Type: STRING | Optional
[title]="'Details'"

Visibility Condition

The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional
*ngIf="getUser().organizationId != null"

SUB-ELEMENTS

Metric

The metric providing the statuses to display into the diagram.
single | mandatory

<metric name="Temperature"></metric>

Metric <metric>

PROPERTIES

Filter

The name of the filter used to transform and display values.
Type: FILTER | Optional
filter="fooBarFilter"

Label

The metric alternative label.
Type: STRING | Optional
label="Temperature"

Name

The metric whose value(s) must be loaded by the widget.
Type: METRIC | Mandatory
name="Temperature"

Unit

The unit of measurement to be displayed along the value.
Type: STRING | Optional
unit="°C"