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: {