From e7441bf47a12696f7e1e2cea8084e0781a50b273 Mon Sep 17 00:00:00 2001 From: Tom Slater Date: Fri, 12 Jul 2019 16:09:08 +0100 Subject: [PATCH 01/91] Added WIP All purchases chart --- .../dashboard-customer.component.html | 2 +- .../dashboard/dashboard-customer.component.ts | 1 + src/app/dashboard/dashboard.component.html | 101 ++++++++++++++++++ src/app/dashboard/dashboard.component.ts | 1 + src/app/dashboard/suppliers.component.html | 66 ++++++------ src/scss/bootstrap/utilities/_spacing.scss | 2 +- 6 files changed, 141 insertions(+), 32 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index f11d074..ef36d58 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -150,7 +150,7 @@
+
+
+
+
+
+

Monthly Spending by Category

+
+
+
+ +
+
+
+
+
+
+
+
+
+

Weekly Purchase No.

+
+
+
+
    +
  • + This Week + {{ (weekPurchaseList.first || 0 ) }} + ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }}) +
    +
    +
    +
    +
    +
  • +
  • + Last Week + {{ weekPurchaseList.second || 0 }} + ({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }}) +
    +
    +
    +
    +
    +
  • +
  • + Week Maximum + {{ weekPurchaseList.max || 0 }} + (100%) +
    +
    +
    +
    +
    +
  • +
  • + Weekly Average + {{ (weekPurchaseList.sum / weekPurchaseList.count) || 0 | number:'1.0-0'}} + ({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }}) +
    +
    +
    +
    +
    +
  • +
+
+
+
+
+
+
+
+
+
+

All Purchases by Category

+
+
+
+ +
+
+
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index cf7032e..ca370a4 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -130,6 +130,7 @@ export class DashboardComponent { public barChartDataCategory:any[]=[]; public barChartLabelsCategory:string[] = []; + public lineChartDataSector: ChartDataSets[] = [ { data: [], label: '' }, ]; diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index fcf79dd..6dcdd54 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -1,33 +1,39 @@
-
- - - - - - - - - +
+
+ List of Suppliers + This lists all suppliers, their postcode and spend. +
+
+
NamePostcodeSpend
+ + + + + + + + - - - - - - - - - - - - - - - - - -
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
-
-
+ + + 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/scss/bootstrap/utilities/_spacing.scss b/src/scss/bootstrap/utilities/_spacing.scss index c89816b..f428be0 100644 --- a/src/scss/bootstrap/utilities/_spacing.scss +++ b/src/scss/bootstrap/utilities/_spacing.scss @@ -26,7 +26,7 @@ // Some special margin utils .m#{$infix}-auto { margin: auto !important; } .mt#{$infix}-auto { margin-top: auto !important; } - .mr#{$infix}-auto { margin-right: auto !important; } + .mr#{$infix}-auto { margin-right: 20px !important; } .mb#{$infix}-auto { margin-bottom: auto !important; } .ml#{$infix}-auto { margin-left: auto !important; } .mx#{$infix}-auto { From 7740d9ec2d5e5b2b898499733dace31f0ccfa5da Mon Sep 17 00:00:00 2001 From: Tom Slater Date: Fri, 12 Jul 2019 17:01:40 +0100 Subject: [PATCH 02/91] wip all purchases --- src/app/dashboard/dashboard.component.html | 10 ++++---- src/app/dashboard/dashboard.component.ts | 29 +++++++++++++++++++--- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index c7e0b8a..60fc215 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -165,11 +165,11 @@
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index ca370a4..c65263c 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,8 +1,6 @@ import { Component } from '@angular/core'; import { Router, NavigationEnd } from "@angular/router"; import { CurrencyPipe } from '@angular/common'; -import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; -import { Color, Label } from 'ng2-charts'; import { GraphWidget } from '../widgets/graph-widget.component'; import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; import { GraphPanel } from '../panels/graph-panel.component'; @@ -68,6 +66,7 @@ export class DashboardComponent { public doughnutChartDataCategory: any[] = []; public doughnutChartLabelsCategory: string[] = []; + public doughnutChartOptionsCategory:any = { tooltips: { callbacks: { @@ -130,6 +129,11 @@ export class DashboardComponent { public barChartDataCategory:any[]=[]; public barChartLabelsCategory:string[] = []; + public barChartDataCategoryAll:string = 'bar' + public barChartLegendCategoryAll:boolean = false; + public barChartDataCategoryAll:any[]=[]; + public barChartLabelsCategoryAll:string[] = []; + public lineChartDataSector: ChartDataSets[] = [ { data: [], label: '' }, @@ -239,6 +243,23 @@ export class DashboardComponent { ); } + private setChartDataCat(dataCat: any) { + this.barChartLabelsCategoryAll = Object.keys(dataCat); + let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); + this.barChartDataCategoryAll = [ + {data: barChartDataCategoryInitial, label: 'Series A'}, + ]; + this.showCategoryBarChart = true; + if (this.weekList1) { + let n = this.weekList1.map(function(a) {return a.value;}); + this.doughnutChartDataCategory = [ + {data: doughnutChartDataCategoryInitial, label: 'Series A'}, + ]; + // setTimeout is currently a workaround for ng2-charts labels + setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); + this.showCategoryDoughnutChart = true; + } + } private setChartDataCat(dataCat: any) { this.barChartLabelsCategory = Object.keys(dataCat); let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); @@ -247,7 +268,7 @@ export class DashboardComponent { ]; this.showCategoryBarChart = true; if (this.weekList1) { - let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;}); + let n = this.weekList1.map(function(a) {return a.value;}); this.doughnutChartDataCategory = [ {data: doughnutChartDataCategoryInitial, label: 'Series A'}, ]; @@ -261,7 +282,7 @@ export class DashboardComponent { this.barChartLabelsCategory = Object.keys(dataSec); let lineChartDataSectorInitial = Object.keys(dataSec).map(key => dataSec[key]); this.lineChartDataSector = [ - {data: lineChartDataSectorInitial, label: 'Series A'}, + {data: barChartDataCategoryInitial, label: 'Series A'}, ]; this.showCategoryBarChart = true; if (this.weekList1) { From df631ad79364476bd1d0cf3f62ad578477844612 Mon Sep 17 00:00:00 2001 From: Finn Date: Fri, 12 Jul 2019 17:12:01 +0100 Subject: [PATCH 03/91] various fixes to dashboard stuff --- .../dashboard/dashboard-customer.component.ts | 2 ++ src/app/dashboard/dashboard.component.ts | 20 +++---------------- src/app/dashboard/dashboard.module.ts | 2 ++ .../more-graphs-and-tables.component.ts | 2 +- src/app/panels/bubble-panel.component.ts | 5 ++--- 5 files changed, 10 insertions(+), 21 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 34dd082..a59e7cb 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -2,7 +2,9 @@ import { Directive, Component, OnInit } from '@angular/core'; import { CurrencyPipe } from '@angular/common'; import { ApiService } from '../providers/api-service'; import { Router } from '@angular/router'; +import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; import { GraphWidget } from '../widgets/graph-widget.component'; +import { Color, Label } from 'ng2-charts'; import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'; import { PiePanel } from '../panels/pie-panel.component'; import { DataType } from '../shared/data-types.enum'; diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index cf7032e..1973efa 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -226,8 +226,8 @@ export class DashboardComponent { this.purchaseEssential = result.data.essentials.purchase_no_essential_total; this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential; this.barChartDataEssential = [ - {data: [this.purchaseEssential], label: 'Essential', stack: '1'}, - {data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'}, + {data: this.purchaseEssential, label: 'Essential', stack: '1'}, + {data: this.purchaseNotEssential, label: 'Non-Essential', stack: '1'}, ]; this.showEssentialBarChart = true; }, @@ -257,21 +257,7 @@ export class DashboardComponent { } private setChartDataSector(dataSec: any) { - this.barChartLabelsCategory = Object.keys(dataSec); - let lineChartDataSectorInitial = Object.keys(dataSec).map(key => dataSec[key]); - this.lineChartDataSector = [ - {data: lineChartDataSectorInitial, label: 'Series A'}, - ]; - this.showCategoryBarChart = true; - if (this.weekList1) { - let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;}); - this.doughnutChartDataCategory = [ - {data: doughnutChartDataCategoryInitial, label: 'Series A'}, - ]; - // setTimeout is currently a workaround for ng2-charts labels - setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); - this.showCategoryDoughnutChart = true; - } + } private setDate () { diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 69a9cc2..54b742f 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -26,6 +26,7 @@ import { GraphWidget } from '../widgets/graph-widget.component'; import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'; import { GraphPanel } from '../panels/graph-panel.component'; +import { BubbleChartComponent } from '../panels/bubble-panel.component'; import { PiePanel } from '../panels/pie-panel.component'; import { OrgPiePanel } from '../panels/org-pie-panel.component'; @@ -82,6 +83,7 @@ import { environment } from '../../environments/environment'; GraphPanel, PiePanel, OrgPiePanel, + BubbleChartComponent, ], providers: [ CurrencyPipe, diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 65b65bf..533b1d0 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -5,7 +5,7 @@ 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 { BubbleChartComponent } from '../panels/bubble-panel.component'; import { AgmCoreModule } from '@agm/core'; import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal'; import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; diff --git a/src/app/panels/bubble-panel.component.ts b/src/app/panels/bubble-panel.component.ts index d5edbdf..e57a646 100644 --- a/src/app/panels/bubble-panel.component.ts +++ b/src/app/panels/bubble-panel.component.ts @@ -4,8 +4,7 @@ import { Color } from 'ng2-charts'; @Component({ selector: 'app-bubble-chart', - templateUrl: './bubble-chart.component.html', - styleUrls: ['./bubble-chart.component.scss'] + templateUrl: './bubble-panel.component.html', }) export class BubbleChartComponent implements OnInit { public bubbleChartOptions: ChartOptions = { @@ -95,4 +94,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 af04adeb310c68c3f4c66725c26347801faf980e Mon Sep 17 00:00:00 2001 From: Finn Date: Fri, 12 Jul 2019 17:38:19 +0100 Subject: [PATCH 04/91] Fixed errors when there is no data available --- src/app/dashboard/dashboard.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 826cae5..0c580c0 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -51,7 +51,7 @@ -
+
From 6b1e474916f2db98fd4a888838943d3ccd2a5a98 Mon Sep 17 00:00:00 2001 From: Finn Date: Fri, 12 Jul 2019 17:45:43 +0100 Subject: [PATCH 05/91] Fixed suppliers --- src/app/app.module.ts | 2 -- src/app/dashboard/dashboard-customer.component.ts | 2 +- src/app/dashboard/dashboard.module.ts | 2 ++ src/app/dashboard/suppliers.component.ts | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 60c4076..49b9d6b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -43,7 +43,6 @@ import { DashboardModule } from './dashboard/dashboard.module'; 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'; @@ -69,7 +68,6 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component BreadcrumbsComponent, 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 a59e7cb..559530d 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -13,7 +13,7 @@ import { SuppliersComponent } from '../dashboard/suppliers.component'; import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component'; // import { StackedBarChartComponent } from '../panels/stacked-bar.component'; -interface RecurSupplierData { +interface SuppliersComponent { name : string; } diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 54b742f..b35c99c 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -18,6 +18,7 @@ import { FeedbackComponent } from './feedback.component'; import { TransactionLogComponent } from './transaction-log.component'; import { CategoryMonthComponent } from './category-month.component'; import { PayrollLogComponent } from './payroll-log.component'; +import { SuppliersComponent } from './suppliers.component'; import { LeaderboardComponent } from './leaderboard.component'; import { MapComponent } from './map.component'; import { TrailMapComponent } from './trail-map.component'; @@ -84,6 +85,7 @@ import { environment } from '../../environments/environment'; PiePanel, OrgPiePanel, BubbleChartComponent, + SuppliersComponent, ], providers: [ CurrencyPipe, diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index badbc76..fce8483 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -4,7 +4,7 @@ import { AgmCoreModule } from '@agm/core'; import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal'; import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; -interface RecurSupplierData { +interface SuppliersComponent { name : string; } @@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit { ) { } ngOnInit(): void { - + } ngAfterViewInit() { From 40462b7d8fc73609cf21ac3d88626bc85dc5e793 Mon Sep 17 00:00:00 2001 From: Finn Date: Fri, 12 Jul 2019 18:50:59 +0100 Subject: [PATCH 06/91] Added proper supplier table --- src/app/dashboard/dashboard.module.ts | 2 + src/app/dashboard/suppliers.component.html | 38 ++++++++++--------- src/app/dashboard/suppliers.component.ts | 24 ++++++++++++ .../dashboard/transaction-log.component.ts | 10 ++--- src/app/providers/api-service.ts | 5 ++- src/app/shared/supplier-result.component.html | 3 ++ src/app/shared/supplier-result.component.ts | 19 ++++++++++ 7 files changed, 77 insertions(+), 24 deletions(-) create mode 100644 src/app/shared/supplier-result.component.html create mode 100644 src/app/shared/supplier-result.component.ts diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index b35c99c..7e006b3 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -37,6 +37,7 @@ import { OrgTableComponent } from '../shared/org-table.component'; import { RecurResultComponent } from '../shared/recur-result.component'; import { RecurTableComponent } from '../shared/recur-table.component'; import { TransactionResultComponent } from '../shared/transaction-result.component'; +import { SupplierResultComponent } from '../shared/supplier-result.component'; import { PayrollResultComponent } from '../shared/payroll-result.component'; import { LeaderboardResultComponent } from '../shared/leaderboard-result.component'; @@ -71,6 +72,7 @@ import { environment } from '../../environments/environment'; TransactionLogComponent, CategoryMonthComponent, TransactionResultComponent, + SupplierResultComponent, PayrollLogComponent, PayrollResultComponent, LeaderboardComponent, diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index fcf79dd..ab8b3f6 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -10,24 +10,28 @@ - - - - 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/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index fce8483..4885cb5 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -16,6 +16,15 @@ export class SuppliersComponent implements OnInit, AfterViewInit { @Output() public onClick = new EventEmitter(); @Input() public categories: any; + supplierList: any; + supplierListAvailable = false; + + public paginateConfig: PaginationInstance = { + id: 'transpaginate', + itemsPerPage: 10, + currentPage: 1, + totalItems: 0 + }; public recurClick(event: any): void { this.onClick.emit( event ); @@ -26,7 +35,22 @@ export class SuppliersComponent implements OnInit, AfterViewInit { ) { } ngOnInit(): void { + this.loadSuppliers(1); + } + loadSuppliers(logPage: number) { + this.api.externalSuppliers(logPage).subscribe( + result => { + this.supplierList = result.suppliers; + this.paginateConfig.totalItems = result.page_no; + this.paginateConfig.currentPage = logPage; + this.noTransactionList = false; + }, + error => { + console.log('Retrieval Error'); + console.log( error._body ); + } + ); } ngAfterViewInit() { diff --git a/src/app/dashboard/transaction-log.component.ts b/src/app/dashboard/transaction-log.component.ts index fcd290c..0e04ad5 100644 --- a/src/app/dashboard/transaction-log.component.ts +++ b/src/app/dashboard/transaction-log.component.ts @@ -31,11 +31,11 @@ export class TransactionLogComponent implements OnInit { updatedTime: string; public paginateConfig: PaginationInstance = { - id: 'transpaginate', - itemsPerPage: 10, - currentPage: 1, - totalItems: 0 - }; + id: 'transpaginate', + itemsPerPage: 10, + currentPage: 1, + totalItems: 0 + }; constructor( private api: ApiService, diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 52fd12b..7d3f00e 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -144,12 +144,13 @@ export class ApiService { ); } - public externalSuppliers() { + public externalSuppliers(data) { const key = this.sessionKey; return this.http.post( - this.apiUrl + '/organisation/external/suppliers', + this.apiUrl + '/v1/organisation/external/suppliers', { session_key : key, + page : data } ); } diff --git a/src/app/shared/supplier-result.component.html b/src/app/shared/supplier-result.component.html new file mode 100644 index 0000000..5f73644 --- /dev/null +++ b/src/app/shared/supplier-result.component.html @@ -0,0 +1,3 @@ +{{supplier.name}} +{{supplier.postcode}} +{{supplier.spend | currency:'GBP':'symbol':'1.2-2' }} diff --git a/src/app/shared/supplier-result.component.ts b/src/app/shared/supplier-result.component.ts new file mode 100644 index 0000000..83ffc4c --- /dev/null +++ b/src/app/shared/supplier-result.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +interface SupplierData { + name: string; + postcode: string; + spend: number = 0; +} + +@Component({ + // tslint:disable-next-line + selector: '[supplier-result]', + templateUrl: 'supplier-result.component.html', +}) +export class SupplierResultComponent implements OnInit { + @Input() public supplier: SupplierData; + + ngOnInit(): void { + } +} From 8202cdfdb16e7b5a0b5bdc08c3f36bc7bad55c00 Mon Sep 17 00:00:00 2001 From: Finn Date: Fri, 12 Jul 2019 20:05:06 +0100 Subject: [PATCH 07/91] Amended supplier list --- src/app/dashboard/suppliers.component.html | 15 ++++++++++++--- src/app/dashboard/suppliers.component.ts | 15 ++++++++++++++- src/app/providers/api-service.ts | 6 ++++-- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index ab8b3f6..9c442b7 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -4,9 +4,18 @@ - - - + + + diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index 4885cb5..170f674 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -18,6 +18,8 @@ export class SuppliersComponent implements OnInit, AfterViewInit { supplierList: any; supplierListAvailable = false; + sortBy = 'name'; + sortDir = 'asc'; public paginateConfig: PaginationInstance = { id: 'transpaginate', @@ -39,7 +41,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit { } loadSuppliers(logPage: number) { - this.api.externalSuppliers(logPage).subscribe( + this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe( result => { this.supplierList = result.suppliers; this.paginateConfig.totalItems = result.page_no; @@ -53,6 +55,17 @@ export class SuppliersComponent implements OnInit, AfterViewInit { ); } + + sortName() { this.sortByColumn('name'); } + sortPostcode() { this.sortByColumn('postcode'); } + sortSpend() { this.sortByColumn('spend'); } + + sortByColumn(name) { + this.sortBy = name; + this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'; + this.loadSuppliers(1); + } + ngAfterViewInit() { } diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 7d3f00e..b09bcfd 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -144,13 +144,15 @@ export class ApiService { ); } - public externalSuppliers(data) { + public externalSuppliers(data, sortBy, sortDir) { const key = this.sessionKey; return this.http.post( this.apiUrl + '/v1/organisation/external/suppliers', { session_key : key, - page : data + page : data, + sort_by : sortBy, + sort_dir : sortDir } ); } From 75ba91379d68975c5766bc01d2e8d1f6d19fdf50 Mon Sep 17 00:00:00 2001 From: Finn Date: Fri, 12 Jul 2019 20:18:28 +0100 Subject: [PATCH 08/91] made fixes to imports and supplier list --- .../dashboard/dashboard-customer.component.ts | 1 - src/app/dashboard/suppliers.component.html | 100 ++++++++++-------- src/app/dashboard/suppliers.component.ts | 12 +-- src/app/shared/supplier-result.component.ts | 2 +- 4 files changed, 62 insertions(+), 53 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 559530d..bb6f871 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -9,7 +9,6 @@ import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component' 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'; diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index 9c442b7..52a53fd 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -1,46 +1,58 @@ -
-
-
NamePostcodeSpendName + + + Postcode + + + Spend + + +
- - - - - - - - - - -
Name - - - Postcode - - - Spend - - -
- - - +
+
+
+
+ List of Suppliers + This lists all suppliers that have been submitted. +
+
+ + + + + + + + + + + +
Name + + + Postcode + + + Spend + + +
+ + + +
+
+ No Suppliers available. +
+
+
-
+
diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index 170f674..e3cbf0f 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -3,16 +3,12 @@ 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 SuppliersComponent { - name : string; -} +import { PaginationInstance } from 'ngx-pagination'; @Component({ templateUrl: 'suppliers.component.html', }) export class SuppliersComponent implements OnInit, AfterViewInit { - @Input() public recurList: Array; @Output() public onClick = new EventEmitter(); @Input() public categories: any; @@ -44,9 +40,11 @@ export class SuppliersComponent implements OnInit, AfterViewInit { this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe( result => { this.supplierList = result.suppliers; + if (this.supplierList) { + this.supplierListAvailable = true; + } this.paginateConfig.totalItems = result.page_no; this.paginateConfig.currentPage = logPage; - this.noTransactionList = false; }, error => { console.log('Retrieval Error'); @@ -59,7 +57,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit { sortName() { this.sortByColumn('name'); } sortPostcode() { this.sortByColumn('postcode'); } sortSpend() { this.sortByColumn('spend'); } - + sortByColumn(name) { this.sortBy = name; this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'; diff --git a/src/app/shared/supplier-result.component.ts b/src/app/shared/supplier-result.component.ts index 83ffc4c..aac4e75 100644 --- a/src/app/shared/supplier-result.component.ts +++ b/src/app/shared/supplier-result.component.ts @@ -3,7 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; interface SupplierData { name: string; postcode: string; - spend: number = 0; + spend: number; } @Component({ From b1790a2fe9357fc04c1d71d0f603d4ebd610afde Mon Sep 17 00:00:00 2001 From: Finn Date: Fri, 12 Jul 2019 20:47:01 +0100 Subject: [PATCH 09/91] Added meta data to transaction list --- src/app/dashboard/transaction-log.component.html | 10 ++++++++-- src/app/dashboard/transaction-log.component.ts | 4 ++++ src/app/shared/transaction-result.component.html | 5 ++++- src/app/shared/transaction-result.component.ts | 1 + 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/app/dashboard/transaction-log.component.html b/src/app/dashboard/transaction-log.component.html index 9b07ec1..d7f8aa7 100644 --- a/src/app/dashboard/transaction-log.component.html +++ b/src/app/dashboard/transaction-log.component.html @@ -101,18 +101,24 @@
Log of Outgoing Transactions This lists all purchases that have been submitted. +
- + + + + - +
SellerValueValueNet ValueSales Tax ValueGross Value Purchase Time
{{transaction.seller}} -{{transaction.value | currency:'GBP':'symbol':'1.2-2' }} +{{transaction.value | currency:'GBP':'symbol':'1.2-2' }} +{{transaction.net_value | currency:'GBP':'symbol':'1.2-2' }} +{{transaction.sales_tax_value | currency:'GBP':'symbol':'1.2-2' }} +{{transaction.gross_value | currency:'GBP':'symbol':'1.2-2' }} {{transactionDate}} diff --git a/src/app/shared/transaction-result.component.ts b/src/app/shared/transaction-result.component.ts index a293b72..97b8bd9 100644 --- a/src/app/shared/transaction-result.component.ts +++ b/src/app/shared/transaction-result.component.ts @@ -14,6 +14,7 @@ interface TransactionData { }) export class TransactionResultComponent implements OnInit { @Input() public transaction: TransactionData; + @Input() public showMeta: boolean; public transactionDate: string; ngOnInit(): void { From 5cd0db3faf58a41946c04feca2e872c2937a33bd Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Mon, 15 Jul 2019 01:17:01 +0100 Subject: [PATCH 10/91] More graphs with testing data --- .gitignore | 1 - .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + Foodloop-Web.iml | 12 + package.json | 1 + .../more-graphs-and-tables.component.html | 79 +++-- .../more-graphs-and-tables.component.ts | 325 ++++++++++++------ 8 files changed, 304 insertions(+), 134 deletions(-) create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 Foodloop-Web.iml diff --git a/.gitignore b/.gitignore index 4101f22..45ad792 100644 --- a/.gitignore +++ b/.gitignore @@ -22,7 +22,6 @@ $RECYCLE.BIN/ /bower_components # IDEs and editors -/.idea .project .classpath *.launch diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..639900d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..e122851 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Foodloop-Web.iml b/Foodloop-Web.iml new file mode 100644 index 0000000..da8860c --- /dev/null +++ b/Foodloop-Web.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index ad11871..ce48a88 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "scripts": { "ng": "ng", "start": "ng serve", + "start:dev": "ng serve --optimization=false --configuration=dev", "build": "ng build", "test": "ng test", "test:ci": "ng test --watch=false", diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 3ef35ee..e65b41a 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -1,28 +1,59 @@ -
- -
-
-
-
-

Spend by Company Type

-
-
-
- - - - -
+
+
+
+
+

Spend by Company Type

+
+
+ + +
- +
+
+
+
+
+

Last 12 months

+
+
+
+ + +
+
+
+
+
+
+
+

Supplier Spend History

+
+
+
+ + +
+
+
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 533b1d0..8a3c5c5 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -1,127 +1,26 @@ -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.component'; -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; -// } +import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; +import {ApiService} from '../providers/api-service'; +import {Color} from 'ng2-charts'; +import {CurrencyPipe} from '@angular/common'; @Component({ templateUrl: 'more-graphs-and-tables.component.html', }) export class MoreStuffComponent implements OnInit { -// @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[] = [ - { - 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', -}, -{ -data: [ - { x: 10, y: 2, r: 10 }, - { x: 15, y: 1, r: 15 }, - { x: 26, y: 7, r: 23 }, - { x: 5, y: 8, r: 8 }, - ], - label: ["Series B"], - backgroundColor: 'green', - borderColor: 'blue', - hoverBackgroundColor: 'purple', - hoverBorderColor: 'red', -}, - - ]; - public bubbleChartLabelsCategory: string[] = []; - - public bubbleChartOptionsCategory:any = { - responsive: true, - scales: { - xAxes: [ - { - ticks: { - min: 0, - } - } - ], - yAxes: [ - { - ticks: { - min: 0, - } - } - ] -}, - tooltips: { - callbacks: { - label: (tooltip, data) => { - return this.tooltipLabelCallback(tooltip, data); - }, - }, - }, - } - - private setChartData(dataCat: any) { - // now we just need some data and it will display! - } - public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void { - console.log(event, active); - } - - public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void { - console.log(event, active); - } - // 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 sampleBubbleChartColors: Color[] = [ + public showLegend = true; + public sampleColours: Color[] = [ { backgroundColor: [ 'red', @@ -137,4 +36,212 @@ data: [ ] } ]; + + + /* + * Supplier Bubble Chart Setup + */ + public supplierBubbleChartType = 'bubble'; + public supplierBubbleChartData: any[] = [ + { + data: [ + {t: '20180123', y: 54.34, r: 32, supplier: 'Tims', count: 4}, + {t: '20180101', y: 123.34, r: 123, supplier: 'Daves', count: 12}, + {t: '20180314', y: 11.345, r: 33, supplier: 'erry', count: 13}, + {t: '20180615', y: 112.6, r: 22, supplier: 'qwert', count: 124}, + {t: '20180714', y: 91234.5, r: 8, supplier: 'Bobs', count: 1234}, + {t: '20181230', y: 23.12, r: 67, supplier: 'Ben Bobs', count: 4}, + ], + label: ["Series A"], + backgroundColor: 'green', + borderColor: 'blue', + hoverBackgroundColor: 'purple', + hoverBorderColor: 'red', + }, + ]; + public supplierBubbleChartLabels: string[] = []; + public supplierBubbleChartOptions: any = { + responsive: true, + scales: { + xAxes: [{ + type: 'time', + time: { + parser: 'YYYYMMDD', + unit: 'month' + } + }], + yAxes: [ + { + ticks: { + min: 0, + } + } + ] + }, + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.bubbleTooltipCallback(tooltip, data); + }, + }, + }, + }; + + private bubbleTooltipCallback(tooltipItem: any, data: any) { + let dataset = data.datasets[tooltipItem.datasetIndex]; + let value = dataset.data[tooltipItem.index]; + return `${value.supplier}: ${this.currencyPipe.transform(value.y, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`; + } + + public yearSpendChartData: any[] = [ + { + data: [ + {t: '20180101', y: 123.34}, + {t: '20180314', y: 11.345}, + {t: '20180615', y: 112.6}, + {t: '20180714', y: 91234.5}, + {t: '20181230', y: 23.12}, + ], + label: ["Value"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + yAxisID: 'y-value', + }, + { + data: [ + {t: '20180101', y: 12}, + {t: '20180314', y: 11}, + {t: '20180615', y: 1}, + {t: '20180714', y: 9}, + {t: '20181230', y: 23}, + ], + label: ["Count"], + fill: false, + borderColor: 'blue', + hoverBackgroundColor: 'blue', + hoverBorderColor: 'blue', + yAxisID: 'y-count', + }, + ]; + public yearSpendChartOptions: any = { + responsive: true, + scales: { + xAxes: [{ + type: 'time', + time: { + parser: 'YYYYMMDD', + unit: 'month' + } + }], + yAxes: [ + {id: 'y-value', position: 'left', beginAtZero: true}, + {id: 'y-count', position: 'right', beginAtZero: true}, + ] + }, + }; + public yearSpendChartColors: Color[] = [ + { + backgroundColor: [ + 'red', + 'green', + 'blue', + 'purple', + 'yellow', + 'brown', + 'magenta', + 'cyan', + 'orange', + 'pink' + ] + } + ]; + public yearSpendChartLabels: string[] = []; + public yearSpendChartType = 'line'; + + randomData() { + return Math.random(); + } + + public supplierMonthChartData: any[] = [ + { + data: [ + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + ], + label: ["3 Month"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + }, + { + data: [ + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + ], + label: ["6 Month"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + }, + { + data: [ + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + ], + label: ["12 Month"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + }, + ]; + public supplierMonthChartOptions: any = { + responsive: true, + scales: { + xAxes: [], + yAxes: [] + }, + }; + public supplierMonthChartLabels: string[] = [ + 'some name', + 'another name', + 'more names', + 'again', + 'some', + 'random', + 'names' + ]; + public supplierMonthChartType = 'horizontalBar'; + + private setChartData(dataCat: any) { + // now we just need some data and it will display! + } + + // functions + + + // SAMPLE chart data + } From 0dcf98fed3652f46f4dda9f381300337791a19af Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Mon, 15 Jul 2019 12:38:06 +0100 Subject: [PATCH 11/91] Various updates --- .../more-graphs-and-tables.component.html | 2 +- .../more-graphs-and-tables.component.ts | 178 +++++++++--------- src/app/dashboard/suppliers.component.html | 7 + src/app/dashboard/suppliers.component.ts | 5 +- src/app/providers/api-service.ts | 15 +- 5 files changed, 115 insertions(+), 92 deletions(-) diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index e65b41a..135d1ab 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -45,7 +45,7 @@
- { + console.log(result.data); + let graph_data = []; + result.data.map(item => { + graph_data.push({ + t: item.date, + r: (item.value / 100000) + 5, + supplier: item.seller, + y: item.count, + value: item.value, + count: item.count, + }); + }); + console.log(graph_data); + this.supplierBubbleChartData[0].data = graph_data; + } + ) + } + + public supplierBubbleChartType: ChartType = 'bubble'; public supplierBubbleChartData: any[] = [ { - data: [ - {t: '20180123', y: 54.34, r: 32, supplier: 'Tims', count: 4}, - {t: '20180101', y: 123.34, r: 123, supplier: 'Daves', count: 12}, - {t: '20180314', y: 11.345, r: 33, supplier: 'erry', count: 13}, - {t: '20180615', y: 112.6, r: 22, supplier: 'qwert', count: 124}, - {t: '20180714', y: 91234.5, r: 8, supplier: 'Bobs', count: 1234}, - {t: '20181230', y: 23.12, r: 67, supplier: 'Ben Bobs', count: 4}, - ], - label: ["Series A"], + data: [], + label: ["Spend"], backgroundColor: 'green', borderColor: 'blue', hoverBackgroundColor: 'purple', @@ -66,17 +85,10 @@ export class MoreStuffComponent implements OnInit { xAxes: [{ type: 'time', time: { - parser: 'YYYYMMDD', unit: 'month' } }], - yAxes: [ - { - ticks: { - min: 0, - } - } - ] + yAxes: [] }, tooltips: { callbacks: { @@ -90,18 +102,38 @@ export class MoreStuffComponent implements OnInit { private bubbleTooltipCallback(tooltipItem: any, data: any) { let dataset = data.datasets[tooltipItem.datasetIndex]; let value = dataset.data[tooltipItem.index]; - return `${value.supplier}: ${this.currencyPipe.transform(value.y, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`; + return `${value.supplier}: ${this.currencyPipe.transform(value.value, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`; + } + + + private loadYearSpend() { + this.api.loadMiscUrl('organisation/external/year_spend').subscribe( + result => { + let value_data = []; + let count_data = []; + + console.log(result.data); + result.data.map(item => { + value_data.push({ + t: item.date, + y: item.value, + }); + + count_data.push({ + t: item.date, + y: item.count, + }); + }); + + this.yearSpendChartData[0].data = value_data; + this.yearSpendChartData[1].data = count_data; + } + ) } public yearSpendChartData: any[] = [ { - data: [ - {t: '20180101', y: 123.34}, - {t: '20180314', y: 11.345}, - {t: '20180615', y: 112.6}, - {t: '20180714', y: 91234.5}, - {t: '20181230', y: 23.12}, - ], + data: [], label: ["Value"], fill: false, borderColor: 'red', @@ -110,13 +142,7 @@ export class MoreStuffComponent implements OnInit { yAxisID: 'y-value', }, { - data: [ - {t: '20180101', y: 12}, - {t: '20180314', y: 11}, - {t: '20180615', y: 1}, - {t: '20180714', y: 9}, - {t: '20181230', y: 23}, - ], + data: [], label: ["Count"], fill: false, borderColor: 'blue', @@ -131,7 +157,6 @@ export class MoreStuffComponent implements OnInit { xAxes: [{ type: 'time', time: { - parser: 'YYYYMMDD', unit: 'month' } }], @@ -158,24 +183,38 @@ export class MoreStuffComponent implements OnInit { } ]; public yearSpendChartLabels: string[] = []; - public yearSpendChartType = 'line'; + public yearSpendChartType: ChartType = 'line'; randomData() { return Math.random(); } + @ViewChild('supplierChart', {read: BaseChartDirective, static: false}) supplierChart: BaseChartDirective; + + private loadSupplierHistory() { + this.api.loadMiscUrl('organisation/external/supplier_history').subscribe( + result => { + let labels = []; + let year = []; + let half = []; + let quarter = []; + result.data.map(item => { + labels.push(item.name); + year.push(item.year_total); + half.push(item.half_total); + quarter.push(item.quarter_total); + }); + this.supplierMonthChartData[0].data = quarter.slice(0,10); + this.supplierMonthChartData[1].data = half.slice(0,10); + this.supplierMonthChartData[2].data = year.slice(0,10); + this.supplierMonthChartLabels = labels.slice(0,10); + } + ) + } + public supplierMonthChartData: any[] = [ { - data: [ - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - ], + data: [], label: ["3 Month"], fill: false, borderColor: 'red', @@ -183,16 +222,7 @@ export class MoreStuffComponent implements OnInit { hoverBackgroundColor: 'red', }, { - data: [ - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - ], + data: [], label: ["6 Month"], fill: false, borderColor: 'red', @@ -200,16 +230,7 @@ export class MoreStuffComponent implements OnInit { hoverBackgroundColor: 'red', }, { - data: [ - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - this.randomData(), - ], + data: [], label: ["12 Month"], fill: false, borderColor: 'red', @@ -218,30 +239,13 @@ export class MoreStuffComponent implements OnInit { }, ]; public supplierMonthChartOptions: any = { + //maintainAspectRatio: false, responsive: true, scales: { xAxes: [], yAxes: [] }, }; - public supplierMonthChartLabels: string[] = [ - 'some name', - 'another name', - 'more names', - 'again', - 'some', - 'random', - 'names' - ]; - public supplierMonthChartType = 'horizontalBar'; - - private setChartData(dataCat: any) { - // now we just need some data and it will display! - } - - // functions - - - // SAMPLE chart data - + public supplierMonthChartLabels: string[] = []; + public supplierMonthChartType: ChartType = 'horizontalBar'; } diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index 52a53fd..87e9e38 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -48,6 +48,13 @@ +
No Suppliers available. diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index e3cbf0f..c0cfa2d 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -11,6 +11,7 @@ import { PaginationInstance } from 'ngx-pagination'; export class SuppliersComponent implements OnInit, AfterViewInit { @Output() public onClick = new EventEmitter(); @Input() public categories: any; + public perPage: number = 10; supplierList: any; supplierListAvailable = false; @@ -19,7 +20,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit { public paginateConfig: PaginationInstance = { id: 'transpaginate', - itemsPerPage: 10, + itemsPerPage: this.perPage, currentPage: 1, totalItems: 0 }; @@ -37,7 +38,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit { } loadSuppliers(logPage: number) { - this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe( + this.api.externalSuppliers(logPage, this.sortBy, this.sortDir, this.perPage).subscribe( result => { this.supplierList = result.suppliers; if (this.supplierList) { diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index b09bcfd..5ac5c2a 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -144,7 +144,17 @@ export class ApiService { ); } - public externalSuppliers(data, sortBy, sortDir) { + public loadMiscUrl(extra_url) { + const key = this.sessionKey; + return this.http.post( + this.apiUrl + '/v1/' + extra_url, + { + session_key : key, + } + ); + } + + public externalSuppliers(data, sortBy, sortDir, perPage) { const key = this.sessionKey; return this.http.post( this.apiUrl + '/v1/organisation/external/suppliers', @@ -152,7 +162,8 @@ export class ApiService { session_key : key, page : data, sort_by : sortBy, - sort_dir : sortDir + sort_dir : sortDir, + per_page : perPage } ); } From 3248caed073901171bfb96dd0998019cbca3e81c Mon Sep 17 00:00:00 2001 From: Tom Slater Date: Tue, 6 Aug 2019 16:51:44 +0100 Subject: [PATCH 12/91] Misc Chart Improvements Fixed doughnut chart colour loading issues, added WIP dashboard charts, few other misc changes --- .../dashboard-customer.component.html | 60 --------------- .../dashboard/dashboard-customer.component.ts | 75 ------------------- src/app/dashboard/dashboard.component.ts | 13 ++++ src/app/dashboard/dashboard.routing.ts | 2 +- .../more-graphs-and-tables.component.html | 16 ++-- .../more-graphs-and-tables.component.ts | 48 ++++++------ src/app/layouts/full-layout.component.html | 16 ++-- src/app/panels/graph-panel.component.html | 3 +- src/app/panels/org-pie-panel.component.html | 1 + src/app/panels/org-pie-panel.component.ts | 31 ++++++++ 10 files changed, 88 insertions(+), 177 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index f11d074..ec3e8ad 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -60,27 +60,6 @@
-
-
-
-
-
-

Monthly Spending by Category

-
-
-
- -
-
-
-
@@ -179,44 +158,5 @@
-
-
-
-
-
-

Spend by company and Industrial sector

-
-
-
- -
-
-
    - -
  • - -
    -
    {{ category.category || 'N/A' }}
    -
    -
    -
    Bought
    - {{ category.value || 'N/A' }} -
    -
  • -
  • - -
  • -
-
-
-
-
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index bb6f871..94fa180 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -116,81 +116,6 @@ export class DashboardCustomerComponent implements OnInit { totalCategoryLimit: number = 10; totalCategoryList: any[]=[]; - public lineChartData: ChartDataSets[] = [ - { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, - { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }, - { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' } - ]; - public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December']; - public lineChartOptions: (ChartOptions & { annotation: any }) = { - responsive: true, - scales: { - // We use this empty structure as a placeholder for dynamic theming. - xAxes: [{}], - yAxes: [ - { - id: 'y-axis-0', - position: 'left', - }, - { - id: 'y-axis-1', - position: 'right', - gridLines: { - color: 'rgba(255,0,0,0.3)', - }, - ticks: { - fontColor: 'red', - } - } - ] - }, - annotation: { - annotations: [ - { - type: 'line', - mode: 'vertical', - scaleID: 'x-axis-0', - value: 'March', - borderColor: 'orange', - borderWidth: 2, - label: { - enabled: true, - fontColor: 'orange', - content: 'LineAnno' - } - }, - ], - }, - }; - public lineChartColors: Color[] = [ - { // grey - backgroundColor: 'rgba(148,159,177,0.2)', - borderColor: 'rgba(148,159,177,1)', - pointBackgroundColor: 'rgba(148,159,177,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(148,159,177,0.8)' - }, - { // dark grey - backgroundColor: 'rgba(77,83,96,0.2)', - borderColor: 'rgba(77,83,96,1)', - pointBackgroundColor: 'rgba(77,83,96,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(77,83,96,1)' - }, - { // red - backgroundColor: 'rgba(255,0,0,0.3)', - borderColor: 'red', - pointBackgroundColor: 'rgba(148,159,177,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(148,159,177,0.8)' - } - ]; - public lineChartLegend = true; - public lineChartType = 'line'; - // Graph widgets public widgetList = [ diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 1973efa..8ecad53 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -44,6 +44,13 @@ export class DashboardComponent { title: 'Sales Last 30 Days', dataType: DataType.currency, }, + { + type: 'graph', + name: 'sales_last_365_days', + icon: 'icon-diamond', + title: 'Sales Last Year', + dataType: DataType.currency, + }, { type: 'graph', name: 'purchases_last_7_days', @@ -56,6 +63,12 @@ export class DashboardComponent { title: 'Purchases Last 30 Days', dataType: DataType.currency, }, + { + type: 'graph', + name: 'purchases_last_365_days;', + title: 'Purchases Last Year', + dataType: DataType.currency, + }, ]; disableCategoryButton: boolean = false; diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts index 6fba7de..6d554ef 100644 --- a/src/app/dashboard/dashboard.routing.ts +++ b/src/app/dashboard/dashboard.routing.ts @@ -95,7 +95,7 @@ const routes: Routes = [ { path: 'more-graphs-and-tables', component: MoreStuffComponent, - data: { title: 'More Stuff'} + data: { title: 'Infographics'} } ], } diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 135d1ab..d4e5e2d 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -10,7 +10,6 @@ @@ -22,14 +21,13 @@
-

Last 12 months

+

Spend amount and number of organisations

@@ -40,15 +38,23 @@
-
+

Supplier Spend History

+
+ +
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index a6ca7ab..92c0c30 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -72,10 +72,9 @@ export class MoreStuffComponent implements OnInit { { data: [], label: ["Spend"], - backgroundColor: 'green', borderColor: 'blue', - hoverBackgroundColor: 'purple', - hoverBorderColor: 'red', + hoverBackgroundColor: 'blue', + hoverBorderColor: 'blue', }, ]; public supplierBubbleChartLabels: string[] = []; @@ -137,8 +136,8 @@ export class MoreStuffComponent implements OnInit { label: ["Value"], fill: false, borderColor: 'red', + hoverBackgroundColor: '#ffa1b5', hoverBorderColor: 'red', - hoverBackgroundColor: 'red', yAxisID: 'y-value', }, { @@ -146,7 +145,7 @@ export class MoreStuffComponent implements OnInit { label: ["Count"], fill: false, borderColor: 'blue', - hoverBackgroundColor: 'blue', + hoverBackgroundColor: '#52afed', hoverBorderColor: 'blue', yAxisID: 'y-count', }, @@ -169,16 +168,8 @@ export class MoreStuffComponent implements OnInit { public yearSpendChartColors: Color[] = [ { backgroundColor: [ - 'red', - 'green', - 'blue', - 'purple', - 'yellow', - 'brown', - 'magenta', - 'cyan', - 'orange', - 'pink' + '#ffa1b5', + '#52afed' ] } ]; @@ -204,14 +195,19 @@ export class MoreStuffComponent implements OnInit { half.push(item.half_total); quarter.push(item.quarter_total); }); - this.supplierMonthChartData[0].data = quarter.slice(0,10); - this.supplierMonthChartData[1].data = half.slice(0,10); - this.supplierMonthChartData[2].data = year.slice(0,10); - this.supplierMonthChartLabels = labels.slice(0,10); + this.supplierMonthChartData[0].data = quarter.slice(0,15); + this.supplierMonthChartData[1].data = half.slice(0,15); + this.supplierMonthChartData[2].data = year.slice(0,15); + this.supplierMonthChartLabels = labels.slice(0,15); } ) } - + public newGroup() { + this.supplierMonthChartData[0].data = quarter.slice(0,15); + this.supplierMonthChartData[1].data = half.slice(0,15); + this.supplierMonthChartData[2].data = year.slice(0,15); + this.supplierMonthChartLabels = labels.slice(0,15); + } public supplierMonthChartData: any[] = [ { data: [], @@ -225,17 +221,17 @@ export class MoreStuffComponent implements OnInit { data: [], label: ["6 Month"], fill: false, - borderColor: 'red', - hoverBorderColor: 'red', - hoverBackgroundColor: 'red', + borderColor: 'blue', + hoverBorderColor: 'blue', + hoverBackgroundColor: 'blue', }, { data: [], label: ["12 Month"], fill: false, - borderColor: 'red', - hoverBorderColor: 'red', - hoverBackgroundColor: 'red', + borderColor: 'orange', + hoverBorderColor: 'orange', + hoverBackgroundColor: 'orange', }, ]; public supplierMonthChartOptions: any = { diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 26a4ed9..31e297a 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -38,6 +38,14 @@
+ - - - -