From 630beeb5d0341813362b0738a346b335c1f3254f Mon Sep 17 00:00:00 2001
From: Tom Slater <tslater366@gmail.com>
Date: Thu, 11 Jul 2019 15:17:50 +0100
Subject: [PATCH] Unfinished Company Component

---
 karma.conf.js                                 |  5 ++-
 src/app/app.module.ts                         |  2 +-
 .../dashboard-customer.component.html         | 39 +++++++++++++++++++
 .../dashboard/dashboard-customer.component.ts |  2 +
 .../dashboard/transaction-log.component.ts    |  1 +
 src/app/layouts/full-layout.component.html    | 30 +++++++-------
 ...panel.html => bubble-panel.component.html} |  0
 ...ble-panel.ts => bubble-panel.component.ts} |  0
 src/app/providers/api-service.ts              | 21 ++++++++++
 9 files changed, 82 insertions(+), 18 deletions(-)
 rename src/app/panels/{bubble-panel.html => bubble-panel.component.html} (100%)
 rename src/app/panels/{bubble-panel.ts => bubble-panel.component.ts} (100%)

diff --git a/karma.conf.js b/karma.conf.js
index 056b4e9..02b3582 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -7,6 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
+      require("readable-stream");
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
@@ -16,10 +17,10 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     files: [
-      
+
     ],
     preprocessors: {
-      
+
     },
     mime: {
       'text/x-typescript': ['ts','tsx']
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5dac1a3..36f8a7f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,7 +46,6 @@ import { SuppliersComponent } from './dashboard/suppliers.component';
 import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
 
 
-
 @NgModule({
   imports: [
     BrowserModule,
@@ -73,6 +72,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component
     MoreStuffComponent,
     P404Component,
     P500Component,
+
   ],
   providers: [
     AuthGuard,
diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html
index c18993a..7f7abc9 100644
--- a/src/app/dashboard/dashboard-customer.component.html
+++ b/src/app/dashboard/dashboard-customer.component.html
@@ -179,5 +179,44 @@
         </div>
       </div>
     </div><!--/.col-->
+    <div class="col-xl-6">
+      <div class="card">
+        <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title float-left mb-0">Spend by company and industrial sector</h4>
+            </div><!--/.col-->
+          </div><!--/.row-->
+          <div class="chart-wrapper">
+            <canvas baseChart class="chart"
+            [datasets]="barChartDataCategory"
+            [labels]="barChartLabelsCategory"
+            [options]="barChartOptionsCategory"
+            [legend]="barChartLegendCategory"
+            [chartType]="barChartTypeCategory"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+          </div>
+          <div *ngIf="showTotalCategoryList" class="chart-wrapper">
+            <ul class="icons-list">
+              <!-- New loop  -->
+              <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
+                <i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
+                <div class="desc">
+                  <div class="title">{{ category.category || 'N/A' }}</div>
+                </div>
+                <div class="value">
+                  <div class="small text-muted">Bought</div>
+                  <strong>{{ category.value || 'N/A' }}</strong>
+                </div>
+              </li>
+              <li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
+                <button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div><!--/.col-->
   </div><!--/.row-->
 </div>
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index caf631f..0295a7e 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -101,6 +101,8 @@ export class DashboardCustomerComponent implements OnInit {
   public barChartDataCategory:any[]=[];
   public barChartLabelsCategory:string[] = [];
 
+
+
   weekPurchaseList = {
     first: 0,
     second: 0,
diff --git a/src/app/dashboard/transaction-log.component.ts b/src/app/dashboard/transaction-log.component.ts
index 50a33b1..fcd290c 100644
--- a/src/app/dashboard/transaction-log.component.ts
+++ b/src/app/dashboard/transaction-log.component.ts
@@ -87,6 +87,7 @@ export class TransactionLogComponent implements OnInit {
     );
   }
 
+
   recurringTransactionDetails(clicked, template: TemplateRef<any>) {
     this.clickedRecur = clicked;
     this.updatedTime = moment(this.clickedRecur.display_time, 'llll').format('YYYY-MM-DD[T]HH:mm');
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index c4369e8..26a4ed9 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -103,21 +103,21 @@
             </a>
           </li>
           <li class="nav-item">
-              <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
-                <div class="row no-gutters align-items-center">
-                  <div class="col-2"><i class="icon-map"></i></div>
-                  <div class="col-10">More Stuff</div>
-                </div>
-              </a>
-            </li>
-        <li  *ngIf="accountType == 'organisation'" class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
-            <div class="row no-gutters align-items-center">
-              <div class="col-2"><i class="icon-basket"></i></div>
-              <div class="col-10">Payroll Log</div>
-            </div>
-          </a>
-        </li>
+            <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
+              <div class="row no-gutters align-items-center">
+                <div class="col-2"><i class="icon-map"></i></div>
+                <div class="col-10">Bubble Charts</div>
+              </div>
+            </a>
+          </li>
+          <li  *ngIf="accountType == 'organisation'" class="nav-item">
+            <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
+              <div class="row no-gutters align-items-center">
+                <div class="col-2"><i class="icon-basket"></i></div>
+                <div class="col-10">Payroll Log</div>
+              </div>
+            </a>
+          </li>
       </ul>
     </nav>
   </div>
diff --git a/src/app/panels/bubble-panel.html b/src/app/panels/bubble-panel.component.html
similarity index 100%
rename from src/app/panels/bubble-panel.html
rename to src/app/panels/bubble-panel.component.html
diff --git a/src/app/panels/bubble-panel.ts b/src/app/panels/bubble-panel.component.ts
similarity index 100%
rename from src/app/panels/bubble-panel.ts
rename to src/app/panels/bubble-panel.component.ts
diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts
index 61508c1..c89bbe0 100644
--- a/src/app/providers/api-service.ts
+++ b/src/app/providers/api-service.ts
@@ -133,6 +133,27 @@ export class ApiService {
     );
   }
 
+  // LCC data
+  public externalTransactions() {
+    const key = this.sessionKey;
+    return this.http.post<any>(
+      this.apiUrl + '/v1/organisation/external/transactions',
+      {
+        session_key : key,
+      }
+    );
+  }
+
+  public externalSuppliers() {
+    const key = this.sessionKey;
+    return this.http.post<any>(
+      this.apiUrl + '/organisation/external/suppliers',
+      {
+        session_key : key,
+      }
+    );
+  }
+
   // Searches organisations used for transaction submission
 
   public search(data) {