Displays the values of a status metric with the amount of time spent in each status for a given period.

Status Diagram

The widget is subdivided into two charts:

The top one shows the status of the thing instant by instant within the selected period (default last 7 days).
The bottom one shows the total time the thing spent in each status, with also the relative percentage.

The bottom chart can be a Bar chart (default) or, optionally, a Pie chart, as below.

Each state is displayed using a specific color; by default colors are already configured for the most commonly used states. In addition, you can register other colors for your states, for more details about how to do that, refer to the Colors component article.

Optionally, the bottom chart can be turned off by using the Show Aggregation Chart option.

Events

Along the status transitions, you can show also the events occurred in the same time period.

In the Events section of the property panel, you can define a query on the events to be loaded (e.g. Event Severity = FAILURE).

For each found event, a marker is displayed under the x-axis, and by clicking on the marker, a tooltip displays the event details and the chart area corresponding to the event duration is highlighted according to the event severity.

Template Syntax

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


<div class="d-flex flex-wrap components-row">
    
    <status-diagram-widget 
                [inputs]="{'period': 'period'}"
                [config]="{'statuses': 'OFFLINE|STANDBY|WARMUP|READY|COOKING|FAILURE'}">
                
            <metric name="Status"></metric>
            
    </status-diagram-widget>
    
</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>`

Aggregation Chart Type	The type of the chart displaying the total time spent by status (Bar or Pie). Type: ENUM \| Optional Values: BAR, PIE Default Value: BAR `[config]="{aggregationChartType: 'BAR'}"`
Show Aggregation Chart	Flag indicating whether to show the aggregation chart. Type: BOOLEAN \| Optional Default Value: true `[config]="{showAggregatedChart: false}"`
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional `[title]="'Details'"`
Controls
Export Enabled	The boolean flag indicating whether the data export is enabled. Type: BOOLEAN \| Optional Default Value: true `[config]="{exportEnabled: false}"`
Period Filter Enabled	The boolean flag indicating whether the embedded period filter is available. Type: BOOLEAN \| Optional Default Value: true `[config]="{filterEnabled: false}"`
Data
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_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 Default Value: LAST_7_DAYS `[config]="{defaultPeriod: 'TODAY'}"`
~~End Date Variable/~~	The <period-field>'s End Variable filtering data by end date. Type: STRING \| Optional DEPRECATED Use the Period Variable property. `endDateFieldRef="toDate"`
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 DEPRECATED Use the Period Variable property instead. `startDateFieldRef="fromDate"`
Advanced
Include Connection Status	Indicates whether the connection status must be included in the status list. Type: BOOLEAN \| Optional Default Value: true `[config]="{loadConnectionStatus: false}"`
Statuses	The comma separated list of all known statuses, if not specified only the retrieved metric values will be displayed (e.g. READY,WORKING). Type: STRING \| Optional `[config]="{statuses: 'abc'}"`
Events
Events Query	The query used to load events. Type: QUERY \| Optional Predicates: beginsWith, eq, neq, gt, gte, isEmpty, isNotEmpty, lt, lte, like, notLike `[config]="{eventQuery: [{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]}"`
Show events	Flag indicating whether to enable events on charts. Type: BOOLEAN \| Optional Default Value: false `[config]="{showEventsOnChart: true}"`
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"`
Sub Elements
Metric	The metric providing the statuses to display into the widget.

Metric `<metric>`

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 | Required

name="Temperature"