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="date-picker">
      <mat-form-field>
        <mat-label>Enter a date range</mat-label>
        <mat-date-range-input [rangePicker]="picker">
          <input matStartDate placeholder="Start date" [(ngModel)]="startDate" (dateChange)="dateChange()">
          <input matEndDate placeholder="End date" [(ngModel)]="endDate" (dateChange)="dateChange()">
        </mat-date-range-input>
        <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
      </mat-form-field>
    </div>
    <div class="sensor-wrapper">
      <div class="title">Sensor DHT</div>  
      <div class="button-param">
        <button 
          [ngClass]="{'active': activeButton === 'vicitemperature'}" 
          (click)="filterData('vicitemperature')">
          Temperatur Udara
        </button>
        <button 
          [ngClass]="{'active': activeButton === 'vicihumidity'}" 
          (click)="filterData('vicihumidity')">
          Kelembaban Udara
        </button>
        <button 
          [ngClass]="{'active': activeButton === 'viciluminosity'}" 
          (click)="filterData('viciluminosity')">
          Intensitas Cahaya
        </button>
      </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 NPK1</div>
        <select class="form-select" style="margin-top: 10px" [(ngModel)]="selectedNPK1" (change)="onResize()">
          <option value="npk">NPK</option>
          <option value="temperature">Temperatur Tanah</option>
          <option value="humidity">Kelembaban Tanah</option>
          <option value="ph">PH Tanah</option>
          <option value="conductivity">Conductivity</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 NPK2</div>
        <select class="form-select" style="margin-top: 10px" [(ngModel)]="selectedNPK2" (change)=" onResize()">
          <option value="npk">NPK</option>
          <option value="temperature">Temperatur Tanah</option>
          <option value="humidity">Kelembaban Tanah</option>
          <option value="ph">PH Tanah</option>
          <option value="conductivity">Conductivity</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>