Displays metric or statistic data through columns in a bar chart.

Bar Chart V2

This chart uses a category based X-axis, so you must use this widget to load aggregated data, for instance the count of machines grouped by model name.

Configuration

Template Syntax

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


<bar-chart-widget-v2 title="Alert Count">
   <statistic resource="alert" aggregation="COUNT" groupBy="MONTH"></statistic>
</bar-chart-widget-v2>

Component Reference

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

Bar Chart <bar-chart-widget-v2>
PROPERTIES
Collapse / Expand	The flag indicating whether the widget is collaspible. Type: BOOLEAN \| Optional \| Values: true false [collapsible]="true"
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional class="my-custom-class"
Default Loading Period	The default date and time filtering period applied when entering the page. 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 [config]="{defaultPeriod: 'LAST_7_DAYS'}"
Empty Message	The blank message to be displayed in the widget in case no item was found. To manage translations, you can define a label and use the key as the value of the property. Type: STRING \| Optional [config]="{emptyMessage: 'No customer found'}"
Enabled Periods	The list of periods which can be selected from the embedded period filter. Type: ENUM_ARRAY \| 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 CUSTOM [config]="{enabledPeriods: ['V1', 'V2', 'VN']}"
Export Enabled	The boolean flag indicating whether the data export is enabled. Type: BOOLEAN \| Optional \| Values: true false [config]="{exportEnabled: true}"
Height	The height of the widget (e.g. 250px). Type: STRING \| Optional [config]="{height: '250px'}"
Mode	The mode used to display the chart. WIDE: Controls, axis and grid are displayed. MICRO: Just bars are displayed ina small box. Type: ENUM \| Optional \| Values: WIDE MICRO [config]="{mode: 'MICRO'}"
Period Filter Enabled	The boolean flag indicating whether the embedded period filter is available. Type: BOOLEAN \| Optional \| Values: true false [config]="{filterEnabled: true}"
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 [inputs]="{period: 'period'}"
Query Variable	The id of the page's <things-filter-field> used for searching. Type: STRING \| Optional [inputs]="{query: 'query-1'}"
Show Bars Horizontally	The flag indicating whether to display the bars horizontally. Type: BOOLEAN \| Optional \| Values: true false [config]="{rotate: true}"
Show Category Labels	Show category under each single bar. Type: BOOLEAN \| Optional \| Values: true false [config]="{showBarCategories: true}"
Show Pareto Line	Compute the cumulative total and display it through a line overlaid on the columns. Type: BOOLEAN \| Optional \| Values: true false [config]="{showParetoLine: true}"
Title	The title displayed on the top part of the widget box. Type: STRING \| Optional [title]="'Details'"
Width	The width of the widget (e.g. 500px). Type: STRING \| Optional [config]="{width: '500px'}"
X-Axis Label	The label to be displayed under the X-axis. Type: STRING \| Optional [config]="{xAxisLabel: 'Alerts by type'}"
Y-Axis Label	The label to be displayed on the left of the Y-axis. Type: STRING \| Optional [config]="{yAxisLabel: 'Count'}"
SUB-ELEMENTS
Statistic	The statistic whose values must be rendered as chart columns. Single \| Required <statistic resource="ALERT"></statistic>
Metric	The metric whose values must be aggregated and rendered as chart columns. Multiple \| Required <metric name="Temperature"></metric>
Aggregated Value	The aggregated value to be displayed over the Bar Chart. Multiple \| Optional <property label="Total" [config]="{unit: 'hours'}"></property>

Statistic <statistic>
PROPERTIES
Aggregation	The function used to aggregate data. Type: ENUM \| Optional \| Values: AVG COUNT MAX MIN SUM aggregation="MAX"
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="ACTIVATED"
Averaged By	The count used to average the statistic results (e.g. Average alert count by thing). Type: ENUM \| Optional \| Values: thingCount averagedBy="thingCount"
Color	The color used to render columns. Type: STRING \| Optional [config]="{color: 'fooBar'}"
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 \| Optional groupBy="customer.name"
Label	The alternative label displayed by the widget. Type: STRING \| Optional label="Temperature"
Max Result Count	The number of maximum returned results (default all results are returned). Type: INTEGER \| Optional [limit]="123"
Property	The object property whose values must be aggregated. Type: PROPERTY \| Optional property="PROPERTY"
Query	The array of conditions filtering out items. For instance: [query]='[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}]' Predicates: eq, neq, beginsWith, like, notLike, isEmpty, isNotEmpty, gt, gte, lt, lte. Type: QUERY \| 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 \| Required \| Values: ACTION ALERT CUSTOMER LOCATION PARTNER THING USER WORK_SESSION resource="ALERT"
Sorting	The sort direction used to order categories by value (default none). Type: ENUM \| Optional \| Values: ASC DESC sortDirection="DESC"
Unit	The unit of measurement to be displayed along the value. Type: STRING \| Optional [config]="{unit: '°C'}"
Value Filter	The name of the filter used to transform and display values. Type: FILTER \| Optional filter="fooBarFilter"
Category Order	The order used to display categories by value in the chart. Type: ENUM \| Optional \| Values: ASC DESC [config]="{categoryOrder: 'DESC'}" [DEPRECATED] Use the Sorting property.

Metric <metric>
PROPERTIES
Aggregation	The aggregation applied on the metric values. Type: ENUM \| Optional \| Values: AVG DELTA MAX MIN SUM [config]="{aggregation: 'SUM'}"
Category Order	The order used to display categories by value in the chart. Type: ENUM \| Optional \| Values: ASC DESC [config]="{categoryOrder: 'DESC'}"
Color	The color used to render columns. Type: STRING \| Optional [config]="{color: 'fooBar'}"
Group By	The group by applied on the metric values. Type: ENUM \| Optional \| Values: DAY_OF_MONTH HOUR_OF_DAY [config]="{groupBy: 'HOUR_OF_DAY'}"
Label	The alternative label displayed by the widget. 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"
Value Filter	The name of the filter used to transform and display values. Type: FILTER \| Optional filter="fooBarFilter"

Aggregated Value <property>
PROPERTIES
Aggregation	The aggregation type. Type: ENUM \| Optional \| Values: AVG MAX MIN SUM [config]="{aggregation: 'MAX'}"
Filter	The name of the filter used to transform and display values. Type: FILTER \| Optional filter="fooBarFilter"
Label	The label displayed for the aggregated value. Type: STRING \| Optional label="Temperature"
Unit	The unit of measurement to be displayed along the value. Type: STRING \| Optional [config]="{unit: '°C'}"