hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust tooltip in borrow-time to display average duration formatted with minutes

Browse Source
This commit is contained in:
tim-herbst 2020-12-29 11:07:51 +01:00
parent 1b19013b0a
commit a597343b0c
2 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
projects/project-3/frontend/src/app/dashboard/dashboard.component.html
View File

@ -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"

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

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