Pie Chart (OLD)

Deprecated Feature
This widget has been deprecated and will no longer maintained.
You must use the new Pie Chart widget instead.

Migrating to the new Pie Chart

Rename the tag from <pie-chart-widget> to <pie-chart-widget-v2>.
Update the attributes according to the mapping table below.
On each <metric>, set the aggregation (e.g. DELTA for counters). The new widget aggregates metric values over the selected period.
Review the new defaults: donut layout, no legend, slices sorted by value (descending), data loaded over the last 7 days if no period variable is set.
To change them, use config.mode, config.legendPosition, config.sort, and config.defaultPeriod.

Old Template

<pie-chart-widget title="Alerts by Customer" height="250px">
    <statistic resource="ALERT" aggregation="COUNT" groupBy="customer.name" sortDirection="DESC" periodRef="period"></statistic>
</pie-chart-widget>

New Template

<pie-chart-widget-v2 [title]="'Alerts by Customer'"
    [inputs]="{period: 'period'}"
    [config]="{mode: 'PIE', sort: 'BY_VALUE_DESC', height: '250px'}">
    <statistic resource="ALERT" aggregation="COUNT" groupBy="customer.name"></statistic>
</pie-chart-widget-v2>

Attribute Mapping

Element	Old attribute	New attribute
Widget	`title`, `class`, `hasFeature`, `*ngIf`	Unchanged
Widget	`height`	`config.height`
Widget	`width`	Not supported
Widget	`globalChartOptions`	Not supported. Use `config.mode`, `config.displayedValue`, `config.legendPosition`, `config.sliceLabelPosition`, and `config.showTotal`.
Widget	`colorFilter`	Not supported
`<metric>`	`name`, `label`, `filter`	Unchanged
`<metric>`	`unit`	`config.unit` on the widget
`<statistic>`	`resource`, `aggregation`, `property`, `groupBy`, `activationType`, `averagedBy`, `filter`, `limit`, `query`	Unchanged
`<statistic>`	`sortDirection`	`config.sort` on the widget (`BY_VALUE_DESC`, `BY_NAME_ASC`)
`<statistic>`	`periodRef`, `startDateFieldRef`, `endDateFieldRef`	`inputs.period` on the widget
`<statistic>`	`name`, `sumMetric`	`resource` + `aggregation` + `property`
`<statistic>`	`category`, `severity`, `thingDefinition`	Conditions in `query`
`<statistic>`	`includeZeroValues`	Not supported

Displays a pie chart with one slice for each referenced metric value or statistic result.

Pie Chart

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 `<pie-chart-widget>`

Chart Options	The JSON configuring how the chart is rendered, for more details see the link:https://www.chartjs.org/docs/latest/general/responsive.html[Chart JS] documentation. Name: globalChartOptions Type: JSON \| Optional `[globalChartOptions]="{p1: true, p2: 123, p3: 'abc'}"`
Color Filter	The filter function used to draw values using a common color palette. Name: colorFilter Type: FILTER \| Optional `colorFilter="myColorFilter"`
Title	The title displayed on the top part of the widget box. Name: title Type: STRING \| Optional `[title]="'Pie Chart'"`
Rendering
Availability	Configure availability based on active features on Digital Plan on Add-ons Name: hasFeature Type: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"`
CSS Class	The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING \| Optional `class="my-custom-class"`
Height	The height of the widget (e.g. 250px). Name: height Type: STRING \| Optional `height="250px"`
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`
Width	The width of the widget (e.g. 500px). Name: width Type: STRING \| Optional `width="500px"`
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.

Metric `<metric>`

Filter	The name of the filter used to transform and display values. Name: filter Type: FILTER \| Optional `filter="fooBarFilter"`
Label	The metric alternative label. Name: label Type: STRING \| Optional `label="Temperature"`
Name	The metric whose value(s) must be loaded by the widget. Name: name Type: METRIC \| Required `name="Temperature"`
Unit	The unit of measurement to be displayed along the value. Name: unit Type: STRING \| Optional `unit="°C"`
Advanced
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`

Statistic `<statistic>`

Aggregation	The function used to aggregate data. Name: aggregation Type: ENUM \| Optional Values: AVG, COUNT, MAX, MIN, SUM `aggregation="AVG"`
~~Alert Category~~	The alert category used to filter the statistic results. Name: category Type: ENUM (multiple) \| Optional Values: INFORMATION, ADVICE, ANOMALY, FAILURE, SAFETY DEPRECATED Define a condition into the query property `[category]="['INFORMATION', 'ADVICE']"`
~~Alert Severity~~	The alert severity used to filter the statistic results. Name: severity Type: ENUM (multiple) \| Optional Values: INFORMATIONAL, WARNING, CRITICAL, EMERGENCY DEPRECATED Define a condition into the query property. `[severity]="['INFORMATIONAL', 'WARNING']"`
Alert Status	Define whether to include alerts that are still active, or have been activated in a period. Name: activationType Type: ENUM \| Optional Values: ACTIVE, ACTIVATED `activationType="ACTIVE"`
Averaged By	The count used to average the statistic results (e.g. Average alert count by thing). Name: averagedBy Type: ENUM \| Optional Values: thingCount `averagedBy="thingCount"`
~~End Date Variable~~	The <period-field>'s End Variable filtering data by end date. Name: endDateFieldRef Type: STRING \| Optional DEPRECATED Use the Period Variable property. `endDateFieldRef="toDate"`
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. Name: groupBy Type: GROUP_BY \| Optional `groupBy="customer.name"`
~~Include Zero Values~~	The flag indicating whether to include or not the alerts with zero occurrences. Name: includeZeroValues Type: BOOLEAN \| Optional Default Value: false DEPRECATED This feature is no longer supported. `[includeZeroValues]="true"`
~~Name~~	The statistic whose results(s) must be loaded by the widget. Name: name Type: STATISTIC \| Required DEPRECATED Use the Resource, and select the Aggregation and Property to aggregate. `name="alertCount"`
Property	The object property whose values must be aggregated. Name: property Type: PROPERTY \| Optional `property="propName"`
Resource	The resource from which to retrieve the items to be used to calculate the statistic. Name: resource Type: ENUM \| Required Values: ACTION, ALERT, EVENT, CUSTOMER, LOCATION, PARTNER, THING, USER, WORK_SESSION Default Value: `resource="ACTION"`
Sorting	The sort direction used to order categories by value (default none). Name: sortDirection Type: ENUM \| Optional Values: ASC, DESC `sortDirection="ASC"`
~~Start Date Variable~~	The <period-field>'s Start Variable filtering data by start date. Name: startDateFieldRef Type: STRING \| Optional DEPRECATED Use the Period Variable property instead. `startDateFieldRef="fromDate"`
~~Sum Metric~~	The work-session monitored metric to sum. Name: sumMetric Type: STRING \| Optional DEPRECATED Use the Resource property and select the Aggregation and the Property to aggregate. `sumMetric="metrics.Pieces.DELTA"`
~~Thing Definition~~	The name of the thing-definition used to filter the statistic results. Name: thingDefinition Type: STRING \| Optional DEPRECATED Define a condition into the query property `thingDefinition="abc"`
Value Filter	The name of the filter used to transform and display values. Name: filter Type: FILTER \| Optional `filter="fooBarFilter"`
Data
Max Result Count	The number of maximum returned results (default all results are returned). Name: limit Type: INTEGER \| Optional `limit="123"`
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 `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. Name: query Type: QUERY \| Optional Predicates: beginsWith, eq, neq, gt, gte, isEmpty, isNotEmpty, lt, lte, like, notLike `[query]="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"`

Full Syntax Example



<pie-chart-widget    
    [title]="'Pie Chart'"
    width="500px"
    height="250px"
    globalChartOptions="{p1: true, p2: 123, p3: 'abc'}"
    colorFilter="myColorFilter"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <metric        
            name="Temperature"
            label="Temperature"
            filter="fooBarFilter"
            unit="&deg;C"
            *ngIf="getUser().organizationId != null"></metric>
    <statistic        
            name="alertCount"
            resource="ACTION"
            activationType="ACTIVE"
            aggregation="AVG"
            groupBy="customer.name"
            property="propName"
            sortDirection="ASC"
            averagedBy="thingCount"
            filter="fooBarFilter"
            query="[{property:'prop1', predicate: 'eq', value: 'foo'}, {property:'prop2', predicate: 'in', value: ['bar', 'baz']}]"
            limit="123"
            periodRef="period"
            severity="['INFORMATIONAL', 'WARNING']"
            category="['INFORMATION', 'ADVICE']"
            thingDefinition="abc"
            startDateFieldRef="fromDate"
            endDateFieldRef="toDate"
            sumMetric="metrics.Pieces.DELTA"
            [includeZeroValues]="true"></statistic>
</pie-chart-widget>