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

@@ -165,14 +165,30 @@
 
     <mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}">
       <ng-template matTabContent>
+        <canvas
+          baseChart
+          [data]="barChartData"
+          [options]="barChartOptions"
+          [plugins]="barChartPlugins"
+          [legend]="barChartLegend"
+          [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: displayedColumns"></tr>
+          <tr
+            mat-row
+            *matRowDef="let row; columns: displayedColumnsByYearByJumpType"
+          ></tr>
         </table>
       </ng-template>
     </mat-tab>

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

@@ -3,6 +3,7 @@ import { MatTableDataSource } from "@angular/material/table";
 import { MatTabChangeEvent, MatTabGroup } from "@angular/material/tabs";
 import { TranslateService } from "@ngx-translate/core";
 import { DatePipe } from "@angular/common";
+import { ChartConfiguration, ChartData, ChartType, Colors } from "chart.js";
 
 import { ServiceComm } from "../../services/service-comm.service";
 import { StatsService } from "../../services/stats.service";
@@ -30,8 +31,19 @@ export class SummaryComponent implements OnInit {
   public dsJumpForLastYearByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
   public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>;
   public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
-
   public displayedColumns: Array<string> = ["label", "nb"];
+  public displayedColumnsByYearByJumpType: Array<string> = [
+    "label",
+    "label2",
+    "nb",
+  ];
+
+  public barChartLegend = true;
+  public barChartPlugins = [];
+  public barChartData: ChartData<"line">;
+  public barChartOptions: ChartConfiguration["options"];
+  public barChartType: ChartType;
+  private jumpTypeToColor: Map<string, string>;
 
   public totalJumps: number;
   public totalCutaways: number;
@@ -72,6 +84,8 @@ export class SummaryComponent implements OnInit {
         data.byJumpType
       );
     });
+
+    this.chartConfig();
   }
 
   public refreshStats() {
@@ -133,8 +147,70 @@ export class SummaryComponent implements OnInit {
         break;
       case 7:
         this.serviceApi.getStatsByYearByJumpType().subscribe((data) => {
-          data.sort((a, b) => b.label.localeCompare(a.label));
+          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();
+          const currentYear = now.getFullYear();
+          const nbYears = currentYear - firstYear;
+          let listOfYears = new Array(nbYears)
+            .fill(null)
+            .map(() => firstYear++);
+
+          // Prepare the list of jump type with am empty array
+          let tmpResults = new Map<string, number[]>();
+          const listOfJumpType = [...new Set(data.map((obj) => obj.label2))];
+          listOfJumpType.forEach((type) => {
+            tmpResults.set(type, new Array(nbYears).fill(NaN));
+          });
+
+          for (let i = 0; i < listOfYears.length; i++) {
+            const year = listOfYears[i].toString();
+
+            let filteredStats = data.filter((d) => d.label == year);
+
+            if (filteredStats.length > 0) {
+              filteredStats.forEach((fs) => {
+                tmpResults.get(fs.label2)[i] = fs.nb;
+              });
+            }
+          }
+
+          const results = [];
+          tmpResults.forEach((value, key) => {
+            const color = this.jumpTypeToColor.get(key);
+            let tmp = {
+              label: key,
+              data: value,
+              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,
+          };
         });
         break;
     }
@@ -145,4 +221,50 @@ export class SummaryComponent implements OnInit {
       this.serviceComm.updatedComponentTitle(data);
     });
   }
+
+  private chartConfig() {
+    this.barChartType = "line";
+    this.barChartOptions = {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: {
+          display: true,
+        },
+        colors: {
+          forceOverride: true,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "nearest",
+        axis: "x",
+      },
+      scales: {
+        x: {
+          stacked: false,
+        },
+        y: {
+          stacked: false,
+        },
+      },
+    };
+
+    this.jumpTypeToColor = new Map<string, string>([
+      ["PAC", "#FFD700"],
+      ["Solo", "#FFA500"],
+      ["RW 3", "#40E0D0"],
+      ["RW 4", "#008080"],
+      ["RW 8", "#7FFFD4"],
+      ["RW X", "#114556"],
+      ["FreeFly", "#FFC0CB"],
+      ["FreeStyle", "#FF91A4"],
+      ["Track/Trace", "#87CEEB"],
+      ["Canopy", "#228B22"],
+      ["Landing accuracy", "#FF6347"],
+      ["Wingsuit 1", "#E6E6FA"],
+      ["Wingsuit 2", "#E0B0FF"],
+      ["Wingsuit 3", "#9400D3"],
+    ]);
+  }
 }

Front/skydivelogs-app/src/services/stats.service.ts

@@ -245,7 +245,7 @@ export class StatsService extends BaseService {
       );
 
     return this.serviceCacheApi.get<Array<StatsByYearByJumpTypeResp>>(
-      CacheApiKey.StatsByYear,
+      CacheApiKey.StatsByYearByJumpType,
       callToApi
     );
   }