<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>