250 lines
12 KiB
TypeScript
250 lines
12 KiB
TypeScript
import { trigger, state, style, animate, transition } from '@angular/animations';
|
|
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
|
|
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
|
import { ActivatedRoute } from '@angular/router';
|
|
import { CommonModule } from '@angular/common';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatCardModule } from '@angular/material/card';
|
|
import { MatDividerModule } from '@angular/material/divider';
|
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatMenuModule } from '@angular/material/menu';
|
|
|
|
import { Observable, Subscription } from 'rxjs';
|
|
|
|
import { MenuItems } from '@components/shared';
|
|
import { BarsChartComponent, CircleChartComponent, LineChartComponent, LineAreaChartComponent } from '@components/shared/helpers-chart';
|
|
import { UtilitiesService } from '@services';
|
|
import { Jump, JumpByCategorie, JumpByDate, JumpByDateByModule, JumpByModule, JumpsPageData, JumpYears } from '@models';
|
|
|
|
@Component({
|
|
selector: 'app-jumps',
|
|
standalone: true,
|
|
imports: [
|
|
CommonModule,
|
|
MatButtonModule, MatCardModule, MatDividerModule,
|
|
MatExpansionModule, MatIconModule, MatMenuModule,
|
|
BarsChartComponent, CircleChartComponent, LineChartComponent, LineAreaChartComponent
|
|
],
|
|
templateUrl: './jumps.component.html',
|
|
styleUrl: './jumps.component.scss',
|
|
animations: [
|
|
trigger('flyInOut', [
|
|
state('in', style({ transform: 'translateX(0)' })),
|
|
transition('void => *', [
|
|
style({ transform: 'translateX(-100%)' }),
|
|
animate(200)
|
|
]),
|
|
transition('* => void', [
|
|
style({ transform: 'translateX(100%)' }),
|
|
animate(200)
|
|
])
|
|
])
|
|
]
|
|
})
|
|
export class JumpsComponent implements OnInit, OnDestroy {
|
|
private _data: Subscription = new Subscription();
|
|
private _jumpsByCategorie: Array<JumpByCategorie> = [];
|
|
private _jumpsByModule: Array<JumpByModule> = [];
|
|
private _jumpsByDate: Array<JumpByDate> = [];
|
|
public lastJump: Jump = {} as Jump;
|
|
public title: string = 'Sauts';
|
|
public subtitle: string = 'Nombre total de sauts par mois';
|
|
public displayCharts = false;
|
|
public destroyRef = inject(DestroyRef);
|
|
public min = 0;
|
|
public max = 0;
|
|
public grandAvg = 0;
|
|
public grandAvgLastYears = 0;
|
|
public grandTotal = 0;
|
|
public seriesHeader: string[] = [];
|
|
public seriesName: string[] = [];
|
|
public seriesRow: Array<Array<number>> = [];
|
|
public seriesColor: {
|
|
backgroundColor: string[],
|
|
borderColor: string[]
|
|
} = {
|
|
backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
|
|
borderColor: this._utilitiesService.getSeriesColors(1, 'all')
|
|
};
|
|
public seriesTypesHeader: string[] = [];
|
|
public seriesTypesName: string[] = [];
|
|
public seriesTypesRow: Array<Array<number>> = [];
|
|
public seriesTypesRowCumulated: Array<Array<number>> = [];
|
|
public seriesTypesColor: {
|
|
backgroundColor: string[],
|
|
borderColor: string[]
|
|
} = {
|
|
backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'pastels'),
|
|
borderColor: this._utilitiesService.getSeriesColors(1, 'pastels')
|
|
};
|
|
public seriesColorClass: string[] = this._utilitiesService.getChartColors();
|
|
public seriesRowTotal: number[] = [];
|
|
public seriesRowAvg: number[] = [];
|
|
public seriesRowAvgLastYears: number[] = [];
|
|
public seriesColTotal: number[] = [];
|
|
public seriesColTotalClosed: number[] = [];
|
|
public seriesColTotalLastYears: number[] = [];
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private _utilitiesService: UtilitiesService,
|
|
public menuItems: MenuItems
|
|
) { }
|
|
|
|
ngOnInit() {
|
|
const data$: Observable<{ pageData: JumpsPageData }> = this.route.data as Observable<{ pageData: JumpsPageData }>;
|
|
this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: JumpsPageData }) => {
|
|
const pageData: JumpsPageData = data.pageData;
|
|
this.lastJump = pageData.lastjump;
|
|
const currentYear: number = new Date().getFullYear();
|
|
const types: Array<string> = ['FF', 'Solo', 'VR', 'Wingsuit'];
|
|
const verticals: Array<string> = ['Chutas', 'Head Up', 'Head Down'];
|
|
const others: Array<string> = ['Track', 'Trace'];
|
|
const modules: Array<string> = [...verticals, ...others];
|
|
const minoration = 2; // -2 pour ne pas compter la première année
|
|
this.min = pageData.jumpsByYears[0].year;
|
|
this.max = pageData.jumpsByYears[(pageData.jumpsByYears.length-1)].year;
|
|
|
|
this.seriesHeader = this._utilitiesService.getMonthsList();
|
|
const values: Array<number> = this.seriesHeader.map(() => 0);
|
|
this.seriesColTotal = [...values];
|
|
this.seriesColTotalClosed = [...values];
|
|
this.seriesColTotalLastYears = [...values];
|
|
this.seriesName = pageData.jumpsByYears.map((row: JumpYears) => {
|
|
this.seriesRow.push([...values]);
|
|
return row.year.toString();
|
|
});
|
|
|
|
this._jumpsByDate = pageData.jumpsByDate.map((row: JumpByDate) => {
|
|
this.seriesRow[(row.year-this.min)][(row.month-1)] = row.count;
|
|
this.seriesColTotal[(row.month-1)] += row.count;
|
|
if (row.year < currentYear) {
|
|
this.seriesColTotalClosed[(row.month-1)] += row.count;
|
|
}
|
|
if (row.year >= (currentYear-3) && row.year < currentYear) {
|
|
this.seriesColTotalLastYears[(row.month-1)] += row.count;
|
|
}
|
|
return row;
|
|
});
|
|
this.seriesRow.forEach((row: number[]) => {
|
|
const total = row.reduce((partialSum, a) => partialSum + a, 0);
|
|
this.seriesRowTotal.push(total);
|
|
});
|
|
this.seriesColTotalClosed.forEach((row: number) => {
|
|
const value: number = (row/(this.seriesName.length-minoration));
|
|
this.seriesRowAvg.push(parseInt(value.toFixed(0)));
|
|
});
|
|
this.seriesColTotalLastYears.forEach((row: number) => {
|
|
const value: number = (row/3); // Les 3 dernières années
|
|
this.seriesRowAvgLastYears.push(parseInt(value.toFixed(0)));
|
|
});
|
|
this.grandAvg = this.seriesRowAvg.reduce((partialSum, accumulated) => partialSum + accumulated, 0);
|
|
this.grandAvgLastYears = this.seriesRowAvgLastYears.reduce((partialSum, accumulated) => partialSum + accumulated, 0);
|
|
this.grandTotal = this.seriesColTotal.reduce((partialSum, accumulated) => partialSum + accumulated, 0);
|
|
|
|
pageData.jumpsByCategory.forEach((row: JumpByCategorie) => {
|
|
if (types.indexOf(row.categorie) !== -1) {
|
|
this._jumpsByCategorie.push(row);
|
|
}
|
|
});
|
|
|
|
//const focus: Array<string> = ['FF', 'Solo']; // ['FF']
|
|
let verticalCount:number = 0;
|
|
let otherCount:number = 0;
|
|
pageData.jumpsByModule.forEach((row: JumpByModule) => {
|
|
//if (focus.indexOf(row.categorie) !== -1 && modules.indexOf(row.module) !== -1) {
|
|
if (modules.indexOf(row.module) !== -1) {
|
|
if (verticals.indexOf(row.module) !== -1) {
|
|
verticalCount += row.count;
|
|
} else {
|
|
otherCount += row.count;
|
|
}
|
|
}
|
|
});
|
|
if (verticalCount > 0) {
|
|
const row:JumpByModule = {
|
|
categorie: 'FF',
|
|
module: 'Vertical',
|
|
count: verticalCount
|
|
}
|
|
this._jumpsByModule.push(row);
|
|
}
|
|
if (otherCount > 0) {
|
|
const row:JumpByModule = {
|
|
categorie: 'FF',
|
|
module: 'Track/Trace',
|
|
count: otherCount
|
|
}
|
|
this._jumpsByModule.push(row);
|
|
}
|
|
|
|
for (let year = 0; year < pageData.jumpsByYears.length; year++) {
|
|
for (let index = 0; index < 12; index++) {
|
|
const month: string = ((index+1) < 10) ? `0${(index+1)}` : `${(index+1)}`;
|
|
this.seriesTypesHeader.push(`${month}-${pageData.jumpsByYears[year].year}`);
|
|
}
|
|
}
|
|
const emptyValues: Array<number> = this.seriesTypesHeader.map(() => 0);
|
|
this.seriesTypesName = types;
|
|
this.seriesTypesName.forEach(() => {
|
|
this.seriesTypesRow.push([...emptyValues]);
|
|
});
|
|
pageData.jumpsByDateByModule.forEach((row: JumpByDateByModule) => {
|
|
const indexOf: number = this.seriesTypesName.indexOf(row.categorie);
|
|
if (indexOf !== -1) {
|
|
this.seriesTypesRow[indexOf][(((row.year-this.min)*12)+row.month-1)] += row.count;
|
|
}
|
|
});
|
|
this.seriesTypesRowCumulated = this.seriesTypesRow.map((row: Array<number>) => {
|
|
let accumulated: number = 0;
|
|
return row.map((value: number) => {
|
|
accumulated += value;
|
|
return accumulated;
|
|
});
|
|
});
|
|
this.seriesTypesHeader = this.seriesTypesHeader.slice((pageData.jumpsByDateByModule[0].month+1), -(pageData.jumpsByDateByModule[(pageData.jumpsByDateByModule.length-1)].month));
|
|
this.seriesTypesRow = this.seriesTypesRow.map((row: Array<number>) => {
|
|
return row.slice((pageData.jumpsByDateByModule[0].month+1), -(pageData.jumpsByDateByModule[(pageData.jumpsByDateByModule.length-1)].month));
|
|
});
|
|
this.seriesTypesRowCumulated = this.seriesTypesRowCumulated.map((row: Array<number>) => {
|
|
return row.slice((pageData.jumpsByDateByModule[0].month+1), -(pageData.jumpsByDateByModule[(pageData.jumpsByDateByModule.length-1)].month));
|
|
});
|
|
/*
|
|
console.log('this.min', this.min);
|
|
console.log('this.max', this.max);
|
|
console.log('this.lastJump', this.lastJump);
|
|
console.log('this.seriesHeader', this.seriesHeader);
|
|
console.log('this.seriesName', this.seriesName);
|
|
console.log('this.seriesRow', this.seriesRow);
|
|
console.log('this.seriesRowTotal', this.seriesRowTotal);
|
|
console.log('this.seriesRowAvg', this.seriesRowAvg);
|
|
console.log('this.seriesRowAvgLastYears', this.seriesRowAvgLastYears);
|
|
console.log('this._jumpsByCategorie', this._jumpsByCategorie);
|
|
console.log('this._jumpsByModule', this._jumpsByModule);
|
|
console.log('this.seriesTypesHeader', this.seriesTypesHeader);
|
|
console.log('this.seriesTypesName', this.seriesTypesName);
|
|
console.log('this.seriesTypesRow', this.seriesTypesRow);
|
|
console.log('this.seriesTypesRowCumulated', this.seriesTypesRowCumulated);
|
|
*/
|
|
this.displayCharts = true;
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this._data.unsubscribe();
|
|
}
|
|
|
|
public getCategories(): Array<JumpByCategorie> {
|
|
return this._jumpsByCategorie;
|
|
}
|
|
|
|
public getModules(): Array<JumpByModule> {
|
|
return this._jumpsByModule;
|
|
}
|
|
|
|
public getModuleColor(index: number): number {
|
|
return (this._jumpsByCategorie.length + index);
|
|
}
|
|
}
|