Displays a bar graph with a bar for each metric value or statistic result.
[DEPRECATED] Use the new Bar Chart.
Code View
Template Syntax
Below you can find some examples of how to use the component within a template.
<bar-chart-widget title="Counters"> <metric name="Working Hours"></metric> <metric name="Standby Hours"></metric> <metric name="Heating Hours"></metric> </bar-chart-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
| Bar Chart (OLD) <bar-chart-widget> | |
|---|---|
| PROPERTIES | |
| Category | The grouping criteria in case of metrics with multiple values.
Type: ENUM | single | Optional | Values: METRIC
KEY
category="KEY" |
| Color Filter | The filter function used to draw values using a common color palette.
Type: FILTER | single | Optional colorFilter="myColorFilter" |
| Colors | The color palette used by the widget (e.g. ['#00a659', '#d3d3d3'])
Type: JSON | single | Optional [colors]="['#00a659', '#d3d3d3']" |
| CSS Class | The name(s) of the CSS class used to customize the widget layout.
Type: STRING | single | Optional class="my-custom-class" |
| Height | The height of the widget (e.g. 250px).
Type: STRING | single | Optional height="250px" |
| Legend Position | The position where the chart legend must be placed.
Type: ENUM | single | Optional | Values: bottom
top
left
right
none
legendPosition="top" |
| Show Bars Horizontally | The flag indicating whether to display bars horizontally or vertically.
Type: BOOLEAN | single | Optional | Values: true
false
[rotate]="true" |
| Show Category | The flag indicating whether to display or not the category name under each bar.
Type: BOOLEAN | single | Optional | Values: true
false
[showCategory]="true" |
| Title | The title displayed on the top part of the widget box.
Type: STRING | single | Optional [title]="'Details'" |
| Visibility Condition | The expression that allows you to reduce the visibility of the element.
Type: STRING | single | Optional *ngIf="getUser().organizationId != null" |
| Width | The width of the widget (e.g. 500px).
Type: STRING | single | Optional width="500px" |
| SUB-ELEMENTS | |
| Metric | The metric whose label and current value must be rendered as a bar within the chart. multiple | mandatory <metric name="Temperature"></metric> |
| Statistic | The statistic whose values must be rendered as a bar within the chart. single | mandatory <statistic name="alertCount" resource="alert"></statistic> |
| Metric <metric> | |
|---|---|
| PROPERTIES | |
| Filter | The name of the filter used to transform and display values.
Type: FILTER | single | Optional filter="fooBarFilter" |
| Label | The metric alternative label.
Type: STRING | single | Optional label="Temperature" |
| Name | The metric whose value(s) must be loaded by the widget.
Type: METRIC | single | Mandatory name="Temperature" |
| Unit | The unit of measurement to be displayed along the value.
Type: STRING | single | Optional unit="°C" |
| Visibility Condition | The expression that allows you to reduce the visibility of the element.
Type: STRING | single | Optional *ngIf="getUser().organizationId != null" |
| Statistic <statistic> | |
|---|---|
| PROPERTIES | |
| Aggregation | The function used to aggregate data.
Type: ENUM | single | Optional | Values: AVG
COUNT
MAX
MIN
SUM
aggregation="MAX" |
| Alert Category | The alert category used to filter the statistic results.
Type: ENUM_ARRAY | single | Optional | Values: INFORMATION
ADVICE
ANOMALY
FAILURE
SAFETY
[category]="['ANOMALY', 'FAILURE']" [DEPRECATED] Use the severity condition into the query.
|
| Alert Severity | The alert severity used to filter the statistic results.
Type: ENUM_ARRAY | single | Optional | Values: INFORMATIONAL
WARNING
CRITICAL
EMERGENCY
[severity]="['WARNING', 'CRITICAL']" [DEPRECATED] Use the severity condition into the query.
|
| Alert Status | Define whether to include alerts that are still active, or have been activated in a period.
Type: ENUM | single | Optional | Values: ACTIVE
ACTIVATED
activationType="ACTIVATED" |
| Averaged By | The count used to average the statistic results (e.g. Average alert count by thing).
Type: ENUM | single | Optional | Values: thingCount averagedBy="thingCount" |
| End Date Variable | The <period-field>'s End Variable filtering data by end date.
Type: STRING | single | Optional endDateFieldRef="toDate" [DEPRECATED] Use the Period Variable property instead.
|
| Filter | The name of the filter used to transform and display values.
Type: FILTER | single | Optional filter="fooBarFilter" |
| Group By | The property used to group results.
For instance: customer.country.
In the case where the underlying objects are temporally distributed you can also aggregate by HOUR, DAY, MONTH and YEAR.
Type: GROUP_BY | single | Optional groupBy="customer.name" |
| Include Zero Values | The flag indicating whether to include or not the alerts with zero occurrences.
Type: BOOLEAN | single | Optional | Values: true
false
[includeZeroValues]="true" |
| Max Result Count | The number of maximum returned results (default all results are returned).
Type: INTEGER | single | Optional [limit]="123" |
| Name | The statistic whose results(s) must be loaded by the widget.
Type: STATISTIC | single | Mandatory | Values: activeAlertCount
activatedAlertCount
alertCount
alertCountByAlertDefinition
thingCount
thingPropertyAggregation
locationCount
customerCount
userCount
workSessionCount
workSessionCount
workSessionElapsedTime
workSessionSumMetricValues
name="alertCount" [DEPRECATED] Use the resource and property with aggregation.
|
| 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 | single | Optional periodRef="period" |
| Property | The object property whose values must be aggregated.
Type: PROPERTY | single | Optional property="PROPERTY" |
| 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: JSON | single | Optional [query]="[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}, {...}]" |
| Resource | The resource from which to retrieve the items to be used to calculate the statistic.
Type: ENUM | single | Mandatory | Values: action
alert
customer
location
historical_alert
historical_work_session
partner
thing
user
work_session
resource="alert" |
| Sorting | The sort direction used to order categories by value (default none).
Type: ENUM | single | Optional | Values: ASC
DESC
sortDirection="DESC" |
| Start Date Variable | The <period-field>'s Start Variable filtering data by start date.
Type: STRING | single | Optional startDateFieldRef="fromDate" [DEPRECATED] Use the Period Variable property instead.
|
| Sum Metric | The work-session monitored metric to sum.
Type: STRING | single | Optional sumMetric="metrics.Pieces.DELTA" [DEPRECATED] Use the resource and property with aggregation.
|
| Thing Definition | The name of the thing-definition used to filter the statistic results.
Type: STRING | single | Optional thingDefinition="fooBar" [DEPRECATED] Use the query condition.
|
Comments
0 comments
Please sign in to leave a comment.