A widget that displays the level of a stackable quantity in a shaped tank.

Level Indicator

The widget requires specifying the metric providing the level percentage (0% - 100%), optionally you can display the title, icon, and percentage value, and also according to other configuration properties, you can change colors and tank shape.

Configuration

Template Syntax

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


<level-indicator-widget [config]="{icon: 'fas fa-oil-can', tankShape: 'PILL'}">
	<metric name="Oil Level"></metric>
</level-indicator-widget>

Component Reference

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

Level Indicator `<level-indicator-widget>`

Empty Color	The color used as background for the empty tank part. Name: config.emptyColor Type: STRING \| Optional Default Value: #F1F1F1 `[config]="{emptyColor: 'abc'}"`
Fill Color	The color used as background by the level bar. Name: config.fillColor Type: STRING \| Optional Default Value: #FF6A00 `[config]="{fillColor: 'abc'}"`
Icon	The name of the link:https://fontawesome.com/v5/search[Font Awesome] icon. Name: config.icon Type: STRING \| Optional `[config]="{icon: 'fas fa-thermometer-quarter'}"`
Show Percentage	Indicates whether the percentage value must be displayed below the level indicator. Name: config.showPercentage Type: BOOLEAN \| Optional Default Value: true `[config]="{showPercentage: false}"`
Stroke Color	The color used as tank stroke. Name: config.strokeColor Type: STRING \| Optional Default Value: #D3D3D3 `[config]="{strokeColor: 'abc'}"`
Tank Height	The height in px of the tank. Name: config.tankHeight Type: INTEGER \| Optional Default Value: 250 `[config]="{tankHeight: 123}"`
Tank Shape	The shape of the tank overlaid on the level bar. Name: config.tankShape Type: ENUM \| Optional Values: ROUNDED_RECT, PILL Default Value: ROUNDED_RECT `[config]="{tankShape: 'ROUNDED_RECT'}"`
Tank Width	The Width in px of the tank. Name: config.tankWidth Type: INTEGER \| Optional Default Value: 94 `[config]="{tankWidth: 123}"`
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"`
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 used by the widget to display the level.

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