core/range-display/range-display.component.ts
AfterViewInit
OnDestroy
OnChanges
| selector | c8y-range-display |
| standalone | true |
| imports |
NgClass
NgIf
NgStyle
NgFor
C8yTranslatePipe
DecimalPipe
DatePipe
|
| templateUrl | ./range-display.component.html |
Methods |
Inputs |
HostBindings |
Accessors |
constructor(sanitizer: DomSanitizer)
|
||||||
|
Parameters :
|
| config |
Type : RangeDisplay
|
Default value : {}
|
| display |
Type : "full" | "compact" | "inline"
|
Default value : 'full'
|
| attr.style |
Type : any
|
| checkTarget |
checkTarget()
|
|
This method checks if the target value is defined and falls within the minimum and maximum range
Returns :
boolean
true if the target value is within the defined range, false otherwise. This method checks if the target value is defined and falls within the minimum and maximum range |
| isRangeDisplayed | |||||||||
isRangeDisplayed(rangeMin, rangeMax)
|
|||||||||
|
Checks if the given range is displayed.
Parameters :
Returns :
any
true if the range is displayed, false otherwise. |
| isRedRangeDisplayed |
isRedRangeDisplayed()
|
|
Returns :
any
|
| isYellowRangeDisplayed |
isYellowRangeDisplayed()
|
|
Returns :
any
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnChanges |
ngOnChanges()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| rulerCalc | ||||
rulerCalc(index)
|
||||
|
Parameters :
Returns :
any
|
| trackByIndex | ||||||
trackByIndex(index: number)
|
||||||
|
Parameters :
Returns :
number
|
| inlineStyle |
getinlineStyle()
|
<div
[ngClass]="{
'range-display--vertical': config.orientation === 'vertical',
'range-display--compact': display === 'compact',
'range-display--inline': display === 'inline'
}"
attr.data-label="{{ config.unit }}"
>
<div
class="range-display"
#rangeDisplay
>
<div class="range-display__range">
<div class="range-display__range__unit">
{{ config.unit }}
</div>
<div
*ngIf="isYellowRangeDisplayed()"
class="range-display__range__min"
></div>
<div
*ngIf="isRedRangeDisplayed()"
class="range-display__range__max"
></div>
<div
*ngIf="checkTarget()"
class="range-display__range__target"
attr.data-label="{{ config.target }} {{ config.unit }}"
title="{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}"
></div>
<div
[ngStyle]="{
display:
config.current != undefined &&
config.current >= config.min &&
config.current <= config.max
? 'block'
: 'none'
}"
#currentRangeElement
class="range-display__range__current"
attr.data-label="{{ config.current }} {{ config.unit }} 
{{ config.time | c8yDate }}"
title="{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{
config.time | c8yDate
}}"
></div>
</div>
<div class="range-display__ruler">
<div
*ngFor="let x of [].constructor(10); let index = index; trackBy: trackByIndex"
attr.data-label="{{ rulerCalc(index) }}"
class="range-display__tick"
></div>
<div
attr.data-label="{{ config.max ?? 100 | number }}"
class="range-display__tick"
></div>
</div>
</div>
</div>