From d150441aa17d8d8a9de8761062eeeab3591a9b31 Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 9 Jul 2019 12:22:03 +0100 Subject: [PATCH 1/8] required packages updated --- package-lock.json | 151 +++++----------------------------------------- package.json | 2 + 2 files changed, 18 insertions(+), 135 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2600fea..840a283 100644 --- a/package-lock.json +++ b/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,21 +756,6 @@ "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" - } } } }, @@ -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", diff --git a/package.json b/package.json index b397f2c..3f24af8 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "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", @@ -48,6 +49,7 @@ "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", From c98a098ae9e1945d445947eb53f3d9ac70056b65 Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 9 Jul 2019 12:59:56 +0100 Subject: [PATCH 2/8] Corrected grammar lol --- src/app/dashboard/suppliers.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index 1165fb3..b0a29f2 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -13,7 +13,7 @@ - Bill's Building's + Bill's Buildings LA13RB £34.64 From 46d2ed7ad85b59d1e53306ddfa5b0947df2dc068 Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 9 Jul 2019 14:22:19 +0100 Subject: [PATCH 3/8] Made a new section as per TomS's request :-) --- src/app/app.module.ts | 2 ++ src/app/dashboard/dashboard.routing.ts | 7 ++++ .../more-graphs-and-tables.component.html | 33 +++++++++++++++++ .../more-graphs-and-tables.component.ts | 35 +++++++++++++++++++ src/app/dashboard/suppliers.component.ts | 2 +- src/app/layouts/full-layout.component.html | 8 +++++ 6 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/app/dashboard/more-graphs-and-tables.component.html create mode 100644 src/app/dashboard/more-graphs-and-tables.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ab6f003..1f44ff4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -43,6 +43,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; import { DxChartModule } from 'devextreme-angular'; import { StackedBarChartComponent } from './panels/stacked-bar.component'; import { SuppliersComponent } from './dashboard/suppliers.component'; +import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component'; @@ -69,6 +70,7 @@ import { SuppliersComponent } from './dashboard/suppliers.component'; SIDEBAR_TOGGLE_DIRECTIVES, AsideToggleDirective, SuppliersComponent, + MoreStuffComponent, P404Component, P500Component, ], diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts index 8e3d80a..6fba7de 100644 --- a/src/app/dashboard/dashboard.routing.ts +++ b/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'} } ], } diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html new file mode 100644 index 0000000..781cdf1 --- /dev/null +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -0,0 +1,33 @@ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePostcodeSpend
Tom's Tippity Top Toenails Ltd.LA11LY£250,000.00
Selena's Scratching Sticks Inc.WS15PQ£5.00
Big Barry and Son's Balloon Store and Clown Outfits Corp.PF43RD£22.00
+
+
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts new file mode 100644 index 0000000..628f58c --- /dev/null +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core'; +import { ApiService } from '../providers/api-service'; +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, AfterViewInit { + @Input() public recurList: Array; + @Output() public onClick = new EventEmitter(); + @Input() public categories: any; + + + public recurClick(event: any): void { + this.onClick.emit( event ); + } + + constructor( + private api: ApiService, + ) { } + + ngOnInit(): void { + + } + + ngAfterViewInit() { + } + +} diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index 7367d03..badbc76 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit { ) { } ngOnInit(): void { - + } ngAfterViewInit() { diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 9432f1d..c4369e8 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -102,6 +102,14 @@ +
  • + +
    +
    +
    More Stuff
    +
    +     +
  • From 9dcc22bc3c1e7e1e6bdb772b05a323de17b9510e Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 9 Jul 2019 14:24:23 +0100 Subject: [PATCH 4/8] added renaming instructions..? --- src/app/dashboard/more-graphs-and-tables.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 628f58c..c4b6cb0 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -11,7 +11,7 @@ interface RecurSupplierData { @Component({ templateUrl: 'more-graphs-and-tables.component.html', }) -export class MoreStuffComponent implements OnInit, AfterViewInit { +export class MoreStuffComponent implements OnInit, AfterViewInit { // 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; @Output() public onClick = new EventEmitter(); @Input() public categories: any; From 45e700675aae69e5b96b222bbbc8eaaf07d7200d Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 9 Jul 2019 14:24:59 +0100 Subject: [PATCH 5/8] added a necessary import --- src/app/dashboard/dashboard-customer.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 1775f49..1c81ca0 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -8,6 +8,7 @@ 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 { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component'; import { StackedBarChartComponent } from '../panels/stacked-bar.component'; From 9f50b3c2ce0d68a3096e4811157867e3f5c498dd Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 10 Jul 2019 12:22:26 +0100 Subject: [PATCH 6/8] Updating/removing some old files, preparing to add bubble chart --- src/app/app.module.ts | 7 ++-- .../dashboard/dashboard-customer.component.ts | 5 ++- .../more-graphs-and-tables.component.html | 41 +++++-------------- .../more-graphs-and-tables.component.ts | 15 +++---- src/app/dashboard/suppliers.component.html | 26 ++++++------ ...html => stacked-bar.component.html.broken} | 0 ...ent.ts => stacked-bar.component.ts.broken} | 0 7 files changed, 36 insertions(+), 58 deletions(-) rename src/app/panels/{stacked-bar.component.html => stacked-bar.component.html.broken} (100%) rename src/app/panels/{stacked-bar.component.ts => stacked-bar.component.ts.broken} (100%) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1f44ff4..1f9dd9a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -40,8 +40,8 @@ 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'; @@ -51,7 +51,6 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component imports: [ BrowserModule, HttpClientModule, - DxChartModule, NgxPaginationModule, BsDropdownModule.forRoot(), TabsModule.forRoot(), @@ -62,7 +61,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component ], declarations: [ AppComponent, - StackedBarChartComponent, + // StackedBarChartComponent, FullLayoutComponent, SimpleLayoutComponent, NAV_DROPDOWN_DIRECTIVES, diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 1c81ca0..caf631f 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -9,8 +9,11 @@ import { DataType } from '../shared/data-types.enum'; import * as moment from 'moment'; import { SuppliersComponent } from '../dashboard/suppliers.component'; import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component'; -import { StackedBarChartComponent } from '../panels/stacked-bar.component'; +// import { StackedBarChartComponent } from '../panels/stacked-bar.component'; +interface RecurSupplierData { + name : string; +} @Component({ templateUrl: 'dashboard-customer.component.html' diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 781cdf1..0382c67 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -1,33 +1,14 @@ -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePostcodeSpend
    Tom's Tippity Top Toenails Ltd.LA11LY£250,000.00
    Selena's Scratching Sticks Inc.WS15PQ£5.00
    Big Barry and Son's Balloon Store and Clown Outfits Corp.PF43RD£22.00
    +
    +
    +
    +

    Weekly Spending by Category

    +
    +
    +
    + +
    +
    -
    +
    \ No newline at end of file diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index c4b6cb0..fffc519 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -4,19 +4,18 @@ 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; -} +// interface RecurSupplierData { +// name : string; +// } @Component({ templateUrl: 'more-graphs-and-tables.component.html', }) -export class MoreStuffComponent implements OnInit, AfterViewInit { // 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; +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; @Output() public onClick = new EventEmitter(); @Input() public categories: any; - public recurClick(event: any): void { this.onClick.emit( event ); } @@ -28,8 +27,4 @@ export class MoreStuffComponent implements OnInit, AfterViewInit { // if you wa ngOnInit(): void { } - - ngAfterViewInit() { - } - } diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index b0a29f2..fcf79dd 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -1,4 +1,4 @@ - +
    @@ -13,20 +13,20 @@ - - - + + + - - - - - - - - - + + + + + + + + +
    Bill's BuildingsLA13RB£34.64Tom's Tippity Top Toenails Ltd.LA11LY£250,000.00
    Sam's SnakeTRY3R3£567.76
    LloydsABV134£9.00
    Selena's Scratching Sticks Inc.WS15PQ£5.00
    Big Barry and Son's Balloon Store and Clown Outfits Corp.PF43RD£22.00
    diff --git a/src/app/panels/stacked-bar.component.html b/src/app/panels/stacked-bar.component.html.broken similarity index 100% rename from src/app/panels/stacked-bar.component.html rename to src/app/panels/stacked-bar.component.html.broken diff --git a/src/app/panels/stacked-bar.component.ts b/src/app/panels/stacked-bar.component.ts.broken similarity index 100% rename from src/app/panels/stacked-bar.component.ts rename to src/app/panels/stacked-bar.component.ts.broken From 1c11f8e936214fb0801acf28f07b6d3a8b91b8df Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 10 Jul 2019 12:49:36 +0100 Subject: [PATCH 7/8] Added sample bubble chart --- package-lock.json | 20 +++--- package.json | 2 +- src/app/app.module.ts | 1 + .../more-graphs-and-tables.component.html | 13 +++- .../more-graphs-and-tables.component.ts | 66 +++++++++++++++++++ src/app/panels/bubble-panel.html | 26 ++++---- src/app/panels/bubble-panel.ts | 2 +- 7 files changed, 100 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 840a283..b969ab3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -760,9 +760,9 @@ } }, "@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", @@ -2142,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": { @@ -2158,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" } diff --git a/package.json b/package.json index 3f24af8..ad11871 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1f9dd9a..5dac1a3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -55,6 +55,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component BsDropdownModule.forRoot(), TabsModule.forRoot(), AuthModule, + ChartsModule, DashboardModule, // Loaded last to allow for 404 catchall AppRoutingModule, diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 0382c67..84f68bc 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -1,3 +1,4 @@ +
    @@ -6,9 +7,15 @@

    Weekly Spending by Category

    -
    - -
    +
    + + +
    \ No newline at end of file diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index fffc519..a2a3f7b 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -1,5 +1,8 @@ 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 { 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'; @@ -16,6 +19,64 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this @Output() public onClick = new EventEmitter(); @Input() public categories: any; + // chart data + 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' + ] + } + ]; + public recurClick(event: any): void { this.onClick.emit( event ); } @@ -27,4 +88,9 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this ngOnInit(): void { } + + private setChartData(dataCat: any) { + + } } + diff --git a/src/app/panels/bubble-panel.html b/src/app/panels/bubble-panel.html index e567aa7..9a9ab6b 100644 --- a/src/app/panels/bubble-panel.html +++ b/src/app/panels/bubble-panel.html @@ -1,17 +1,13 @@ -
    -
    -
    -
    -

    Spend by company and sector

    +
    +
    +
    + +
    -
    - -
    -
    -
    +
    \ No newline at end of file diff --git a/src/app/panels/bubble-panel.ts b/src/app/panels/bubble-panel.ts index bc76869..d5edbdf 100644 --- a/src/app/panels/bubble-panel.ts +++ b/src/app/panels/bubble-panel.ts @@ -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; } -} +} \ No newline at end of file From 45d52c9cdbaddd74c39c92398a23d54512faa451 Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 10 Jul 2019 13:04:07 +0100 Subject: [PATCH 8/8] Real bubble chart works, just need data now! --- .../more-graphs-and-tables.component.html | 37 +++++++-- .../more-graphs-and-tables.component.ts | 78 +++++++++++++------ 2 files changed, 86 insertions(+), 29 deletions(-) diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 84f68bc..ec6192a 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -1,21 +1,44 @@ -
    + +
    + +
    +
    +
    +
    +

    Spend by Region

    +
    +
    +
    + + +
    +
    +
    +
    \ No newline at end of file diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index a2a3f7b..4fbfbcc 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -2,6 +2,9 @@ import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChil 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'; @@ -19,8 +22,55 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this @Output() public onClick = new EventEmitter(); @Input() public categories: any; - // chart data - public bubbleChartOptions: ChartOptions = { + 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: [ @@ -41,10 +91,10 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this ] } }; - public bubbleChartType: ChartType = 'bubble'; - public bubbleChartLegend = true; + public sampleBubbleChartType: ChartType = 'bubble'; + public sampleBubbleChartLegend = true; - public bubbleChartData: ChartDataSets[] = [ + public sampleBubbleChartData: ChartDataSets[] = [ { data: [ { x: 10, y: 10, r: 10 }, @@ -60,7 +110,7 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this }, ]; - public bubbleChartColors: Color[] = [ + public sampleBubbleChartColors: Color[] = [ { backgroundColor: [ 'red', @@ -76,21 +126,5 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this ] } ]; - - public recurClick(event: any): void { - this.onClick.emit( event ); - } - - constructor( - private api: ApiService, - ) { } - - ngOnInit(): void { - - } - - private setChartData(dataCat: any) { - - } }