Micro Chart

Prev Next

This widget displays a metric or statistic data in a compact chart.

Micro Chart

With this chart, you can display data from a single metric or statistic without an axis, grid or legend.

You can select whether to display data by using:

  • LINE: a single line is used to render data points in the period.


    The line is automatically color by using the threshold severity of the last value.

  • BARS: for each value, a bar is displayed.


    Each bar is colored according to the threshold severity of the value.

  • PIE: display a pie chart, where each slice represents a value.


    Each slice is colored according to the threshold severity of the value.

Configuration

Template Syntax

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


<micro-chart-widget defaultPeriod="LAST_30_DAYS" layout="LINE">
   <metric name="connectivity_index_percentage"></metric>
</micro-chart-widget>

Component Reference

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

Micro Chart <micro-chart-widget>

Layout

The way the data are presented, which can be Line, Bars or Pie.

Name: layout

Type: ENUM | Optional

Values: LINE, BARS, PIE

Default Value: LINE

layout="LINE"

Title

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

Name: title

Type: STRING | Optional

[title]="'Details'"

Data

Default Loading Period

The default date and time filtering period applied when entering the page.

Name: defaultPeriodValue

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_30_DAYS

defaultPeriodValue="TODAY"

Period Variable

The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>.

Name: periodRef

Type: STRING | Optional

periodRef="period"

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.

Name: query

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']}]"

Query Variable

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

Name: queryFieldRef

Type: STRING | Optional

queryFieldRef="query-1"

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: 200px

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"

Advanced

Color

The default color expressed in hexadecimal.

Name: color

Type: STRING | Optional

color="abc"

Max

The maximum value showed on the axis.

Name: maxScale

Type: INTEGER | Optional

maxScale="123"

Min

The minimum value showed on the axis.

Name: minScale

Type: INTEGER | Optional

minScale="123"

Sub Elements

Metric

The metrics used to load timeseries data.

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