Merge remote-tracking branch 'origin/felix/customranges' into tyu-tyu/char
This commit is contained in:
commit
4181a09b96
4 changed files with 63 additions and 25 deletions
|
@ -5,13 +5,15 @@
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
|
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-4 hidden-sm-down">
|
<div class="col-sm-5 hidden-sm-down" *ngIf="isBubbleChartLoaded">
|
||||||
<input type="date" ([value])="bubbleChartBegin" (change)="bubbleChartUpdate()">
|
<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()">
|
||||||
<input type="date" ([value])="bubbleChartEnd" (change)="bubbleChartUpdate()">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="col-sm-7" *ngIf="!isBubbleChartLoaded">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="isBubbleChartLoaded">
|
||||||
<canvas baseChart
|
<canvas baseChart
|
||||||
[datasets]="supplierBubbleChartData"
|
[datasets]="supplierBubbleChartData"
|
||||||
[options]="supplierBubbleChartOptions"
|
[options]="supplierBubbleChartOptions"
|
||||||
|
@ -28,9 +30,9 @@
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
|
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-4 hidden-sm-down">
|
<div class="col-sm-5 hidden-sm-down">
|
||||||
<input type="date" ([value])="lineChartBegin" (change)="lineChartUpdate()">
|
<!-- <input type="date" id="yearSpendChartBegin" name="yearSpendChartBegin" ng-model="yearSpendChartBegin" ng-change="yearSpendChartBegin"> -->
|
||||||
<input type="date" ([value])="lineChartEnd" (change)="lineChartUpdate()">
|
<!-- <input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd"> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -63,4 +65,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -17,6 +17,7 @@ export class MoreStuffComponent implements OnInit {
|
||||||
bubbleChartBegin: any;
|
bubbleChartBegin: any;
|
||||||
bubbleChartEnd: any;
|
bubbleChartEnd: any;
|
||||||
cached_graph_data: any;
|
cached_graph_data: any;
|
||||||
|
isBubbleChartLoaded = false;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private api: ApiService,
|
private api: ApiService,
|
||||||
|
@ -30,7 +31,7 @@ export class MoreStuffComponent implements OnInit {
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.loadYearSpend();
|
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();
|
this.loadSupplierHistory();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,10 +66,10 @@ export class MoreStuffComponent implements OnInit {
|
||||||
passed_graph_data.data.map(item=> {
|
passed_graph_data.data.map(item=> {
|
||||||
let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range));
|
let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range));
|
||||||
// there are a lot of `new Date(blah)` but that is what works for some reason.
|
// there are a lot of `new Date(blah)` but that is what works for some reason.
|
||||||
|
|
||||||
console.log("item.date : " + (item.date));
|
// console.log("item.date : " + (item.date));
|
||||||
console.log("Date(item.date) : " + new Date(item.date));
|
// console.log("Date(item.date) : " + new Date(item.date));
|
||||||
console.log("Date(item.date.substring(0, 10)) : " + new Date(item.date.substring(0, 10)));
|
// console.log("Date(item.date.substring(0, 10)) : " + new Date(item.date.substring(0, 10)));
|
||||||
// console.log("start_range input box: " + start_range);
|
// console.log("start_range input box: " + start_range);
|
||||||
// console.log("start_range : " + new Date(start_range));
|
// console.log("start_range : " + new Date(start_range));
|
||||||
// console.log("end_range input box: " + end_range);
|
// console.log("end_range input box: " + end_range);
|
||||||
|
@ -76,8 +77,8 @@ export class MoreStuffComponent implements OnInit {
|
||||||
// console.log("item.date >= start_range: " + (new Date(item.date) >= new Date(start_range)));
|
// console.log("item.date >= start_range: " + (new Date(item.date) >= new Date(start_range)));
|
||||||
// console.log("item.date <= end_range: " + (new Date(item.date) <= new Date(end_range)));
|
// console.log("item.date <= end_range: " + (new Date(item.date) <= new Date(end_range)));
|
||||||
// console.log("is_item_in_range: " + is_item_in_range);
|
// console.log("is_item_in_range: " + is_item_in_range);
|
||||||
console.log("----------------------");
|
// console.log("----------------------");
|
||||||
|
|
||||||
if (is_item_in_range) {
|
if (is_item_in_range) {
|
||||||
graph_data.push({
|
graph_data.push({
|
||||||
t: new Date(item.date.substring(0, 10)),
|
t: new Date(item.date.substring(0, 10)),
|
||||||
|
@ -108,12 +109,11 @@ export class MoreStuffComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
private loadSupplierBubble(useRange: boolean, start_range : string, end_range : string) {
|
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;
|
var is_cached = false;
|
||||||
|
|
||||||
console.log(this.cached_graph_data);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (this.cached_graph_data) {
|
if (this.cached_graph_data) {
|
||||||
is_cached = true;
|
is_cached = true;
|
||||||
|
@ -123,21 +123,26 @@ export class MoreStuffComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (is_cached) {
|
if (is_cached) {
|
||||||
console.log("Using cached data of " + this.cached_graph_data.length + " items.");
|
// 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.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 {
|
else {
|
||||||
console.log("Not using cached data.");
|
// console.log("Not using cached data.");
|
||||||
this.api.loadMiscUrl('organisation/external/supplier_count').subscribe(
|
this.api.loadMiscUrl('organisation/external/supplier_count').subscribe(
|
||||||
result => {
|
result => {
|
||||||
this.cached_graph_data = result;
|
this.cached_graph_data = result;
|
||||||
|
|
||||||
this.supplierBubbleChartData[0].data = this.formatGraphData(result, useRange, start_range, end_range);
|
this.supplierBubbleChartData[0].data = this.formatGraphData(result, useRange, start_range, end_range);
|
||||||
console.log("Graph fetched with " + this.supplierBubbleChartData[0].data.length + " items.");
|
// 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';
|
public supplierBubbleChartType: ChartType = 'bubble';
|
||||||
|
@ -194,7 +199,7 @@ export class MoreStuffComponent implements OnInit {
|
||||||
let value_data = [];
|
let value_data = [];
|
||||||
let count_data = [];
|
let count_data = [];
|
||||||
|
|
||||||
console.log("Graph being fetched from server.");
|
console.log("The server is UP");
|
||||||
result.data.map(item => {
|
result.data.map(item => {
|
||||||
value_data.push({
|
value_data.push({
|
||||||
t: item.date,
|
t: item.date,
|
||||||
|
@ -214,11 +219,13 @@ export class MoreStuffComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
bubbleChartUpdate() {
|
bubbleChartUpdate() {
|
||||||
console.log("start_range input box: " + this.bubbleChartBegin);
|
// console.log("start_range input box: " + this.bubbleChartBegin);
|
||||||
console.log("end_range input box: " + this.bubbleChartEnd);
|
// console.log("end_range input box: " + this.bubbleChartEnd);
|
||||||
|
|
||||||
// this is called when daterange is changed
|
// this is called when daterange is changed
|
||||||
this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd));
|
this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd));
|
||||||
|
|
||||||
|
// console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
|
||||||
/*
|
/*
|
||||||
bubbleChartBegin: any;
|
bubbleChartBegin: any;
|
||||||
bubbleChartEnd: 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
|
// Custom styles
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
@import "bootstrap/spinner";
|
Reference in a new issue