From d3f40f994c7b267ce7c2cef18edbb804ee0eee64 Mon Sep 17 00:00:00 2001 From: Tim Herbst Date: Wed, 23 Dec 2020 14:33:30 +0100 Subject: [PATCH] revert fix with apex-chart and fix map-error: map-container already initialized --- .../src/app/dashboard/dashboard.component.ts | 30 +++++++++++++------ .../frontend/src/app/map/map.component.ts | 13 ++++---- .../frontend/src/app/service/map.service.ts | 18 ++++++++--- 3 files changed, 42 insertions(+), 19 deletions(-) diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts index 87ffc96..ff7f928 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts +++ b/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: { 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 66fdb1f..18792cf 100644 --- a/projects/project-3/frontend/src/app/map/map.component.ts +++ b/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(); } - - } 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 45a6689..78e31c3 100644 --- a/projects/project-3/frontend/src/app/service/map.service.ts +++ b/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 OpenStreetMap 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); }