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).
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
code_blocksDesign View
In the template editor, you can find the Metric State Diagram icon under the Charts component palette group.
You can drag the widget into the grid and then configure the following sub-elements according to your needs:
Metric: the metrics displayed in the details section of the selected day.
Below are references to the properties that can be configured for this widget.
For more details on how to manage metrics, however, you can refer to this article.
code_blocksCode View
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> | |
---|---|
PROPERTIES | |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
Details Label | The label displayed in the details section when clicking on a day. Type: STRING | Optional | Default: Occurrencies detailsLabel="fooBar" |
Height | The height of the widget (e.g. 250px). Type: STRING | Optional | Default: 500px height="250px" |
Metric | The metric whose value(s) must be loaded by the widget. Type: METRIC | Required metricName="Temperature" |
Predicate | The condition predicate to be applied on metric values. Type: ENUM | Optional | Values: SUM MIN MAX AVG DELTA predicate="MAX" |
Show Value Transitions | Within each metric status bar, different metric values are highlighted. Type: BOOLEAN | Optional | Values: true false [showValueTransitions]="true" |
State Bar Color | The default status bar color. Type: STRING | Optional stateBarColor="fooBar" |
State Bar Color Filter | The filter used to compute the status bar color according to the metric values. Type: FILTER | Optional stateBarColorFilter="FILTER" |
State Filter | The filter used to transform metric values. Type: FILTER | Optional stateFilter="FILTER" |
Title | The title displayed on the top part of the widget box. Type: STRING | Optional [title]="'Details'" |
Total Label | The label used to display the total spent time in active status. Type: STRING | Optional | Default: Total time totalLabel="fooBar" |
Value | The comparison value of the state condition. Type: STRING | Optional value="50" |
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 metrics displayed in the details section of the selected day. Multiple | Optional <metric name="Temperature"></metric> |
Metric <metric> | |
---|---|
PROPERTIES | |
Aggregation | The aggregation to be applied to the daily values of the metric. If missing, the last value of the day is loaded. Type: ENUM | Optional | Values: AVG DELTA MIN MAX aggregation="AVG" |
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" |
Unit | The unit of measurement to be displayed along the value. Type: STRING | Optional unit="°C" |
Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Comments
0 comments
Please sign in to leave a comment.