add chart to popUp-component

* bindPopUp on Button-click
* add url for prod-deployment

projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html

@@ -1,2 +1,12 @@
-<p>{{station.commonName}}</p><br>
-<button mat-raised-button color="primary" (click)="route()">ROUTE</button>
+<b>{{station.commonName}}</b><br>
+<b>{{station.status.NbBikes}}</b><br>
+<b>{{station.status.NbDocks}}</b><br>
+<div id="chart">
+  <apx-chart
+    [chart]="chartOptions.chart"
+    [labels]="chartOptions.labels"
+    [plotOptions]="chartOptions.plotOptions"
+    [series]="chartOptions.series"
+  ></apx-chart>
+</div>
+<button (click)="route()" color="accent" id="route-button" mat-raised-button>ROUTE</button>

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;
+}

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<ChartOptions>;
 
   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]);
   }
 
+
 }

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<any> {
     return await this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
   }

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<ChartOptions>;
 
   constructor(
-    private router: Router,
     private componentFactoryResolver: ComponentFactoryResolver,
     private injector: Injector
   ) {
   }
 
-  //  <apx-chart
-  //         [series]="chartOptions.series"
-  //         [chart]="chartOptions.chart"
-  //         [dataLabels]="chartOptions.dataLabels"
-  //         [plotOptions]="chartOptions.plotOptions"
-  //         [xaxis]="chartOptions.xaxis"
-  //         [stroke]="chartOptions.stroke"
-  //         [fill]="chartOptions.fill"
-  //         [title]="chartOptions.title"
-  //         [legend]="chartOptions.legend"></apx-chart>
-
   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
-      }
-    };
-  }
 }

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/'
 };