Meuilleure taille du graphe

Front/skydivelogs-app/src/app/summary/summary.component.css

@@ -40,3 +40,10 @@
 .contentFlex {
   flex: 45%;
 }
+
+.chart-container {
+  position: relative;
+  margin: auto;
+  height: 80vh;
+  width: 80vw;
+}

Front/skydivelogs-app/src/app/summary/summary.component.html

@@ -165,6 +165,7 @@
 
     <mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}">
       <ng-template matTabContent>
+        <div class="chart-container">
           <canvas
             baseChart
             [data]="barChartData"
@@ -174,22 +175,7 @@
             [type]="barChartType"
           >
           </canvas>
-
-        <table mat-table [dataSource]="dsNbJumpByYearByJumpType">
-          <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-          </ng-container>
-          <ng-container matColumnDef="label2">
-            <td mat-cell *matCellDef="let element">{{ element.label2 }}</td>
-          </ng-container>
-          <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-          </ng-container>
-          <tr
-            mat-row
-            *matRowDef="let row; columns: displayedColumnsByYearByJumpType"
-          ></tr>
-        </table>
+        </div>
       </ng-template>
     </mat-tab>
   </mat-tab-group>

Front/skydivelogs-app/src/app/summary/summary.component.ts

@@ -26,7 +26,6 @@ export class SummaryComponent implements OnInit {
   public dsNbJumpByGear: MatTableDataSource<StatsByGearResp>;
   public dsNbJumpByType: MatTableDataSource<StatsByJumpTypeResp>;
   public dsNbJumpByYear: MatTableDataSource<StatsByYearResp>;
-  public dsNbJumpByYearByJumpType: MatTableDataSource<StatsByYearResp>;
   public dsJumpForLastYearByDz: MatTableDataSource<StatsByDzResp>;
   public dsJumpForLastYearByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
   public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>;
@@ -148,7 +147,6 @@ export class SummaryComponent implements OnInit {
       case 7:
         this.serviceApi.getStatsByYearByJumpType().subscribe((data) => {
           data.sort((a, b) => a.label.localeCompare(b.label));
-          this.dsNbJumpByYearByJumpType = new MatTableDataSource(data);
 
           let firstYear: number = Number(data[0].label);
           const now = new Date();
@@ -186,27 +184,12 @@ export class SummaryComponent implements OnInit {
               backgroundColor: color,
               borderColor: color,
               pointBackgroundColor: color,
-              // pointBorderColor: "#fb0000ff",
               fill: false,
               pointRadius: 6,
             };
             results.push(tmp);
           });
 
-          // const results = Array.from(tmpResults, function (item) {
-          //   //const color = this.jumpTypeToColor.get(item[0]);
-          //   return {
-          //     label: item[0],
-          //     data: item[1],
-          //     backgroundColor: color,
-          //     borderColor: color,
-          //     pointBackgroundColor: color,
-          //     pointBorderColor: "#fb0000ff",
-          //     fill: false,
-          //     pointRadius: 6,
-          //   };
-          // });
-
           this.barChartData = {
             labels: listOfYears,
             datasets: results,
@@ -226,7 +209,7 @@ export class SummaryComponent implements OnInit {
     this.barChartType = "line";
     this.barChartOptions = {
       responsive: true,
-      maintainAspectRatio: true,
+      maintainAspectRatio: false,
       plugins: {
         legend: {
           display: true,
@@ -246,6 +229,7 @@ export class SummaryComponent implements OnInit {
         },
         y: {
           stacked: false,
+          beginAtZero: true,
         },
       },
     };