This widget displays a metric or statistic data in a compact 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
|
Title | The title displayed on the top part of the widget box. Name: title Type: STRING | Optional
|
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
|
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
|
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 Variable | The id of the page's <things-filter-field> used for searching. Name: queryFieldRef Type: STRING | Optional
|
Rendering | |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING | Optional
|
Height | The height of the widget (e.g. 250px). Name: height Type: STRING | Optional Default Value: 200px
|
Visibility Condition | The expression that allows you to reduce the visibility of the element. Name: *ngIf Type: STRING | Optional
|
Advanced | |
Color | The default color expressed in hexadecimal. Name: color Type: STRING | Optional
|
Max | The maximum value showed on the axis. Name: maxScale Type: INTEGER | Optional
|
Min | The minimum value showed on the axis. Name: minScale Type: INTEGER | Optional
|
Sub Elements | |
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
|
Filter | The name of the filter used to transform and display values. Name: filter Type: FILTER | Optional
|
Label | The metric alternative label. Name: label Type: STRING | Optional
|
Name | The metric whose value(s) must be loaded by the widget. Name: name Type: METRIC | Required
|
Unit | The unit of measurement to be displayed along the value. Name: unit Type: STRING | Optional
|
Advanced | |
Visibility Condition | The expression that allows you to reduce the visibility of the element. Name: *ngIf Type: STRING | Optional
|