<app-sidebar></app-sidebar>
<div class="p-4 sm:ml-64" id="div-sidebar">
  <div class="container">
    <div class="card mt-2">
      <div class="card-body">
        <h4 class="card-title">Bar Chart</h4>
        <canvas
          baseChart
          [data]="salesData_bargraph"
          [type]="'bar'"
          [options]="chartOptions_bargraph"
        >
        </canvas>
      </div>
    </div>
    <div class="card mt-2">
      <div class="card-body">
        <h4 class="card-title">Line Chart</h4>
        <canvas
          baseChart
          [data]="salesData_linegraph"
          [type]="'line'"
          [options]="chartOptions_linegraph"
        >
        </canvas>
      </div>
    </div>

    <h1 class="text-3xl">Grondwaterstand</h1>
    <table class="table mb-5">
      <thead class="thead-dark">
        <tr>
          <th scope="col">id</th>
          <th scope="col">Tijd</th>
          <th scope="col">Waterstand</th>
          <th scope="col">sensorID</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let sensordata of sensordata$ | async">
          <tr>
            <td>
              {{ sensordata.id }}
            </td>
            <td>
              {{ sensordata.timestamp | date : "MMMM d,  h:mm " }}
            </td>
            <td>
              {{ sensordata.waterLevel }}
            </td>

            <td>
              {{ sensordata.sensorID }}
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</div>
