From 1299c15f4b54a7c86b01dde3089b019643c9c626 Mon Sep 17 00:00:00 2001
From: Tom Slater <tslater366@gmail.com>
Date: Fri, 16 Aug 2019 12:27:05 +0100
Subject: [PATCH] Chart work

Misc Chart work
---
 src/app/dashboard/dashboard.component.html    | 32 ++-----------------
 src/app/dashboard/dashboard.component.ts      |  8 ++---
 .../more-graphs-and-tables.component.html     | 18 +++++------
 .../more-graphs-and-tables.component.ts       | 25 +++++++++++----
 src/app/panels/graph-panel.component.html     | 15 +--------
 5 files changed, 36 insertions(+), 62 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index bf48479..cd0d250 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -17,21 +17,8 @@
     <div class="card">
       <div class="card-block">
         <div class="row">
-          <div class="col-7">
-            <h4 class="card-title mb-0">No. of Essential Purchases</h4>
-          </div>
-          <div class="col-sm-5 hidden-sm-down">
-            <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
-              <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
-                <select>
-                  <option value="Day">Day</option>
-                  <option value="Week">Week</option>
-                  <option value="Month">Month</option>
-                  <option value="Year">Year</option>
-                  <option value="All Time">All Time</option>
-                </select>
-              </div>
-            </div>
+          <div class="col-12">
+            <h4 class="card-title mb-0">Number of Essential Purchases</h4>
           </div>
         </div>
         <div class="chart-wrapper">
@@ -50,22 +37,9 @@
     <div class="card">
       <div class="card-block">
         <div class="row">
-          <div class="col-7">
+          <div class="col-12">
             <h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
           </div><!--/.col-->
-          <div class="col-sm-5 hidden-sm-down">
-            <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
-              <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
-                <select>
-                  <option value="Day">Day</option>
-                  <option value="Week">Week</option>
-                  <option value="Month">Month</option>
-                  <option value="Year">Year</option>
-                  <option value="All Time">All Time</option>
-                </select>
-              </div>
-            </div>
-          </div>
         </div><!--/.row-->
         <div class="chart-wrapper">
           <canvas baseChart class="chart"
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 2759842..ddd479b 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -46,9 +46,9 @@ export class DashboardComponent {
     },
     {
       type: 'graph',
-      name: 'sales_all',
+      name: 'sales_last_year',
       icon: 'icon-diamond',
-      title: 'All Sales',
+      title: 'Sales Last Year',
       dataType: DataType.currency,
     },
     {
@@ -65,8 +65,8 @@ export class DashboardComponent {
     },
     {
       type: 'graph',
-      name: 'purchases_all;',
-      title: 'All Purchases',
+      name: 'purchases_last_year;',
+      title: 'Purchases Last Year',
       dataType: DataType.currency,
     },
   ];
diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html
index e54bb03..0a2f824 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.html
+++ b/src/app/dashboard/more-graphs-and-tables.component.html
@@ -2,13 +2,13 @@
   <div class="card">
     <div class="card-block">
       <div class="row">
-        <div class="col-sm-7">
-          <h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
+        <div class="col-sm-8">
+          <h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
         </div>
-        <div class="col-sm-5 hidden-sm-down">
-          <input type="date" (ngModel)="bubbleChartBegin" (ngModelChange)="bubbleChartUpdate()" (change)="bubbleChartUpdate()">
+        <div class="col-sm-4 hidden-sm-down">
+          <input type="date" ([value])="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" (ngModelChange)="bubbleChartUpdate()" (change)="bubbleChartUpdate()">
+          <input type="date" ([value])="bubbleChartEnd" (change)="bubbleChartUpdate()">
         </div>
       </div>
       <div>
@@ -25,12 +25,12 @@
   <div class="card">
     <div class="card-block">
       <div class="row">
-        <div class="col-sm-7">
+        <div class="col-sm-8">
           <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 class="col-sm-4 hidden-sm-down">
+          <input type="date" ([value])="lineChartBegin" (change)="lineChartUpdate()">
+          <input type="date" ([value])="lineChartEnd" (change)="lineChartUpdate()">
         </div>
       </div>
       <div>
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts
index 42dfbaf..239afa6 100644
--- a/src/app/dashboard/more-graphs-and-tables.component.ts
+++ b/src/app/dashboard/more-graphs-and-tables.component.ts
@@ -14,17 +14,19 @@ export class MoreStuffComponent implements OnInit {
   @Input() public categories: any;
   bubbleChartBegin: any;
   bubbleChartEnd: any;
-  
+
   constructor(
     private api: ApiService,
     private currencyPipe: CurrencyPipe,
   ) {
     this.bubbleChartBegin = moment().format('YYYY-MM-DD');
     this.bubbleChartEnd = moment().format('YYYY-MM-DD');
+    this.lineChartBegin = moment().format('YYYY-MM-DD');
+    this.lineChartEnd = moment().format('YYYY-MM-DD');
   }
 
   ngOnInit(): void {
-    this.loadYearSpend();
+    this.loadYearSpend(false, ('January 1, 2018'), ('January 1, 2019'));
    this.loadSupplierBubble(false, ('January 1, 2018'), ('January 1, 2019')); // pass start and end date ranges to this as Date()s
     this.loadSupplierHistory();
   }
@@ -66,7 +68,7 @@ export class MoreStuffComponent implements OnInit {
             // there are a lot of `new Date(blah)` but that is what works for some reason.
 
             // IT WORKS!!!!!!!!!
-            
+
             console.log("item.date : " + new Date(item.date));
             console.log("start_range input box: " + start_range);
             console.log("start_range : " + new Date(start_range));
@@ -76,11 +78,11 @@ export class MoreStuffComponent implements OnInit {
             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("----------------------");
-            
+
             if (is_item_in_range) {
               graph_data.push({
                 t: item.date,
-                r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5,
+                r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
                 supplier: item.seller,
                 y: item.count,
                 value: item.value,
@@ -94,7 +96,7 @@ export class MoreStuffComponent implements OnInit {
           result.data.map(item => {
             graph_data.push({
               t: item.date,
-              r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5,
+              r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
               supplier: item.seller,
               y: item.count,
               value: item.value,
@@ -253,6 +255,17 @@ export class MoreStuffComponent implements OnInit {
     return Math.random();
   }
 
+  lineChartUpdate() {
+    console.log("start_range input box: " + this.lineChartBegin.date);
+    console.log("start_range : " + new Date(this.lineChartBegin));
+    console.log("end_range input box: " + this.lineChartEnd);
+    console.log("end_range : " + new Date(this.lineChartEnd));
+
+    this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd));
+    console.log("Bubble chart updating...");
+
+  }
+
   @ViewChild('supplierChart', {read: BaseChartDirective, static: false}) supplierChart: BaseChartDirective;
 
   private loadSupplierHistory() {
diff --git a/src/app/panels/graph-panel.component.html b/src/app/panels/graph-panel.component.html
index f01f806..6f4f35e 100644
--- a/src/app/panels/graph-panel.component.html
+++ b/src/app/panels/graph-panel.component.html
@@ -1,22 +1,9 @@
   <div class="card">
     <div class="card-block">
       <div class="row">
-        <div class="col-sm-5">
+        <div class="col-sm-12">
           <h4 class="card-title mb-0">Customers</h4>
         </div><!--/.col-->
-        <div class="col-sm-7 hidden-sm-down">
-          <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
-            <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
-              <select>
-                <option value="Day">Day</option>
-                <option value="Week">Week</option>
-                <option value="Month">Month</option>
-                <option value="Year">Year</option>
-                <option value="All Time">All Time</option>
-              </select>
-            </div>
-          </div>
-        </div>
       </div><!--/.row-->
       <div class="chart-wrapper" style="height:300px;margin-top:40px;">
         <canvas baseChart class="chart"