core/range-display/range-display.component.ts
selector | c8y-range-display |
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()
|
Returns :
boolean
|
isRangeDisplayed | ||||||
isRangeDisplayed(rangeMin, rangeMax)
|
||||||
Parameters :
Returns :
any
|
isRedRangeDisplayed |
isRedRangeDisplayed()
|
Returns :
any
|
isYellowRangeDisplayed |
isYellowRangeDisplayed()
|
Returns :
any
|
rulerCalc | ||||
rulerCalc(index)
|
||||
Parameters :
Returns :
any
|
trackByIndex |
trackByIndex(index: number, el: any)
|
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">
<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
*ngIf="
config.current != undefined &&
config.current >= config.min &&
config.current <= config.max
"
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>