Merge commit '2998f0b3da1a7189fcd35b5b76bbeb42e7ed41e9' into felix/newSection-testing

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

@@ -12,7 +12,7 @@
   </div><!--/.row-->
   <div class=row>
     <div class="col-xl-6">
-      <panel-pie></panel-pie> --><!--All Purchases -->
+      <panel-pie></panel-pie><!--All Purchases -->
       <!-- <div class="demo-container" ng-app="stacked-bar" ng-controller="stacked-bar">
           <div id="stacked-bar" dx-chart="chartOptions"></div>
       </div> -->
@@ -34,8 +34,7 @@
                 [legend]="chartLegend"
                 [chartType]="chartType"
                 (chartHover)="chartHovered($event)"
-                (chartClick)="chartClicked($event)">
+                (chartClick)="chartClicked($event)"></canvas>
-              </canvas>
               </div>
             </div>
           <!-- </body> -->
@@ -149,6 +148,16 @@
               <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 *ngIf="showTotalCategoryList" class="chart-wrapper">
             <ul class="icons-list">
               <!-- New loop  -->

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

@@ -30,7 +30,7 @@ export class DashboardCustomerComponent implements OnInit {
   public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
 'bg-danger', 'bg-warning', 'bg-info'];
 
-  public chartType = 'polarArea';
+  public chartType = 'doughnut';
   public chartLegend = true;
   public doughnutChartDataCategory: any[] = [];
   public doughnutChartLabelsCategory: string[] = [];
@@ -150,7 +150,9 @@ export class DashboardCustomerComponent implements OnInit {
         this.setWeekData(result);
         this.setChartData(result.data.cat_total);
         this.totalCategoryList = result.data.cat_list;
+        if (this.totalCategoryList) {
           this.showTotalCategoryList = true;
+        }
         this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
         this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
         this.barChartDataEssential = [

src/app/dashboard/dashboard.routing.ts

@@ -18,7 +18,6 @@ import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
 import { TrailMapComponent } from './trail-map.component';
 import { SuppliersComponent } from './suppliers.component';
-
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

src/app/dashboard/leaderboard.component.html

@@ -24,7 +24,7 @@
               <tr>
                 <th>Position</th>
                 <th>Name</th>
-                <th>Amount</th>
+                <th class="js-sort-number">Gross amount</th>
               </tr>
             </thead>
             <tbody>

src/app/dashboard/suppliers.component.html

@@ -1,3 +1,4 @@
+<script type="text/javascript" charset="utf8" src="/home/tomslater/Documents/FoodLoop-Web/src/sort-table.js"></script>
 <div class="animated fadeIn">
   <div class="form-group row">
     <table class="table table-striped table-hover">
@@ -11,23 +12,22 @@
       <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>
+        <tr>
-          <td>Supplier's Name</td>
+          <td>Bill's Building's</td>
-          <td>Supplier's Postcode</td>
+          <td>LA13RB</td>
-          <td>Supplier's Spend</td>
+          <td>£34.64</td>
         </tr>
         <tr>
-            <td>Supplier 2's Name</td>
+            <td>Sam's Snake</td>
-            <td>Supplier 2's Postcode</td>
+            <td>TRY3R3</td>
-            <td>Supplier 2's Spend</td>
+            <td>£567.76</td>
           </tr>
           <tr>
-              <td>Supplier 3's Name</td>
+              <td>Lloyds</td>
-              <td>Supplier 3's Postcode</td>
+              <td>ABV134</td>
-              <td>Supplier 3's Spend</td>
+              <td>£9.00</td>
             </tr>
-      </tbody> -->
+      </tbody>
     </table>
   </div>
-</div>
+</div><!--/.col-->
-      

src/app/panels/bubble-panel.html

@@ -0,0 +1,17 @@
+<div class="card">
+  <div class="card-block">
+    <div class="row">
+      <div class="col-12">
+        <h4 class="card-title mb-0">Spend by company and sector</h4>
+      </div>
+    </div>
+    <div class"chart-wrapper">
+      <canvas baseChart class="chart"
+      [datasets]="bubbleChartData"
+      [options]="bubbleChartOptions"
+      [colors]="bubbleChartColors"
+      [legend]="bubbleChartLegend"
+      [chartType]="bubbleChartType"></canvas>
+    </div>
+  </div>
+</div>

src/app/panels/bubble-panel.ts

@@ -0,0 +1,98 @@
+import { Component, OnInit } from '@angular/core';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Color } from 'ng2-charts';
+
+@Component({
+  selector: 'app-bubble-chart',
+  templateUrl: './bubble-chart.component.html',
+  styleUrls: ['./bubble-chart.component.scss']
+})
+export class BubbleChartComponent implements OnInit {
+  public bubbleChartOptions: ChartOptions = {
+    responsive: true,
+    scales: {
+      xAxes: [
+        {
+          ticks: {
+            min: 0,
+            max: 30,
+          }
+        }
+      ],
+      yAxes: [
+        {
+          ticks: {
+            min: 0,
+            max: 30,
+          }
+        }
+      ]
+    }
+  };
+  public bubbleChartType: ChartType = 'bubble';
+  public bubbleChartLegend = true;
+
+  public bubbleChartData: ChartDataSets[] = [
+    {
+      data: [
+        { x: 10, y: 10, r: 10 },
+        { x: 15, y: 5, r: 15 },
+        { x: 26, y: 12, r: 23 },
+        { x: 7, y: 8, r: 8 },
+      ],
+      label: 'Series A',
+      backgroundColor: 'green',
+      borderColor: 'blue',
+      hoverBackgroundColor: 'purple',
+      hoverBorderColor: 'red',
+    },
+  ];
+
+  public bubbleChartColors: Color[] = [
+    {
+      backgroundColor: [
+        'red',
+        'green',
+        'blue',
+        'purple',
+        'yellow',
+        'brown',
+        'magenta',
+        'cyan',
+        'orange',
+        'pink'
+      ]
+    }
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  // events
+  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
+    console.log(event, active);
+  }
+
+  public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
+    console.log(event, active);
+  }
+
+  private rand(max: number) {
+    return Math.trunc(Math.random() * max);
+  }
+
+  private randomPoint(maxCoordinate: number) {
+    const x = this.rand(maxCoordinate);
+    const y = this.rand(maxCoordinate);
+    const r = this.rand(30) + 5;
+    return { x, y, r };
+  }
+
+  public randomize(): void {
+    const numberOfPoints = this.rand(5) + 5;
+    const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30));
+    this.bubbleChartData[0].data = data;
+  }
+}

src/app/panels/pie-panel.component.ts

@@ -12,7 +12,7 @@ import { ChartData } from '../_interfaces/chart-data';
 
 export class PiePanel implements OnInit {
 
-  public chartType = 'panel-pie';
+  public chartType = 'doughnut';
   public chartLegend = true;
   public doughnutChartDataLocal: number[] = [];
   public doughnutChartLabelsLocal: string[] = [];

src/scss/_custom.scss

@@ -73,7 +73,9 @@ agm-map {
         margin-bottom: 2px;
       }
     }
-
+    .small {
+      padding-left: 20px;
+    }
     &.legend {
       text-align: center;