Unfinished Company Component

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']

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,

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>

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,

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');

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>

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) {