added loading spinner for when graph is loading
This commit is contained in:
parent
ab72264521
commit
12a72c00eb
4 changed files with 46 additions and 12 deletions
|
@ -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
|
||||
|
@ -63,4 +61,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -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
28
src/scss/bootstrap/_spinner.scss
Normal 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);
|
||||
}
|
||||
}
|
|
@ -76,3 +76,4 @@
|
|||
|
||||
// Custom styles
|
||||
@import "custom";
|
||||
@import "bootstrap/spinner";
|
Reference in a new issue