wip all purchases

src/app/dashboard/dashboard-customer.component.html

@@ -150,7 +150,7 @@
           </div><!--/.row-->
           <div class="chart-wrapper">
             <canvas baseChart class="chart"
-            [datasets]="barChartDataCategory"
+            [datasets]="barChartDataCategoryAll"
             [labels]="barChartLabelsCategory"
             [options]="barChartOptionsCategory"
             [legend]="barChartLegendCategory"

src/app/dashboard/dashboard-customer.component.ts

@@ -100,6 +100,7 @@ export class DashboardCustomerComponent implements OnInit {
   public barChartLegendCategory:boolean = false;
   public barChartDataCategory:any[]=[];
   public barChartLabelsCategory:string[] = [];
+  public barChartDataCategoryAll:any[]=[];
 
 
 

src/app/dashboard/dashboard.component.html

@@ -75,4 +75,105 @@
     <div class="col-xl-6">
       <org-pie-panel></org-pie-panel>
     </div>
+    <div class="col-xl-6">
+      <div class="card">
+        <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title mb-0">Monthly Spending by Category</h4>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <canvas baseChart
+            [datasets]="barChartDataCategory"
+            [labels]="barChartLabelsCategory"
+            [options]="barChartOptionsCategory"
+            [legend]="barChartLegendCategory"
+            [chartType]="barChartTypeCategory"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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">Weekly Purchase No.</h4>
+            </div><!--/.col-->
+          </div><!--/.row-->
+          <div class="chart-wrapper">
+            <ul class="horizontal-bars type-2">
+              <li>
+                <span class="title">This Week</span>
+                <span class="value">{{ (weekPurchaseList.first  || 0 ) }} <span class="text-muted small">
+                  ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    [style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <span class="title">Last Week</span>
+                <span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
+                  ({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    [style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <span class="title">Week Maximum</span>
+                <span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
+                  (100%)</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <span class="title">Weekly Average</span>
+                <span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0  | number:'1.0-0'}} <span class="text-muted small">
+                  ({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
+                <div class="bars">
+                  <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-success" role="progressbar"
+                    [style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+            <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">All Purchases by Category</h4>
+                    </div><!--/.col-->
+                  </div><!--/.row-->
+                  <div class="chart-wrapper">
+                    <canvas baseChart class="chart"
+                    [datasets]="barChartDataCategoryAll"
+                    [labels]="barChartLabelsCategoryAll"
+                    [options]="barChartOptionsCategoryAll"
+                    [legend]="barChartLegendCategoryAll"
+                    [chartType]="barChartTypeCategoryAll"
+                    (chartHover)="chartHovered($event)"
+                    (chartClick)="chartClicked($event)"></canvas>
+                  </div>
+                </div>
+              </div>
+            </div>
 </div>

src/app/dashboard/dashboard.component.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 import { Router, NavigationEnd } from "@angular/router";
 import { CurrencyPipe } from '@angular/common';
-import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
-import { Color, Label } from 'ng2-charts';
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
 import { GraphPanel } from '../panels/graph-panel.component';
@@ -68,6 +66,7 @@ export class DashboardComponent {
   public doughnutChartDataCategory: any[] = [];
   public doughnutChartLabelsCategory: string[] = [];
 
+
   public doughnutChartOptionsCategory:any = {
     tooltips: {
       callbacks: {
@@ -130,6 +129,12 @@ export class DashboardComponent {
   public barChartDataCategory:any[]=[];
   public barChartLabelsCategory:string[] = [];
 
+  public barChartDataCategoryAll:string = 'bar'
+  public barChartLegendCategoryAll:boolean = false;
+  public barChartDataCategoryAll:any[]=[];
+  public barChartLabelsCategoryAll:string[] = [];
+
+
   public lineChartDataSector: ChartDataSets[] = [
     { data: [], label: '' },
   ];
@@ -238,6 +243,23 @@ export class DashboardComponent {
     );
   }
 
+    private setChartDataCat(dataCat: any) {
+      this.barChartLabelsCategoryAll = Object.keys(dataCat);
+      let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
+      this.barChartDataCategoryAll = [
+        {data: barChartDataCategoryInitial, label: 'Series A'},
+      ];
+      this.showCategoryBarChart = true;
+      if (this.weekList1) {
+        let n = this.weekList1.map(function(a) {return a.value;});
+        this.doughnutChartDataCategory = [
+          {data: doughnutChartDataCategoryInitial, label: 'Series A'},
+        ];
+        // setTimeout is currently a workaround for ng2-charts labels
+        setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
+        this.showCategoryDoughnutChart = true;
+      }
+    }
   private setChartDataCat(dataCat: any) {
     this.barChartLabelsCategory = Object.keys(dataCat);
     let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
@@ -246,7 +268,7 @@ export class DashboardComponent {
     ];
     this.showCategoryBarChart = true;
     if (this.weekList1) {
-      let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;});
+      let n = this.weekList1.map(function(a) {return a.value;});
       this.doughnutChartDataCategory = [
         {data: doughnutChartDataCategoryInitial, label: 'Series A'},
       ];
@@ -260,7 +282,7 @@ export class DashboardComponent {
     this.barChartLabelsCategory = Object.keys(dataSec);
     let lineChartDataSectorInitial = Object.keys(dataSec).map(key => dataSec[key]);
     this.lineChartDataSector = [
-      {data: lineChartDataSectorInitial, label: 'Series A'},
+      {data: barChartDataCategoryInitial, label: 'Series A'},
     ];
     this.showCategoryBarChart = true;
     if (this.weekList1) {

src/app/dashboard/suppliers.component.html

@@ -1,33 +1,39 @@
 <script type="text/javascript" charset="utf8" src=""></script>
 <div class="animated fadeIn">
-  <div class="form-group row">
-    <table class="table table-striped table-hover">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Postcode</th>
-          <th>Spend</th>
-        </tr>
-      </thead>
-      <tbody>
+  <div class="card">
+    <div class="card-header">
+      <strong>List of Suppliers</strong>
+      <small>This lists all suppliers, their postcode and spend.</small>
+    </div>
+    <div class="card-block">
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Postcode</th>
+            <th>Spend</th>
+          </tr>
+        </thead>
+        <tbody>
         <!-- table body - name, postcode and spend data should be presented here in cost descending order -->
-        <tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
-        <tr>
-          <td>Tom's Tippity Top Toenails Ltd.</td>
-          <td>LA11LY</td>
-          <td>£250,000.00</td>
-        </tr>
-        <tr>
-          <td>Selena's Scratching Sticks Inc.</td>
-          <td>WS15PQ</td> 
-          <td>£5.00</td>
-        </tr>
-        <tr>
-          <td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
-          <td>PF43RD</td>
-          <td>£22.00</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div><!--/.col-->
+          <tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
+          <tr>
+            <td>Tom's Tippity Top Toenails Ltd.</td>
+            <td>LA11LY</td>
+            <td>£250,000.00</td>
+          </tr>
+          <tr>
+            <td>Selena's Scratching Sticks Inc.</td>
+            <td>WS15PQ</td>
+            <td>£5.00</td>
+          </tr>
+          <tr>
+            <td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
+            <td>PF43RD</td>
+            <td>£22.00</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div><!--/.col-->
+</div>

src/scss/bootstrap/utilities/_spacing.scss

@@ -26,7 +26,7 @@
     // Some special margin utils
     .m#{$infix}-auto  { margin:        auto !important; }
     .mt#{$infix}-auto { margin-top:    auto !important; }
-    .mr#{$infix}-auto { margin-right:  auto !important; }
+    .mr#{$infix}-auto { margin-right:  20px !important; }
     .mb#{$infix}-auto { margin-bottom: auto !important; }
     .ml#{$infix}-auto { margin-left:   auto !important; }
     .mx#{$infix}-auto {