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.

Default Value	The default value to display when the metric value is not available. Name: defaultValue Type: STRING \| Optional `defaultValue="abc"`
Max	The maximum measure scale value. Name: max Type: FLOAT \| Optional `max="1.234"`
Min	The minimum measure scale value. Name: min Type: FLOAT \| Optional `min="1.234"`
Ranges	The set of value ranges (e.g. [10,50,70]). Name: ranges Type: JSON \| Optional `[ranges]="{p1: true, p2: 123, p3: 'abc'}"`
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"`
Sub Elements
Metric	The metric whose current value must be displayed within the gauge.

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"`