Displays metric or statistic data through columns in a bar chart.
In respect to the time-series widget, this chart uses a category based X-axis, so you must use this widget to load aggregated data and compare values.
Configuration
Design View
In the visual editor, you can find the Bar Chart icon under the Charts component palette group.
You can drag the widget into the grid and then configure the following sub-elements according to your needs:
Statistic: the statistic whose values must be rendered as chart columns.
Metric: the metric whose values must be aggregated and rendered as chart columns.
Code View
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 | |
CSS Class | The name(s) of the CSS class used to customize the widget layout.
Type: STRING | single | Optional class="my-custom-class" |
Default Loading Period | The default date and time filtering period applied when entering the page.
Type: ENUM | single | Optional | Values: TODAY YESTERDAY LAST_1_HOUR LAST_4_HOURS 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 | single | Optional [config]="{emptyMessage: 'No customer found'}" |
Enabled Periods | The list of periods which can be selected from the embedded period filter.
Type: ENUM_ARRAY | single | Optional | Values: TODAY YESTERDAY LAST_1_HOUR LAST_4_HOURS 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]="{enabledPeriods: ['V1', 'V2', 'VN']}" |
Export Enabled | The boolean flag indicating whether the data export is enabled.
Type: BOOLEAN | single | Optional | Values: true false [config]="{exportEnabled: true}" |
Height | The height of the widget (e.g. 250px).
Type: STRING | single | 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 | single | Optional | Values: WIDE MICRO [config]="{mode: 'MICRO'}" |
Period Filter Enabled | The boolean flag indicating whether the embedded period filter is available.
Type: BOOLEAN | single | 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 | single | Optional [inputs]="{period: 'period'}" |
Query Variable | The id of the page's <things-filter-field> used for searching.
Type: STRING | single | Optional [inputs]="{query: 'query-1'}" |
Show Bars Horizontally | The flag indicating whether to display the bars horizontally.
Type: BOOLEAN | single | Optional | Values: true false [config]="{rotate: true}" |
Show Category Labels | Show category under each single bar.
Type: BOOLEAN | single | 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 | single | Optional | Values: true false [config]="{showParetoLine: 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 [config]="{width: '500px'}" |
X-Axis Label | The label to be displayed under the X-axis.
Type: STRING | single | Optional [config]="{xAxisLabel: 'Alerts by type'}" |
Y-Axis Label | The label to be displayed on the left of the Y-axis.
Type: STRING | single | Optional [config]="{yAxisLabel: 'Count'}" |
SUB-ELEMENTS | |
Statistic | The statistic whose values must be rendered as chart columns. single | mandatory <statistic resource="ALERT" name="alertCount"></statistic> |
Metric | The metric whose values must be aggregated and rendered as chart columns. multiple | mandatory <metric name="Temperature"></metric> |
Statistic <statistic> | |
---|---|
PROPERTIES | |
Aggregation | The function used to aggregate data.
Type: ENUM | single | 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 | 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" |
Category Order | The order used to display categories by value in the chart.
Type: ENUM | single | Optional | Values: ASC DESC [config]="{categoryOrder: 'DESC'}" [DEPRECATED] |
Color | The color used to render columns.
Type: STRING | single | 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 | single | Optional groupBy="customer.name" |
Label | The alternative label displayed by the widget.
Type: STRING | single | Optional label="Temperature" |
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. |
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" |
Sum Metric | The monitored metric to sum (e.g. Energy.DELTA).
Type: STRING | single | Optional sumMetric="fooBar" [DEPRECATED] |
Unit | The unit of measurement to be displayed along the value.
Type: STRING | single | Optional [config]="{unit: '°C'}" |
Value Filter | The name of the filter used to transform and display values.
Type: FILTER | single | Optional filter="fooBarFilter" |
Metric <metric> | |
---|---|
PROPERTIES | |
Aggegation | The aggregation applied on the metric values.
Type: ENUM | single | 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 | single | Optional | Values: ASC DESC [config]="{categoryOrder: 'DESC'}" |
Color | The color used to render columns.
Type: STRING | single | Optional [config]="{color: 'fooBar'}" |
Group By | The group by applied on the metric values.
Type: ENUM | single | Optional | Values: DAY_OF_MONTH HOUR_OF_DAY [config]="{groupBy: 'HOUR_OF_DAY'}" |
Label | The alternative label displayed by the widget.
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" |
Value Filter | The name of the filter used to transform and display values.
Type: FILTER | single | Optional filter="fooBarFilter" |
Comments
0 comments
Please sign in to leave a comment.