diff --git a/package-lock.json b/package-lock.json index 2600fea..b969ab3 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,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", diff --git a/package.json b/package.json index b397f2c..ad11871 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ab6f003..5dac1a3 100644 --- a/src/app/app.module.ts +++ b/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 { 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, ], diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 1775f49..caf631f 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/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' 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..ec6192a --- /dev/null +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -0,0 +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 new file mode 100644 index 0000000..4fbfbcc --- /dev/null +++ b/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; + @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' + ] + } + ]; +} + diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index 1165fb3..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 Building'sLA13RB£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/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
    +
    +     +
  • 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 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