First step to display the number of hours of

tunnel flights by period

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

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListOfTunnelFlightsComponent } from './list-of-tunnel-flights.component';
-
-describe('ListOfTunnelFlightsComponent', () => {
-  let component: ListOfTunnelFlightsComponent;
-  let fixture: ComponentFixture<ListOfTunnelFlightsComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ListOfTunnelFlightsComponent]
-    });
-    fixture = TestBed.createComponent(ListOfTunnelFlightsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -2,7 +2,8 @@ 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';
+import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
+import { from, of, groupBy, mergeMap, reduce, map } from 'rxjs';
 
 import { ServiceComm } from '../../services/service-comm.service';
 import { TunnelFlightService } from "../../services/tunnel-flight.service";
@@ -19,7 +20,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
     public barChartPlugins = [];
     public barChartData: ChartData<'bar'>;
     public barChartOptions: ChartConfiguration['options'];
-    public barChartType: string;
+    public barChartType: ChartType;
     public isLoading: boolean = false;
     public selectedPeriod: string;
     public dataSourceTable: MatTableDataSource<TunnelFlight> = new MatTableDataSource();
@@ -64,7 +65,6 @@ export class ListOfTunnelFlightsComponent implements OnInit {
 
     private chartConfig() {
         this.barChartType = "bar";
-
         this.barChartOptions = {
             responsive: true,
             maintainAspectRatio: true,
@@ -127,6 +127,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
                                 .subscribe((data) => {
                                     const allMonths = this.getMontsBetweenDates(beginDate, endDate)
                                     const cumulatedTime = this.getCumulatedTimeByTypeByMonth(data, allMonths);
+                                    this.computeTimeByType(data);
                                     this.barChartData = {
                                         labels: allMonths,
                                         datasets: cumulatedTime
@@ -136,6 +137,17 @@ export class ListOfTunnelFlightsComponent implements OnInit {
                                 });
     }
 
+    private computeTimeByType(stats: TunnelFlightByMonth[]) {
+        from(stats).pipe(
+          groupBy((type) => type.type, { element: (p) => p.nb }),
+          mergeMap((group$) =>
+            group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
+          ),
+          map((arr) => ({ id: arr[0], values: arr.slice(1) }))
+        )
+        .subscribe((p) => console.log(p));
+    }
+
     private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {
         let results: Array<string> = [];
         let tmpBeginDate = new Date(beginDate.getTime());