Radial Gauge

This widget allows displaying the last available value of a metric using a manometer like a gauge.

Radial Gauge

Template Syntax

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


<radial-gauge-widget title="Pressure" min="0" max="5000">
    <metric name="Pressure"></metric>
</radial-gauge-widget>

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

Radial Gauge <radial-gauge-widget>
PROPERTIES
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional class="my-custom-class"
Default Value	The default value to display when the metric value is not available. Type: STRING \| Optional defaultValue="fooBar"
Height	The height of the widget (e.g. 250px). Type: STRING \| Optional height="250px"
Max	The maximum measure scale value. Type: FLOAT \| Optional max="FLOAT"
Min	The minimum measure scale value. Type: FLOAT \| Optional min="FLOAT"
Ranges	The set of value ranges (e.g. [10,50,70]). Type: JSON \| Optional [ranges]="{foo: 'bar'}"
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"
SUB-ELEMENTS
Metric	The metric whose current value must be displayed within the gauge. Single \| Required <metric name="Temperature"></metric>

Metric <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 \| Required 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"