Refactoring

src/app/components/shared/dashboard-components/dropzones-pie/data.json

@@ -0,0 +1,18 @@
+{
+  "Bar": {
+    "labels": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
+    "series": [
+      [0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0],
+      [0, 0, 0, 0, 7, 1, 17, 22, 12, 18, 0, 0],
+      [0, 35, 8, 0, 0, 10, 31, 67, 26, 24, 0, 0],
+      [0, 0, 0, 0, 0, 9, 8, 0, 11, 24, 17, 4],
+      [0, 0, 0, 29, 37, 11, 22, 20, 17, 13, 13, 0],
+      [0, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    ]
+  },
+  "Pie": {
+    "labels": ["261", "45", "178", "16", "13", "11", "4", "2"],
+    "series": [261, 45, 178, 16, 13, 11, 4, 2],
+    "names": ["Arcachon", "Béni-Mellal", "La Réole", "Royan", "Pamiers", "Soulac", "Sables d'Olonne", "Rochefort"]
+  }
+}

src/app/components/shared/dashboard-components/dropzones-pie/dropzones-pie.component.html

@@ -0,0 +1,31 @@
+<mat-card>
+    <mat-card-header>
+        <mat-card-title>{{ title }}</mat-card-title>
+        <mat-card-subtitle>{{ subtitle }}</mat-card-subtitle>
+        <span class="flex-spacer"></span>
+        <button mat-icon-button [matMenuTriggerFor]="menuDropzone" aria-label="Menu Dropzone">
+            <mat-icon fontIcon="more_vert"></mat-icon>
+        </button>
+        <mat-menu #menuDropzone="matMenu">
+            @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
+            <button mat-menu-item>
+                <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
+                <span>{{ menuitem.name }}</span>
+            </button>
+            }
+        </mat-menu>
+    </mat-card-header>
+    <mat-divider class="my-3"></mat-divider>
+    <mat-card-content>
+        <app-pie-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [colors]="seriesColor"></app-pie-chart>
+    </mat-card-content>
+    <mat-divider class="mt-3 mb-0"></mat-divider>
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>Historique annuel</mat-panel-title>
+            </mat-expansion-panel-header>
+            <app-history-table [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [rows]="seriesRow" [colors]="seriesColorClass"></app-history-table>
+        </mat-expansion-panel>
+    </mat-accordion>
+</mat-card>

src/app/components/shared/dashboard-components/dropzones-pie/dropzones-pie.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropzonesPieComponent } from './dropzones-pie.component';
+
+describe('DropzonesPieComponent', () => {
+  let component: DropzonesPieComponent;
+  let fixture: ComponentFixture<DropzonesPieComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+    imports: [DropzonesPieComponent]
+})
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropzonesPieComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/shared/dashboard-components/dropzones-pie/dropzones-pie.component.ts

@@ -0,0 +1,93 @@
+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 'src/app/components/shared';
+import { PieChartComponent } from 'src/app/components/shared/helpers-chart';
+import { HistoryTableComponent } from 'src/app/components/shared/helpers-jump';
+import { UtilitiesService, DropZonesService } from 'src/app/core/services';
+import { DropZoneByOaci, DropZoneByYear } from 'src/app/core/models';
+
+@Component({
+    selector: 'app-dropzones-pie',
+    standalone: true,
+    imports: [
+        MatButtonModule, MatCardModule, MatDividerModule,
+        MatExpansionModule, MatIconModule, MatMenuModule,
+        PieChartComponent, HistoryTableComponent
+    ],
+    templateUrl: './dropzones-pie.component.html'
+})
+export class DropzonesPieComponent implements OnInit, OnDestroy {
+    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);
+
+    constructor(
+        private _dropzonesService: DropZonesService,
+        private _utilitiesService: UtilitiesService,
+        public menuItems: MenuItems
+    ) { }
+
+    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;
+            });
+        });
+    }
+}