From a597343b0c16a22d4a82407a06b9d659f3a12bbf Mon Sep 17 00:00:00 2001
From: tim-herbst <herbst.tim@icloud.com>
Date: Tue, 29 Dec 2020 11:07:51 +0100
Subject: [PATCH] adjust tooltip in borrow-time to display average duration
 formatted with minutes

---
 .../app/dashboard/dashboard.component.html    |  1 +
 .../src/app/dashboard/dashboard.component.ts  | 54 ++++++++++++-------
 2 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
index 44d91a0..d19a4cf 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -159,6 +159,7 @@
               [chart]="timeChartOptions.chart"
               [colors]="timeChartOptions.colors"
               [dataLabels]="timeChartOptions.dataLabels"
+              [tooltip]="timeChartOptions.tooltip"
               [fill]="timeChartOptions.fill"
               [series]="timeChartOptions.series"
               [stroke]="timeChartOptions.stroke"
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 df95fd4..6b3b689 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
@@ -5,7 +5,7 @@ import {IDashboardCommonBikePoint} from '../service/domain/dashboard-common-bike
 import {MatTableDataSource} from '@angular/material/table';
 import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 import {MapService} from '../service/map.service';
-import stht from "seconds-to-human-time";
+import stht from 'seconds-to-human-time';
 
 
 import {
@@ -227,7 +227,7 @@ export class DashboardComponent implements OnInit {
       this.durationChartOptions = {
         series: [
           {
-            name: 'amount of drives for given borrow duration',
+            name: 'amount of drives',
             data: numbers
           }
         ],
@@ -276,7 +276,7 @@ export class DashboardComponent implements OnInit {
       source.forEach(value => {
         timeFrame.push(value.timeFrame);
         numbers.push(value.number);
-        avgDuration.push(value.avgDuration);
+        avgDuration.push(Math.round(value.avgDuration / 60));
       });
       this.timeChartOptions = {
         series: [
@@ -286,16 +286,23 @@ export class DashboardComponent implements OnInit {
             data: numbers
           },
           {
-            name: 'avgDuration',
+            name: 'average Duration',
             type: 'line',
             data: avgDuration
           }
         ],
+        tooltip: {
+          enabled: true,
+          shared: true,
+          x: {
+            show: true
+          }
+        },
         chart: {
           type: 'line',
           height: chartHeight,
           zoom: {
-            enabled: true
+            enabled: true,
           }
         },
         colors: ['#017bfe', '#51ca49'],
@@ -308,18 +315,24 @@ export class DashboardComponent implements OnInit {
         xaxis: {
           categories: timeFrame,
           tickAmount: 24,
-          tickPlacement: 'between'
+          tickPlacement: 'between',
+          type: 'category'
         },
         yaxis: [{
           title: {
-            text: 'number of drives',
+            text: 'amount of drives',
           },
         }, {
-          opposite: true,
-          title: {
-            text: 'avgDuration'
+            opposite: true,
+            title: {
+              text: 'average Duration'
+            },
+          labels: {
+            formatter: (val: number): string => {
+              return val + ' min';
+            }
           }
-        }],
+          }],
         legend: {
           horizontalAlign: 'left'
         },
@@ -366,7 +379,7 @@ export class DashboardComponent implements OnInit {
       this.durationChartOptions = {
         series: [
           {
-            name: 'borrow-duration',
+            name: 'amount of drives for given borrow duration',
             data: numbers
           }
         ],
@@ -400,7 +413,7 @@ export class DashboardComponent implements OnInit {
         },
         yaxis: {
           title: {
-            text: 'minutes'
+            text: 'amount of drives'
           }
         },
         fill: {
@@ -420,7 +433,7 @@ export class DashboardComponent implements OnInit {
       source.forEach(value => {
         timeFrame.push(value.timeFrame);
         numbers.push(value.number);
-        avgDuration.push(value.avgDuration);
+        avgDuration.push(Math.round(value.avgDuration / 60));
       });
       this.timeChartOptions = {
         series: [
@@ -430,7 +443,7 @@ export class DashboardComponent implements OnInit {
             data: numbers
           },
           {
-            name: 'avgDuration',
+            name: 'average Duration',
             type: 'line',
             data: avgDuration
           }
@@ -439,7 +452,7 @@ export class DashboardComponent implements OnInit {
           type: 'line',
           height: chartHeight,
           zoom: {
-            enabled: true
+            enabled: true,
           }
         },
         colors: ['#017bfe', '#51ca49'],
@@ -456,12 +469,17 @@ export class DashboardComponent implements OnInit {
         },
         yaxis: [{
           title: {
-            text: 'number of drives',
+            text: 'amount of drives',
           },
         }, {
           opposite: true,
           title: {
-            text: 'avgDuration'
+            text: 'average Duration'
+          },
+          labels: {
+            formatter: (val: number): string => {
+              return val + ' min';
+            }
           }
         }],
         legend: {