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