File

core/range-display/range-display.component.ts

Metadata

Index

Methods
Inputs
HostBindings
Accessors

Constructor

constructor(sanitizer: DomSanitizer)
Parameters :
Name Type Optional
sanitizer DomSanitizer No

Inputs

config
Type : RangeDisplay
Default value : {}
display
Type : "full" | "compact" | "inline"
Default value : 'full'

HostBindings

attr.style
Type : any

Methods

checkTarget
checkTarget()
Returns : boolean
isRangeDisplayed
isRangeDisplayed(rangeMin, rangeMax)
Parameters :
Name Optional
rangeMin No
rangeMax No
Returns : any
isRedRangeDisplayed
isRedRangeDisplayed()
Returns : any
isYellowRangeDisplayed
isYellowRangeDisplayed()
Returns : any
rulerCalc
rulerCalc(index)
Parameters :
Name Optional
index No
Returns : any
trackByIndex
trackByIndex(index: number, el: any)
Parameters :
Name Type Optional
index number No
el any No
Returns : number

Accessors

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 }} &#xa; {{ 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>

results matching ""

    No results matching ""