Merge remote-tracking branch 'origin/felix/newSection-testing' into tom/minorfixes
This commit is contained in:
Tom Slater
commit
c1e2ce73e7
14 changed files with 255 additions and 181 deletions
171
package-lock.json
generated
171
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
}
|
||||
],
|
||||
}
|
||||
|
|
|
|||
44
src/app/dashboard/more-graphs-and-tables.component.html
Normal file
44
src/app/dashboard/more-graphs-and-tables.component.html
Normal 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>
|
||||
130
src/app/dashboard/more-graphs-and-tables.component.ts
Normal file
130
src/app/dashboard/more-graphs-and-tables.component.ts
Normal 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'
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
|
|||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in a new issue