julien
be5f5775ef
- ng update @angular/core@20 @angular/cli@20 @angular/material@20 @angular-eslint@20 @angular/google-maps@20 - Remove ng-chartist (abandoned, incompatible with Angular 20): replace <x-chartist> with <app-bars-chart> in dropzones-bar and jumps-by-month - Migrate all constructor injection to inject() function (ng generate @angular/core:inject, 67 files) - TypeScript 5.5 → 5.9.3 - DOCUMENT import moved from @angular/common to @angular/core (automatic migration) - tsconfig moduleResolution updated to "bundler"
101 lines
4.0 KiB
TypeScript
Executable File
101 lines
4.0 KiB
TypeScript
Executable File
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
|
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
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 { ChartConfiguration } from 'chart.js';
|
|
import { Observable, Subscription } from 'rxjs';
|
|
|
|
import { MenuItems } from '@components/shared';
|
|
import { PieChartComponent } from '@components/shared/helpers-chart';
|
|
import { HistoryTableComponent } from '@components/shared/helpers-jump';
|
|
import { UtilitiesService, DropZonesService } from '@services';
|
|
import { DropZoneByOaci, DropZoneByYear } from '@models';
|
|
|
|
@Component({
|
|
selector: 'app-dropzones-pie',
|
|
imports: [
|
|
MatButtonModule,
|
|
MatCardModule,
|
|
MatDividerModule,
|
|
MatExpansionModule,
|
|
MatIconModule,
|
|
MatMenuModule,
|
|
PieChartComponent,
|
|
HistoryTableComponent,
|
|
],
|
|
templateUrl: './dropzones-pie.component.html',
|
|
})
|
|
export class DropzonesPieComponent implements OnInit, OnDestroy {
|
|
private _dropzonesService = inject(DropZonesService);
|
|
private _utilitiesService = inject(UtilitiesService);
|
|
menuItems = inject(MenuItems);
|
|
|
|
private _dropzoneByOaci: Subscription = new Subscription();
|
|
private _dropzoneByYear: Subscription = new Subscription();
|
|
private _dropzonesByOaci!: Array<DropZoneByOaci>;
|
|
private _dropzonesByYear!: Array<DropZoneByYear>;
|
|
public title: string = 'Les dropzones';
|
|
public subtitle: string = 'Nombre total de sauts par dropzone';
|
|
public seriesHeader: string[] = [];
|
|
public seriesName: string[] = [];
|
|
public seriesValue: number[] = [];
|
|
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 seriesColorClass: string[] = this._utilitiesService.getChartColors();
|
|
public destroyRef = inject(DestroyRef);
|
|
|
|
ngOnInit() {
|
|
this._loadDropZoneByOaci();
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this._dropzoneByOaci.unsubscribe();
|
|
this._dropzoneByYear.unsubscribe();
|
|
}
|
|
|
|
private _loadDropZoneByOaci(): void {
|
|
const dropzones$: Observable<Array<DropZoneByOaci>> = this._dropzonesService
|
|
.getAllByOaci()
|
|
.pipe(takeUntilDestroyed(this.destroyRef));
|
|
this._dropzoneByOaci = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
|
|
this._dropzonesByOaci = aggregate.map((row: DropZoneByOaci) => {
|
|
this.seriesName.push(`${row.oaci} - ${row.lieu}`);
|
|
this.seriesValue.push(row.count);
|
|
return row;
|
|
});
|
|
this._loadDropZoneByYear();
|
|
});
|
|
}
|
|
|
|
private _loadDropZoneByYear(): void {
|
|
this.seriesHeader = ['2018', '2019', '2020', '2021', '2022', '2023', '2024'];
|
|
const values: Array<number> = this.seriesHeader.map(() => 0);
|
|
this.seriesName.forEach(() => {
|
|
this.seriesRow.push([...values]);
|
|
});
|
|
const dropzones$: Observable<Array<DropZoneByYear>> = this._dropzonesService
|
|
.getAllByOaciByYear()
|
|
.pipe(takeUntilDestroyed(this.destroyRef));
|
|
this._dropzoneByYear = dropzones$.subscribe((aggregate: Array<DropZoneByYear>) => {
|
|
this._dropzonesByYear = aggregate.map((row: DropZoneByYear) => {
|
|
const lieu: string = row.lieu;
|
|
const oaci: string = row.oaci;
|
|
const year: string = row.year.toString();
|
|
this.seriesRow[this.seriesName.indexOf(`${oaci} - ${lieu}`)][this.seriesHeader.indexOf(year)] =
|
|
row.count;
|
|
return row;
|
|
});
|
|
});
|
|
}
|
|
}
|