revert fix with apex-chart and fix map-error: map-container already initialized

projects/project-3/frontend/src/app/dashboard/dashboard.component.ts

@@ -15,6 +15,7 @@ import {
   ApexNoData,
   ApexPlotOptions,
   ApexStroke,
+  ApexTitleSubtitle,
   ApexTooltip,
   ApexXAxis,
   ApexYAxis,
@@ -22,6 +23,7 @@ import {
 } from 'ng-apexcharts';
 
 export type ChartOptions = {
+  title: ApexTitleSubtitle
   series: ApexAxisChartSeries;
   chart: ApexChart;
   dataLabels: ApexDataLabels;
@@ -66,6 +68,11 @@ export class DashboardComponent implements OnInit {
     private fb: FormBuilder
   ) {
     this.durationChartOptions = {
+      title: {
+        text: 'test',
+        align: 'left',
+        margin: 10
+      },
       series: [],
       chart: {
         type: 'bar'
@@ -115,13 +122,13 @@ export class DashboardComponent implements OnInit {
       this.durationChartOptions = {
         series: [
           {
-            name: 'borrow-duration',
-            data: [numbers[0], numbers[4], numbers[1], numbers[2], numbers[3]]
+            name: 'amount of drives for given borrow duration',
+            data: [...numbers]
           }
         ],
         chart: {
           type: 'bar',
-          height: 450
+          height: 400
         },
         plotOptions: {
           bar: {
@@ -135,15 +142,20 @@ export class DashboardComponent implements OnInit {
         },
         stroke: {
           show: true,
-          width: 2,
+          width: 4,
           colors: ['transparent']
         },
         xaxis: {
-          categories: [minutesGroup[0], minutesGroup[4], minutesGroup[1], minutesGroup[2], minutesGroup[3]]
+          categories: [...minutesGroup],
+          labels: {
+            formatter: value => {
+              return value + ' min';
+            }
+          }
         },
         yaxis: {
           title: {
-            text: 'minutes'
+            text: 'amount of drives'
           }
         },
         fill: {
@@ -151,7 +163,7 @@ export class DashboardComponent implements OnInit {
         }
       };
     });
-    this.map.init_map(this.station.lat, this.station.lon, 17);
+    this.map.draw_dashboard_map(this.station.lat, this.station.lon, 17);
     this.map.draw_dashboard_station_marker(this.station.lat, this.station.lon);
   }
 
@@ -177,7 +189,7 @@ export class DashboardComponent implements OnInit {
         series: [
           {
             name: 'borrow-duration',
-            data: [numbers[0], numbers[4], numbers[1], numbers[2], numbers[3]]
+            data: [...numbers]
           }
         ],
         chart: {
@@ -200,7 +212,7 @@ export class DashboardComponent implements OnInit {
           colors: ['transparent']
         },
         xaxis: {
-          categories: [minutesGroup[0], minutesGroup[4], minutesGroup[1], minutesGroup[2], minutesGroup[3]]
+          categories: [...minutesGroup]
         },
         yaxis: {
           title: {

projects/project-3/frontend/src/app/map/map.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {MapService} from '../service/map.service';
 
 
@@ -7,15 +7,16 @@ import {MapService} from '../service/map.service';
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss']
 })
-export class MapComponent implements AfterViewInit {
-
+export class MapComponent implements OnInit {
   constructor(private service: MapService) {
   }
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
+    this.init_map_view();
+  }
+
+  init_map_view(): void {
     this.service.init_map(51.509865, -0.118092, 14);
     this.service.make_station_markers();
   }
-
-
 }

projects/project-3/frontend/src/app/service/map.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {ChangeDetectorRef, Injectable} from '@angular/core';
 import * as L from 'leaflet';
 import 'leaflet.markercluster';
 import {HttpClient} from '@angular/common/http';
@@ -17,11 +17,12 @@ const createIcon = L.icon({
   providedIn: 'root'
 })
 export class MapService {
-  private map;
+  public map;
+  public miniMap;
 
   constructor(
     private client: HttpClient,
-    private popUpService: PopUpService
+    private popUpService: PopUpService,
   ) {
   }
 
@@ -34,6 +35,15 @@ export class MapService {
     }));
   }
 
+  public draw_dashboard_map(lat: number, lon: number, zoom: number): void {
+    this.miniMap = L.map('minimap').setView([lat, lon], zoom);
+    this.miniMap.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+      minZoom: 0,
+      maxZoom: 19
+    }));
+  }
+
   public make_station_markers(): void {
     this.fetch_station_geo_data().then((data) => {
       const markerClusters = L.markerClusterGroup({
@@ -57,7 +67,7 @@ export class MapService {
   }
 
   public draw_dashboard_station_marker(lat: number, lon: number): void {
-    L.marker([lat, lon], {icon: createIcon}).addTo(this.map);
+    L.marker([lat, lon], {icon: createIcon}).addTo(this.miniMap);
   }