Ajout du graphique de temps cumulé sur l'année

ou les 12 derniers mois.

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { formatDate } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { ChartConfiguration, ChartData } from 'chart.js';
@@ -28,12 +29,12 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         "nbMinutes",
         "notes",
         "flightDate"
-      ];
+    ];
 
     constructor(private serviceComm: ServiceComm,
-                private serviceTunnelFlight: TunnelFlightService,
+        private serviceTunnelFlight: TunnelFlightService,
-                private translateService: TranslateService,
+        private translateService: TranslateService,
-                private dateService: DateService) { }
+        private dateService: DateService) { }
 
     ngOnInit() {
         this.serviceComm.forceTranslateTitle.subscribe((data) => {
@@ -88,6 +89,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
     private getData(): void {
         this.isLoading = true;
 
+        // Get data to show in a table
         let endDate = new Date();
         let beginDate = new Date();
         endDate.setHours(0, 0, 0, 0);
@@ -101,20 +103,42 @@ export class ListOfTunnelFlightsComponent implements OnInit {
                 break;
         }
 
+        let tunnelFlights: Array<TunnelFlight> = [];
         this.serviceTunnelFlight.getTunnelFlights(beginDate, endDate)
                                 .subscribe((data) => {
+                                    tunnelFlights = data;
                                     this.dataSourceTable.data = data;
+
+                                    // Format data to show a chart
+                                    const allMonths = this.getMontsBetweenDates(beginDate, endDate)
+                                    const cumulatedTime = this.getCumulatedTimeByMonth(tunnelFlights, allMonths);
+                                    this.barChartData = {
+                                        labels: allMonths,
+                                        datasets: [
+                                            { data: cumulatedTime, label: 'Time in tunnel' }
+                                        ]
+                                    };
+
+                                    this.isLoading = false;
                                 });
+    }
 
-        this.barChartData = {
+    private getCumulatedTimeByMonth(tunnelFlights: TunnelFlight[], allMonths: string[]): Array<number> {
-            labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
+        let results: Array<number> = [];
-            datasets: [
-                { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
-                { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
-            ]
-        };
 
-        this.isLoading = false;
+        for (let i = 0; i < allMonths.length; i++) {
+            const month = allMonths[i];
+            let tmpTunnelFlights = tunnelFlights.filter((d) => d.flightMonth == month);
+
+            let sum = 0;
+            tmpTunnelFlights.map((data) => {
+                sum += data.nbMinutes;
+            });
+
+            results.push(sum);
+        }
+
+        return results;
     }
 
     private footer = (tooltipItems) => {
@@ -130,4 +154,18 @@ export class ListOfTunnelFlightsComponent implements OnInit {
     public onPeriodChange() {
         this.getData();
     }
+
+
+    private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {
+        let results: Array<string> = [];
+        let tmpBeginDate = new Date(beginDate.getTime());
+        const tmpEndDate = new Date(endDate.getTime());
+
+        while (tmpBeginDate < tmpEndDate) {
+            results.push(formatDate(tmpBeginDate, "yy-MM", "en"));
+            tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1);
+        }
+
+        return results;
+    }
 }

Front/skydivelogs-app/src/models/tunnel-flight.ts

@@ -1,3 +1,4 @@
+import { formatDate } from '@angular/common';
 import { DropZoneResp } from './dropzone';
 
 export class TunnelFlightReq {
@@ -29,6 +30,7 @@ export class TunnelFlight {
   constructor(data: any) {
     Object.assign(this, data);
     this.flightDate = new Date(data.flightDate);
+    this.flightMonth = formatDate(this.flightDate, "yy-MM", "en")
   }
 
   public id: number;
@@ -36,4 +38,5 @@ export class TunnelFlight {
   public nbMinutes: number;
   public notes: string;
   public flightDate: Date;
+  public flightMonth: string;
 }

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

@@ -2,22 +2,10 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DateService {
-    private milliSeconInDay: number;
-
-    constructor() {
-        this.milliSeconInDay = 1000 * 60 * 60 * 24;
-    }
-
     public addDays(currentDate: Date, nbDays: number): Date {
         const tmpDate = new Date(currentDate.getTime());
         tmpDate.setDate(tmpDate.getDate() + nbDays);
 
-        // const totalMilliSeconds = nbDays * this.milliSeconInDay;
-        // const currentTime = currentDate.getTime();
-        // const tmpDate = new Date(currentDate.getTime());
-
-        // tmpDate.setTime(currentTime + totalMilliSeconds);
-
         return tmpDate;
     }