Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

added loading spinner for when graph is loading

Browse source
This commit is contained in:
Felix 2019-08-16 15:23:18 +01:00
parent ab72264521
commit 12a72c00eb
4 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/dashboard/more-graphs-and-tables.component.html
View file

@ -5,13 +5,15 @@
<div class="col-sm-7">
<h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
</div>
<div class="col-sm-5 hidden-sm-down">
<div class="col-sm-5 hidden-sm-down" *ngIf="isBubbleChartLoaded">
<input type="date" [(ngModel)]="bubbleChartBegin" (change)="bubbleChartUpdate()">
<!-- THESE INPUT BOXES DO NOT WORK. Their value remains the client machine's date/time despite changing. -->
<input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()">
</div>
</div>
<div>
<div class="col-sm-7" *ngIf="!isBubbleChartLoaded">
<div class="spinner"></div>
</div>
<div *ngIf="isBubbleChartLoaded">
<canvas baseChart
[datasets]="supplierBubbleChartData"
[options]="supplierBubbleChartOptions"
@ -28,10 +30,6 @@
<div class="col-sm-7">
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
</div>
<div class="col-sm-5 hidden-sm-down">
<!-- <input type="date" id="yearSpendChartBegin" name="yearSpendChartBegin" ng-model="yearSpendChartBegin" ng-change="yearSpendChartBegin"> -->
<!-- <input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd"> -->
</div>
</div>
<div>
<canvas baseChart

15
src/app/dashboard/more-graphs-and-tables.component.ts
View file

@ -15,6 +15,7 @@ export class MoreStuffComponent implements OnInit {
bubbleChartBegin: any;
bubbleChartEnd: any;
cached_graph_data: any;
isBubbleChartLoaded = false;
constructor(
private api: ApiService,
@ -26,7 +27,7 @@ export class MoreStuffComponent implements OnInit {
ngOnInit(): void {
this.loadYearSpend();
this.loadSupplierBubble(false, ('January 1, 2018'), ('January 1, 2019')); // pass start and end date ranges to this as Date()s
this.loadSupplierBubble(false, ('0'), ('0'));
this.loadSupplierHistory();
}
@ -104,12 +105,11 @@ export class MoreStuffComponent implements OnInit {
}
private loadSupplierBubble(useRange: boolean, start_range : string, end_range : string) {
console.log("Fetching data for bubble chart... this will take a while. custom range = " + useRange);
this.isBubbleChartLoaded = false;
// console.log("Fetching data for bubble chart... this will take a while. custom range = " + useRange);
var is_cached = false;
console.log(this.cached_graph_data);
try {
if (this.cached_graph_data) {
is_cached = true;
@ -121,6 +121,8 @@ export class MoreStuffComponent implements OnInit {
if (is_cached) {
console.log("Using cached data of " + this.cached_graph_data.length + " items.");
this.supplierBubbleChartData[0].data = this.formatGraphData(this.cached_graph_data, useRange, start_range, end_range);
this.isBubbleChartLoaded = true;
console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
}
else {
console.log("Not using cached data.");
@ -130,10 +132,13 @@ export class MoreStuffComponent implements OnInit {
this.supplierBubbleChartData[0].data = this.formatGraphData(result, useRange, start_range, end_range);
console.log("Graph fetched with " + this.supplierBubbleChartData[0].data.length + " items.");
this.isBubbleChartLoaded = true;
console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
}
)
}
console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
}
public supplierBubbleChartType: ChartType = 'bubble';
@ -215,6 +220,8 @@ export class MoreStuffComponent implements OnInit {
// this is called when daterange is changed
this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd));
console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
/*
bubbleChartBegin: any;
bubbleChartEnd: any;

28
src/scss/bootstrap/_spinner.scss Normal file
View file

@ -0,0 +1,28 @@
.spinner {
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}

1
src/scss/style.scss
View file

@ -76,3 +76,4 @@
// Custom styles
@import "custom";
@import "bootstrap/spinner";