headup_app/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { ChartistModule, Configuration } from 'ng-chartist';

import { Observable, Observer, Subscription } from 'rxjs';

import { BackendService, DropZonesService } from 'src/app/core/services';
import { DropZone, DropZoneByOaci, ReduceRow} from 'src/app/core/models';

@Component({
    standalone: true,
    imports: [CommonModule, MatCardModule, ChartistModule],
    selector: 'huapp-drop-zones',
    templateUrl: './drop-zones.component.html'
})
export class DropZonesComponent implements OnInit {
    private _dropzones: Subscription = new Subscription();
    aggregate!: Array<DropZoneByOaci>
    dropzones!: Array<DropZone>;
    dropzonesCount = 0;
    seriesName: string[] = [];//= ["Arcachon", "Béni-Mellal", "La Réole", "Royan", "Pamiers", "Soulac", "Sables d'Olonne", "Rochefort"];
    seriesValue: number[] = [];
    seriesColor: string[] = this._dataService.getChartColors();
    seriesHeader: string[] = [];
    seriesRow: any[] = [];
    donuteDropZones: Configuration = {
        type: 'Pie',
        /*
        data: {
            "labels": ["261", "45", "178", "16", "13", "11", "4", "2"],
            "series": [261, 45, 178, 16, 13, 11, 4, 2]
        },
        */
        data: {
            "labels": [],
            "series": []
        },
        options: {
            donut: true,
            height: 260,
            donutWidth: 40,
            startAngle: 270,
            showLabel: true
        }
    };
    barChartDropZones: Configuration = {
        type: 'Bar',
        data: {
            "labels": [],
            "series": []
        },
        options: {
            seriesBarDistance: 5,
            high: 170,
            axisX: {
                showGrid: false,
                offset: 20
            },
            axisY: {
                showGrid: true,
                offset: 40
            },
            height: 207
        },
        responsiveOptions: [
            ['screen and (min-width: 1024px)', {
                axisX: {
                    labelInterpolationFnc: function(value: number, index: number): string {
                        return index % 1 === 0 ? `${value}` : '';
                    }
                }
            }],
            ['screen and (min-width: 641px) and (max-width: 1024px)', {
                seriesBarDistance: 10,
                axisY: {
                    offset: 30
                },
                axisX: {
                    labelInterpolationFnc: function(value: any, index: number): string {
                        return index % 1 === 0 ? `${value[2]}${value[3]}` : '';
                    }
                }
            }],
            ['screen and (max-width: 640px)', {
                seriesBarDistance: 5,
                axisY: {
                    offset: 20
                },
                axisX: {
                    labelInterpolationFnc: function(value: any, index: number): string {
                        return index % 1 === 0 ? `${value[2]}${value[3]}` : '';
                    }
                }
            }]
        ]
    };
    constructor(
        private dropzonesService: DropZonesService,
        private _dataService: BackendService
        ) { }
    ngOnInit() {
        this.loadDropZones();
        /*
        return this._dataService
        .getDropZones()
        .subscribe((res) => {
            this.dropzones = res["rows"]
            var labels: string[] = [];
            var series: number[] = [];
            this.dropzones.forEach((dropzone: DropZone) => {
                this.seriesName.push(dropzone.key);
                this.seriesValue.push(dropzone.value);
                labels.push(dropzone.value.toString());
                series.push(dropzone.value);
            });
            this.donuteDropZones = {
                type: 'Pie',
                data: {
                    "labels": labels,
                    "series": series
                },
                options: {
                    donut: true,
                    height: 260,
                    donutWidth: 40,
                    donutSolid: true,
                    startAngle: 270,
                    showLabel: true
                }
                ,
                // events: <ChartEvent>{
                //     draw: (data) => {
                //         //this.donuteDropZones.data = data;
                //         console.log(data);
                //     }
                // }
            };
            return this._dataService
                .getDropZonesByDate(2)
                .subscribe((res) => {
                    this.seriesName.forEach((name: string) => {
                        this.seriesRow.push([0, 0, 0, 0, 0, 0]);
                    });
                    this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"];
                    res["rows"].forEach((row: ReduceRow) => {
                        let year = row.key[1].toString();
                        let lieu = row.key[0];
                        this.seriesRow[this.seriesName.indexOf(lieu)][this.seriesHeader.indexOf(year)] = row.value;
                    });
                    return true;
                });
        });
        */
    }

    loadDropZones() {
        const dropzones$: Observable<Array<DropZoneByOaci>> = this.dropzonesService.getAllByOaci();
        this._dropzones = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
            this.aggregate = aggregate;
            //this.dropzones = dropzones;
            this.dropzonesCount = aggregate.length;
            var labels: string[] = [];
            var series: number[] = [];
            this.aggregate.forEach((row) => {
                this.seriesName.push(row._id.lieu + ' ' + row._id.oaci);
                this.seriesValue.push(row.count);
                labels.push(row.count.toString());
                series.push(row.count);
            });
            this.donuteDropZones = {
                type: 'Pie',
                data: {
                    "labels": labels,
                    "series": series
                },
                options: {
                    donut: true,
                    height: 260,
                    donutWidth: 50,
                    startAngle: 270,
                    showLabel: true
                }
            };
        });
    }
}