systelab-meters

systelab-meter

Component to show a Meter widget

Using the component

There are three types of meters:

• Digital Meter
• Radial Meter
• Linear Meter (horizontal / vertical)

<systelab-digital-meter [value]="11"
                        [borderColor]="'#027bff'"
                        [numberFormat]="'#.####'"></systelab-digital-meter>

<systelab-radial-meter [value]="10"
                       [min]="0"
                       [max]="20"
                       [levels]="levels"
                       [borderColor]="'#027bff'"
                       [numberFormat]="'#.####'">

<systelab-linear-meter [isHorizontal]="true"
                       [value]="-10"
                       [min]="0"
                       [max]="20"
                       [borderColor]="'#027bff'"
                       [numberFormat]="'#.####'"
                       [levels]="levels"></systelab-linear-meter>

Properties

Name	Type	Default	Description
isHorizontal	boolean	false	Set to true, if you want that display a bar chart in horizontal view (only for linear)
value	number		Current Value
min	number		Value as a lower limit.
max	number		Value as a higher limit.
levels	object		List of levels
numberFormat	string		Number format
borderColor	string		Color for the border

Definition of a level parameter as an object:

type
Levels = {
	levelColor: string,
	minValue:   number,
	maxValue:   number
};

Use the next @font-face declaration in your scss in order to use the digital font in the meter graphs:

@font-face {
  font-family: 'digital-font';
  src: url('~systelab-meters/assets/fonts/Segment7Standard.otf') format('opentype');
  font-style: normal;
}