diff --git a/angular.json b/angular.json index 65c1691..e23797e 100644 --- a/angular.json +++ b/angular.json @@ -34,6 +34,7 @@ "src/manifest.webmanifest" ], "styles": [ + "node_modules/chartist/dist/index.scss", "src/styles/styles.scss" ], "scripts": [], diff --git a/src/app/app.component.html b/src/app/app.component.html index f926fc7..fdc2e2e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,6 +3,9 @@ {{tableHeader[0].name}} - {{element.weight}} + {{element.weight}} diff --git a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html index f95dcd4..4b47027 100755 --- a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html +++ b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.html @@ -3,8 +3,7 @@ Aéronefs Nombre total de sauts par avions
- +
@@ -13,18 +12,18 @@ - {{name}} - Total + {{name}} + Total - + - {{seriesName[i]}} - + ● {{seriesName[i]}} + {{value}} {{value}} - + {{seriesValue[i]}} {{seriesValue[i]}} diff --git a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts index 135ab76..52325ba 100755 --- a/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts +++ b/src/app/components/home/dashboard-components/aeronefs-bar/aeronefs-bar.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit} from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { ChartistModule, Configuration } from 'ng-chartist'; +import { Observable, Subscription } from 'rxjs'; -import { BackendService } from 'src/app/core/services'; -import { ReduceRow } from 'src/app/core/models'; +import { BackendService, AeronefsService } from 'src/app/core/services'; +import { chartBar, AeronefByImat, AeronefByYear } from 'src/app/core/models'; @Component({ standalone: true, @@ -12,117 +13,132 @@ import { ReduceRow } from 'src/app/core/models'; selector: 'huapp-aeronefs-bar', templateUrl: './aeronefs-bar.component.html' }) -export class AeronefsBarComponent implements OnInit { - rows: Object[] = [] as Array; +export class AeronefsBarComponent implements OnInit, OnDestroy { + private _aeronefByImat: Subscription = new Subscription(); + private _aeronefByYear: Subscription = new Subscription(); + aeronefByImat!: Array; + aeronefByYear!: Array; + aeronefByImatCount = 0; + aeronefByYearCount = 0; seriesName: string[] = []; seriesValue: any[] = []; seriesColor: string[] = this._dataService.getChartColors(); seriesHeader: string[] = []; seriesRow: any[] = []; - barChartAeronef: Configuration = { - type: 'Bar', - data: { - "labels": [], - "series": [] - }, - options: {}, - responsiveOptions: [] - }; + barChartAeronef: Configuration = chartBar; - constructor(private _dataService: BackendService) { } - - loadDataByDate() { - return this._dataService - .getAeronefsByDate(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 avion = row.key[0]; - this.seriesRow[this.seriesName.indexOf(avion)][this.seriesHeader.indexOf(year)] = row.value; - }); - return true; - }); - } + constructor( + private aeronefsService: AeronefsService, + private _dataService: BackendService + ) { } ngOnInit() { - return this._dataService - .getAeronefs() - .subscribe((res) => { - this.rows = res["rows"] - this.rows.forEach((row: ReduceRow) => { - this.seriesName.push(row.key[0] + ' ' + row.key[1]); - this.seriesValue.push([row.value]); - }); - this.barChartAeronef = { - type: 'Bar', - data: { - "labels": this.seriesName, - "series": this.seriesValue + this._loadAeronefByImat(); + } + + ngOnDestroy() { + this._aeronefByImat.unsubscribe(); + this._aeronefByYear.unsubscribe(); + } + + private _loadAeronefByImat(): void { + const aeronefs$: Observable> = this.aeronefsService.getAllByImat(); + this._aeronefByImat = aeronefs$.subscribe((aggregate: Array) => { + this.aeronefByImat = aggregate; + this.aeronefByImatCount = aggregate.length; + this.aeronefByImat.forEach((row) => { + this.seriesName.push(`${row._id.aeronef} ${row._id.imat}`); + this.seriesValue.push(row.count); + }); + this.barChartAeronef = { + type: 'Bar', + data: { + "labels": this.seriesName, + "series": this.seriesValue + }, + options: { + chartPadding: { + top: 15, + right: 20, + bottom: 0, + left: 20 }, - options: { - chartPadding: { - top: 15, - right: 20, - bottom: 0, - left: 20 + seriesBarDistance: 15, + horizontalBars: true, + axisX: { + onlyInteger: true, + position: 'end', + labelOffset: { + x: 0, + y: 0 }, - seriesBarDistance: 15, - horizontalBars: true, + showGrid: true, + offset: 20 + }, + axisY: { + showGrid: false, + offset: 0, + labelInterpolationFnc: function(): string { + return ''; + } + }, + height: (this.seriesName.length*20) + }, + responsiveOptions: [ + ['screen and (min-width: 1024px)', { axisX: { - position: 'end', - labelOffset: { - x: -5, - y: 0 - }, - showGrid: true, + 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 }, - axisY: { - showGrid: false, - offset: 0, - labelInterpolationFnc: function(): string { - return ''; + axisX: { + labelInterpolationFnc: function(value: any, index: number): string { + return index % 1 === 0 ? `${value[2]}${value[3]}` : ''; } - }, - height: (this.seriesName.length*20) - }, - 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]}` : ''; - } - } - }] - ] - }; - return this.loadDataByDate(); + } + }] + ] + }; + this._loadAeronefByYear(); + }); + } + + private _loadAeronefByYear(): void { + let values: Array = []; + this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; + this.seriesHeader.forEach(() => { + values.push(0); + }); + this.seriesName.forEach(() => { + this.seriesRow.push([...values]); + }); + const dropzones$: Observable> = this.aeronefsService.getAllByDate(); + this._aeronefByYear = dropzones$.subscribe((aggregate: Array) => { + this.aeronefByYear = aggregate; + this.aeronefByYearCount = aggregate.length; + this.aeronefByYear.forEach((row: AeronefByYear) => { + let aeronef: string = row._id.aeronef; + let imat: string = row._id.imat; + let year: string = row._id.year.toString(); + this.seriesRow[this.seriesName.indexOf(`${aeronef} ${imat}`)][this.seriesHeader.indexOf(year)] = row.count; }); + }); } } diff --git a/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html b/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html index dc244f3..f707f20 100755 --- a/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html +++ b/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.html @@ -3,7 +3,7 @@ Aéronefs Nombre total de sauts par avions
- +
@@ -12,18 +12,18 @@ - {{name}} - Total + {{name}} + Total - {{seriesName[i]}} - + ● {{seriesName[i]}} + {{value}} {{value}} - + {{seriesValue[i]}} {{seriesValue[i]}} diff --git a/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.ts b/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.ts index 36edd40..072ba2d 100755 --- a/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.ts +++ b/src/app/components/home/dashboard-components/aeronefs/aeronefs.component.ts @@ -1,11 +1,11 @@ -import { Component, OnInit} from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { ChartistModule, Configuration } from 'ng-chartist'; import { Observable, Subscription } from 'rxjs'; import { BackendService, AeronefsService, UserService } from 'src/app/core/services'; -import { Aeronef, AeronefByImat } from 'src/app/core/models'; +import { Aeronef, AeronefByImat, AeronefByYear, chartPieDonute } from 'src/app/core/models'; @Component({ standalone: true, @@ -13,110 +13,49 @@ import { Aeronef, AeronefByImat } from 'src/app/core/models'; selector: 'huapp-aeronefs', templateUrl: './aeronefs.component.html' }) -export class AeronefsComponent implements OnInit { - private _aeronefs: Subscription = new Subscription(); - aggregate!: Array - aeronefs!: Array; - aeronefsCount = 0; +export class AeronefsComponent implements OnInit, OnDestroy { + private _aeronefByImat: Subscription = new Subscription(); + private _aeronefByYear: Subscription = new Subscription(); + aeronefByImat!: Array; + aeronefByYear!: Array; + aeronefByImatCount = 0; + aeronefByYearCount = 0; rows: Object[] = [] as Array; seriesName: string[] = [];//= ["Arcachon", "Béni-Mellal", "La Réole", "Royan", "Pamiers", "Soulac", "Sables d'Olonne", "Rochefort"]; seriesValue: number[] = []; seriesColor: string[] = this._dataService.getChartColors(); //["blue", "red", "turquoise", "orange", "cyan", "purple-dark", "megna", "raspberry"]; seriesHeader: string[] = []; seriesRow: any[] = []; - donuteChartModel: Configuration = { - type: 'Pie', - data: { - "labels": [], - "series": [] - }, - options: { - donut: true, - height: 260, - donutWidth: 40, - startAngle: 270, - showLabel: true - } - }; + donuteAeronefs: Configuration = chartPieDonute; constructor( private aeronefsService: AeronefsService, private _dataService: BackendService ) { } - /*loadDataByDate() { - return this._dataService - .getAeronefsByDate(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 avion = row.key[0]; - this.seriesRow[this.seriesName.indexOf(avion)][this.seriesHeader.indexOf(year)] = row.value; - }); - return true; - }); - }*/ - ngOnInit() { - this.loadAeronefs(); - return this._dataService - .getAeronefs() - .subscribe((res) => { - console.log(res); - /* this.rows = res["rows"] - var labels: string[] = []; - var series: number[] = []; - this.rows.forEach((row: ReduceRow) => { - this.seriesName.push(row.key[0] + ' ' + row.key[1]); - this.seriesValue.push(row.value); - //console.log(row.key, row.value); - labels.push(row.value.toString()); - series.push(row.value); - }); - this.donuteChartModel = { - type: 'Pie', - data: { - "labels": labels, - "series": series - }, - options: { - donut: true, - height: 260, - donutWidth: 40, - startAngle: 270, - showLabel: true - } - //, - // events: { - // draw: (data) => { - // //this.donuteChartModel.data = data; - // console.log(data); - // } - // } - }; - return this.loadDataByDate(); */ - }); + this._loadAeronefByImat(); } - loadAeronefs() { + ngOnDestroy() { + this._aeronefByImat.unsubscribe(); + this._aeronefByYear.unsubscribe(); + } + + private _loadAeronefByImat(): void { const aeronefs$: Observable> = this.aeronefsService.getAllByImat(); - this._aeronefs = aeronefs$.subscribe((aggregate: Array) => { - this.aggregate = aggregate; - this.aeronefsCount = aggregate.length; + this._aeronefByImat = aeronefs$.subscribe((aggregate: Array) => { + this.aeronefByImat = aggregate; + this.aeronefByImatCount = aggregate.length; var labels: string[] = []; var series: number[] = []; - this.aggregate.forEach((row) => { - this.seriesName.push(row._id.aeronef + ' ' + row._id.imat); + this.aeronefByImat.forEach((row) => { + this.seriesName.push(`${row._id.aeronef} ${row._id.imat}`); this.seriesValue.push(row.count); labels.push(row.count.toString()); - //labels.push(row._id.aeronef + ' ' + row._id.imat); series.push(row.count); }); - this.donuteChartModel = { + this.donuteAeronefs = { type: 'Pie', data: { "labels": labels, @@ -130,6 +69,29 @@ export class AeronefsComponent implements OnInit { showLabel: true } }; + this._loadAeronefByYear(); + }); + } + + private _loadAeronefByYear(): void { + let values: Array = []; + this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; + this.seriesHeader.forEach(() => { + values.push(0); + }); + this.seriesName.forEach(() => { + this.seriesRow.push([...values]); + }); + const dropzones$: Observable> = this.aeronefsService.getAllByDate(); + this._aeronefByYear = dropzones$.subscribe((aggregate: Array) => { + this.aeronefByYear = aggregate; + this.aeronefByYearCount = aggregate.length; + this.aeronefByYear.forEach((row: AeronefByYear) => { + let aeronef: string = row._id.aeronef; + let imat: string = row._id.imat; + let year: string = row._id.year.toString(); + this.seriesRow[this.seriesName.indexOf(`${aeronef} ${imat}`)][this.seriesHeader.indexOf(year)] = row.count; + }); }); } } diff --git a/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.html b/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.html index b576960..ba7541a 100755 --- a/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.html +++ b/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.html @@ -3,7 +3,7 @@ Modèles de voile Nombre total de sauts par modèle
- +
@@ -12,18 +12,18 @@ - {{name}} - Total + {{name}} + Total - + - {{seriesName[i]}} - + ● {{seriesName[i]}} + {{value}} {{value}} - + {{seriesValue[i]}} {{seriesValue[i]}} diff --git a/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.ts b/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.ts index 890abcb..593800d 100755 --- a/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.ts +++ b/src/app/components/home/dashboard-components/canopy-models/canopy-models.component.ts @@ -1,13 +1,12 @@ -import { Component, OnInit} from '@angular/core'; +import { Component, OnInit, OnDestroy} 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 { take } from 'rxjs/operators'; +import { Observable, Subscription } from 'rxjs'; import { BackendService, CanopiesService } from 'src/app/core/services'; -import { Canopy, CanopyBySize, ReduceRow } from 'src/app/core/models'; +import { Canopy, CanopyModelBySize, CanopyModelByYear, chartPieDonute } from 'src/app/core/models'; @Component({ standalone: true, @@ -15,106 +14,49 @@ import { Canopy, CanopyBySize, ReduceRow } from 'src/app/core/models'; selector: 'huapp-canopy-models', templateUrl: './canopy-models.component.html' }) -export class CanopyModelsComponent implements OnInit { - private _canopies: Subscription = new Subscription(); - aggregate!: Array - canopies!: Array; - canopiesCount = 0; +export class CanopyModelsComponent implements OnInit, OnDestroy { + private _canopyBySize: Subscription = new Subscription(); + private _canopyByYear: Subscription = new Subscription(); + canopyBySize!: Array; + canopyByYear!: Array; + canopyBySizeCount = 0; + canopyByYearCount = 0; rows: Object[] = [] as Array; seriesName: string[] = []; seriesValue: number[] = []; seriesColor: string[] = this._dataService.getChartColors(); seriesHeader: string[] = []; seriesRow: any[] = []; - donuteCanopyModel: Configuration = { - type: 'Pie', - data: { - "labels": [], - "series": [] - }, - options: { - donut: true, - height: 260, - donutWidth: 40, - startAngle: 270, - showLabel: true - } - }; + donuteCanopies: Configuration = chartPieDonute; constructor( private canopiesService: CanopiesService, private _dataService: BackendService ) { } - /* - loadDataByDate() { - return this._dataService - .getCanopyModelsByDate(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 voile = row.key[0]; - this.seriesRow[this.seriesName.indexOf(voile)][this.seriesHeader.indexOf(year)] = row.value; - }); - return true; - }); - } - */ - ngOnInit() { - this.loadCanopies(); - /* - return this._dataService - .getCanopyModels() - .subscribe((res) => { - this.rows = res["rows"] - var labels: string[] = []; - var series: number[] = []; - this.rows.forEach((row: ReduceRow) => { - this.seriesName.push(row.key); - this.seriesValue.push(row.value); - labels.push(row.value.toString()); - series.push(row.value); - }); - this.donuteCanopyModel = { - type: 'Pie', - data: { - "labels": labels, - "series": series - }, - options: { - donut: true, - height: 260, - donutWidth: 40, - donutSolid: true, - startAngle: 270, - showLabel: true - } - }; - return this.loadDataByDate(); - }); - */ + this._loadCanopyModelBySize(); } - loadCanopies() { - const canopies$: Observable> = this.canopiesService.getAllBySize(); - this._canopies = canopies$.subscribe((aggregate: Array) => { - this.aggregate = aggregate; - //this.canopies = canopies; - this.canopiesCount = aggregate.length; + ngOnDestroy() { + this._canopyBySize.unsubscribe(); + this._canopyByYear.unsubscribe(); + } + + private _loadCanopyModelBySize(): void { + const canopies$: Observable> = this.canopiesService.getAllModelBySize(); + this._canopyBySize = canopies$.subscribe((aggregate: Array) => { + this.canopyBySize = aggregate; + this.canopyBySizeCount = aggregate.length; var labels: string[] = []; var series: number[] = []; - this.aggregate.forEach((row) => { - this.seriesName.push(row._id.canopy + ' ' + row._id.taille); + this.canopyBySize.forEach((row) => { + this.seriesName.push(`${row._id.taille.toString()} - ${row._id.voile}`); this.seriesValue.push(row.count); labels.push(row.count.toString()); series.push(row.count); }); - this.donuteCanopyModel = { + this.donuteCanopies = { type: 'Pie', data: { "labels": labels, @@ -128,6 +70,29 @@ export class CanopyModelsComponent implements OnInit { showLabel: true } }; + this._loadCanopyModelByYear(); + }); + } + + private _loadCanopyModelByYear(): void { + let values: Array = []; + this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; + this.seriesHeader.forEach(() => { + values.push(0); + }); + this.seriesName.forEach(() => { + this.seriesRow.push([...values]); + }); + const dropzones$: Observable> = this.canopiesService.getAllModelByYear(); + this._canopyByYear = dropzones$.subscribe((aggregate: Array) => { + this.canopyByYear = aggregate; + this.canopyByYearCount = aggregate.length; + this.canopyByYear.forEach((row: CanopyModelByYear) => { + let voile: string = row._id.voile; + let taille: string = row._id.taille.toString(); + let year: string = row._id.year.toString(); + this.seriesRow[this.seriesName.indexOf(`${taille} - ${voile}`)][this.seriesHeader.indexOf(year)] = row.count; + }); }); } } diff --git a/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.html b/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.html index 0ae32fd..480bb9d 100755 --- a/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.html +++ b/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.html @@ -3,9 +3,7 @@ Taille de voile Nombre total de sauts par taille
- +
@@ -14,18 +12,18 @@ - {{name}} - Total + {{name}} + Total - + - {{seriesName[i]}} - + ● {{seriesName[i]}} + {{value}} {{value}} - + {{seriesValue[i]}} {{seriesValue[i]}} diff --git a/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts b/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts index 9dd57e2..0e7d1ad 100755 --- a/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts +++ b/src/app/components/home/dashboard-components/canopy-sizes/canopy-sizes.component.ts @@ -1,10 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { ChartistModule, Configuration } from 'ng-chartist'; -import { BackendService } from 'src/app/core/services'; -import { ReduceRow } from 'src/app/core/models'; +import { Observable, Subscription } from 'rxjs'; + +import { BackendService, CanopiesService } from 'src/app/core/services'; +import { chartPieDonute, CanopyBySize, CanopyByYear, ReduceRow } from 'src/app/core/models'; @Component({ standalone: true, @@ -12,76 +14,84 @@ import { ReduceRow } from 'src/app/core/models'; selector: 'huapp-canopy-sizes', templateUrl: './canopy-sizes.component.html' }) -export class CanopySizesComponent implements OnInit { +export class CanopySizesComponent implements OnInit, OnDestroy { + private _canopyBySize: Subscription = new Subscription(); + private _canopyByYear: Subscription = new Subscription(); + canopyBySize!: Array; + canopyByYear!: Array; + canopyBySizeCount = 0; + canopyByYearCount = 0; rows: Object[] = [] as Array; seriesName: string[] = []; seriesValue: number[] = []; seriesColor: string[] = this._dataService.getChartColors(); seriesHeader: string[] = []; seriesRow: any[] = []; - donuteChartSize: Configuration = { - type: 'Pie', - data: { - "labels": [], - "series": [] - }, - options: { - donut: true, - height: 260, - donutWidth: 40, - startAngle: 0, - showLabel: true - } - }; + donuteCanopiesSize: Configuration = chartPieDonute; - constructor(private _dataService: BackendService) { } - - loadDataByDate() { - return this._dataService - .getCanopySizesByDate(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 size = row.key[0]; - this.seriesRow[this.seriesName.indexOf(size)][this.seriesHeader.indexOf(year)] = row.value; - }); - return true; - }); - } + constructor( + private canopiesService: CanopiesService, + private _dataService: BackendService + ) { } ngOnInit() { - return this._dataService - .getCanopySizes() - .subscribe((res) => { - this.rows = res["rows"] - var labels: string[] = []; - var series: number[] = []; - this.rows.forEach((row: ReduceRow) => { - this.seriesName.push(row.key); - this.seriesValue.push(row.value); - labels.push(row.value.toString()); - series.push(row.value); - }); - this.donuteChartSize = { - type: 'Pie', - data: { - "labels": labels, - "series": series - }, - options: { - donut: true, - height: 260, - donutWidth: 40, - donutSolid: true, - startAngle: 330, - showLabel: true - } - }; - return this.loadDataByDate(); + this._loadCanopyBySize(); + } + + ngOnDestroy() { + this._canopyBySize.unsubscribe(); + this._canopyByYear.unsubscribe(); + } + + private _loadCanopyBySize(): void { + const canopies$: Observable> = this.canopiesService.getAllBySize(); + this._canopyBySize = canopies$.subscribe((aggregate: Array) => { + this.canopyBySize = aggregate; + this.canopyBySizeCount = aggregate.length; + var labels: string[] = []; + var series: number[] = []; + this.canopyBySize.forEach((row) => { + this.seriesName.push(row._id.taille.toString()); + this.seriesValue.push(row.count); + labels.push(row.count.toString()); + series.push(row.count); }); + this.donuteCanopiesSize = { + type: 'Pie', + data: { + "labels": labels, + "series": series + }, + options: { + donut: true, + height: 260, + donutWidth: 40, + startAngle: 330, + showLabel: true + } + }; + this._loadCanopyByYear(); + }); + } + + private _loadCanopyByYear(): void { + let values: Array = []; + this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; + this.seriesHeader.forEach(() => { + values.push(0); + }); + this.seriesName.forEach(() => { + this.seriesRow.push([...values]); + }); + const dropzones$: Observable> = this.canopiesService.getAllByYear(); + this._canopyByYear = dropzones$.subscribe((aggregate: Array) => { + this.canopyByYear = aggregate; + this.canopyByYearCount = aggregate.length; + this.canopyByYear.forEach((row: CanopyByYear) => { + let taille: string = row._id.taille.toString(); + let year: string = row._id.year.toString(); + this.seriesRow[this.seriesName.indexOf(taille)][this.seriesHeader.indexOf(year)] = row.count; + }); + }); } } diff --git a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html index ab57293..e32de05 100755 --- a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html +++ b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.html @@ -3,7 +3,7 @@ Les drop zones Nombre total de sauts par DZ
- +
diff --git a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts index 77f6bae..752454e 100755 --- a/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts +++ b/src/app/components/home/dashboard-components/drop-zones-bar/drop-zones-bar.component.ts @@ -1,10 +1,12 @@ -import { Component, OnInit, Input, Output } from '@angular/core'; +import { Component, OnInit, OnDestroy, Input, Output } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { ChartistModule, Configuration } from 'ng-chartist'; -import { BackendService } from 'src/app/core/services'; -import { DropZone, ReduceRow} from 'src/app/core/models'; +import { Observable, Subscription } from 'rxjs'; + +import { BackendService, DropZonesService } from 'src/app/core/services'; +import { chartBar, chartPieDonute, DropZone, DropZoneByOaci, DropZoneByYear } from 'src/app/core/models'; @Component({ standalone: true, @@ -12,63 +14,86 @@ import { DropZone, ReduceRow} from 'src/app/core/models'; selector: 'huapp-drop-zones-bar', templateUrl: './drop-zones-bar.component.html' }) -export class DropZonesBarComponent implements OnInit { +export class DropZonesBarComponent implements OnInit, OnDestroy { + private _dropzoneByOaci: Subscription = new Subscription(); + private _dropzoneByYear: Subscription = new Subscription(); + dropzoneByOaci!: Array; + dropzoneByYear!: Array; + dropzoneByOaciCount = 0; + dropzoneByYearCount = 0; dropzones: Object[] = [] as Array; - seriesName: string[] = [];//= ["Arcachon", "Béni-Mellal", "La Réole", "Royan", "Pamiers", "Soulac", "Sables d'Olonne", "Rochefort"]; + seriesName: string[] = []; 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: {}, - responsiveOptions: [] - }; + donuteDropZones: Configuration = chartPieDonute; + barChartDropZones: Configuration = chartBar; - constructor(private _dataService: BackendService) { } + constructor( + private dropzonesService: DropZonesService, + private _dataService: BackendService + ) { } - loadDataByDate() { - return this._dataService - .getDropZonesByDate(2) - .subscribe((res) => { - console.log(res["rows"]); - this.seriesName.forEach((name: string) => { - this.seriesRow.push([0, 0, 0, 0, 0, 0]); + ngOnInit() { + this._loadDropZoneByOaci(); + } + + ngOnDestroy() { + this._dropzoneByOaci.unsubscribe(); + this._dropzoneByYear.unsubscribe(); + } + + private _loadDropZoneByOaci(): void { + const dropzones$: Observable> = this.dropzonesService.getAllByOaci(); + this._dropzoneByOaci = dropzones$.subscribe((aggregate: Array) => { + this.dropzoneByOaci = aggregate; + this.dropzoneByOaciCount = aggregate.length; + var labels: string[] = []; + var series: number[] = []; + this.dropzoneByOaci.forEach((row) => { + this.seriesName.push(`${row._id.oaci} - ${row._id.lieu}`); + this.seriesValue.push(row.count); + labels.push(row.count.toString()); + series.push(row.count); }); - 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; - //console.log(row.key, row.value); + this.donuteDropZones = { + type: 'Pie', + data: { + "labels": labels, + "series": series + }, + options: { + donut: true, + height: 260, + donutWidth: 50, + startAngle: 270, + showLabel: true + } + }; + this._loadDropZoneByYear(); + }); + } + + private _loadDropZoneByYear(): void { + let values: Array = []; + this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; + this.seriesHeader.forEach(() => { + values.push(0); + }); + this.seriesName.forEach(() => { + this.seriesRow.push([...values]); + }); + const dropzones$: Observable> = this.dropzonesService.getAllByDate(); + this._dropzoneByYear = dropzones$.subscribe((aggregate: Array) => { + this.dropzoneByYear = aggregate; + this.dropzoneByYearCount = aggregate.length; + this.dropzoneByYear.forEach((row: DropZoneByYear) => { + let lieu: string = row._id.lieu; + let oaci: string = row._id.oaci; + let year: string = row._id.year.toString(); + this.seriesRow[this.seriesName.indexOf(`${oaci} - ${lieu}`)][this.seriesHeader.indexOf(year)] = row.count; }); - //console.log(this.seriesName); - //console.log(this.seriesHeader); - //console.log(this.seriesRow); this.barChartDropZones = { type: 'Bar', data: { @@ -121,50 +146,6 @@ export class DropZonesBarComponent implements OnInit { }] ] }; - return true; }); } - - ngOnInit() { - return this._dataService - .getDropZones() - .subscribe((res) => { - //console.log('ngOnInit'); - //console.log(res["rows"]); - 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); - //console.log(dropzone.key, 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: { - draw: (data) => { - //this.donuteDropZones.data = data; - console.log(data); - } - } - */ - }; - return this.loadDataByDate(); - }); - } } diff --git a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html index 36e5cf9..6d734d7 100755 --- a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html +++ b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.html @@ -3,7 +3,7 @@ Les drop zones Nombre total de sauts par DZ
- +
@@ -12,18 +12,18 @@ - {{name}} - Total + {{name}} + Total - + - {{seriesName[i]}} - + ✹ {{seriesName[i]}} + {{value}} {{value}} - + {{seriesValue[i]}} {{seriesValue[i]}} diff --git a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts index c3dcf87..79412c8 100755 --- a/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts +++ b/src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts @@ -1,12 +1,12 @@ -import { Component, OnInit, Input, Output } from '@angular/core'; +import { Component, OnInit, OnDestroy, 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 { Observable, Subscription } from 'rxjs'; import { BackendService, DropZonesService } from 'src/app/core/services'; -import { DropZone, DropZoneByOaci, ReduceRow} from 'src/app/core/models'; +import { DropZoneByOaci, DropZoneByYear, chartPieDonute} from 'src/app/core/models'; @Component({ standalone: true, @@ -14,156 +14,43 @@ import { DropZone, DropZoneByOaci, ReduceRow} from 'src/app/core/models'; selector: 'huapp-drop-zones', templateUrl: './drop-zones.component.html' }) -export class DropZonesComponent implements OnInit { - private _dropzones: Subscription = new Subscription(); - aggregate!: Array - dropzones!: Array; - dropzonesCount = 0; - seriesName: string[] = [];//= ["Arcachon", "Béni-Mellal", "La Réole", "Royan", "Pamiers", "Soulac", "Sables d'Olonne", "Rochefort"]; +export class DropZonesComponent implements OnInit, OnDestroy { + private _dropzoneByOaci: Subscription = new Subscription(); + private _dropzoneByYear: Subscription = new Subscription(); + dropzoneByOaci!: Array; + dropzoneByYear!: Array; + dropzoneByOaciCount = 0; + dropzoneByYearCount = 0; + seriesName: string[] = []; 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]}` : ''; - } - } - }] - ] - }; + donuteDropZones: Configuration = chartPieDonute; + 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: { - // 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; - }); - }); - */ + this._loadDropZoneByOaci(); } - loadDropZones() { + ngOnDestroy() { + this._dropzoneByOaci.unsubscribe(); + this._dropzoneByYear.unsubscribe(); + } + + private _loadDropZoneByOaci(): void { const dropzones$: Observable> = this.dropzonesService.getAllByOaci(); - this._dropzones = dropzones$.subscribe((aggregate: Array) => { - this.aggregate = aggregate; - //this.dropzones = dropzones; - this.dropzonesCount = aggregate.length; + this._dropzoneByOaci = dropzones$.subscribe((aggregate: Array) => { + this.dropzoneByOaci = aggregate; + this.dropzoneByOaciCount = aggregate.length; var labels: string[] = []; var series: number[] = []; - this.aggregate.forEach((row) => { - this.seriesName.push(row._id.lieu + ' ' + row._id.oaci); + this.dropzoneByOaci.forEach((row) => { + this.seriesName.push(`${row._id.oaci} - ${row._id.lieu}`); this.seriesValue.push(row.count); labels.push(row.count.toString()); series.push(row.count); @@ -182,6 +69,29 @@ export class DropZonesComponent implements OnInit { showLabel: true } }; + this._loadDropZoneByYear(); + }); + } + + private _loadDropZoneByYear(): void { + let values: Array = []; + this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"]; + this.seriesHeader.forEach(() => { + values.push(0); + }); + this.seriesName.forEach(() => { + this.seriesRow.push([...values]); + }); + const dropzones$: Observable> = this.dropzonesService.getAllByDate(); + this._dropzoneByYear = dropzones$.subscribe((aggregate: Array) => { + this.dropzoneByYear = aggregate; + this.dropzoneByYearCount = aggregate.length; + this.dropzoneByYear.forEach((row: DropZoneByYear) => { + let lieu: string = row._id.lieu; + let oaci: string = row._id.oaci; + let year: string = row._id.year.toString(); + this.seriesRow[this.seriesName.indexOf(`${oaci} - ${lieu}`)][this.seriesHeader.indexOf(year)] = row.count; + }); }); } } diff --git a/src/app/components/home/dashboard-components/index.ts b/src/app/components/home/dashboard-components/index.ts index ff5f697..66d8979 100644 --- a/src/app/components/home/dashboard-components/index.ts +++ b/src/app/components/home/dashboard-components/index.ts @@ -1,7 +1,7 @@ export * from './aeronefs/aeronefs.component'; -//export * from './aeronefs-bar/aeronefs-bar.component'; +export * from './aeronefs-bar/aeronefs-bar.component'; export * from './canopy-models/canopy-models.component'; -//export * from './canopy-sizes/canopy-sizes.component'; +export * from './canopy-sizes/canopy-sizes.component'; export * from './drop-zones/drop-zones.component'; -//export * from './drop-zones-bar/drop-zones-bar.component'; -//export * from './jumps-by-month/jumps-by-month.component'; \ No newline at end of file +export * from './drop-zones-bar/drop-zones-bar.component'; +export * from './jumps-by-month/jumps-by-month.component'; \ No newline at end of file diff --git a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html index 8373966..2cae32e 100755 --- a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html +++ b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.html @@ -7,15 +7,18 @@
- +
-
+
    -
  • -

    - {{name}} -

    +
  • + + ● {{name}} +
@@ -25,28 +28,28 @@ - {{name}} - Total + {{name}} + Total - {{seriesName[i]}} - + ● {{seriesName[i]}} + {{value}} {{value}} - {{seriesRowTotal[i]}} + {{seriesRowTotal[i]}} - Total - + Total + {{value}} {{value}} - {{grandTotal}} + {{grandTotal}} diff --git a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts index 788744d..cbaa593 100755 --- a/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts +++ b/src/app/components/home/dashboard-components/jumps-by-month/jumps-by-month.component.ts @@ -1,20 +1,26 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { ChartistModule, Configuration } from 'ng-chartist'; -import { BackendService } from 'src/app/core/services'; -import { ReduceRow } from 'src/app/core/models'; +import { Observable, Subscription } from 'rxjs'; + +import { BackendService, JumpsService } from 'src/app/core/services'; +import { chartBar, JumpByDate, ReduceRow } from 'src/app/core/models'; declare var require: any; const data= require('./data.json'); @Component({ standalone: true, - imports: [MatCardModule, ChartistModule], + imports: [CommonModule, MatCardModule, ChartistModule], selector: 'huapp-jumps-by-month', templateUrl: './jumps-by-month.component.html' }) -export class JumpsByMonthComponent implements OnInit { +export class JumpsByMonthComponent implements OnInit, OnDestroy { + private _jumpByDate: Subscription = new Subscription(); + jumpByDate!: Array; + jumpByDateCount = 0; rows: Object[] = [] as Array; min: number = 0; max: number = 0; @@ -25,140 +31,104 @@ export class JumpsByMonthComponent implements OnInit { seriesColTotal: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; seriesName: String[] = []; // ["2018", "2019", "2020", "2021", "2022", "2023"]; seriesColor: String[] = this._dataService.getChartColors(); - barChartJumps: Configuration = { - type: 'Bar', - data: { - "labels": [], - "series": [] - }, - options: { - seriesBarDistance: 5, - high: 70, - axisX: { - showGrid: false, - offset: 20 - }, - axisY: { - showGrid: true, - offset: 40 - }, - height: 300 - }, - 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[0]}` : ''; - } - } - }], - ['screen and (max-width: 640px)', { - seriesBarDistance: 5, - axisY: { - offset: 20 - }, - axisX: { - labelInterpolationFnc: function(value: any, index: number): string { - return index % 1 === 0 ? `${value[0]}` : ''; - } - } - }] - ] - }; - constructor(private _dataService: BackendService) { } + barChartJumps: Configuration = chartBar; + + constructor( + private jumpsService: JumpsService, + private _dataService: BackendService + ) { } + ngOnInit() { - return this._dataService - .getJumpsByDate(2) - .subscribe((res) => { - //console.log(res["rows"]); - this.rows = res["rows"] - this.rows.forEach((row: ReduceRow) => { - let year = row.key[0].toString(); - let month = row.key[1]; - if (this.seriesName.indexOf(year) < 0) { - this.seriesName.push(year); - if (row.key[0] < this.min || this.min == 0) { - this.min = row.key[0]; - } - if (row.key[0] > this.max) { - this.max = row.key[0]; - } - this.seriesRow.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); + this._loadJumpByDate(); + } + + ngOnDestroy() { + this._jumpByDate.unsubscribe(); + } + + private _loadJumpByDate() { + let values: Array = []; + this.seriesHeader.forEach(() => { + values.push(0); + }); + const jumps$: Observable> = this.jumpsService.getAllByDate(); + this._jumpByDate = jumps$.subscribe((aggregate: Array) => { + this.jumpByDate = aggregate; + this.jumpByDateCount = aggregate.length; + console.log(this.jumpByDate); + console.log(this.jumpByDateCount); + this.jumpByDate.forEach((row) => { + let year = row._id.year.toString(); + let month = row._id.month; + if (this.seriesName.indexOf(year) < 0) { + this.seriesName.push(year); + if (row._id.year < this.min || this.min == 0) { + this.min = row._id.year; } - this.seriesRow[(this.seriesRow.length-1)][(month-1)] = row.value; - this.seriesColTotal[(month-1)] += row.value; - //console.log(row.key, row.value); - }); - this.seriesRow.forEach((row: number[]) => { - const total = row.reduce((partialSum, a) => partialSum + a, 0); - this.seriesRowTotal.push(total); - }); - console.log(this.seriesColTotal); - this.grandTotal = this.seriesColTotal.reduce((partialSum, a) => partialSum + a, 0); - //console.log(this.seriesRow, this.seriesName); - this.barChartJumps = { - type: 'Bar', - data: { - "labels": this.seriesHeader, - "series": this.seriesRow + if (row._id.year > this.max) { + this.max = row._id.year; + } + this.seriesRow.push([...values]); + } + this.seriesRow[(this.seriesRow.length-1)][(month-1)] = row.count; + this.seriesColTotal[(month-1)] += row.count; + }); + this.seriesRow.forEach((row: number[]) => { + const total = row.reduce((partialSum, a) => partialSum + a, 0); + this.seriesRowTotal.push(total); + }); + this.grandTotal = this.seriesColTotal.reduce((partialSum, a) => partialSum + a, 0); + this.barChartJumps = { + type: 'Bar', + data: { + "labels": this.seriesHeader, + "series": this.seriesRow + }, + options: { + seriesBarDistance: 15, + high: 70, + axisX: { + showGrid: false, + offset: 20 }, - options: { - seriesBarDistance: 15, - high: 70, + axisY: { + showGrid: true, + offset: 40 + }, + height: 300 + }, + responsiveOptions: [ + ['screen and (min-width: 1024px)', { axisX: { - showGrid: false, + 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[0]}` : ''; + } + } + }], + ['screen and (max-width: 640px)', { + seriesBarDistance: 5, + axisY: { offset: 20 }, - axisY: { - showGrid: true, - offset: 40 - }, - height: 300 - }, - responsiveOptions: [ - ['screen and (min-width: 1024px)', { - axisX: { - labelInterpolationFnc: function(value: number, index: number): string { - return index % 1 === 0 ? `${value}` : ''; - } + axisX: { + labelInterpolationFnc: function(value: any, index: number): string { + return index % 1 === 0 ? `${value[0]}` : ''; } - }], - ['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[0]}` : ''; - } - } - }], - ['screen and (max-width: 640px)', { - seriesBarDistance: 5, - axisY: { - offset: 20 - }, - axisX: { - labelInterpolationFnc: function(value: any, index: number): string { - return index % 1 === 0 ? `${value[0]}` : ''; - } - } - }] - ] - }; - return true; - }); + } + }] + ] + }; + }); } } diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index eb154b8..ef03c5c 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -6,14 +6,27 @@
Not connected
-
- +
+
+ +
+
+ +
-
- -
-
- +
+
+ +
+
+ +
+
+ + +
Numero - + {{element.numero}} @@ -94,7 +94,7 @@ Taille - + {{element.taille}} @@ -118,7 +118,7 @@ Participants - + {{element.participants}} diff --git a/src/app/components/shared/layout/full.component.html b/src/app/components/shared/layout/full.component.html index af06ade..055f704 100755 --- a/src/app/components/shared/layout/full.component.html +++ b/src/app/components/shared/layout/full.component.html @@ -1,7 +1,54 @@ - + +
+ + + + + + + + +
+ + + + @{{ currentUser.username }} +
+ + + + + + +
+ + +
+ + + + + + + + - -
+ + -
+ + @@ -78,7 +125,7 @@
-
+ diff --git a/src/app/components/shared/layout/header.component.ts b/src/app/components/shared/layout/header.component.ts index a7853fe..58a934b 100644 --- a/src/app/components/shared/layout/header.component.ts +++ b/src/app/components/shared/layout/header.component.ts @@ -20,10 +20,12 @@ import { UserService } from 'src/app/core/services'; ] }) export class HeaderComponent implements OnInit, OnDestroy { + private _currentUser: Subscription = new Subscription(); private _isAuthenticated: Subscription = new Subscription(); private isAuthenticated = false; currentUser: User = {} as User; + constructor( private router: Router, private userService: UserService diff --git a/src/app/core/models/aeronef.model.ts b/src/app/core/models/aeronef.model.ts index d706fa2..27b1f25 100644 --- a/src/app/core/models/aeronef.model.ts +++ b/src/app/core/models/aeronef.model.ts @@ -19,6 +19,7 @@ export interface AeronefByImat { export interface AeronefByYear { _id: { aeronef: string, + imat: string, year: number }, count: number diff --git a/src/app/core/models/calculator.model.ts b/src/app/core/models/calculator.model.ts index e41cb22..d462908 100644 --- a/src/app/core/models/calculator.model.ts +++ b/src/app/core/models/calculator.model.ts @@ -1,11 +1,16 @@ -export interface WeightSize { +export interface CalcResult { weight: number; - active?: string; - ranges: Range[]; + jumps: number; + minSize: number; + minSize11: number; + minSize21: number; + error?: string; } - -export interface WeightSizes { - data: WeightSize[]; +export interface InputParams { + jumps: number; + weight: number; + gear: number; + current: number; } export interface Range { @@ -18,6 +23,16 @@ export interface Range { value: number; } +export interface WeightSize { + weight: number; + active?: string; + ranges: Range[]; +} + +export interface WeightSizes { + data: WeightSize[]; +} + export const weightSizes: WeightSize[] = [ {active: '', weight: 60, ranges: [{num: 1, active: '', name: 'range_1', label: '0 à 99', start: 0, end: 99, value: 175}, {num: 2, active: '', name: 'range_2', label: '100 à 249', start: 100, end: 249, value: 161}, {num: 3, active: '', name: 'range_3', label: '250 à 399', start: 250, end: 399, value: 147}, {num: 4, active: '', name: 'range_4', label: '400 à 599', start: 400, end: 599, value: 133}, {num: 5, active: '', name: 'range_5', label: '600 à 799', start: 600, end: 799, value: 124}, {num: 6, active: '', name: 'range_6', label: '800 à 999', start: 800, end: 999, value: 115}, {num: 7, active: '', name: 'range_7', label: '1000 à 1399', start: 1000, end: 1399, value: 107}, {num: 8, active: '', name: 'range_8', label: '1400 à 1799', start: 1400, end: 1799, value: 97}, {num: 9, active: '', name: 'range_9', label: '1800 à 2000', start: 1800, end: 2000, value: 89}] }, {active: '', weight: 61, ranges: [{num: 1, active: '', name: 'range_1', label: '0 à 99', start: 0, end: 99, value: 178}, {num: 2, active: '', name: 'range_2', label: '100 à 249', start: 100, end: 249, value: 163}, {num: 3, active: '', name: 'range_3', label: '250 à 399', start: 250, end: 399, value: 149}, {num: 4, active: '', name: 'range_4', label: '400 à 599', start: 400, end: 599, value: 135}, {num: 5, active: '', name: 'range_5', label: '600 à 799', start: 600, end: 799, value: 126}, {num: 6, active: '', name: 'range_6', label: '800 à 999', start: 800, end: 999, value: 116}, {num: 7, active: '', name: 'range_7', label: '1000 à 1399', start: 1000, end: 1399, value: 108}, {num: 8, active: '', name: 'range_8', label: '1400 à 1799', start: 1400, end: 1799, value: 98}, {num: 9, active: '', name: 'range_9', label: '1800 à 2000', start: 1800, end: 2000, value: 90}] }, @@ -71,18 +86,3 @@ export const weightSizes: WeightSize[] = [ {active: '', weight: 109, ranges: [{num: 1, active: '', name: 'range_1', label: '0 à 99', start: 0, end: 99, value: 298}, {num: 2, active: '', name: 'range_2', label: '100 à 249', start: 100, end: 249, value: 274}, {num: 3, active: '', name: 'range_3', label: '250 à 399', start: 250, end: 399, value: 247}, {num: 4, active: '', name: 'range_4', label: '400 à 599', start: 400, end: 599, value: 219}, {num: 5, active: '', name: 'range_5', label: '600 à 799', start: 600, end: 799, value: 199}, {num: 6, active: '', name: 'range_6', label: '800 à 999', start: 800, end: 999, value: 179}, {num: 7, active: '', name: 'range_7', label: '1000 à 1399', start: 1000, end: 1399, value: 161}, {num: 8, active: '', name: 'range_8', label: '1400 à 1799', start: 1400, end: 1799, value: 138}, {num: 9, active: '', name: 'range_9', label: '1800 à 2000', start: 1800, end: 2000, value: 120}] }, {active: '', weight: 110, ranges: [{num: 1, active: '', name: 'range_1', label: '0 à 99', start: 0, end: 99, value: 300}, {num: 2, active: '', name: 'range_2', label: '100 à 249', start: 100, end: 249, value: 276}, {num: 3, active: '', name: 'range_3', label: '250 à 399', start: 250, end: 399, value: 249}, {num: 4, active: '', name: 'range_4', label: '400 à 599', start: 400, end: 599, value: 220}, {num: 5, active: '', name: 'range_5', label: '600 à 799', start: 600, end: 799, value: 201}, {num: 6, active: '', name: 'range_6', label: '800 à 999', start: 800, end: 999, value: 180}, {num: 7, active: '', name: 'range_7', label: '1000 à 1399', start: 1000, end: 1399, value: 162}, {num: 8, active: '', name: 'range_8', label: '1400 à 1799', start: 1400, end: 1799, value: 138}, {num: 9, active: '', name: 'range_9', label: '1800 à 2000', start: 1800, end: 2000, value: 120}] } ] - -export interface CalcResult { - weight: number; - jumps: number; - minSize: number; - minSize11: number; - minSize21: number; - error?: string; -} -export interface InputParams { - jumps: number; - weight: number; - gear: number; - current: number; -} diff --git a/src/app/core/models/canopy.model.ts b/src/app/core/models/canopy.model.ts index 140a637..8787360 100644 --- a/src/app/core/models/canopy.model.ts +++ b/src/app/core/models/canopy.model.ts @@ -1,16 +1,32 @@ import { Profile } from './profile.model'; export interface Canopy { - canopy: string; + voile: string; taille: number; author: Profile; createdAt: string; updatedAt: string; } +export interface CanopyModelBySize { + _id: { + voile: string, + taille: number + }, + count: number +} + +export interface CanopyModelByYear { + _id: { + voile: string, + taille: number, + year: number + }, + count: number +} + export interface CanopyBySize { _id: { - canopy: string, taille: number }, count: number @@ -18,7 +34,7 @@ export interface CanopyBySize { export interface CanopyByYear { _id: { - canopy: string, + taille: number, year: number }, count: number diff --git a/src/app/core/models/chart.model.ts b/src/app/core/models/chart.model.ts new file mode 100644 index 0000000..8db338a --- /dev/null +++ b/src/app/core/models/chart.model.ts @@ -0,0 +1,80 @@ + +import { Configuration } from 'ng-chartist'; + +export const chartPieDonute: Configuration = { + type: 'Pie', + data: { + "labels": [], + "series": [] + }, + options: { + donut: true, + height: 260, + donutWidth: 46, + startAngle: 270, + showLabel: true + } +}; + +export const chartBar: Configuration = { + type: 'Bar', + data: { + "labels": [], + "series": [] + }, + options: {}, + responsiveOptions: [] +}; +/* +export const chartBar: 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]}` : ''; + } + } + }] + ] +}; +*/ \ No newline at end of file diff --git a/src/app/core/models/dropzone.model.ts b/src/app/core/models/dropzone.model.ts index cfb1e04..b3778ad 100644 --- a/src/app/core/models/dropzone.model.ts +++ b/src/app/core/models/dropzone.model.ts @@ -19,6 +19,7 @@ export interface DropZoneByOaci { export interface DropZoneByYear { _id: { lieu: string, + oaci: string, year: number }, count: number diff --git a/src/app/core/models/index.ts b/src/app/core/models/index.ts index a1aee4b..b514e2f 100644 --- a/src/app/core/models/index.ts +++ b/src/app/core/models/index.ts @@ -5,6 +5,7 @@ export * from './application-list-config.model'; export * from './calculator.model'; export * from './canopy.model'; export * from './canopysize.model'; +export * from './chart.model'; export * from './reducerow.model'; export * from './dropzone.model'; export * from './errors.model'; diff --git a/src/app/core/models/jump.model.ts b/src/app/core/models/jump.model.ts index 41ace25..7337a82 100644 --- a/src/app/core/models/jump.model.ts +++ b/src/app/core/models/jump.model.ts @@ -25,6 +25,14 @@ export interface Jump { updatedAt: string; } +export interface JumpByDate { + _id: { + month: number, + year: number + }, + count: number +} + export interface JumpDoc { _id?: string; _rev?: string; diff --git a/src/app/core/services/aeronefs.service.ts b/src/app/core/services/aeronefs.service.ts index ddd542f..7a2423d 100644 --- a/src/app/core/services/aeronefs.service.ts +++ b/src/app/core/services/aeronefs.service.ts @@ -1,10 +1,9 @@ import { Injectable } from '@angular/core'; -import { HttpParams } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { ApiService } from './api.service'; -import { Aeronef, AeronefByImat, AeronefList, JumpList, JumpListConfig, JumpListFilters } from 'src/app/core/models'; +import { Aeronef, AeronefByImat, AeronefByYear } from 'src/app/core/models'; @Injectable({ providedIn: 'root' }) export class AeronefsService { @@ -27,4 +26,9 @@ export class AeronefsService { */ } + getAllByDate(): Observable> { + return this.apiService.get('/aeronefs/allByDate') + .pipe(map(data => data.aeronefs)); + } + } \ No newline at end of file diff --git a/src/app/core/services/canopies.service.ts b/src/app/core/services/canopies.service.ts index 864cb83..9876603 100644 --- a/src/app/core/services/canopies.service.ts +++ b/src/app/core/services/canopies.service.ts @@ -1,10 +1,9 @@ import { Injectable } from '@angular/core'; -import { HttpParams } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { ApiService } from './api.service'; -import { Canopy, CanopyBySize ,JumpList, JumpListConfig, JumpListFilters } from 'src/app/core/models'; +import { Canopy, CanopyBySize, CanopyByYear, CanopyModelBySize, CanopyModelByYear } from 'src/app/core/models'; @Injectable({ providedIn: 'root' }) export class CanopiesService { @@ -13,7 +12,22 @@ export class CanopiesService { ) { } getAllBySize(): Observable> { - return this.apiService.get('/canopies') + return this.apiService.get('/canopies/allBySize') + .pipe(map(data => data.canopies)); + } + + getAllByYear(): Observable> { + return this.apiService.get('/canopies/allByYear') + .pipe(map(data => data.canopies)); + } + + getAllModelBySize(): Observable> { + return this.apiService.get('/canopies/allModelBySize') + .pipe(map(data => data.canopies)); + } + + getAllModelByYear(): Observable> { + return this.apiService.get('/canopies/allModelByYear') .pipe(map(data => data.canopies)); } diff --git a/src/app/core/services/dropzones.service.ts b/src/app/core/services/dropzones.service.ts index e49e8d6..0b9f08b 100644 --- a/src/app/core/services/dropzones.service.ts +++ b/src/app/core/services/dropzones.service.ts @@ -4,7 +4,7 @@ import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { ApiService } from './api.service'; -import { DropZone, DropZoneByOaci, JumpList, JumpListConfig, JumpListFilters } from 'src/app/core/models'; +import { DropZone, DropZoneByOaci, DropZoneByYear, JumpListConfig, JumpListFilters } from 'src/app/core/models'; @Injectable({ providedIn: 'root' }) export class DropZonesService { @@ -17,4 +17,9 @@ export class DropZonesService { .pipe(map(data => data.dropzones)); } + getAllByDate(): Observable> { + return this.apiService.get('/dropzones/allByDate') + .pipe(map(data => data.dropzones)); + } + } \ No newline at end of file diff --git a/src/app/core/services/jumps.service.ts b/src/app/core/services/jumps.service.ts index 1bee035..a452b2d 100644 --- a/src/app/core/services/jumps.service.ts +++ b/src/app/core/services/jumps.service.ts @@ -4,7 +4,7 @@ import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { ApiService } from './api.service'; -import { Jump, JumpList, JumpListConfig, JumpListFilters } from 'src/app/core/models'; +import { Jump, JumpByDate, JumpList, JumpListConfig, JumpListFilters } from 'src/app/core/models'; @Injectable({ providedIn: 'root' }) export class JumpsService { @@ -50,6 +50,11 @@ export class JumpsService { .pipe(map(data => data.jumps)); } + getAllByDate(): Observable> { + return this.apiService.get('/jumps/allByDate') + .pipe(map(data => data.jumps)); + } + create(jump: Jump): Observable { return this.apiService.post('/jumps/', { jump: jump }) .pipe(map(data => data.jump)); diff --git a/src/index.html b/src/index.html index f9c168d..5638285 100644 --- a/src/index.html +++ b/src/index.html @@ -8,12 +8,12 @@ - + - + diff --git a/src/styles/app.scss b/src/styles/app.scss index cb6a4f5..bd24f2b 100755 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -84,16 +84,13 @@ a.link { max-width: 100%; height: auto; } -.img-rounded { - border-radius: $radius; -} -.rounded { - border-radius: $radius; -} .shadow-none { box-shadow: none !important; } - +.font-monospace.fw-lighter, +.font-monospace .fw-lighter { + font-weight: 200 !important; +} huapp-full-layout .mat-mdc-form-field, huapp-full-layout .mdc-text-field--filled .mdc-floating-label { font-size: initial; @@ -109,6 +106,98 @@ huapp-full-layout .mdc-text-field--filled .mdc-floating-label { } } +/**************** +* Text Colors * +****************/ +.text-primary { + color: $primary !important; +} +.text-secondary, +.text-warn { + color: $secondary !important; +} +.text-accent { + color: $accent !important; +} +.text-success { + color: $success !important; +} +.text-info { + color: $info !important; +} +.text-warning { + color: $warning !important; +} +.text-danger { + color: $danger !important; +} +.text-error { + color: $error !important; +} +.text-white { + color: $white !important; +} +.text-red { + color: $red !important; +} +.text-red-dark { + color: $red-dark !important; +} +.text-orange { + color: $orange !important; +} +.text-yellow { + color: $yellow !important; +} +.text-megna { + color: $megna !important; +} +.text-green { + color: $green !important; +} +.text-teal { + color: $teal !important; +} +.text-turquoise { + color: $turquoise !important; +} +.text-cyan { + color: $cyan !important; +} +.text-blue { + color: $blue !important; +} +.text-navy { + color: $navy !important; +} +.text-pink { + color: $pink !important; +} +.text-magenta { + color: $magenta !important; +} +.text-purple { + color: $purple !important; +} +.text-purple-dark { + color: $purple-dark !important; +} +.text-raspberry { + color: $raspberry !important; +} +.text-grey { + color: $grey !important; +} +.text-muted { + color: $muted !important; +} +.text-extra-muted { + color: $extra-muted !important; +} +.text-empty { + color: $empty !important; +} + /********************** * Background Colors * **********************/ @@ -197,7 +286,10 @@ huapp-full-layout .mdc-text-field--filled .mdc-floating-label { .bg-extra-muted { background-color: $extra-muted !important; } +.bg-empty { + background-color: $empty !important; +} .bg-crystal, .bg-crystal .mdc-text-field--filled:not(.mdc-text-field--disabled) { background-color: transparent !important; -} \ No newline at end of file +} diff --git a/src/styles/charts.scss b/src/styles/charts.scss index 554064e..611128f 100644 --- a/src/styles/charts.scss +++ b/src/styles/charts.scss @@ -160,7 +160,7 @@ $chart-color-r: #ffffff; stroke:$chart-color-q; } .ct-series-r .ct-bar { - stroke:$chart-color-r + stroke:$chart-color-r; } } diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 29ff5d3..672da83 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -30,6 +30,7 @@ File: scss @import "bootstrap/scss/helpers"; @import "bootstrap/scss/utilities/api"; //@import "bootstrap/scss/tables"; +@import "bootstrap/scss/type"; @import "bootstrap/scss/pagination"; @import "bootstrap/scss/alert"; @@ -119,6 +120,8 @@ $background: map.get($headup_app-theme, background); @include mat.all-component-themes($headup_app-theme); @include components.theme($headup_app-theme, $custom-typography, $headup_app-variants); +@import "chartist/dist/index"; + @import 'spinner'; @import 'header'; @import 'sidebar'; diff --git a/src/styles/variable.scss b/src/styles/variable.scss index 749a430..af21f3c 100755 --- a/src/styles/variable.scss +++ b/src/styles/variable.scss @@ -9,6 +9,8 @@ File: scss $bodyfont: 'Barlow', "Helvetica Neue", sans-serif; $headingfont: 'Barlow', "Helvetica Neue", sans-serif; +$font-family-monospace: 'Inconsolata', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$font-size-base: 0.875rem; /* Custom Theme Palettes */ $md-custom-primary: ( @@ -130,6 +132,8 @@ $success: #16d57c; $warning: #ffb035; $info: #0dcaf0; $inverse: #292154; + +$empty: #717171; $muted: #aaaaaa; $extra-muted: #c4c4c4; $dark: #263238;