frontend-smartfarming/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html

<div class="container-graph">
  <ng-container *ngIf="allNoData; else graphContent">
    <div class="no-data">No available data</div>
  </ng-container>

  <ng-template #graphContent>
    <div class="sensor-wrapper">
      <div class="title">Sensor BHT</div>
      <ng-container *ngIf="isLoadingDHT; else dhtData">
        <div class="d-flex align-items-center" style="padding: 50px 0px 50px 0px">
          <i class="fa fa-spinner fa-spin"></i>
        </div>
      </ng-container>    
      <ng-template #dhtData>
        <canvas #myChartDHT id="myChartDHT" width="600" height="300" style="height: 300px;"></canvas>
        <p *ngIf="isNoDataDHT" class="no-data">No available data</p>
      </ng-template>
    </div>

    <div class="sensor-wrapper">
      <div class="title-with-dropdown">
        <div class="title">Sensor NPK 1</div>
        <select class="form-select" style="margin-top: 10px" [(ngModel)]="selectedNPK1" (change)="updateCharts(); onResize()">
          <option value="npk">NPK</option>
          <option value="others">Lainnya</option>
        </select>
      </div>
      <ng-container *ngIf="isLoadingNPK1; else npk1Data">
        <div class="d-flex align-items-center" style="padding: 50px 0px 50px 0px">
          <i class="fa fa-spinner fa-spin"></i>
        </div>
      </ng-container>
      <ng-template #npk1Data>
        <canvas #myChartNPK1 id="myChartNPK1"></canvas>
        <p *ngIf="isNoDataNPK1" class="no-data">No available data</p>
      </ng-template>
    </div>

    <div class="sensor-wrapper">
      <div class="title-with-dropdown">
        <div class="title">Sensor NPK 2</div>
        <select class="form-select" style="margin-top: 10px" [(ngModel)]="selectedNPK2" (change)="updateCharts(); onResize()">
          <option value="npk">NPK</option>
          <option value="others">Lainnya</option>
        </select>
      </div>
      <ng-container *ngIf="isLoadingNPK2; else npk2Data">
        <div class="d-flex align-items-center" style="padding: 50px 0px 50px 0px;">
          <i class="fa fa-spinner fa-spin"></i>
        </div>
      </ng-container>
      <ng-template #npk2Data>
        <canvas #myChartNPK2 id="myChartNPK2"></canvas>
        <p *ngIf="isNoDataNPK2" class="no-data">No available data</p>
      </ng-template>
    </div>
  </ng-template>
</div>