This widget highlights when a metric was in a specific condition during the last seven day.
For example, you can highlight when the product was disconnected or the measured temperature was above a certain threshold (e.g. HACCP).

Metric State Diagram

By clicking on a single day on the left, the details panel provides an overview of all time slots where the metrics match the condition (e.g., OFFLINE for disconnections).

In addition to the time slots, the details page also reports:

the total number of occurrences during that day;
the total time spent in that state;
optionally, other metrics that you decide to include that can be aggregated throughout the day (e.g., average signal level).

Configuration

Template Syntax

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


<metric-state-diagram-widget metric="Connection Status" 
                             predicate="ne"
                             [value]="1"
                             [title]='Disconnections - LAst 7 Days'
                             detailsLabel="Disconnections"
                             totalLabel="Total disconnected time" 
                             [showValueTransitions]="true"
                             stateBarColor="#AAAAAA"> 

</metric-state-diagram-widget>

Component Reference

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

Metric State Diagram `<metric-state-diagram-widget>`

Title	The title displayed on the top part of the widget box. Name: title Type: STRING \| Optional `[title]="'Details'"`
State Condition
Metric	The metric whose value(s) must be loaded by the widget. Name: metricName Type: METRIC \| Required `metricName="Temperature"`
Predicate	The condition predicate to be applied on metric values. Name: predicate Type: ENUM \| Optional Values: SUM, MIN, MAX, AVG, DELTA `predicate="SUM"`
Value	The comparison value of the state condition. Name: value Type: STRING \| Optional `value="50"`
Labels
Details Label	The label displayed in the details section when clicking on a day. Name: detailsLabel Type: STRING \| Optional Default Value: Occurrencies `detailsLabel="abc"`
Total Label	The label used to display the total spent time in active status. Name: totalLabel Type: STRING \| Optional Default Value: Total time `totalLabel="abc"`
Advanced
Show Value Transitions	Within each metric status bar, different metric values are highlighted. Name: showValueTransitions Type: BOOLEAN \| Optional Default Value: false `[showValueTransitions]="true"`
State Bar Color	The default status bar color. Name: stateBarColor Type: STRING \| Optional `stateBarColor="abc"`
State Bar Color Filter	The filter used to compute the status bar color according to the metric values. Name: stateBarColorFilter Type: FILTER \| Optional `stateBarColorFilter="dateFormat"`
State Filter	The filter used to transform metric values. Name: stateFilter Type: FILTER \| Optional `stateFilter="dateFormat"`
Rendering
CSS Class	The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING \| Optional `class="my-custom-class"`
Height	The height of the widget (e.g. 250px). Name: height Type: STRING \| Optional Default Value: 500px `height="250px"`
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`
Sub Elements
Metric	The metrics displayed in the details section of the selected day.

Metric `<metric>`

Aggregation	The aggregation to be applied to the daily values of the metric. If missing, the last value of the day is loaded. Name: aggregation Type: ENUM \| Optional Values: AVG, DELTA, MIN, MAX `aggregation="AVG"`
Filter	The name of the filter used to transform and display values. Name: filter Type: FILTER \| Optional `filter="fooBarFilter"`
Label	The metric alternative label. Name: label Type: STRING \| Optional `label="Temperature"`
Name	The metric whose value(s) must be loaded by the widget. Name: name Type: METRIC \| Required `name="Temperature"`
Unit	The unit of measurement to be displayed along the value. Name: unit Type: STRING \| Optional `unit="°C"`
Advanced
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`