From af540c5f0941cd839f3c5623a30723f4c63c15d7 Mon Sep 17 00:00:00 2001 From: tim-herbst Date: Sun, 20 Dec 2020 20:04:09 +0100 Subject: [PATCH] add chart to popUp-component * bindPopUp on Button-click * add url for prod-deployment --- .../src/app/map/pop-up/pop-up.component.html | 14 ++- .../src/app/map/pop-up/pop-up.component.scss | 11 +++ .../src/app/map/pop-up/pop-up.component.ts | 24 ++++- .../frontend/src/app/service/map.service.ts | 16 ++-- .../src/app/service/pop-up.service.ts | 89 ------------------- .../src/environments/environment.prod.ts | 3 +- 6 files changed, 58 insertions(+), 99 deletions(-) diff --git a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html index abf4389..3b20d5a 100644 --- a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html +++ b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html @@ -1,2 +1,12 @@ -

{{station.commonName}}


- +{{station.commonName}}
+{{station.status.NbBikes}}
+{{station.status.NbDocks}}
+
+ +
+ diff --git a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.scss b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.scss index e69de29..583b745 100644 --- a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.scss +++ b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.scss @@ -0,0 +1,11 @@ +#route-button { + margin: 10px 0 0 0; + padding: 0; +} + +#chart { + padding: 0; + max-width: 400px; + max-height: 400px; + margin: 35px auto; +} diff --git a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.ts b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.ts index b363980..f4ddf59 100644 --- a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.ts +++ b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.ts @@ -2,24 +2,44 @@ import {Component, OnInit} from '@angular/core'; import {IBikeStation} from '../../service/domain/bike-station'; import {Router} from '@angular/router'; +import {ApexChart, ApexNonAxisChartSeries, ApexPlotOptions} from 'ng-apexcharts'; + +export type ChartOptions = { + series: ApexNonAxisChartSeries; + chart: ApexChart; + labels: string[]; + plotOptions: ApexPlotOptions; +}; + + @Component({ selector: 'app-pop-up', templateUrl: './pop-up.component.html', styleUrls: ['./pop-up.component.scss'] }) export class PopUpComponent implements OnInit { - text = 'test'; station: IBikeStation; + public chartOptions: Partial; constructor(private router: Router) { } ngOnInit(): void { - this.text = 'test'; + const bikes = Math.round((this.station.status.NbBikes / this.station.status.NbDocks) * 100); + this.chartOptions = { + series: [bikes], + chart: { + height: 300, + width: 300, + type: 'radialBar' + }, + labels: ['Availability'] + }; } public route(): void { this.router.navigate(['/dashboard', this.station.id]); } + } 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 7bc423d..0875d75 100644 --- a/projects/project-3/frontend/src/app/service/map.service.ts +++ b/projects/project-3/frontend/src/app/service/map.service.ts @@ -10,7 +10,7 @@ const createIcon = L.icon({ iconUrl: '../../assets/bike-point.png', iconSize: [60, 60], iconAnchor: [30, 60], - popupAnchor: [0, -53] + popupAnchor: [-118, -53] }); @Injectable({ @@ -41,16 +41,22 @@ export class MapService { showCoverageOnHover: true, zoomToBoundsOnClick: true }); - for (const station of data) { - const marker = L.marker([station.lat, station.lon], {icon: createIcon}).bindPopup(this.popUpService.makeAvailabilityPopUp(station)); - markerClusters.addLayer(marker); - } this.map.addLayer(markerClusters); + for (const station of data) { + const marker = L.marker([station.lat, station.lon], {icon: createIcon}); + markerClusters.addLayer(marker); + marker.on('click', e => e.target + .bindPopup(this.popUpService.makeAvailabilityPopUp(station), {maxWidth: 'auto'}) + .openPopup() + ); + marker.on('popupclose', e => e.target.unbindPopup()); + } }).catch((error) => { console.log('something went wrong: ' + JSON.stringify(error)); }); } + private async fetchStationGeoData(): Promise { return await this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise(); } diff --git a/projects/project-3/frontend/src/app/service/pop-up.service.ts b/projects/project-3/frontend/src/app/service/pop-up.service.ts index 0f41fd8..4fc8984 100644 --- a/projects/project-3/frontend/src/app/service/pop-up.service.ts +++ b/projects/project-3/frontend/src/app/service/pop-up.service.ts @@ -1,55 +1,18 @@ import {ComponentFactoryResolver, Injectable, Injector} from '@angular/core'; import {IBikeStation} from './domain/bike-station'; -import { - ApexAxisChartSeries, - ApexChart, - ApexDataLabels, - ApexFill, - ApexLegend, - ApexPlotOptions, - ApexStroke, - ApexTitleSubtitle, - ApexXAxis -} from 'ng-apexcharts'; -import {Router} from '@angular/router'; import {PopUpComponent} from '../map/pop-up/pop-up.component'; -export type ChartOptions = { - series: ApexAxisChartSeries; - chart: ApexChart; - dataLabels: ApexDataLabels; - plotOptions: ApexPlotOptions; - xaxis: ApexXAxis; - stroke: ApexStroke; - title: ApexTitleSubtitle; - fill: ApexFill; - legend: ApexLegend; -}; - @Injectable({ providedIn: 'root' }) export class PopUpService { - public chartOptions: Partial; constructor( - private router: Router, private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector ) { } - // - makeAvailabilityPopUp(station: IBikeStation): any { const factory = this.componentFactoryResolver.resolveComponentFactory(PopUpComponent); const component = factory.create(this.injector); @@ -59,56 +22,4 @@ export class PopUpService { return component.location.nativeElement; } - - route(station: IBikeStation): void { - this.router.navigate(['/dashboard', station.id]); - } - - bindChartOptionsToGivenStation(station: IBikeStation): void { - this.chartOptions = { - series: [ - { - name: 'wenig vorhanden', - data: [44, 55, 41, 37, 22, 43, 21] - }, - { - name: 'moderat voll', - data: [53, 32, 33, 52, 13, 43, 32] - }, - { - name: 'voll', - data: [12, 17, 11, 9, 15, 11, 20] - } - ], - chart: { - type: 'bar', - height: 350, - stacked: true, - stackType: '100%' - }, - plotOptions: { - bar: { - horizontal: true - } - }, - stroke: { - width: 1, - colors: ['#fff'] - }, - title: { - text: 'Availability of Station: ' + station.commonName - }, - xaxis: { - categories: [] - }, - fill: { - opacity: 1 - }, - legend: { - position: 'top', - horizontalAlign: 'left', - offsetX: 40 - } - }; - } } diff --git a/projects/project-3/frontend/src/environments/environment.prod.ts b/projects/project-3/frontend/src/environments/environment.prod.ts index 3612073..e82d631 100644 --- a/projects/project-3/frontend/src/environments/environment.prod.ts +++ b/projects/project-3/frontend/src/environments/environment.prod.ts @@ -1,3 +1,4 @@ export const environment = { - production: true + production: true, + apiUrl: 'https://it-schwarz.net/api/' };