<div [ngClass]="{ 'range-display--vertical': config.orientation === 'vertical' }">
  <div class="range-display">
    <div class="range-display__range">
      <div class="range-display__range__unit">
        {{ config.unit }}
      </div>
      <div *ngIf="isRedRangeDisplayed()" class="range-display__range__max"></div>
      <div
        *ngIf="isYellowRangeDisplayed()"
        class="range-display__range__min"
      ></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>