fix/little-updates (#1)

Reviewed-on: #1
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>

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

@@ -1,52 +1,61 @@
 <div class="content">
   <div class="paragraph">
-    <label class="left160">{{ 'Summary_TotalJumps' | translate }}</label>
+    <label class="left160">{{ "Summary_TotalJumps" | translate }}</label>
     <span>: {{ totalJumps }}</span>
   </div>
 
   <div class="paragraph">
-    <label class="left160">{{ 'Summary_TotalCutaways' | translate }}</label>
+    <label class="left160">{{ "Summary_TotalCutaways" | translate }}</label>
     <span>: {{ totalCutaways }}</span>
   </div>
 
   <div class="paragraph">
-    <label class="left160">{{ 'Summary_LastJump' | translate }}</label>
+    <label class="left160">{{ "Summary_LastJump" | translate }}</label>
     <span>: {{ lastJump }}</span>
   </div>
 
-  <div class="paragraph" style="margin-top: 20px;">
-    <label class="left160">{{ 'Summary_Refresh' | translate }}</label>
-    <mat-icon aria-hidden="false" aria-label="Force the refresh of the stats" style="cursor: pointer;"
-              (click)='refreshStats()'>cached</mat-icon>
+  <div class="paragraph" style="margin-top: 20px">
+    <label class="left160">{{ "Summary_Refresh" | translate }}</label>
+    <mat-icon
+      aria-hidden="false"
+      aria-label="Force the refresh of the stats"
+      style="cursor: pointer"
+      (click)="refreshStats()"
+      >cached</mat-icon
+    >
   </div>
 
-  <mat-tab-group mat-align-tabs="left" animationDuration="0ms" 
-                 (selectedIndex)="0" (selectedTabChange)="onTabChanged($event);">
+  <mat-tab-group
+    mat-align-tabs="left"
+    animationDuration="0ms"
+    (selectedIndex)="(0)"
+    (selectedTabChange)="onTabChanged($event)"
+  >
     <mat-tab label="{{ 'Summary_LastMonth_Title' | translate }}">
       <ng-template matTabContent>
         <div class="containerFlex">
           <fieldset class="contentFlex">
-            <legend>{{ 'Summary_LastMonth_ByDz' | translate }}</legend>
+            <legend>{{ "Summary_LastMonth_ByDz" | translate }}</legend>
             <table mat-table [dataSource]="dsJumpForLastMonthByDz">
               <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{element.label}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
               </ng-container>
               <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
               </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </fieldset>
           <fieldset class="contentFlex">
-            <legend>{{ 'Summary_LastMonth_ByJumpType' | translate }}</legend>
+            <legend>{{ "Summary_LastMonth_ByJumpType" | translate }}</legend>
             <table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
               <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{element.label}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
               </ng-container>
               <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
               </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </fieldset>
         </div>
@@ -57,27 +66,27 @@
       <ng-template matTabContent>
         <div class="containerFlex">
           <fieldset class="contentFlex">
-            <legend>{{ 'Summary_LastYear_ByDz' | translate }}</legend>
+            <legend>{{ "Summary_LastYear_ByDz" | translate }}</legend>
             <table mat-table [dataSource]="dsJumpForLastYearByDz">
               <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{element.label}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
               </ng-container>
               <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
               </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </fieldset>
           <fieldset class="contentFlex">
-            <legend>{{ 'Summary_LastYear_ByJumpType' | translate }}</legend>
+            <legend>{{ "Summary_LastYear_ByJumpType" | translate }}</legend>
             <table mat-table [dataSource]="dsJumpForLastYearByJumpType">
               <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{element.label}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
               </ng-container>
               <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
               </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
             </table>
           </fieldset>
         </div>
@@ -88,12 +97,12 @@
       <ng-template matTabContent>
         <table mat-table [dataSource]="dsNbJumpByDz">
           <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{element.label}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
           </ng-container>
           <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
           </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
       </ng-template>
     </mat-tab>
@@ -102,12 +111,12 @@
       <ng-template matTabContent>
         <table mat-table [dataSource]="dsNbJumpByAircraft">
           <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{element.label}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
           </ng-container>
           <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
           </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
       </ng-template>
     </mat-tab>
@@ -116,12 +125,12 @@
       <ng-template matTabContent>
         <table mat-table [dataSource]="dsNbJumpByGear">
           <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{element.label}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
           </ng-container>
           <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
           </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
       </ng-template>
     </mat-tab>
@@ -130,12 +139,12 @@
       <ng-template matTabContent>
         <table mat-table [dataSource]="dsNbJumpByType">
           <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{element.label}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
           </ng-container>
           <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
           </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
       </ng-template>
     </mat-tab>
@@ -144,14 +153,30 @@
       <ng-template matTabContent>
         <table mat-table [dataSource]="dsNbJumpByYear">
           <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{element.label}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
           </ng-container>
           <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
+            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
           </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
         </table>
       </ng-template>
     </mat-tab>
+
+    <mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}">
+      <ng-template matTabContent>
+        <div class="chart-container">
+          <canvas
+            baseChart
+            [data]="barChartData"
+            [options]="barChartOptions"
+            [plugins]="barChartPlugins"
+            [legend]="barChartLegend"
+            [type]="barChartType"
+          >
+          </canvas>
+        </div>
+      </ng-template>
+    </mat-tab>
   </mat-tab-group>
 </div>