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 { ServiceComm } from '../../services/service-comm.service'; import { TunnelFlightService } from "../../services/tunnel-flight.service"; import { DateService } from '../../services/date.service'; import { TunnelFlight, TunnelFlightByMonth } from '../../models/tunnel-flight'; @Component({ selector: 'app-list-of-tunnel-flights', templateUrl: './list-of-tunnel-flights.component.html', styleUrls: ['./list-of-tunnel-flights.component.css'] }) export class ListOfTunnelFlightsComponent implements OnInit { public barChartLegend = true; public barChartPlugins = []; public barChartData: ChartData<'bar'>; public barChartOptions: ChartConfiguration['options']; public barChartType: string; public isLoading: boolean = false; public selectedPeriod: string; public dataSourceTable: MatTableDataSource = new MatTableDataSource(); public displayedColumns: Array = [ "id", "tunnel", "jumpType", "nbMinutes", "notes", "flightDate" ]; constructor(private serviceComm: ServiceComm, private serviceTunnelFlight: TunnelFlightService, private translateService: TranslateService, private dateService: DateService) { } ngOnInit() { this.serviceComm.forceTranslateTitle.subscribe((data) => { if (data === true) { this.updateTitle(); } }); this.updateTitle(); this.chartConfig(); this.selectedPeriod = "currentYear" this.getDataForGraph(); } public onPeriodChange() { this.getDataForGraph(); if (this.dataSourceTable?.data.length > 0){ this.getDataForTable(); } } public onLoadTable() { this.getDataForTable(); } private chartConfig() { this.barChartType = "bar"; this.barChartOptions = { responsive: true, plugins: { legend: { display: true }, tooltip: { callbacks: { footer: this.footer, } } }, interaction: { intersect: false, mode: 'nearest', axis: 'x' }, scales: { x: { stacked: true }, y: { stacked: true } } }; } private updateTitle() { this.translateService.get("ListTunnelFlight_Title").subscribe( data => { this.serviceComm.updatedComponentTitle(data); } ); } private getDataForTable(): 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); switch (this.selectedPeriod) { case "currentYear": beginDate = new Date(endDate.getFullYear(), 0, 1); break; case "12Months": beginDate = this.dateService.addMonths(endDate, -12); beginDate.setDate(1); break; } this.serviceTunnelFlight.getTunnelFlights(beginDate, endDate) .subscribe((data) => { this.dataSourceTable.data = data; this.isLoading = false; }); } private getDataForGraph(): 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); switch (this.selectedPeriod) { case "currentYear": beginDate = new Date(endDate.getFullYear(), 0, 1); break; case "12Months": beginDate = this.dateService.addMonths(endDate, -12); beginDate.setDate(1); break; } this.serviceTunnelFlight.getTunnelFlightsByMonth(beginDate, endDate) .subscribe((data) => { const allMonths = this.getMontsBetweenDates(beginDate, endDate) const cumulatedTime = this.getCumulatedTimeByTypeByMonth(data, allMonths); this.barChartData = { labels: allMonths, datasets: cumulatedTime }; this.isLoading = false; }); } private getMontsBetweenDates(beginDate: Date, endDate: Date): Array { let results: Array = []; 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; } private getCumulatedTimeByTypeByMonth(stats: TunnelFlightByMonth[], allMonths: string[]): Array { let tmpResults = new Map(); const disctintType = Array.from(new Set(stats.map((item) => item.type))); disctintType.forEach(type => { tmpResults.set(type, Array.from({length: allMonths.length}, (v, k) => 0)); }); for (let i = 0; i < allMonths.length; i++) { const month = allMonths[i]; let filteredStats = stats.filter((d) => d.month == month); if (filteredStats.length > 0){ filteredStats.forEach(fs => { tmpResults.get(fs.type)[i] += fs.nb; }); } } const results = Array.from(tmpResults, function (item) { return { label: item[0], data: item[1] } }); return results; } private footer = (tooltipItems) => { let sum = 0; tooltipItems.forEach(function (tooltipItem) { sum += tooltipItem.parsed.y; }); return 'Sum: ' + sum; }; }