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

This commit is contained in:
Tom Slater 2019-07-10 14:00:25 +01:00
commit 71162bcce7
14 changed files with 255 additions and 181 deletions

171
package-lock.json generated
View file

@ -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",
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.54.tgz",
"integrity": "sha512-BxIUR4mfk0zOqOPEu4gxLP5herra6INQLyFmgVE6JVRNNB+r36g2cd67nDUEEdD/EShZvaR33xausxOGv1+nbw=="
"version": "2.7.55",
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.55.tgz",
"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",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.1.0.tgz",
"integrity": "sha1-nDmsgwzNmJlq6AyfEQhv8SyYp1Y=",
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
"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",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.4.0.tgz",
"integrity": "sha1-V3SNRTCuKNjbClSSGCugbf3y9Gg=",
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"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",
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.1.tgz",
"integrity": "sha512-iCMBbo4eE5rb1VCpm5qXOAaUiRKRUKiItn8ah2YQQx9qymmSAY98eyQfioChEYcVQLh0zxJ3wS4A0mh90AVPvw==",
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",
"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",

View file

@ -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",

View file

@ -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 { StackedBarChartComponent } from './panels/stacked-bar.component';
import { ChartsModule } from 'ng2-charts';
// 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,
],

View file

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

View file

@ -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'}
}
],
}

View file

@ -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>

View file

@ -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'
]
}
];
}

View file

@ -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,20 +13,20 @@
<!-- 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>LA13RB</td>
<td>£34.64</td>
<td>Tom's Tippity Top Toenails Ltd.</td>
<td>LA11LY</td>
<td>£250,000.00</td>
</tr>
<tr>
<td>Sam's Snake</td>
<td>TRY3R3</td>
<td>£567.76</td>
</tr>
<tr>
<td>Lloyds</td>
<td>ABV134</td>
<td>£9.00</td>
</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>

View file

@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
) { }
ngOnInit(): void {
}
ngAfterViewInit() {

View file

@ -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">

View file

@ -1,17 +1,13 @@
<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 style="display: block">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType">
</canvas>
</div>
</div>
<div class"chart-wrapper">
<canvas baseChart class="chart"
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType"></canvas>
</div>
</div>
</div>
</div>

View file

@ -95,4 +95,4 @@ export class BubbleChartComponent implements OnInit {
const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30));
this.bubbleChartData[0].data = data;
}
}
}