add last chart: burrow-time to dashboard
This commit is contained in:
Tim Herbst
parent
f64fe65ed6
commit
945642db5a
@ -28,7 +28,7 @@ export type ChartOptions = {
|
||||
chart: ApexChart;
|
||||
dataLabels: ApexDataLabels;
|
||||
plotOptions: ApexPlotOptions;
|
||||
yaxis: ApexYAxis;
|
||||
yaxis: ApexYAxis | ApexYAxis[];
|
||||
xaxis: ApexXAxis;
|
||||
fill: ApexFill;
|
||||
tooltip: ApexTooltip;
|
||||
@ -37,6 +37,8 @@ export type ChartOptions = {
|
||||
noData: ApexNoData;
|
||||
};
|
||||
|
||||
const chartHeight = 450;
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
@ -46,6 +48,7 @@ export type ChartOptions = {
|
||||
export class DashboardComponent implements OnInit {
|
||||
@ViewChild('Station-Dashboard-Borrow-Duration') chart: ChartComponent;
|
||||
public durationChartOptions: Partial<ChartOptions>;
|
||||
public timeChartOptions: Partial<ChartOptions>;
|
||||
displayedColumnsTo: string[] = ['endStationName', 'number', 'avgDuration'];
|
||||
displayedColumnsFrom: string[] = ['startStationName', 'number', 'avgDuration'];
|
||||
stationToSource = new MatTableDataSource<any>();
|
||||
@ -68,11 +71,18 @@ export class DashboardComponent implements OnInit {
|
||||
private fb: FormBuilder
|
||||
) {
|
||||
this.durationChartOptions = {
|
||||
title: {
|
||||
text: 'test',
|
||||
align: 'left',
|
||||
margin: 10
|
||||
series: [],
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...'
|
||||
}
|
||||
};
|
||||
this.timeChartOptions = {
|
||||
series: [],
|
||||
chart: {
|
||||
type: 'bar'
|
||||
@ -112,7 +122,7 @@ export class DashboardComponent implements OnInit {
|
||||
this.stationFromSource = source;
|
||||
this.changeDetectorRefs.detectChanges();
|
||||
});
|
||||
this.service.fetch_dashboard_station_duration(this.station.id, initDate, initDate).then((source) => {
|
||||
this.service.fetch_dashboard_station_charts(this.station.id, initDate, initDate, 'duration').then((source) => {
|
||||
const numbers = [];
|
||||
const minutesGroup = [];
|
||||
source.forEach(value => {
|
||||
@ -123,12 +133,12 @@ export class DashboardComponent implements OnInit {
|
||||
series: [
|
||||
{
|
||||
name: 'amount of drives for given borrow duration',
|
||||
data: [...numbers]
|
||||
data: numbers
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 400
|
||||
height: chartHeight
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
@ -146,7 +156,7 @@ export class DashboardComponent implements OnInit {
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: [...minutesGroup],
|
||||
categories: minutesGroup,
|
||||
labels: {
|
||||
formatter: value => {
|
||||
return value + ' min';
|
||||
@ -163,6 +173,64 @@ export class DashboardComponent implements OnInit {
|
||||
}
|
||||
};
|
||||
});
|
||||
this.service.fetch_dashboard_station_charts(this.station.id, initDate, initDate, 'time').then((source) => {
|
||||
const timeFrame = [];
|
||||
const numbers = [];
|
||||
const avgDuration = [];
|
||||
source.forEach(value => {
|
||||
timeFrame.push(value.timeFrame);
|
||||
numbers.push(value.number);
|
||||
avgDuration.push(value.avgDuration);
|
||||
});
|
||||
this.timeChartOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'amount of drives',
|
||||
type: 'bar',
|
||||
data: numbers
|
||||
},
|
||||
{
|
||||
name: 'avgDuration',
|
||||
type: 'line',
|
||||
data: avgDuration
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'line',
|
||||
height: chartHeight,
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'straight'
|
||||
},
|
||||
xaxis: {
|
||||
categories: timeFrame,
|
||||
tickAmount: 24
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: 'number of drives',
|
||||
},
|
||||
}, {
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'avgDuration'
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
horizontalAlign: 'left'
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
this.map.draw_dashboard_map(this.station.lat, this.station.lon, 17);
|
||||
this.map.draw_dashboard_station_marker(this.station.lat, this.station.lon);
|
||||
}
|
||||
@ -170,15 +238,28 @@ export class DashboardComponent implements OnInit {
|
||||
onSubmit(): void {
|
||||
this.actualStartDate = this.form.get('daterange').value.start;
|
||||
this.actualEndDate = this.form.get('daterange').value.end;
|
||||
this.service.fetch_dashboard_station_to(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualEndDate.toISOString().substring(0, 10)).then((source) => {
|
||||
this.service.fetch_dashboard_station_to(
|
||||
this.station.id,
|
||||
this.actualStartDate.toISOString().substring(0, 10),
|
||||
this.actualEndDate.toISOString().substring(0, 10)
|
||||
).then((source) => {
|
||||
this.stationToSource = source;
|
||||
this.changeDetectorRefs.detectChanges();
|
||||
});
|
||||
this.service.fetch_dashboard_station_from(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualEndDate.toISOString().substring(0, 10)).then((source) => {
|
||||
this.service.fetch_dashboard_station_from(
|
||||
this.station.id,
|
||||
this.actualStartDate.toISOString().substring(0, 10),
|
||||
this.actualEndDate.toISOString().substring(0, 10)
|
||||
).then((source) => {
|
||||
this.stationFromSource = source;
|
||||
this.changeDetectorRefs.detectChanges();
|
||||
});
|
||||
this.service.fetch_dashboard_station_duration(this.station.id, this.actualStartDate.toISOString().substring(0, 10), this.actualEndDate.toISOString().substring(0, 10)).then((source) => {
|
||||
this.service.fetch_dashboard_station_charts(
|
||||
this.station.id,
|
||||
this.actualStartDate.toISOString().substring(0, 10),
|
||||
this.actualEndDate.toISOString().substring(0, 10),
|
||||
'duration'
|
||||
).then((source) => {
|
||||
const numbers = [];
|
||||
const minutesGroup = [];
|
||||
source.forEach(value => {
|
||||
@ -189,12 +270,12 @@ export class DashboardComponent implements OnInit {
|
||||
series: [
|
||||
{
|
||||
name: 'borrow-duration',
|
||||
data: [...numbers]
|
||||
data: numbers
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 450
|
||||
height: chartHeight
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
@ -212,7 +293,12 @@ export class DashboardComponent implements OnInit {
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: [...minutesGroup]
|
||||
categories: minutesGroup,
|
||||
labels: {
|
||||
formatter: value => {
|
||||
return value + ' min';
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
@ -224,5 +310,67 @@ export class DashboardComponent implements OnInit {
|
||||
}
|
||||
};
|
||||
});
|
||||
this.service.fetch_dashboard_station_charts(
|
||||
this.station.id,
|
||||
this.actualStartDate.toISOString().substring(0, 10),
|
||||
this.actualEndDate.toISOString().substring(0, 10),
|
||||
'time'
|
||||
).then((source) => {
|
||||
const timeFrame = [];
|
||||
const numbers = [];
|
||||
const avgDuration = [];
|
||||
source.forEach(value => {
|
||||
timeFrame.push(value.timeFrame);
|
||||
numbers.push(value.number);
|
||||
avgDuration.push(value.avgDuration);
|
||||
});
|
||||
this.timeChartOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'amount of drives',
|
||||
type: 'bar',
|
||||
data: numbers
|
||||
},
|
||||
{
|
||||
name: 'avgDuration',
|
||||
type: 'line',
|
||||
data: avgDuration
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'line',
|
||||
height: chartHeight,
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'straight'
|
||||
},
|
||||
xaxis: {
|
||||
categories: timeFrame,
|
||||
tickAmount: 24
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: 'number of drives',
|
||||
},
|
||||
}, {
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'avgDuration'
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
horizontalAlign: 'left'
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user