diff --git a/angular.json b/angular.json index 95e361c2e0e0078b9b71b1992144ad5114c589ed..d43381d533faa0db8686f75273d31a0f487733a7 100644 --- a/angular.json +++ b/angular.json @@ -58,7 +58,8 @@ "node_modules/echarts/dist/echarts.min.js", "node_modules/echarts/dist/extension/bmap.min.js", "node_modules/chart.js/dist/Chart.min.js", - "node_modules/iso8601-js-period/iso8601.js" + "node_modules/iso8601-js-period/iso8601.js", + "node_modules/apexcharts/dist/apexcharts.min.js" ], "allowedCommonJsDependencies": [ "angular2-chartjs", diff --git a/package-lock.json b/package-lock.json index 612475a46f2e0a4fc382eb499d0c3d4f73452a24..39d34e79806fc8d00f3f7a36b6167120433decc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3850,6 +3850,19 @@ "integrity": "sha512-sbLEIMQrkV7RkIruqTPXxeCMkAAycv4yzTkBzRgOR1BrR5UB7qZtupqxkersTJSf0HZ3sbaNRrNV80TnnM7cUw==", "dev": true }, + "apexcharts": { + "version": "3.27.1", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.27.1.tgz", + "integrity": "sha512-2pfw3pxeWhI0ap5lfxyfGNGoGScfEwfc8XnTpbnzgRdr1AOH5JJN9hh3MvfwrC9TQQfJYC2TZc8P/q9qXUj1bQ==", + "requires": { + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "app-root-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz", @@ -13993,6 +14006,21 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ng-apexcharts": { + "version": "1.5.12", + "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.5.12.tgz", + "integrity": "sha512-k82AdWNbZs5yqGCjiX7PGS11Cy1+1Oo/RGt2lT89xReD9N9Vvo1t34p1dmzS+U6W5wOFlLEKKVLGNQqENW8cTQ==", + "requires": { + "tslib": "^1.10.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "ng2-ckeditor": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/ng2-ckeditor/-/ng2-ckeditor-1.3.1.tgz", @@ -20721,6 +20749,70 @@ "pdfkit": ">=0.8.1" } }, + "svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "requires": { + "svg.js": "^2.0.1" + } + }, + "svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=", + "requires": { + "svg.js": ">=2.3.x" + } + }, + "svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=", + "requires": { + "svg.js": "^2.2.5" + } + }, + "svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==" + }, + "svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "requires": { + "svg.js": "^2.4.0" + } + }, + "svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "requires": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "dependencies": { + "svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "requires": { + "svg.js": "^2.2.5" + } + } + } + }, + "svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "requires": { + "svg.js": "^2.6.5" + } + }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -23550,7 +23642,8 @@ }, "ssri": { "version": "6.0.1", - "resolved": "", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", + "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", "dev": true, "requires": { "figgy-pudding": "^3.5.1" diff --git a/package.json b/package.json index b6655b8d202f30661eb937b8c39a7e8586f9a691..a06d7519ea1b0fcbf6ce13540fac2dec9b68e774 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "@types/leaflet.awesome-markers": "^2.0.24", "@types/leaflet.markercluster": "^1.4.4", "angular2-chartjs": "0.4.1", + "apexcharts": "^3.27.1", "bootstrap": "4.3.1", "chart.js": "2.7.1", "ckeditor": "4.7.3", @@ -76,6 +77,7 @@ "leaflet.heat": "0.2.0", "leaflet.markercluster": "^1.5.0", "nebular-icons": "1.1.0", + "ng-apexcharts": "^1.5.12", "ng2-ckeditor": "^1.2.9", "ng2-smart-table": "^1.6.0", "ngx-echarts": "^4.2.2", diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index a31eec0aa266cf8c99b0558e8a5277e38f3824c6..55fe6746daf2091501c59e4c09bd2f0446c71cd3 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -11,7 +11,7 @@ </section> <div class="row d-flex justify-content-around"> - <mat-card class="col-3"> + <mat-card class="col-2"> <mat-card-header> <mat-card-title>Amsterdam</mat-card-title> <mat-card-subtitle>Subtitle</mat-card-subtitle> @@ -25,7 +25,7 @@ </p> </mat-card-content> </mat-card> - <mat-card class="col-3"> + <mat-card class="col-2"> <mat-card-header> <mat-card-title>Bilbao</mat-card-title> <mat-card-subtitle>Dog Breed</mat-card-subtitle> @@ -39,10 +39,10 @@ </p> </mat-card-content> </mat-card> - </div> + <!-- </div> - <div class="row d-flex justify-content-around"> - <mat-card class="col-3"> + <div class="row d-flex justify-content-around"> --> + <mat-card class="col-2"> <mat-card-header> <mat-card-title>Helsinki</mat-card-title> <mat-card-subtitle>Dog Breed</mat-card-subtitle> @@ -57,7 +57,7 @@ </mat-card-content> </mat-card> - <mat-card class="col-3"> + <mat-card class="col-2"> <mat-card-header> <mat-card-title>Messina</mat-card-title> <mat-card-subtitle>Dog Breed</mat-card-subtitle> diff --git a/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts b/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts index 8131bbca239812e0f47a0aaf293d9ee7814db4aa..79d7b8cc78928c998292f5cc22149b61fbd66acb 100644 --- a/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts +++ b/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ @@ -10,6 +10,8 @@ export class HeatmapFilterComponent implements OnInit { @Output() sendFilter = new EventEmitter<any>() + @Input() selected:string; + formhm: FormGroup; constructor(private fb: FormBuilder) { } @@ -22,7 +24,7 @@ export class HeatmapFilterComponent implements OnInit { this.formhm = this.fb.group({ startDate: [new Date(startDateTime), Validators.required], endDate: [new Date(endDateTime), Validators.required], - selectedPeriod: ["2016_06_F10", Validators.nullValidator], + selectedPeriod: [this.selected, Validators.nullValidator], }) } diff --git a/src/app/pages/messina/heatmap/heatmap.component.ts b/src/app/pages/messina/heatmap/heatmap.component.ts index d026df1a86614b42eb2b96139b1d36479726b56f..52d13bddc0b7f815ec042b07a891ed87be1841e7 100644 --- a/src/app/pages/messina/heatmap/heatmap.component.ts +++ b/src/app/pages/messina/heatmap/heatmap.component.ts @@ -12,7 +12,7 @@ import { MessinaClientService } from '../service/messina-client.service'; <nb-card class="col-6" [nbSpinner]="loading"> <nb-card-header> Delay HeatMap - <ngx-heatmap-filter (sendFilter)="updateMap1($event)"></ngx-heatmap-filter> + <ngx-heatmap-filter (sendFilter)="updateMap1($event)" [selected]="selectedPeriod1"></ngx-heatmap-filter> </nb-card-header> <nb-card-body> <div id="map1" #map1 class="map" @@ -30,7 +30,7 @@ import { MessinaClientService } from '../service/messina-client.service'; <nb-card class="col-6" [nbSpinner]="loading"> <nb-card-header> Delay HeatMap - <ngx-heatmap-filter (sendFilter)="updateMap2($event)"></ngx-heatmap-filter> + <ngx-heatmap-filter (sendFilter)="updateMap2($event)" [selected]="selectedPeriod2"></ngx-heatmap-filter> </nb-card-header> <nb-card-body> <div id="map2" #map2 class="map" @@ -53,21 +53,23 @@ export class HeatmapComponent implements OnInit { public map1: L.Map; public map2: L.Map; + selectedPeriod1="2016_06_F10"; + selectedPeriod2="2017_06_F10"; + constructor(private messinaClient: MessinaClientService) { } ngOnInit(): void { L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa'; - let selectedPeriod = "2016_06_F10"; let now = new Date(); let dayBefore = new Date().setDate(now.getDate() - 1); var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds var startDateTime = (new Date(dayBefore - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z'; var endDateTime = (new Date(now.getTime() - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z'; - this.initializeMap1(startDateTime, endDateTime, selectedPeriod); - this.initializeMap2(startDateTime, endDateTime, selectedPeriod); + this.initializeMap1(startDateTime, endDateTime, this.selectedPeriod1); + this.initializeMap2(startDateTime, endDateTime, this.selectedPeriod2); } options1 = { @@ -77,7 +79,7 @@ export class HeatmapComponent implements OnInit { attribution: "" }) ], - zoom: 14, + zoom: 11, center: L.latLng(38.181529, 15.562588) }; @@ -88,7 +90,7 @@ export class HeatmapComponent implements OnInit { attribution: "" }) ], - zoom: 14, + zoom: 11, center: L.latLng(38.181529, 15.562588) }; @@ -123,7 +125,7 @@ export class HeatmapComponent implements OnInit { return div; }; legend.addTo(map); - this.layers1.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions)); + // this.layers1.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions)); } onMapReady2(map) { @@ -144,7 +146,7 @@ export class HeatmapComponent implements OnInit { return div; }; legend.addTo(map); - this.layers1.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions)); + // this.layers2.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions)); } getLegendColor(v: number) { diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.html b/src/app/pages/messina/martrix-batch/martrix-batch.component.html new file mode 100644 index 0000000000000000000000000000000000000000..ac74fb50d3f49816d954d18f443fbf1f11ea7fbd --- /dev/null +++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.html @@ -0,0 +1,48 @@ +<div class="card-row"> + <div class="card-col"> +<nb-card size="small"> + <nb-card-body> + <apx-chart [series]="serie_plus" [chart]="chartOptions.chart" [legend]="chartOptions.legend" + [dataLabels]="chartOptions.dataLabels" + [plotOptions]="chartOptions.plotOptions"></apx-chart> + </nb-card-body> +</nb-card> +</div> +<div class="card-col"> + <nb-card size="small"> + <nb-card-body> + <apx-chart [series]="serie_minus" [chart]="chartOptions.chart" [legend]="chartOptions.legend" + [dataLabels]="chartOptions.dataLabels" + [plotOptions]="chartOptions.plotOptions"></apx-chart> + </nb-card-body> + </nb-card> +</div> +</div> +<div class="card-row"> + <div class="card-col"> +<nb-card size="small"> + <nb-card-body> + <apx-chart [series]="serie_plus" [chart]="chartOptions.chart" [legend]="chartOptions.legend" + [dataLabels]="chartOptions.dataLabels" + [plotOptions]="chartOptions.plotOptions"></apx-chart> + </nb-card-body> +</nb-card> +</div> +<div class="card-col"> + <nb-card size="small"> + <nb-card-body> + <apx-chart [series]="serie_minus" [chart]="chartOptions.chart" [legend]="chartOptions.legend" + [dataLabels]="chartOptions.dataLabels" + [plotOptions]="chartOptions.plotOptions"></apx-chart> + </nb-card-body> + </nb-card> +</div> +</div> + +<!-- <nb-card size="small"> + <nb-card-body> + <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" + [dataLabels]="chartOptions.dataLabels" + [plotOptions]="chartOptions.plotOptions"></apx-chart> + </nb-card-body> +</nb-card> --> \ No newline at end of file diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.scss b/src/app/pages/messina/martrix-batch/martrix-batch.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..2b0acd0957e9d0fe813f9ab0c808ab4a65e01be3 --- /dev/null +++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.scss @@ -0,0 +1,20 @@ +:host { + display: block; + overflow-x: hidden; + overflow-y: auto; + } + +nb-card-body{ + padding-bottom: 0 !important; + padding-top: 0 !important; +} + +.card-row { + display: flex; + margin: 0 -0.5rem; + } + +.card-col { + flex: 1 0 calc(50% - 1rem); + margin: 0 0.5rem; +} \ No newline at end of file diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.spec.ts b/src/app/pages/messina/martrix-batch/martrix-batch.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..db40c3f7b77a7cf26436fca62975a6a842e16428 --- /dev/null +++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MartrixBatchComponent } from './martrix-batch.component'; + +describe('MartrixBatchComponent', () => { + let component: MartrixBatchComponent; + let fixture: ComponentFixture<MartrixBatchComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MartrixBatchComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MartrixBatchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.ts b/src/app/pages/messina/martrix-batch/martrix-batch.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..f9f72f4146999600bbc95d50454f866dbdcc15e1 --- /dev/null +++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.ts @@ -0,0 +1,133 @@ +import { Component, OnInit, ViewChild } from "@angular/core"; + +import { + ApexAxisChartSeries, + ApexTitleSubtitle, + ApexDataLabels, + ApexChart, + ApexPlotOptions, + ApexLegend, + ApexXAxis +} from "ng-apexcharts"; +import { MessinaClientService } from "../service/messina-client.service"; + +export type ChartOptions = { + legend: ApexLegend, + series: ApexAxisChartSeries; + chart: ApexChart; + dataLabels: ApexDataLabels; + title: ApexTitleSubtitle; + plotOptions: ApexPlotOptions; + xaxis: ApexXAxis; +}; + +@Component({ + selector: 'ngx-martrix-batch', + templateUrl: './martrix-batch.component.html', + styleUrls: ['./martrix-batch.component.scss'] +}) +export class MartrixBatchComponent implements OnInit { + + @ViewChild("chart") chart: any; + public chartOptions: Partial<ChartOptions>; + + serie_plus=[]; + serie_minus=[]; + + constructor(private messinaClient: MessinaClientService) { + this.chartOptions = { + legend:{ + position:'right', + show: false + }, + series: [ + + ], + chart: { + height:300, + type: "heatmap", + toolbar: { + show: false + } + }, + plotOptions: { + heatmap: { + shadeIntensity: 0.2, + colorScale: { + ranges: [ + { + from: 0, + to: 1, + color: "#009688", + + }, + { + from: 1, + to: 2, + color: "#4caf50" + }, + { + from: 2, + to: 3, + color: "#8bc34a" + }, + { + from: 3, + to: 4, + color: "#cddc39" + }, + { + from: 4, + to: 5, + color: "#ffeb3b" + }, + { + from: 5, + to: 6, + color: "#ffc107" + }, + { + from: 6, + to: 7, + color: "#ff9800" + }, + { + from: 7, + to: 8, + color: "#ff5722" + }, + { + from: 8, + to: 9, + color: "#f44336" + }, + { + from: 9, + to: 10, + color: "#970e0e" + } + ] + } + } + }, + dataLabels: { + enabled: false + }, + title: { + text: "HeatMap Chart with Color Range" + }, + xaxis: { + type: "category", + categories: [] + }, + }; + } + ngOnInit(): void { + this.messinaClient.getBatchData("2021-06-08T00:00:00Z").subscribe(res =>{ + this.chartOptions.xaxis.categories=res.labels; + this.serie_plus=res.data.filter(x=> x.name.includes("+")) + this.serie_minus=res.data.filter(x=> !x.name.includes("+")) + } ); + } + +} diff --git a/src/app/pages/messina/messina-routing.module.ts b/src/app/pages/messina/messina-routing.module.ts index ea11231a8ae6133f090dff7decb2c527b5916ed4..0282827324eb787ac74b6e60bc608124439e17a1 100644 --- a/src/app/pages/messina/messina-routing.module.ts +++ b/src/app/pages/messina/messina-routing.module.ts @@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router'; import { MessinaComponent } from './messina.component'; import { TrafficComponent } from './traffic/traffic.component'; import { HeatmapComponent } from './heatmap/heatmap.component'; +import { MartrixBatchComponent } from './martrix-batch/martrix-batch.component'; const routes: Routes = [{ path: '', @@ -14,6 +15,10 @@ const routes: Routes = [{ { path:"heatmap", component:HeatmapComponent, + }, + { + path:"batch", + component:MartrixBatchComponent, }], }]; diff --git a/src/app/pages/messina/messina.module.ts b/src/app/pages/messina/messina.module.ts index fa92dd7f4ddb46a6679a53258027416410a5c001..0f6f2abc0ef838fa6f8c34aea337e889407d8aa2 100644 --- a/src/app/pages/messina/messina.module.ts +++ b/src/app/pages/messina/messina.module.ts @@ -3,13 +3,15 @@ import { GoogleMapsModule } from '@angular/google-maps'; import { LeafletModule } from '@asymmetrik/ngx-leaflet'; import { LeafletMarkerClusterModule } from '@asymmetrik/ngx-leaflet-markercluster'; import { NgxEchartsModule } from 'ngx-echarts'; -import { NbCardModule, NbRadioModule, NbSpinnerModule, NbDatepickerModule, NbInputModule, NbButtonModule, NbSelectModule, NbTimepickerModule} from '@nebular/theme'; +import { NbCardModule, NbRadioModule, NbSpinnerModule, NbDatepickerModule, NbInputModule, NbButtonModule, NbSelectModule, NbTimepickerModule, NbIconModule, NbTooltipModule} from '@nebular/theme'; import { ThemeModule } from '../../@theme/theme.module'; import { MessinaRoutingModule, routedComponents } from './messina-routing.module'; import { MatCardModule } from '@angular/material/card'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { TrafficFilterComponent } from './traffic-filter/traffic-filter.component'; import { HeatmapFilterComponent } from './heatmap-filter/heatmap-filter.component'; +import { MartrixBatchComponent } from './martrix-batch/martrix-batch.component'; +import { NgApexchartsModule } from "ng-apexcharts"; @NgModule({ imports: [ @@ -29,13 +31,17 @@ import { HeatmapFilterComponent } from './heatmap-filter/heatmap-filter.componen NbButtonModule, NbSelectModule, NbTimepickerModule, - LeafletMarkerClusterModule + LeafletMarkerClusterModule, + NbIconModule, + NbTooltipModule, + NgApexchartsModule ], exports: [], declarations: [ ...routedComponents, TrafficFilterComponent, HeatmapFilterComponent, + MartrixBatchComponent, ], }) export class MessinaModule {} diff --git a/src/app/pages/messina/service/messina-client.service.ts b/src/app/pages/messina/service/messina-client.service.ts index f898e4ca2d653353a7f8f7cb17482937b97daf23..02b50a1619bc422234a7663cca8e705b70833634 100644 --- a/src/app/pages/messina/service/messina-client.service.ts +++ b/src/app/pages/messina/service/messina-client.service.ts @@ -32,6 +32,13 @@ export class MessinaClientService { return this.http.get<any>(`${this.apiURL}/api/v1/data/atmStops?page=${page}&pageSize=${pageSize}&format=geojson&token=${this.token}&filter=${JSON.stringify({ "mainStop": true })}`); } + getBatchData(date: string,roads:string=undefined): Observable<any>{ + if(roads==undefined || roads==null){ + roads="Messina-Boccetta"; + } + return this.http.get<any>(`${this.apiURL}/api/v1/trafficBatch?date=${date}&roads=${roads}&token=${this.token}`); + } + getHeatMap(selectedPeriod: string, startDateTime: string, endDateTime: string, factorMinutesPerStop: number = 10, page: number = 0, pageSize: number = 40000): Observable<any> { //TODO DEVELOP THIS WHEN API IS AVAILABLE //return this.http.get<any>(`${this.apiURL}/api/v1/timeSeries/heatMap?page=${page}&pageSize=${pageSize}&groupBy=datetime&token=${this.token}&factorMinutesPerStop=${factorMinutesPerStop}&startDatetime=${startDateTime}&endDatetime=${endDateTime}`); diff --git a/src/app/pages/messina/traffic/traffic.component.ts b/src/app/pages/messina/traffic/traffic.component.ts index 031b65f734353d4dd3d92b051d20fa701e666fef..5320dff4edc190b3f490453db7730c5664e49020 100644 --- a/src/app/pages/messina/traffic/traffic.component.ts +++ b/src/app/pages/messina/traffic/traffic.component.ts @@ -30,6 +30,9 @@ import { MessinaClientService } from '../service/messina-client.service'; > </div> </nb-card-body> + <nb-card-footer> + This map shows the temporal evolution of traffic flow on some roads entering or leaving the city of Messina + </nb-card-footer> </nb-card> `, }) diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 77358d05eca0fb0df17de9006786aa8d0dd9f656..0e136053eae4f6b458cef5c908995696a0288168 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -98,6 +98,10 @@ export const MENU_ITEMS: NbMenuItem[] = [ { title: 'Delay HeatMap', link: '/pages/messina/heatmap', + }, + { + title: 'Matrix Batch', + link: '/pages/messina/batch', } ], },