diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html index ca18030..0146f69 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html @@ -18,23 +18,40 @@ - - Start der Zeitmessung - - - - - - Ende der Zeitmessung - - - - +
+ + Enter a range + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + +
station of lend destination {{element.endStationName}} number of drives {{element.number}} average Lend duration {{element.avgDuration}}
- dashboard-table-from -
-
- mini-map + + + + + + + + + + + + + + + + + + +
station of lend origin {{element.startStationName}} number of drives {{element.number}} average lend duration {{element.avgDuration}}
+
- dashboard-chart-borrow-duration +
+ +
; + displayedColumnsTo: string[] = ['endStationName', 'number', 'avgDuration']; + displayedColumnsFrom: string[] = ['startStationName', 'number', 'avgDuration']; + stationToSource = new MatTableDataSource(); + stationFromSource = new MatTableDataSource(); + + station: IDashboardCommonBikePoint; maxStartDate: Date; maxEndDate: Date; actualStartDate: Date; actualEndDate: Date; + form: FormGroup; constructor( private route: ActivatedRoute, - public service: DashboardService + private service: DashboardService, + private map: MapService, + private changeDetectorRefs: ChangeDetectorRef, + private fb: FormBuilder ) { + this.durationChartOptions = { + series: [], + chart: { + type: 'bar' + }, + dataLabels: { + enabled: false + }, + noData: { + text: 'Loading...' + } + }; } ngOnInit(): void { - this.service.initialDashboardStationFetch(this.route.snapshot.paramMap.get('id')).then(data => { + this.service.fetch_dashboard_init(this.route.snapshot.paramMap.get('id')).then(data => { this.station = data; this.maxStartDate = new Date(data.maxStartDate); this.maxEndDate = new Date(data.maxEndDate); - console.log(data); + this.init_dashboard(); + }); + + this.form = this.fb.group({ + daterange: new FormGroup({ + start: new FormControl(), + end: new FormControl() + }) }); } - addStartDate(type: string, event: MatDatepickerInputEvent): void { - this.actualStartDate = event.value; - console.log(this.actualStartDate); + init_dashboard(): void { + const initDate = this.maxEndDate.toISOString().substring(0, 10); + this.service.fetch_dashboard_station_to(this.station.id, initDate, initDate).then((source) => { + this.stationToSource = source; + this.changeDetectorRefs.detectChanges(); + }); + this.service.fetch_dashboard_station_from(this.station.id, initDate, initDate).then((source) => { + this.stationFromSource = source; + this.changeDetectorRefs.detectChanges(); + }); + this.service.fetch_dashboard_station_duration(this.station.id, initDate, initDate).then((source) => { + const numbers = []; + const minutesGroup = []; + source.forEach(value => { + numbers.push(value.number); + minutesGroup.push(value.minutesGroup); + }); + + this.durationChartOptions = { + series: [ + { + name: 'borrow-duration', + data: [...numbers] + } + ], + chart: { + type: 'bar', + height: 450 + }, + plotOptions: { + bar: { + horizontal: false, + columnWidth: '55%', + endingShape: 'rounded' + } + }, + dataLabels: { + enabled: false + }, + stroke: { + show: true, + width: 2, + colors: ['transparent'] + }, + xaxis: { + categories: [...minutesGroup] + }, + yaxis: { + title: { + text: 'minutes' + } + }, + fill: { + opacity: 1 + } + }; + }); + this.map.init_map(this.station.lat, this.station.lon, 17); + this.map.draw_dashboard_station_marker(this.station.lat, this.station.lon); } - addEndDate(type: string, event: MatDatepickerInputEvent): void { - this.actualEndDate = event.value; - console.log(this.actualEndDate); - } + onSubmit(): void { + this.actualStartDate = this.form.get('daterange').value.start; + this.actualEndDate = this.form.get('daterange').value.end; + this.service.fetch_dashboard_station_to(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualEndDate.toISOString().substring(0, 10)).then((source) => { + this.stationToSource = source; + this.changeDetectorRefs.detectChanges(); + }); + this.service.fetch_dashboard_station_from(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualStartDate.toISOString().substring(0, 10)).then((source) => { + this.stationFromSource = source; + this.changeDetectorRefs.detectChanges(); + }); + this.service.fetch_dashboard_station_duration(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualStartDate.toISOString().substring(0, 10)).then((source) => { + const numbers = []; + const minutesGroup = []; + source.forEach(value => { + numbers.push(value.number); + minutesGroup.push(value.minutesGroup); + }); + this.durationChartOptions = { + series: [ + { + name: 'borrow-duration', + data: [...numbers] + } + ], + chart: { + type: 'bar', + height: 450 + }, + plotOptions: { + bar: { + horizontal: false, + columnWidth: '55%', + endingShape: 'rounded' + } + }, + dataLabels: { + enabled: false + }, + stroke: { + show: true, + width: 2, + colors: ['transparent'] + }, + xaxis: { + categories: [...minutesGroup] + }, + yaxis: { + title: { + text: 'minutes' + } + }, + fill: { + opacity: 1 + } + }; + }); + } } diff --git a/projects/project-3/frontend/src/app/map/map.component.ts b/projects/project-3/frontend/src/app/map/map.component.ts index 852ea4c..66fdb1f 100644 --- a/projects/project-3/frontend/src/app/map/map.component.ts +++ b/projects/project-3/frontend/src/app/map/map.component.ts @@ -13,8 +13,8 @@ export class MapComponent implements AfterViewInit { } ngAfterViewInit(): void { - this.service.initMap(); - this.service.makeStationMarkers(); + this.service.init_map(51.509865, -0.118092, 14); + this.service.make_station_markers(); } diff --git a/projects/project-3/frontend/src/app/service/dashboard.service.ts b/projects/project-3/frontend/src/app/service/dashboard.service.ts index 3961f0b..39b0e92 100644 --- a/projects/project-3/frontend/src/app/service/dashboard.service.ts +++ b/projects/project-3/frontend/src/app/service/dashboard.service.ts @@ -10,7 +10,19 @@ export class DashboardService { constructor(private client: HttpClient) { } - public async initialDashboardStationFetch(id: string): Promise { - return await this.client.get(environment.apiUrl + 'latest/dashboard/' + id + '/').toPromise(); + public async fetch_dashboard_init(id: string): Promise { + return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/`).toPromise(); + } + + public async fetch_dashboard_station_to(id: string, startDate: string, endDate: string): Promise { + return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`).toPromise(); + } + + public async fetch_dashboard_station_from(id: string, startDate: string, endDate: string): Promise { + return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`).toPromise(); + } + + public async fetch_dashboard_station_duration(id: string, startDate: string, endDate: string): Promise { + return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/duration?start_date=${startDate}&end_date=${endDate}`).toPromise(); } } diff --git a/projects/project-3/frontend/src/app/service/domain/dashboard-station-to.ts b/projects/project-3/frontend/src/app/service/domain/dashboard-station-to.ts deleted file mode 100644 index ac38740..0000000 --- a/projects/project-3/frontend/src/app/service/domain/dashboard-station-to.ts +++ /dev/null @@ -1,16 +0,0 @@ -export interface IDashboardStationTo { - startStationName?: string; - endStationName?: string; - stationNumber?: number; - avgDuration?: number; -} - -export class DashboardStationTo implements IDashboardStationTo { - constructor( - public startStationName?: string, - public endStationName?: string, - public stationNumber?: number, - public avgDuration?: number - ) { - } -} diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts index 0875d75..45a6689 100644 --- a/projects/project-3/frontend/src/app/service/map.service.ts +++ b/projects/project-3/frontend/src/app/service/map.service.ts @@ -25,8 +25,8 @@ export class MapService { ) { } - public initMap(): void { - this.map = L.map('map').setView([51.509865, -0.118092], 14); + public init_map(lat: number, lon: number, zoom: number): void { + this.map = L.map('map').setView([lat, lon], zoom); this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data OpenStreetMap contributors', minZoom: 0, @@ -34,8 +34,8 @@ export class MapService { })); } - public makeStationMarkers(): void { - this.fetchStationGeoData().then((data) => { + public make_station_markers(): void { + this.fetch_station_geo_data().then((data) => { const markerClusters = L.markerClusterGroup({ spiderflyOnMaxZoom: true, showCoverageOnHover: true, @@ -56,8 +56,12 @@ export class MapService { }); } + public draw_dashboard_station_marker(lat: number, lon: number): void { + L.marker([lat, lon], {icon: createIcon}).addTo(this.map); + } - private async fetchStationGeoData(): Promise { + + private async fetch_station_geo_data(): Promise { return await this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise(); } }