Added WIP All purchases chart

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]="barChartDataCategory"
+                    [labels]="barChartLabelsCategory"
+                    [options]="barChartOptionsCategory"
+                    [legend]="barChartLegendCategory"
+                    [chartType]="barChartTypeCategory"
+                    (chartHover)="chartHovered($event)"
+                    (chartClick)="chartClicked($event)"></canvas>
+                  </div>
+                </div>
+              </div>
+            </div>
 </div>

src/app/dashboard/dashboard.component.ts

@@ -130,6 +130,7 @@ export class DashboardComponent {
   public barChartDataCategory:any[]=[];
   public barChartLabelsCategory:string[] = [];
 
+
   public lineChartDataSector: ChartDataSets[] = [
     { data: [], label: '' },
   ];

src/app/dashboard/suppliers.component.html

@@ -1,6 +1,11 @@
 <script type="text/javascript" charset="utf8" src=""></script>
 <div class="animated fadeIn">
-  <div class="form-group row">
+  <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>
@@ -30,4 +35,5 @@
         </tbody>
       </table>
     </div>
-</div><!--/.col-->
+  </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 {