<div class="d-flex">
  <div class="chart-container overflow-hidden">
    <div class="header">
      <div class="title">
        <div class="ellipsis">{{selectedQueue ? selectedQueue.name : 'Overall'}} Experiment Wait Time</div>
        <i *ngIf="statsError$ | async"
          class="warnning fas fa-exclamation-triangle"
          smTooltip="Data temporarily not available">
        </i>
      </div>
    </div>
    <div #waitchart class="line-chart-container">
      <sm-line-chart [data]="waitChartData" [showLoadingOverlay]="refreshChart" [tooltipVerticalOffset]="-60"></sm-line-chart>
    </div>
  </div>
  <div class="chart-container right overflow-hidden">
    <div class="header">
      <div class="title">
        <div class="ellipsis">{{selectedQueue ? selectedQueue.name : 'Overall'}} Queued Experiments</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)="timeFrameChanged($event)" name="time-frame" panelClass="dark-outline">
            <mat-option *ngFor="let timeFrame of timeFrameOptions; trackBy: trackByFn" [value]="timeFrame.value">
              {{timeFrame.label}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <div #lenchart class="line-chart-container" >
      <sm-line-chart [data]="lenChartData" [showLoadingOverlay]="refreshChart" [tooltipVerticalOffset]="-60"></sm-line-chart>
    </div>
  </div>
</div>
