From 12a72c00eb4e5b3d09f868d3eb6826470ca3e31f Mon Sep 17 00:00:00 2001 From: Felix Date: Fri, 16 Aug 2019 15:23:18 +0100 Subject: [PATCH 1/3] added loading spinner for when graph is loading --- .../more-graphs-and-tables.component.html | 14 ++++------ .../more-graphs-and-tables.component.ts | 15 +++++++--- src/scss/bootstrap/_spinner.scss | 28 +++++++++++++++++++ src/scss/style.scss | 1 + 4 files changed, 46 insertions(+), 12 deletions(-) create mode 100644 src/scss/bootstrap/_spinner.scss diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index b431bc5..f7d4b8a 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -5,13 +5,15 @@

Spend amount and number of purchases by supplier name

-
+
-
-
+
+ +
+

Spend amount and number of organisations

-
- - -
- + \ No newline at end of file diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 028273b..496de98 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -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; diff --git a/src/scss/bootstrap/_spinner.scss b/src/scss/bootstrap/_spinner.scss new file mode 100644 index 0000000..a13a91a --- /dev/null +++ b/src/scss/bootstrap/_spinner.scss @@ -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); + } + } \ No newline at end of file diff --git a/src/scss/style.scss b/src/scss/style.scss index eb8ef09..0ee16d7 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -76,3 +76,4 @@ // Custom styles @import "custom"; +@import "bootstrap/spinner"; \ No newline at end of file From 301a6e619afba8bc5638d033b9209254b7638365 Mon Sep 17 00:00:00 2001 From: Felix Date: Fri, 16 Aug 2019 15:24:49 +0100 Subject: [PATCH 2/3] commented out console.logs --- .../more-graphs-and-tables.component.ts | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 496de98..1e363ed 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -63,9 +63,9 @@ export class MoreStuffComponent implements OnInit { 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. - console.log("item.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("item.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("start_range input box: " + start_range); // console.log("start_range : " + new Date(start_range)); // console.log("end_range input box: " + end_range); @@ -73,7 +73,7 @@ export class MoreStuffComponent implements OnInit { // 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("is_item_in_range: " + is_item_in_range); - console.log("----------------------"); + // console.log("----------------------"); if (is_item_in_range) { graph_data.push({ @@ -119,26 +119,26 @@ export class MoreStuffComponent implements OnInit { } 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.isBubbleChartLoaded = true; - console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded); + // console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded); } else { - console.log("Not using cached data."); + // console.log("Not using cached data."); this.api.loadMiscUrl('organisation/external/supplier_count').subscribe( result => { this.cached_graph_data = result; 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); } ) } - console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded); + // console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded); } public supplierBubbleChartType: ChartType = 'bubble'; @@ -195,7 +195,7 @@ export class MoreStuffComponent implements OnInit { let value_data = []; let count_data = []; - console.log("Graph being fetched from server."); + console.log("The server is UP"); result.data.map(item => { value_data.push({ t: item.date, @@ -215,13 +215,13 @@ export class MoreStuffComponent implements OnInit { } bubbleChartUpdate() { - console.log("start_range input box: " + this.bubbleChartBegin); - console.log("end_range input box: " + this.bubbleChartEnd); + // console.log("start_range input box: " + this.bubbleChartBegin); + // console.log("end_range input box: " + this.bubbleChartEnd); // this is called when daterange is changed this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd)); - console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded); + // console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded); /* bubbleChartBegin: any; bubbleChartEnd: any; From 7c5eedaa87004fdc229fd1ffd481fa25e5064136 Mon Sep 17 00:00:00 2001 From: Felix Date: Fri, 16 Aug 2019 15:55:22 +0100 Subject: [PATCH 3/3] removed test graph --- src/app/dashboard/dashboard-customer.component.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 4b77535..e9dccf8 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -121,14 +121,6 @@ export class DashboardCustomerComponent implements OnInit { // Graph widgets public widgetList = [ - { - type: 'graph', - name: 'total_duration', - duration: '400', - icon: 'icon-diamond', - title: '(test) last 400 days', - dataType: DataType.currency, - }, { type: 'graph', name: 'total_last_week',