From 52e68a4f28294b482f4eeb07f1b304fa9df245e9 Mon Sep 17 00:00:00 2001
From: tim-herbst <herbst.tim@icloud.com>
Date: Sat, 2 Jan 2021 23:53:30 +0100
Subject: [PATCH] add progress-spinner to charts

---
 .../rent-duration-chart.component.html          | 10 +++++++++-
 .../rent-duration-chart.component.ts            | 14 ++++++++++----
 .../rent-time-chart.component.html              | 10 +++++++++-
 .../rent-time-chart.component.ts                | 17 ++++++++++++-----
 .../src/app/dashboard/table/table.component.ts  |  8 ++++----
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.html b/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.html
index 2141b1d..f282e7a 100644
--- a/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.html
@@ -6,7 +6,7 @@
       The time it takes for a rent which has the current station as origin is displayed here.
     </mat-card-subtitle>
   </mat-card-header>
-  <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
+  <mat-card-content *ngIf="!isLoading" fxFlex fxLayout="row" fxLayoutAlign="center">
     <div class="station-dashboard-borrow-duration" fxFlex>
       <apx-chart
         [chart]="chartOptions.chart"
@@ -21,4 +21,12 @@
         [yaxis]="chartOptions.yaxis"></apx-chart>
     </div>
   </mat-card-content>
+  <div *ngIf="isLoading"
+       style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px; height: 400px;">
+    <mat-progress-spinner
+      color="primary"
+      mode="indeterminate"
+    [diameter]="300">
+    </mat-progress-spinner>
+  </div>
 </mat-card>
diff --git a/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts b/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts
index a5eda78..58c9926 100644
--- a/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts
@@ -50,6 +50,7 @@ export class RentDurationChartComponent implements OnInit {
   bikePoint: IDashboardCommonBikePoint;
   maxStartDate: Date;
   maxEndDate: Date;
+  isLoading: boolean;
 
   constructor(
     private route: ActivatedRoute,
@@ -67,6 +68,7 @@ export class RentDurationChartComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.isLoading = true;
     this.route.params.subscribe(params => {
       this.service.fetchDashboardInit(params.id).then(data => {
         this.bikePoint = data;
@@ -80,6 +82,7 @@ export class RentDurationChartComponent implements OnInit {
   async initChart(): Promise<void> {
     const initDate = this.maxEndDate.toISOString().substring(0, 10);
     await this.service.fetchDashboardStationCharts(this.bikePoint.id, initDate, initDate, chartType).then(source => {
+      this.isLoading = false;
       this.chartOptions = {
         series: [
           {
@@ -133,20 +136,23 @@ export class RentDurationChartComponent implements OnInit {
           opacity: 1
         }
       };
-      this.chart.updateOptions(this.chartOptions);
     });
   }
 
   async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
+    this.isLoading = true;
     await this.service.fetchDashboardStationCharts(
       this.bikePoint.id,
       actualStartDate,
       actualEndDate,
       chartType
     ).then(source => {
-      this.chart.updateSeries([{
-        data: source.map(value => value.number)
-      }]);
+      this.isLoading = false;
+      setTimeout(() => {
+        this.chart.updateSeries([{
+          data: source.map(value => value.number)
+        }]);
+      }, 1000);
     });
   }
 
diff --git a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html
index 684c9e4..07037d5 100644
--- a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html
@@ -8,7 +8,7 @@
     </mat-card-subtitle>
   </mat-card-header>
 
-  <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
+  <mat-card-content *ngIf="!isLoading" fxFlex fxLayout="row" fxLayoutAlign="center">
     <div class="station-dashboard-borrow-time" fxFlex>
       <apx-chart
         [chart]="chartOptions.chart"
@@ -23,4 +23,12 @@
         [yaxis]="chartOptions.yaxis"></apx-chart>
     </div>
   </mat-card-content>
+  <div *ngIf="isLoading"
+       style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px; height: 400px;">
+    <mat-progress-spinner
+      color="primary"
+      mode="indeterminate"
+      [diameter]="300">
+    </mat-progress-spinner>
+  </div>
 </mat-card>
diff --git a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts
index 39aa370..eafea56 100644
--- a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts
@@ -50,6 +50,7 @@ export class RentTimeChartComponent implements OnInit {
   bikePoint: IDashboardCommonBikePoint;
   maxStartDate: Date;
   maxEndDate: Date;
+  isLoading: boolean;
 
   constructor(
     private route: ActivatedRoute,
@@ -67,6 +68,7 @@ export class RentTimeChartComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.isLoading = true;
     this.route.params.subscribe(params => {
       this.service.fetchDashboardInit(params.id).then(data => {
         this.bikePoint = data;
@@ -80,6 +82,7 @@ export class RentTimeChartComponent implements OnInit {
   async initChart(): Promise<void> {
     const initDate = this.maxEndDate.toISOString().substring(0, 10);
     await this.service.fetchDashboardStationCharts(this.bikePoint.id, initDate, initDate, chartType).then(source => {
+      this.isLoading = false;
       this.chartOptions = {
         series: [
           {
@@ -152,17 +155,21 @@ export class RentTimeChartComponent implements OnInit {
   }
 
   async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
+    this.isLoading = true;
     await this.service.fetchDashboardStationCharts(
       this.bikePoint.id,
       actualStartDate,
       actualEndDate,
       chartType
     ).then(source => {
-      this.chart.updateSeries([{
-        data: source.map(value => value.number)
-      }, {
-        data: source.map(value => Math.round(value.avgDuration / 60))
-      }]);
+      this.isLoading = false;
+      setTimeout(() => {
+        this.chart.updateSeries([{
+          data: source.map(value => value.number)
+        }, {
+          data: source.map(value => Math.round(value.avgDuration / 60))
+        }]);
+      }, 1000);
     });
   }
 
diff --git a/projects/project-3/frontend/src/app/dashboard/table/table.component.ts b/projects/project-3/frontend/src/app/dashboard/table/table.component.ts
index 723f76a..597761f 100644
--- a/projects/project-3/frontend/src/app/dashboard/table/table.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/table/table.component.ts
@@ -55,20 +55,20 @@ export class TableComponent implements OnInit {
     this.map.removeOverlayOnMiniMap();
     const initDate = this.maxEndDate.toISOString().substring(0, 10);
     await this.service.fetchDashboardStationTo(this.bikePoint.id, initDate, initDate).then(source => {
+      this.isLoadingToSource = false;
       this.stationToSource = this.setBikePointColorToSource(source);
       this.iterableToSource = source;
       this.iterableToSource.forEach(bikePoint => {
         bikePoint.polyLineColor = 'green';
       });
-      this.isLoadingToSource = false;
     });
     this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => {
+      this.isLoadingFromSource = false;
       this.stationFromSource = this.setBikePointColorFromSource(source);
       this.iterableFromSource = source;
       this.iterableFromSource.forEach(bikePoint => {
         bikePoint.polyLineColor = 'red';
       });
-      this.isLoadingFromSource = false;
     });
   }
 
@@ -78,14 +78,14 @@ export class TableComponent implements OnInit {
     this.map.removeOverlayOnMiniMap();
     await this.service.fetchDashboardStationTo(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
       this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
+      this.isLoadingToSource = false;
       this.stationToSource = source;
       this.iterableToSource = this.setBikePointColorToSource(source);
-      this.isLoadingToSource = false;
     });
     this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
+      this.isLoadingFromSource = false;
       this.stationFromSource = source;
       this.iterableFromSource = this.setBikePointColorFromSource(source);
-      this.isLoadingFromSource = false;
     });
   }