<div class="header d-flex justify-content-between">
  <div class="d-flex align-items-center">
    <div *ngIf="!activeWorker" class="title">Workers Utilization</div>
    <div *ngIf="activeWorker" class="param-selector">
      <mat-form-field appearance="outline" class="dark-outline thin time-selector">
        <mat-select
          [ngModel]="currentParam"
          (ngModelChange)="chartParamChange($event)"
          name="chart-param"
          panelClass="dark-outline"
        >
          <mat-option *ngFor="let chartParam of chartParamOptions" [value]="chartParam.value">
            {{chartParam.label}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <i *ngIf="statsError$ | async"
       class="warnning fas fa-exclamation-triangle"
       smTooltip="Data temporarily not available">
    </i>
  </div>
  <div class="time-selector">
    <mat-form-field appearance="outline" class="dark-outline thin time-selector">
      <mat-select [ngModel]="currentTimeFrame" (ngModelChange)="timeFrameChange($event)" name="time-frame" panelClass="dark-outline">
        <mat-option *ngFor="let timeFrame of timeFrameOptions" [value]="timeFrame.value">
          {{timeFrame.label}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div #chart class="line-chart-container">
  <sm-line-chart
    class="h-100"
    [showLoadingOverlay]="refreshChart"
    [data]="chartData"
    [yLabel]="yAxisLabel"
    [tooltipVerticalOffset]="-75"></sm-line-chart>
</div>
