Merge remote-tracking branch 'origin/felix/newSection-testing' into tom/minorfixes

package-lock.json

@@ -343,41 +343,6 @@
         "uuid": "^3.3.2"
       },
       "dependencies": {
-        "@angular-devkit/architect": {
-          "version": "0.801.0",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.801.0.tgz",
-          "integrity": "sha512-3EQtRfa5IL2aVWPLr17QNwCoh+0URuQd4t2cEPw0eqfNNSQxjNKcA8AUvpXU+YNvstZ46lSzbM9q/RekJGeA1A==",
-          "dev": true,
-          "requires": {
-            "@angular-devkit/core": "8.1.0",
-            "rxjs": "6.4.0"
-          }
-        },
-        "@angular-devkit/core": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.1.0.tgz",
-          "integrity": "sha512-Xdtkrs62WMMR1BnSfpBvwjapRYalvArewAi7NXo0QxIFWPhQGbgSqT5PJMie4V3vHHNMbcC9cPzjKGjwwF8FHw==",
-          "dev": true,
-          "requires": {
-            "ajv": "6.10.0",
-            "fast-json-stable-stringify": "2.0.0",
-            "magic-string": "0.25.3",
-            "rxjs": "6.4.0",
-            "source-map": "0.7.3"
-          }
-        },
-        "ajv": {
-          "version": "6.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
-          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ansi-colors": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.0.tgz",
@@ -393,62 +358,17 @@
             "ms": "^2.1.1"
           }
         },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-          "dev": true
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-          "dev": true
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         },
-        "open": {
-          "version": "6.4.0",
-          "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
-          "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
-          "dev": true,
-          "requires": {
-            "is-wsl": "^1.1.0"
-          }
-        },
-        "rxjs": {
-          "version": "6.4.0",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.4.0.tgz",
-          "integrity": "sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.9.0"
-          }
-        },
         "semver": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.2.0.tgz",
           "integrity": "sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        },
-        "uri-js": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-          "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-          "dev": true,
-          "requires": {
-            "punycode": "^2.1.0"
-          }
         }
       }
     },
@@ -822,43 +742,6 @@
         "semver-intersect": "1.4.0"
       },
       "dependencies": {
-        "@angular-devkit/core": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.1.0.tgz",
-          "integrity": "sha512-Xdtkrs62WMMR1BnSfpBvwjapRYalvArewAi7NXo0QxIFWPhQGbgSqT5PJMie4V3vHHNMbcC9cPzjKGjwwF8FHw==",
-          "dev": true,
-          "requires": {
-            "ajv": "6.10.0",
-            "fast-json-stable-stringify": "2.0.0",
-            "magic-string": "0.25.3",
-            "rxjs": "6.4.0",
-            "source-map": "0.7.3"
-          }
-        },
-        "ajv": {
-          "version": "6.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
-          "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^2.0.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-          "dev": true
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-          "dev": true
-        },
         "rxjs": {
           "version": "6.4.0",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.4.0.tgz",
@@ -873,28 +756,13 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.2.0.tgz",
           "integrity": "sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        },
-        "uri-js": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-          "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-          "dev": true,
-          "requires": {
-            "punycode": "^2.1.0"
-          }
         }
       }
     },
     "@types/chart.js": {
-      "version": "2.7.54",
+      "version": "2.7.55",
-      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.54.tgz",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.55.tgz",
-      "integrity": "sha512-BxIUR4mfk0zOqOPEu4gxLP5herra6INQLyFmgVE6JVRNNB+r36g2cd67nDUEEdD/EShZvaR33xausxOGv1+nbw=="
+      "integrity": "sha512-CACGbxPkr0vcyrZFpDAr4dqpfgu/PiHWzsKAhXdY+g72Laebjn/dijr7ExwVv9JS/99KrhtKmfJ0vBEhPTJBTQ=="
     },
     "@types/events": {
       "version": "3.0.0",
@@ -2274,11 +2142,11 @@
       "integrity": "sha512-aoAzpf9KuoDH+4qwj13gx6NOKcwJkgDQrOvIIoaO1e7LR/XXeNlDbDUMnkptmuIfIaqllZQSnR2cNa8vYWd1gw=="
     },
     "chartjs-color": {
-      "version": "2.1.0",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
-      "integrity": "sha1-nDmsgwzNmJlq6AyfEQhv8SyYp1Y=",
+      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
       "requires": {
-        "chartjs-color-string": "^0.4.0",
+        "chartjs-color-string": "^0.6.0",
         "color-convert": "^0.5.3"
       },
       "dependencies": {
@@ -2290,9 +2158,9 @@
       }
     },
     "chartjs-color-string": {
-      "version": "0.4.0",
+      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
-      "integrity": "sha1-V3SNRTCuKNjbClSSGCugbf3y9Gg=",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
       "requires": {
         "color-name": "^1.0.0"
       }
@@ -3425,6 +3293,11 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "emitter-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
+      "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
+    },
     "emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -6440,9 +6313,9 @@
       }
     },
     "jszip": {
-      "version": "3.2.1",
+      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",
-      "integrity": "sha512-iCMBbo4eE5rb1VCpm5qXOAaUiRKRUKiItn8ah2YQQx9qymmSAY98eyQfioChEYcVQLh0zxJ3wS4A0mh90AVPvw==",
+      "integrity": "sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==",
       "requires": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -9927,6 +9800,14 @@
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
       "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
     },
+    "stream": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.2.tgz",
+      "integrity": "sha1-f1Nj8Ff2WSxVlfALyAon9c7B8O8=",
+      "requires": {
+        "emitter-component": "^1.1.1"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",

package.json

@@ -40,14 +40,16 @@
     "jasmine": "^3.4.0",
     "jquery": "^3.3.1",
     "js-marker-clusterer": "1.0.0",
+    "jszip": "^3.2.2",
     "luxon": "^1.16.1",
     "moment": "^2.24.0",
-    "ng2-charts": "2.3.0",
+    "ng2-charts": "^2.3.0",
     "ng2-validation-manager": "0.5.3",
     "ngx-bootstrap": "^5.0.0",
     "ngx-pagination": "^4.0.0",
     "popper.js": "^1.15.0",
     "rxjs": "6.5.2",
+    "stream": "0.0.2",
     "ts-helpers": "1.1.2",
     "tslib": "^1.10.0",
     "web-animations-js": "^2.3.2",

src/app/app.module.ts

@@ -40,9 +40,10 @@ import { P500Component } from './pages/500.component';
 import { AuthModule } from './auth/auth.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 
-import { DxChartModule } from 'devextreme-angular';
+import { ChartsModule } from 'ng2-charts';
-import { StackedBarChartComponent } from './panels/stacked-bar.component';
+// import { StackedBarChartComponent } from './panels/stacked-bar.component';
 import { SuppliersComponent } from './dashboard/suppliers.component';
+import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
 
 
 
@@ -50,18 +51,18 @@ import { SuppliersComponent } from './dashboard/suppliers.component';
   imports: [
     BrowserModule,
     HttpClientModule,
-    DxChartModule,
     NgxPaginationModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     AuthModule,
+    ChartsModule,
     DashboardModule,
     // Loaded last to allow for 404 catchall
     AppRoutingModule,
   ],
   declarations: [
     AppComponent,
-    StackedBarChartComponent,
+    // StackedBarChartComponent,
     FullLayoutComponent,
     SimpleLayoutComponent,
     NAV_DROPDOWN_DIRECTIVES,
@@ -69,6 +70,7 @@ import { SuppliersComponent } from './dashboard/suppliers.component';
     SIDEBAR_TOGGLE_DIRECTIVES,
     AsideToggleDirective,
     SuppliersComponent,
+    MoreStuffComponent,
     P404Component,
     P500Component,
   ],

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

@@ -8,8 +8,12 @@ import { PiePanel } from '../panels/pie-panel.component';
 import { DataType } from '../shared/data-types.enum';
 import * as moment from 'moment';
 import { SuppliersComponent } from '../dashboard/suppliers.component';
-import { StackedBarChartComponent } from '../panels/stacked-bar.component';
+import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component';
+// import { StackedBarChartComponent } from '../panels/stacked-bar.component';
 
+interface RecurSupplierData {
+  name : string;
+}
 
 @Component({
   templateUrl: 'dashboard-customer.component.html'

src/app/dashboard/dashboard.routing.ts

@@ -17,7 +17,9 @@ import { PayrollLogComponent } from './payroll-log.component';
 import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
 import { TrailMapComponent } from './trail-map.component';
+import { MoreStuffComponent } from './more-graphs-and-tables.component';
 import { SuppliersComponent } from './suppliers.component';
+
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
@@ -89,6 +91,11 @@ const routes: Routes = [
         path: 'suppliers',
         component: SuppliersComponent,
         data: { title: 'Suppliers' }
+      },
+      {
+        path: 'more-graphs-and-tables',
+        component: MoreStuffComponent,
+        data: { title: 'More Stuff'}
       }
     ],
   }

src/app/dashboard/more-graphs-and-tables.component.html

@@ -0,0 +1,44 @@
+<script src="node_modules/chart.js/src/chart.js"></script>
+<!--
+  <div class="form-group row">
+    <div class="card-block">
+        <div class="row">
+          <div class="col-12">
+            <h4 class="card-title mb-0">Spend by Industrial Sector</h4>
+          </div>
+        </div>
+        <div style="display: block">
+            <canvas baseChart
+              [datasets]="sampleBubbleChartData"
+              [options]="sampleBubbleChartOptions"
+              [colors]="sampleBubbleChartColors"
+              [legend]="sampleBubbleChartLegend"
+              [chartType]="sampleBubbleChartType">
+            </canvas>
+          </div>
+      </div>
+  </div>
+</div>-->
+<div class="animated fadeIn">
+  <!-- <div class="form-group row"> -->
+    <div class="card">
+      <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title mb-0">Spend by Region</h4>
+              </div>
+            </div>
+            <div style="display: block">
+                <canvas baseChart
+                  [datasets]="bubbleChartDataCategory"
+                  [options]="bubbleChartOptionsCategory"
+                  [colors]="sampleBubbleChartColors"
+                  [labels]="bubbleChartLabelsCategory"
+                  [legend]="chartLegend"
+                  [chartType]="chartType"> <!--bootstrapColours-->
+                </canvas>
+          </div>
+        </div>
+    </div>
+  <!-- </div> -->
+</div>

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -0,0 +1,130 @@
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
+import { ApiService } from '../providers/api-service';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Color } from 'ng2-charts';
+import { CurrencyPipe } from '@angular/common';
+import { DataType } from '../shared/data-types.enum';
+import * as moment from 'moment';
+import { BubbleChartComponent } from '../panels/bubble-panel';
+import { AgmCoreModule } from '@agm/core';
+import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+
+// interface RecurSupplierData {
+//   name : string;
+// }
+
+@Component({
+  templateUrl: 'more-graphs-and-tables.component.html',
+})
+export class MoreStuffComponent implements OnInit {  // if you wanna rename this, replace in all files 'MoreStuffComponent' with desired name and 'more-graphs-and-tables.component' with another desired name
+  // @Input() public recurList: Array<RecurSupplierData>;
+  @Output() public onClick = new EventEmitter();
+  @Input() public categories: any;
+
+  public recurClick(event: any): void {
+    this.onClick.emit( event );
+  }
+
+  constructor(
+    private api: ApiService,
+    private currencyPipe: CurrencyPipe,
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  // main vars
+
+  public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
+  'bg-danger', 'bg-warning', 'bg-info'];
+
+  // REAL chart data
+
+  public chartType = 'bubble';
+  public chartLegend = true;
+  public bubbleChartDataCategory: any[] = [];
+  public bubbleChartLabelsCategory: string[] = [];
+
+  public bubbleChartOptionsCategory:any = {
+    tooltips: {
+      callbacks: {
+        label: (tooltip, data) => {
+          return this.tooltipLabelCallback(tooltip, data);
+        },
+      },
+    },
+  }
+
+  private setChartData(dataCat: any) {
+    // now we just need some data and it will display!
+  }
+
+  // functions
+
+  private tooltipLabelCallback(tooltipItem: any, data: any) {
+    var dataset = data.datasets[tooltipItem.datasetIndex];
+    var value = dataset.data[tooltipItem.index];
+    return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2');
+  }
+
+  // SAMPLE chart data
+  
+  public sampleBubbleChartOptions: ChartOptions = {
+    responsive: true,
+    scales: {
+      xAxes: [
+        {
+          ticks: {
+            min: 0,
+            max: 30,
+          }
+        }
+      ],
+      yAxes: [
+        {
+          ticks: {
+            min: 0,
+            max: 30,
+          }
+        }
+      ]
+    }
+  };
+  public sampleBubbleChartType: ChartType = 'bubble';
+  public sampleBubbleChartLegend = true;
+
+  public sampleBubbleChartData: 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 sampleBubbleChartColors: Color[] = [
+    {
+      backgroundColor: [
+        'red',
+        'green',
+        'blue',
+        'purple',
+        'yellow',
+        'brown',
+        'magenta',
+        'cyan',
+        'orange',
+        'pink'
+      ]
+    }
+  ];
+}
+

src/app/dashboard/suppliers.component.html

@@ -1,4 +1,4 @@
-<script type="text/javascript" charset="utf8" src="/home/tomslater/Documents/FoodLoop-Web/src/sort-table.js"></script>
+<script type="text/javascript" charset="utf8" src=""></script>
 <div class="animated fadeIn">
   <div class="form-group row">
     <table class="table table-striped table-hover">
@@ -13,19 +13,19 @@
         <!-- 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>Bill's Building's</td>
+          <td>Tom's Tippity Top Toenails Ltd.</td>
-          <td>LA13RB</td>
+          <td>LA11LY</td>
-          <td>£34.64</td>
+          <td>£250,000.00</td>
         </tr>
         <tr>
-            <td>Sam's Snake</td>
+          <td>Selena's Scratching Sticks Inc.</td>
-            <td>TRY3R3</td>
+          <td>WS15PQ</td> 
-            <td>£567.76</td>
+          <td>£5.00</td>
         </tr>
         <tr>
-              <td>Lloyds</td>
+          <td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
-              <td>ABV134</td>
+          <td>PF43RD</td>
-              <td>£9.00</td>
+          <td>£22.00</td>
         </tr>
       </tbody>
     </table>

src/app/layouts/full-layout.component.html

@@ -102,6 +102,14 @@
               </div>
             </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">

src/app/panels/bubble-panel.html

@@ -1,17 +1,13 @@
-<div class="card">
+<div>
-  <div class="card-block">
+    <div>
-    <div class="row">
+      <div style="display: block">
-      <div class="col-12">
+        <canvas baseChart
-        <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>
+          [chartType]="bubbleChartType">
+        </canvas>
+      </div>
     </div>
   </div>
-</div>