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