Displays a pie chart with one slice for each referenced metric value or statistic result.
Design View
In the visual editor, you can find the Pie Chart icon under the Charts component palette group.
You can drag and drop the widget in the grid, and then according to your needs configure the following sub-elements:
Metric: the metric whose value must be rendered as a slice within the chart.
Statistic: the statistic whose values must be rendered as a slices within the chart.
Code View
Template Syntax
Below you can find some examples of how to use the component within a template.
<pie-chart-widget title="Counters"> <metric name="Standby Hours"></metric> <metric name="Rest Hours"></metric> <metric name="Heating Hours"></metric> </pie-chart-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
<pie-chart-widget> | |
---|---|
PROPERTIES | |
Chart Options | The JSON configuring how the chart is rendered, for more details see the Chart JS documentation.
Type: JSON | Optional [globalChartOptions]="{foo: 'bar'}" |
Color Filter | The filter function used to draw values using a common color palette.
Type: FILTER | Optional colorFilter="myColorFilter" |
CSS Class | The name(s) of the CSS class used to customize the widget layout.
Type: STRING | Optional class="my-custom-class" |
Height | The height of the widget (e.g. 250px).
Type: STRING | Optional height="250px" |
Title | The title displayed on the top part of the widget box.
Type: STRING | Optional [title]="'Details'" |
Visibility Condition | The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Width | The width of the widget (e.g. 500px).
Type: STRING | Optional width="500px" |
SUB-ELEMENTS | |
Metric | The metric whose value must be rendered as a slice within the chart. multiple | mandatory <metric name="Temperature"></metric> |
Statistic | The statistic whose values must be rendered as a slices within the chart. multiple | mandatory <statistic name="alertCount"></statistic> |
<metric> | |
---|---|
PROPERTIES | |
Filter | The name of the filter used to transform and display values.
Type: FILTER | Optional filter="fooBarFilter" |
Label | The metric alternative label.
Type: STRING | Optional label="Temperature" |
Name | The metric whose value(s) must be loaded by the widget.
Type: METRIC | Mandatory name="Temperature" |
Unit | The unit of measurement to be displayed along the value.
Type: STRING | Optional unit="°C" |
Visibility Condition | The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional *ngIf="getUser().organizationId != null" |
<statistic> | |
---|---|
PROPERTIES | |
Aggregated Property | The property aggregate when using the Property Aggregation statistic.
Type: PROPERTY | Optional property="serialNumber" |
Aggregation | The aggregation used to retrieve metric data.
Type: ENUM | Optional | Values: SUM MIN MAX AVG DELTA aggregation="MAX" |
Alert Category | The alert category used to filter the statistic results.
Type: ENUM_ARRAY | Optional | Values: INFORMATION ADVICE ANOMALY FAILURE SAFETY [category]="['ANOMALY', 'FAILURE']" |
Alert Severity | The alert severity used to filter the statistic results.
Type: ENUM_ARRAY | Optional | Values: INFORMATIONAL WARNING CRITICAL EMERGENCY [severity]="['WARNING', 'CRITICAL']" |
End Date Variable | The <period-field>'s End Variable filtering data by end date.
Type: STRING | Optional endDateFieldRef="toDate" [DEPRECATED] Use the Period Variable property instead. |
Filter | The name of the filter used to transform and display values.
Type: FILTER | Optional filter="fooBarFilter" |
Group By | The properties names used to group statistic results.
For instance: ['customer.country', 'location.properties.city'].
In the case where the underlying objects are temporally distributed you can also aggregate by HOUR, DAY, MONTH and YEAR.
Type: JSON | Optional [groupBy]="['MONTH', 'name']" |
Include Zero Values | The flag indicating whether to include or not the alerts with zero occurrences.
Type: BOOLEAN | Optional | Values: true false [includeZeroValues]="true" |
Max Result Count | The number of returned results (default all results are returned).
Type: INTEGER | Optional [limit]="123" |
Name | The statistic whose results(s) must be loaded by the widget.
Type: STATISTIC | Mandatory | Values: activeAlertCount activatedAlertCount alertCount alertCountByAlertDefinition thingCount thingPropertyAggregation locationCount customerCount userCount workSessionCount workSessionCount workSessionElapsedTime workSessionSumMetricValues name="alertCount" |
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 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.
Type: JSON | Optional [query]="[{'property': 'connectionStatus', 'predicate': 'eq', 'value': '1'}, {...}]" |
Start Date Variable | The <period-field>'s Start Variable filtering data by start date.
Type: STRING | Optional startDateFieldRef="fromDate" [DEPRECATED] Use the Period Variable property instead. |
Sum Metric | The work-session monitored metric to sum.
Type: STRING | Optional sumMetric="metrics.Pieces.DELTA" |
Thing Definition | The name of the thing-definition used to filter the statistic results.
Type: STRING | Optional thingDefinition="fooBar" |
Comments
0 comments
Please sign in to leave a comment.