Value

  • 4 minute(s) read

Displays the value of a metric in a box, highlighting the severity and the increase from the previous value.

Value

The widget is subdivided into the following sections, each one providing different information.

  • HEADER: provide the information about the displayed data, including an icon, the title and a description (optional).

  • MAIN VALUE: the main value to be displayed, which can be provided by a metric or statistic, even aggregated across multiple things (max 500), locations, and customers. The value can be colored according to the severity of the dictionary item or threshold.

  • DETAILS BAR: describes the quality of the value and, if present, at what threshold it lies

  • PREVIOUS VALUE: the value, which can be the previous value or, in the case of aggregation, the value calculated using the previous period (e.g. This Month VS Last Month).
    You can decide whether to display the absolute value or the increment, which can be colored according to whether it is positive or negative.

  • LAST UPDATE: the timestamp related to the last update of the main value.

Below are some examples with different configurations.

For more details about how to define dictionary and thresholds, you can refer to the following articles:

  • Property: define dictionary and thresholds for properties.

  • Metric: define dictionary and thresholds for metric.

Template Syntax

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

Example 1

Displays the current value of running hours.


<value-widget>
    <metric name="Running Hours" filter="millisToHours"></metric>
</value-widget>

Example 2

Displays the number of pieces produced in a selected period from a set of things.


<period-field></period-field>
<search-field id="machinesFilter" context="THINGS"></search-field>

<value-widget aggregation="DELTA"
              periodRef="period"
              queryFieldRef="machinesFilter"
              showIncrement="RELATIVE">

    <metric name="thing.Total Pieces"></metric>

</value-widget>

Component Reference

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

Value <value-widget>

Description

The description of the widget.

Type: STRING | Optional

description="abc"

Show Title

Indicates whether the title is visible.

Type: BOOLEAN | Optional

Default Value: true

[showTitle]="false"

Title

The title displayed on the top part of the widget box.

Type: STRING | Optional

[title]="'Details'"

Content

Icon

The link:https://fonts.google.com/icons?selected=Material+Icons[Google Fonts] icon name to be displayed within the widget.

Type: STRING | Optional

icon="thermostat"

Increment Style

Indicates whether an increase in value compared to the previous period should be displayed as positive or negative.

Type: ENUM | Optional

Values: POSITIVE, NEGATIVE

Default Value: POSITIVE

incrementStyle="POSITIVE"

Show Colors

Indicates whether the widget must be colored according to the severity of the value, else it is black and white.

Type: BOOLEAN | Optional

Default Value: true

[showColors]="false"

Show Details Bar

It displays a colored bar that provides additional information about the value and its severity.

Type: BOOLEAN | Optional

Default Value: true

[showDetailsBar]="false"

Show Increment

Indicates whether and how to show the value calculated over the previous period.

Type: ENUM | Optional

Values: NONE, ABSOLUTE, PERCENTAGE, ABSOLUTE_AND_PERCENTAGE, PERCENTAGE_ABSOLUTE

Default Value: NONE

showIncrement="NONE"

Show Last Update

Indicates whether to show or hide the last update timestamp.

Type: BOOLEAN | Optional

Default Value: false

[showLastUpdate]="true"

Show Previous Value

Indicates whether the severity should be used to highlight the value.

Type: BOOLEAN | Optional

Default Value: false

[showPreviousValue]="true"

Value Mode

The mode used to display the value.

Type: ENUM | Optional

Values: ICON_AND_VALUE, ICON_AND_LABEL, VALUE, LABEL, ICON, NONE

Default Value: ICON_AND_VALUE

valueMode="ICON_AND_VALUE"

Data

Aggregation

The aggregation applied on the underlying data.

Type: ENUM | Optional

Values: LAST_VALUE, SUM, MIN, MAX, AVG, DELTA

Default Value: LAST_VALUE

aggregation="LAST_VALUE"

Period

The default period to use when computing aggregated value.

Type: ENUM | Optional

Values: LAST_24H, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, THIS_YEAR

period="LAST_24H"

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

periodRef="period"

Query Variable

The id of the page's <things-filter-field> used for searching.

Type: STRING | Optional

queryRef="query-1"

Expandable Detail

Details Button Icon

The Angular Material icon displayed inside the details button.

Type: STRING | Optional

detailsButtonIcon="abc"

Mode

The way the details is opened.

Type: ENUM | Optional

Values: EMBEDDED, POPUP

Default Value: POPUP

expandableMode="EMBEDDED"

Popup Title

The title displayed on the top part of the popup.

Type: STRING | Optional

popupTitle="abc"

Template

The name of the template to display.

Type: STRING | Optional

detailsTemplate="abc"

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 whose current value must be displayed within the widget.

Statistic

The statistic whose current value must be displayed within the widget.

Property

The property whose current value must be displayed within the widget.

Metric <metric>

Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

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="&deg;C"

Statistic <statistic>

Aggregation

The function used to aggregate data.

Type: ENUM | Optional

Values: AVG, COUNT, MAX, MIN, SUM

aggregation="AVG"

Alert Status

Define whether to include alerts that are still active, or have been activated in a period.

Type: ENUM | Optional

Values: ACTIVE, ACTIVATED

activationType="ACTIVE"

Averaged By

The count used to average the statistic results (e.g. Average alert count by thing).

Type: ENUM | Optional

Values: thingCount

averagedBy="thingCount"

Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Label

The alternative label displayed by the widget.

Type: STRING | Optional

label="Temperature"

Property

The object property whose values must be aggregated.

Type: PROPERTY | Optional

property="propName"

Query

The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]'  Predicates: eq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte.

Type: QUERY | Optional

Predicates: beginsWith, eq, neq, gt, gte, isEmpty, isNotEmpty, lt, lte, like, notLike

[query]="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"

Resource

The resource from which to retrieve the items to be used to calculate the statistic.

Type: ENUM | Required

Values: ACTION, ALERT, CUSTOMER, LOCATION, PARTNER, THING, USER, WORK_SESSION

Default Value:

resource="ACTION"

Unit

The unit of measurement to be displayed along the value.

Type: STRING | Optional

unit="&deg;C"

Property <property>

Filter

The name of the filter used to transform and display values.

Type: FILTER | Optional

filter="fooBarFilter"

Name

The property whose value must be loaded by the widget.

Type: PROPERTY | Required

name="serialNumber"

Unit

The unit of measurement to be displayed along the value.

Type: STRING | Optional

unit="&deg;C"