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

add progress-spinner to charts

Browse Source
This commit is contained in:
tim-herbst 2021-01-02 23:53:30 +01:00
parent c91a0f9872
commit 52e68a4f28
5 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.html
View File

@ -6,7 +6,7 @@
The time it takes for a rent which has the current station as origin is displayed here.
</mat-card-subtitle>
</mat-card-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<mat-card-content *ngIf="!isLoading" fxFlex fxLayout="row" fxLayoutAlign="center">
<div class="station-dashboard-borrow-duration" fxFlex>
<apx-chart
[chart]="chartOptions.chart"
@ -21,4 +21,12 @@
[yaxis]="chartOptions.yaxis"></apx-chart>
</div>
</mat-card-content>
<div *ngIf="isLoading"
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px; height: 400px;">
<mat-progress-spinner
color="primary"
mode="indeterminate"
[diameter]="300">
</mat-progress-spinner>
</div>
</mat-card>

14
projects/project-3/frontend/src/app/dashboard/rent-duration-chart/rent-duration-chart.component.ts
View File

@ -50,6 +50,7 @@ export class RentDurationChartComponent implements OnInit {
bikePoint: IDashboardCommonBikePoint;
maxStartDate: Date;
maxEndDate: Date;
isLoading: boolean;
constructor(
private route: ActivatedRoute,
@ -67,6 +68,7 @@ export class RentDurationChartComponent implements OnInit {
}
ngOnInit(): void {
this.isLoading = true;
this.route.params.subscribe(params => {
this.service.fetchDashboardInit(params.id).then(data => {
this.bikePoint = data;
@ -80,6 +82,7 @@ export class RentDurationChartComponent implements OnInit {
async initChart(): Promise<void> {
const initDate = this.maxEndDate.toISOString().substring(0, 10);
await this.service.fetchDashboardStationCharts(this.bikePoint.id, initDate, initDate, chartType).then(source => {
this.isLoading = false;
this.chartOptions = {
series: [
{
@ -133,20 +136,23 @@ export class RentDurationChartComponent implements OnInit {
opacity: 1
}
};
this.chart.updateOptions(this.chartOptions);
});
}
async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
this.isLoading = true;
await this.service.fetchDashboardStationCharts(
this.bikePoint.id,
actualStartDate,
actualEndDate,
chartType
).then(source => {
this.chart.updateSeries([{
data: source.map(value => value.number)
}]);
this.isLoading = false;
setTimeout(() => {
this.chart.updateSeries([{
data: source.map(value => value.number)
}]);
}, 1000);
});
}

10
projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html
View File

@ -8,7 +8,7 @@
</mat-card-subtitle>
</mat-card-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<mat-card-content *ngIf="!isLoading" fxFlex fxLayout="row" fxLayoutAlign="center">
<div class="station-dashboard-borrow-time" fxFlex>
<apx-chart
[chart]="chartOptions.chart"
@ -23,4 +23,12 @@
[yaxis]="chartOptions.yaxis"></apx-chart>
</div>
</mat-card-content>
<div *ngIf="isLoading"
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px; height: 400px;">
<mat-progress-spinner
color="primary"
mode="indeterminate"
[diameter]="300">
</mat-progress-spinner>
</div>
</mat-card>

17
projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts
View File

@ -50,6 +50,7 @@ export class RentTimeChartComponent implements OnInit {
bikePoint: IDashboardCommonBikePoint;
maxStartDate: Date;
maxEndDate: Date;
isLoading: boolean;
constructor(
private route: ActivatedRoute,
@ -67,6 +68,7 @@ export class RentTimeChartComponent implements OnInit {
}
ngOnInit(): void {
this.isLoading = true;
this.route.params.subscribe(params => {
this.service.fetchDashboardInit(params.id).then(data => {
this.bikePoint = data;
@ -80,6 +82,7 @@ export class RentTimeChartComponent implements OnInit {
async initChart(): Promise<void> {
const initDate = this.maxEndDate.toISOString().substring(0, 10);
await this.service.fetchDashboardStationCharts(this.bikePoint.id, initDate, initDate, chartType).then(source => {
this.isLoading = false;
this.chartOptions = {
series: [
{
@ -152,17 +155,21 @@ export class RentTimeChartComponent implements OnInit {
}
async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
this.isLoading = true;
await this.service.fetchDashboardStationCharts(
this.bikePoint.id,
actualStartDate,
actualEndDate,
chartType
).then(source => {
this.chart.updateSeries([{
data: source.map(value => value.number)
}, {
data: source.map(value => Math.round(value.avgDuration / 60))
}]);
this.isLoading = false;
setTimeout(() => {
this.chart.updateSeries([{
data: source.map(value => value.number)
}, {
data: source.map(value => Math.round(value.avgDuration / 60))
}]);
}, 1000);
});
}

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

@ -55,20 +55,20 @@ export class TableComponent implements OnInit {
this.map.removeOverlayOnMiniMap();
const initDate = this.maxEndDate.toISOString().substring(0, 10);
await this.service.fetchDashboardStationTo(this.bikePoint.id, initDate, initDate).then(source => {
this.isLoadingToSource = false;
this.stationToSource = this.setBikePointColorToSource(source);
this.iterableToSource = source;
this.iterableToSource.forEach(bikePoint => {
bikePoint.polyLineColor = 'green';
});
this.isLoadingToSource = false;
});
this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => {
this.isLoadingFromSource = false;
this.stationFromSource = this.setBikePointColorFromSource(source);
this.iterableFromSource = source;
this.iterableFromSource.forEach(bikePoint => {
bikePoint.polyLineColor = 'red';
});
this.isLoadingFromSource = false;
});
}
@ -78,14 +78,14 @@ export class TableComponent implements OnInit {
this.map.removeOverlayOnMiniMap();
await this.service.fetchDashboardStationTo(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.isLoadingToSource = false;
this.stationToSource = source;
this.iterableToSource = this.setBikePointColorToSource(source);
this.isLoadingToSource = false;
});
this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
this.isLoadingFromSource = false;
this.stationFromSource = source;
this.iterableFromSource = this.setBikePointColorFromSource(source);
this.isLoadingFromSource = false;
});
}