<div class="container navtop">

  <h1 class="mb-5">Statistiques du jeux</h1>
  <!-- charts -->
  <div class="row justify-content-center">
    <div *ngIf="isFoo " class="col-sm-12 col-lg-8">
      <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
        [plugins]="barChartPlugins" [legend]="barChartLegend" [chartType]="barChartBar">
      </canvas>
    </div>
  </div>
  <div class="row justify-content-center">
    <div *ngIf="!isFoo " class="col-sm-12 col-lg-8">
      <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
        [plugins]="barChartPlugins" [legend]="barChartLegend" [chartType]="barChartHorizontal">
      </canvas>
    </div>
  </div>


  <button class="mt-4" mat-raised-button (click)="isFoo=!isFoo" color="primary">{{getBtnText()}}</button>

 <!-- table statistique  -->
  <div class="row justify-content-center my-5 ">
    <table *ngIf="statisticArray" mat-table [dataSource]="statisticArray" class="mat-elevation-z8 col-11 col-lg-8">

      <!-- gain Column -->
      <ng-container matColumnDef="gain">
        <th mat-header-cell *matHeaderCellDef>Gain</th>
        <td mat-cell *matCellDef="let element" class="text-left"> {{element.gain}} </td>
        <td mat-footer-cell *matFooterCellDef class="text-left">Totale</td>
      </ng-container>

      <!-- used Column -->
      <ng-container matColumnDef="used">
        <th mat-header-cell *matHeaderCellDef class="text-center">Utilisé</th>
        <td mat-cell *matCellDef="let element"> {{element.used}} </td>
        <td mat-footer-cell *matFooterCellDef> {{getUsed()}} </td>
      </ng-container>

      <!-- served Column -->
      <ng-container matColumnDef="served">
        <th mat-header-cell *matHeaderCellDef class="text-center">Server</th>
        <td mat-cell *matCellDef="let element"> {{element.served}} </td>
        <td mat-footer-cell *matFooterCellDef> {{getServed()}} </td>
      </ng-container>

      <!-- total Column -->
      <ng-container matColumnDef="total">
        <th mat-header-cell *matHeaderCellDef class="text-center">Totalité</th>
        <td mat-cell *matCellDef="let element"> {{element.total}} </td>
        <td mat-footer-cell *matFooterCellDef> {{getTotal()}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
    </table>
  </div>

</div>