Pie Chart

Prev Next

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]="'Details'"

Rendering

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="&deg;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, 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']}]"