From 3b2009186a395d59dd481ab869551d2f2c3f0ffa Mon Sep 17 00:00:00 2001 From: piratefinn Date: Mon, 26 Mar 2018 14:47:20 +0100 Subject: [PATCH 01/12] changed category view method --- src/app/dashboard/category-month.component.html | 8 ++++---- src/app/dashboard/category-month.component.ts | 11 ----------- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/src/app/dashboard/category-month.component.html b/src/app/dashboard/category-month.component.html index db24b1f..f7501d9 100644 --- a/src/app/dashboard/category-month.component.html +++ b/src/app/dashboard/category-month.component.html @@ -22,7 +22,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})
    @@ -64,7 +64,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})
    @@ -106,7 +106,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})
    @@ -148,7 +148,7 @@
  • - {{ categoryList[categoryEntry.category] || 'Uncategorised' }} + {{ categoryEntry.category || 'Uncategorised' }} {{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} ({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})
    diff --git a/src/app/dashboard/category-month.component.ts b/src/app/dashboard/category-month.component.ts index 140e8e3..c5cd3d1 100644 --- a/src/app/dashboard/category-month.component.ts +++ b/src/app/dashboard/category-month.component.ts @@ -31,7 +31,6 @@ export class CategoryMonthComponent implements OnInit { weekEssential3: number = 0; weekEssential4: number = 0; - categoryList: any; dayList: any[] = []; valueList: number[] = []; myWeek1: any; @@ -47,16 +46,6 @@ export class CategoryMonthComponent implements OnInit { private api: ApiService, ) { this.setDate(); - this.api.categoryList().subscribe( - result => { - this.categoryList = result.categories; - console.log('Category List received'); - }, - error => { - console.log('Retrieval Error'); - console.log( error._body ); - } - ); this.api.categoryTransactionList().subscribe( result => { this.setData(result); From d485001fb3812449e8c259bb0e7a422ce12d7ed0 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Mon, 26 Mar 2018 15:47:21 +0100 Subject: [PATCH 02/12] added preliminary pie dashboard --- src/app/panels/pie-panel.component.html | 50 ++++++++++++------ src/app/panels/pie-panel.component.ts | 69 +++++++++++++++++++++---- 2 files changed, 93 insertions(+), 26 deletions(-) diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 5a6376b..7c0265e 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -1,18 +1,36 @@ -
    -
    -
    -
    -

    All Purchases

    -
    -
    -
    - -
    +
    +
    +
    +
    +

    All Purchases

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Weekly Spend

    +
    +
    +
    + +
    +
    +
    diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index bae839f..417ba7d 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -1,7 +1,10 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { ApiService } from '../providers/api-service'; import { CustPiesService } from '../providers/cust-pies.service'; import { DataType } from '../shared/data-types.enum'; import { ChartData } from '../_interfaces/chart-data'; +import * as moment from 'moment'; +import 'rxjs/add/operator/map'; @Component({ selector: 'panel-pie', @@ -11,27 +14,73 @@ export class PiePanel implements OnInit { public chartType = 'doughnut'; public chartLegend = true; - public doughnutChartLabels: string[] = []; - public doughnutChartData: number[] = []; + public doughnutChartDataLocal: number[] = []; + public doughnutChartLabelsLocal: string[] = []; + public doughnutChartDataCategory: number[] = []; + public doughnutChartLabelsCategory: string[] = []; + dayList: any[] = []; + valueList: number[] = []; + myWeek1: any; + myWeek2: any; + myWeek3: any; + myWeek4: any; //Old // public mainChartElements = 7; constructor( + private api: ApiService, private pieService: CustPiesService, - ) { } - - public ngOnInit(): void { - this.pieService.getPie() - .subscribe( result => this.setData(result.pie) ); + ) { + this.setDate(); + this.pieService.getPie().subscribe( + result => { + this.setWeekData(result); + this.setChartData(result.data.local_all); + }, + error => { + console.log('Retrieval Error'); + console.log( error._body ); + } + ); } - private setData(data: any) { - this.doughnutChartData = Object.keys(data).map(key => data[key]); + public ngOnInit(): void { + + } + + private setChartData(data1: any) { + this.doughnutChartDataLocal = Object.keys(data1).map(key => data1[key]); + this.doughnutChartDataCategory = this.weekList1.value||0).map(key => this.weekList1.value[key]); // setTimeout is currently a workaround for ng2-charts labels - setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0); + setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(data1), 0); + setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0); + console.log(this.doughnutChartDataCategory); + console.log(this.doughnutChartLabelsCategory); + } + + private setDate () { + this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); + this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD'); + this.myWeek3 = moment(this.myWeek2).subtract(1, 'weeks').format('YYYY-MM-DD'); + this.myWeek4 = moment(this.myWeek3).subtract(1, 'weeks').format('YYYY-MM-DD'); + console.log(this.myWeek1, this.myWeek2, this.myWeek3, this.myWeek4) + } + + private setWeekData (data: any) { + function prop(obj: T, key: K) { + return obj[key]; + } + this.weekList1 = prop(data.data.categories, this.myWeek1); + this.weekList2 = prop(data.data.categories, this.myWeek2); + this.weekList3 = prop(data.data.categories, this.myWeek3); + this.weekList4 = prop(data.data.categories, this.myWeek4); + this.weekEssential1 = prop(data.data.essentials, this.myWeek1); + this.weekEssential2 = prop(data.data.essentials, this.myWeek2); + this.weekEssential3 = prop(data.data.essentials, this.myWeek3); + this.weekEssential4 = prop(data.data.essentials, this.myWeek4); } // convert Hex to RGBA From 80daa2d771f4fd8dfd9b008e6b30eeb3eb11d8f9 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Mon, 9 Apr 2018 19:19:06 +0100 Subject: [PATCH 03/12] working essential bar chart --- src/app/panels/pie-panel.component.html | 26 +++++++++++++--- src/app/panels/pie-panel.component.ts | 40 ++++++++++++++++++++++--- 2 files changed, 58 insertions(+), 8 deletions(-) diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 7c0265e..95211f3 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -3,8 +3,8 @@

    All Purchases

    -
    -
    +
    +

    Weekly Spend

    -
    -
    +
    +
    +
    +
    +
    +
    +

    Essential Purchases

    +
    +
    +
    + +
    +
    +
    diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index 417ba7d..cd26d15 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -26,6 +26,30 @@ export class PiePanel implements OnInit { myWeek3: any; myWeek4: any; + public purchaseNotEssential: number; + public purchaseEssential: number; + public showEssentialChart = false; + + public barChartDataEssential:any[]=[ + {data: 0, label: 'Essential', stack: '1'}, + {data: 0, label: 'Non-Essential', stack: '1'}, + ]; + + public barChartLabelsEssential:string[] = ['All Purchases']; + + public barChartOptionsEssential:any = { + responsive: true, + scales:{ + xAxes:[{ + stacked:true + }], + yAxes:[{ + stacked:true + }] + } + }; + public barChartTypeEssential:string = 'horizontalBar'; + //Old // public mainChartElements = 7; @@ -39,6 +63,13 @@ export class PiePanel implements OnInit { result => { this.setWeekData(result); this.setChartData(result.data.local_all); + 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'}, + ]; + this.showEssentialChart = true; }, error => { console.log('Retrieval Error'); @@ -53,12 +84,12 @@ export class PiePanel implements OnInit { private setChartData(data1: any) { this.doughnutChartDataLocal = Object.keys(data1).map(key => data1[key]); - this.doughnutChartDataCategory = this.weekList1.value||0).map(key => this.weekList1.value[key]); + //this.doughnutChartDataCategory = (this.weekList1.value).map(key => this.weekList1.value[key]); // setTimeout is currently a workaround for ng2-charts labels setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(data1), 0); - setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0); - console.log(this.doughnutChartDataCategory); - console.log(this.doughnutChartLabelsCategory); + //setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0); + // console.log(this.doughnutChartDataCategory); + // console.log(this.doughnutChartLabelsCategory); } private setDate () { @@ -74,6 +105,7 @@ export class PiePanel implements OnInit { return obj[key]; } this.weekList1 = prop(data.data.categories, this.myWeek1); + console.log(this.weekList1); this.weekList2 = prop(data.data.categories, this.myWeek2); this.weekList3 = prop(data.data.categories, this.myWeek3); this.weekList4 = prop(data.data.categories, this.myWeek4); From 96b4e0f3823731cb5be90feeb04adcb3517dd35e Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 11 Apr 2018 19:10:03 +0100 Subject: [PATCH 04/12] weekly view fixed, broken category bar chart Chart needs fixing and currencies should pipe to show currency --- src/app/panels/pie-panel.component.html | 27 +++++++++++-- src/app/panels/pie-panel.component.ts | 53 +++++++++++++++---------- 2 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 95211f3..3dcadee 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -34,15 +34,15 @@ -
    +

    Essential Purchases

    -
    -
    +
    +
    -
    +
    +
    +
    +
    +

    Month Purchases by Category

    +
    +
    +
    + +
    +
    +
    diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index cd26d15..f11407a 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -26,17 +26,18 @@ export class PiePanel implements OnInit { myWeek3: any; myWeek4: any; + weekList1 = []; + public purchaseNotEssential: number; public purchaseEssential: number; - public showEssentialChart = false; + public showEssentialBarChart = false; + public showCategoryBarChart = false; public barChartDataEssential:any[]=[ {data: 0, label: 'Essential', stack: '1'}, {data: 0, label: 'Non-Essential', stack: '1'}, ]; - public barChartLabelsEssential:string[] = ['All Purchases']; - public barChartOptionsEssential:any = { responsive: true, scales:{ @@ -50,6 +51,17 @@ export class PiePanel implements OnInit { }; public barChartTypeEssential:string = 'horizontalBar'; + public barChartOptionsCategory:any = { + scaleShowVerticalLines: false, + responsive: true + }; + public barChartTypeCategory:string = 'bar'; + public barChartLegendCategory:boolean = false; + public barChartDataCategory:any[]=[ + {data: 0, label: 'Series A'}, + ]; + public barChartLabelsCategory:string[] = []; + //Old // public mainChartElements = 7; @@ -62,14 +74,15 @@ export class PiePanel implements OnInit { this.pieService.getPie().subscribe( result => { this.setWeekData(result); - this.setChartData(result.data.local_all); + this.setChartData(result.data.local_all, result.data.cat_total); 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'}, ]; - this.showEssentialChart = true; + this.showEssentialBarChart = true; + }, error => { console.log('Retrieval Error'); @@ -82,14 +95,18 @@ export class PiePanel implements OnInit { } - private setChartData(data1: any) { - this.doughnutChartDataLocal = Object.keys(data1).map(key => data1[key]); - //this.doughnutChartDataCategory = (this.weekList1.value).map(key => this.weekList1.value[key]); + private setChartData(dataLocal: any, dataCat: any) { + console.log(dataLocal, dataCat); + this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]); + this.barChartLabelsCategory = Object.keys(dataCat); + this.barChartDataCategory = Object.keys(dataCat).map(key => dataCat[key]); + this.doughnutChartDataCategory = this.weekList1.map(function(a) {return a.value;}); // setTimeout is currently a workaround for ng2-charts labels - setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(data1), 0); - //setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0); - // console.log(this.doughnutChartDataCategory); - // console.log(this.doughnutChartLabelsCategory); + setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0); + setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); + console.log(this.barChartDataCategory); + console.log(this.barChartLabelsCategory); + this.showCategoryBarChart = true; } private setDate () { @@ -105,14 +122,6 @@ export class PiePanel implements OnInit { return obj[key]; } this.weekList1 = prop(data.data.categories, this.myWeek1); - console.log(this.weekList1); - this.weekList2 = prop(data.data.categories, this.myWeek2); - this.weekList3 = prop(data.data.categories, this.myWeek3); - this.weekList4 = prop(data.data.categories, this.myWeek4); - this.weekEssential1 = prop(data.data.essentials, this.myWeek1); - this.weekEssential2 = prop(data.data.essentials, this.myWeek2); - this.weekEssential3 = prop(data.data.essentials, this.myWeek3); - this.weekEssential4 = prop(data.data.essentials, this.myWeek4); } // convert Hex to RGBA @@ -135,4 +144,8 @@ export class PiePanel implements OnInit { console.log(e); } + private prop(obj: T, key: K) { + return obj[key]; + } + } From 823a1d398fb71f5c669136f699a1b76251f1498f Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 11 Apr 2018 19:19:34 +0100 Subject: [PATCH 05/12] fixed bar chart --- src/app/panels/pie-panel.component.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index f11407a..2c86499 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -58,7 +58,7 @@ export class PiePanel implements OnInit { public barChartTypeCategory:string = 'bar'; public barChartLegendCategory:boolean = false; public barChartDataCategory:any[]=[ - {data: 0, label: 'Series A'}, + {data: [], label: 'Series A'}, ]; public barChartLabelsCategory:string[] = []; @@ -99,13 +99,16 @@ export class PiePanel implements OnInit { console.log(dataLocal, dataCat); this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]); this.barChartLabelsCategory = Object.keys(dataCat); - this.barChartDataCategory = Object.keys(dataCat).map(key => dataCat[key]); + let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); + this.barChartDataCategory = [ + {data: barChartDataCategoryInitial, label: 'Series A'}, + ]; this.doughnutChartDataCategory = this.weekList1.map(function(a) {return a.value;}); // setTimeout is currently a workaround for ng2-charts labels setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0); setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); console.log(this.barChartDataCategory); - console.log(this.barChartLabelsCategory); + console.log(barChartDataCategoryInitial); this.showCategoryBarChart = true; } From a50cb1bac0ffba1e8d78d7496f67a3d0990d7f9e Mon Sep 17 00:00:00 2001 From: piratefinn Date: Thu, 12 Apr 2018 14:12:34 +0100 Subject: [PATCH 06/12] fixed view of charts to show currency where relevant --- src/app/panels/pie-panel.component.html | 19 +++++----- src/app/panels/pie-panel.component.ts | 50 ++++++++++++++++++++----- 2 files changed, 51 insertions(+), 18 deletions(-) diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 3dcadee..6b210ec 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -1,7 +1,7 @@
    -
    +

    All Purchases

    @@ -16,17 +16,18 @@
    -
    +
    -
    -

    Weekly Spend

    +
    +

    Weekly Spending by Category

    -
    -

    Essential Purchases

    +
    +

    No. of Essential Purchases

    @@ -55,8 +56,8 @@
    -
    -

    Month Purchases by Category

    +
    +

    Monthly Spending by Category

    diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index 2c86499..29de0df 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { CurrencyPipe } from '@angular/common'; import { ApiService } from '../providers/api-service'; import { CustPiesService } from '../providers/cust-pies.service'; import { DataType } from '../shared/data-types.enum'; @@ -19,6 +20,16 @@ export class PiePanel implements OnInit { public doughnutChartDataCategory: number[] = []; public doughnutChartLabelsCategory: string[] = []; + public doughtnutChartOptionsCategory:any = { + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.tooltipLabelCallback(tooltip, data); + }, + }, + }, + } + dayList: any[] = []; valueList: number[] = []; myWeek1: any; @@ -32,6 +43,7 @@ export class PiePanel implements OnInit { public purchaseEssential: number; public showEssentialBarChart = false; public showCategoryBarChart = false; + public showCategoryDoughnutChart = false; public barChartDataEssential:any[]=[ {data: 0, label: 'Essential', stack: '1'}, @@ -53,7 +65,22 @@ export class PiePanel implements OnInit { public barChartOptionsCategory:any = { scaleShowVerticalLines: false, - responsive: true + responsive: true, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + callback: label => `£${label}` + } + }] + }, + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.tooltipLabelCallback(tooltip, data); + }, + }, + }, }; public barChartTypeCategory:string = 'bar'; public barChartLegendCategory:boolean = false; @@ -69,6 +96,7 @@ export class PiePanel implements OnInit { constructor( private api: ApiService, private pieService: CustPiesService, + private currencyPipe: CurrencyPipe, ) { this.setDate(); this.pieService.getPie().subscribe( @@ -96,28 +124,25 @@ export class PiePanel implements OnInit { } private setChartData(dataLocal: any, dataCat: any) { - console.log(dataLocal, dataCat); this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]); this.barChartLabelsCategory = Object.keys(dataCat); let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); this.barChartDataCategory = [ {data: barChartDataCategoryInitial, label: 'Series A'}, ]; - this.doughnutChartDataCategory = this.weekList1.map(function(a) {return a.value;}); + 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.doughnutChartLabelsLocal = Object.keys(dataLocal), 0); setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); - console.log(this.barChartDataCategory); - console.log(barChartDataCategoryInitial); + this.showCategoryDoughnutChart = true; this.showCategoryBarChart = true; } private setDate () { this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); - this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD'); - this.myWeek3 = moment(this.myWeek2).subtract(1, 'weeks').format('YYYY-MM-DD'); - this.myWeek4 = moment(this.myWeek3).subtract(1, 'weeks').format('YYYY-MM-DD'); - console.log(this.myWeek1, this.myWeek2, this.myWeek3, this.myWeek4) } private setWeekData (data: any) { @@ -151,4 +176,11 @@ export class PiePanel implements OnInit { return obj[key]; } + 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'); + return value || '0'; + } + } From 66ed89ffc5eaa50f187e23891d1853f4e097e693 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 13 Apr 2018 16:07:26 +0100 Subject: [PATCH 07/12] transferred stuff from pie panel to dashboard --- .../dashboard-customer.component.html | 64 ++++++++- .../dashboard/dashboard-customer.component.ts | 130 +++++++++++++++++ src/app/panels/pie-panel.component.html | 56 -------- src/app/panels/pie-panel.component.ts | 134 +----------------- 4 files changed, 195 insertions(+), 189 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index e8019a4..5325ccc 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -14,12 +14,74 @@
    +
    +
    +
    +
    +
    +

    Weekly Spending by Category

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

    No. of Essential Purchases

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

    Monthly Spending by Category

    +
    +
    +
    + +
    +
    +
    +
    -

    Purchases by Week

    +

    Weekly Purchase No.

    diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 55f1b6a..d70a901 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -1,4 +1,5 @@ import { Directive, Component, OnInit } from '@angular/core'; +import { CurrencyPipe } from '@angular/common'; import { ApiService } from '../providers/api-service'; import { Router } from '@angular/router'; import { GraphWidget } from '../widgets/graph-widget.component'; @@ -22,6 +23,73 @@ export class DashboardCustomerComponent implements OnInit { disableSectorButton: boolean = false; + public chartType = 'doughnut'; + public chartLegend = true; + public doughnutChartDataCategory: number[] = []; + public doughnutChartLabelsCategory: string[] = []; + + public doughtnutChartOptionsCategory:any = { + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.tooltipLabelCallback(tooltip, data); + }, + }, + }, + } + + myWeek1: any; + + weekList1 = []; + + public purchaseNotEssential: number; + public purchaseEssential: number; + public showEssentialBarChart = false; + public showCategoryBarChart = false; + public showCategoryDoughnutChart = false; + + public barChartDataEssential:any[]=[ + {data: 0, label: 'Essential', stack: '1'}, + {data: 0, label: 'Non-Essential', stack: '1'}, + ]; + public barChartLabelsEssential:string[] = ['All Purchases']; + public barChartOptionsEssential:any = { + responsive: true, + scales:{ + xAxes:[{ + stacked:true + }], + yAxes:[{ + stacked:true + }] + } + }; + public barChartTypeEssential:string = 'horizontalBar'; + + public barChartOptionsCategory:any = { + scaleShowVerticalLines: false, + responsive: true, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + callback: label => `£${label}` + } + }] + }, + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.tooltipLabelCallback(tooltip, data); + }, + }, + }, + }; + public barChartTypeCategory:string = 'bar'; + public barChartLegendCategory:boolean = false; + public barChartDataCategory:any[]=[]; + public barChartLabelsCategory:string[] = []; + weekPurchaseList = { first: 0, second: 0, @@ -140,11 +208,22 @@ export class DashboardCustomerComponent implements OnInit { constructor( private api: ApiService, + private currencyPipe: CurrencyPipe, ) { + this.setDate(); this.api.customerStats().subscribe( result => { this.setWeekPurchaseList(result.weeks); this.setSectorList(result.sectors); + this.setWeekData(result); + this.setChartData(result.data.cat_total); + 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'}, + ]; + this.showEssentialBarChart = true; }, error => { console.log('Retrieval Error'); @@ -153,6 +232,33 @@ export class DashboardCustomerComponent implements OnInit { ); } + private setChartData(dataCat: any) { + this.barChartLabelsCategory = Object.keys(dataCat); + let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); + this.barChartDataCategory = [ + {data: barChartDataCategoryInitial, label: 'Series A'}, + ]; + 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; + this.showCategoryBarChart = true; + } + + private setDate () { + this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); + } + + private setWeekData (data: any) { + function prop(obj: T, key: K) { + return obj[key]; + } + this.weekList1 = prop(data.data.categories, this.myWeek1); + } + public setWeekPurchaseList (data: any) { this.weekPurchaseList = { first: data.first, @@ -173,6 +279,30 @@ export class DashboardCustomerComponent implements OnInit { this.sectorLimit = 22; } + public convertHex(hex: string, opacity: number) { + hex = hex.replace('#', ''); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')'; + return rgba; + } + + 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'); + return value || '0'; + } + + // events + public chartClicked(e: any): void { + } + + public chartHovered(e: any): void { + } + ngOnInit(): void { } } diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 6b210ec..0ddfafb 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -16,59 +16,3 @@
    -
    -
    -
    -
    -

    Weekly Spending by Category

    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -

    No. of Essential Purchases

    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -

    Monthly Spending by Category

    -
    -
    -
    - -
    -
    -
    diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index 29de0df..3b8b39c 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { CurrencyPipe } from '@angular/common'; import { ApiService } from '../providers/api-service'; import { CustPiesService } from '../providers/cust-pies.service'; import { DataType } from '../shared/data-types.enum'; @@ -17,100 +16,14 @@ export class PiePanel implements OnInit { public chartLegend = true; public doughnutChartDataLocal: number[] = []; public doughnutChartLabelsLocal: string[] = []; - public doughnutChartDataCategory: number[] = []; - public doughnutChartLabelsCategory: string[] = []; - - public doughtnutChartOptionsCategory:any = { - tooltips: { - callbacks: { - label: (tooltip, data) => { - return this.tooltipLabelCallback(tooltip, data); - }, - }, - }, - } - - dayList: any[] = []; - valueList: number[] = []; - myWeek1: any; - myWeek2: any; - myWeek3: any; - myWeek4: any; - - weekList1 = []; - - public purchaseNotEssential: number; - public purchaseEssential: number; - public showEssentialBarChart = false; - public showCategoryBarChart = false; - public showCategoryDoughnutChart = false; - - public barChartDataEssential:any[]=[ - {data: 0, label: 'Essential', stack: '1'}, - {data: 0, label: 'Non-Essential', stack: '1'}, - ]; - public barChartLabelsEssential:string[] = ['All Purchases']; - public barChartOptionsEssential:any = { - responsive: true, - scales:{ - xAxes:[{ - stacked:true - }], - yAxes:[{ - stacked:true - }] - } - }; - public barChartTypeEssential:string = 'horizontalBar'; - - public barChartOptionsCategory:any = { - scaleShowVerticalLines: false, - responsive: true, - scales: { - yAxes: [{ - ticks: { - beginAtZero: true, - callback: label => `£${label}` - } - }] - }, - tooltips: { - callbacks: { - label: (tooltip, data) => { - return this.tooltipLabelCallback(tooltip, data); - }, - }, - }, - }; - public barChartTypeCategory:string = 'bar'; - public barChartLegendCategory:boolean = false; - public barChartDataCategory:any[]=[ - {data: [], label: 'Series A'}, - ]; - public barChartLabelsCategory:string[] = []; - - //Old - - // public mainChartElements = 7; constructor( private api: ApiService, private pieService: CustPiesService, - private currencyPipe: CurrencyPipe, ) { - this.setDate(); this.pieService.getPie().subscribe( result => { - this.setWeekData(result); - this.setChartData(result.data.local_all, result.data.cat_total); - 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'}, - ]; - this.showEssentialBarChart = true; - + this.setChartData(result.local_all); }, error => { console.log('Retrieval Error'); @@ -123,33 +36,10 @@ export class PiePanel implements OnInit { } - private setChartData(dataLocal: any, dataCat: any) { + private setChartData(dataLocal: any) { this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]); - this.barChartLabelsCategory = Object.keys(dataCat); - let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); - this.barChartDataCategory = [ - {data: barChartDataCategoryInitial, label: 'Series A'}, - ]; - 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.doughnutChartLabelsLocal = Object.keys(dataLocal), 0); - setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); - this.showCategoryDoughnutChart = true; - this.showCategoryBarChart = true; - } - - private setDate () { - this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); - } - - private setWeekData (data: any) { - function prop(obj: T, key: K) { - return obj[key]; - } - this.weekList1 = prop(data.data.categories, this.myWeek1); } // convert Hex to RGBA @@ -163,24 +53,4 @@ export class PiePanel implements OnInit { return rgba; } - // events - public chartClicked(e: any): void { - console.log(e); - } - - public chartHovered(e: any): void { - console.log(e); - } - - private prop(obj: T, key: K) { - return obj[key]; - } - - 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'); - return value || '0'; - } - } From 80fc9f330fe04c7bd4076684547751027dad7e72 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 13 Apr 2018 16:37:26 +0100 Subject: [PATCH 08/12] various fixes --- .../dashboard/dashboard-customer.component.ts | 5 +- .../dashboard/transaction-log.component.html | 86 +++++++++---------- src/app/layouts/full-layout.component.html | 8 ++ src/app/layouts/full-layout.component.ts | 1 - src/app/panels/pie-panel.component.ts | 1 - 5 files changed, 54 insertions(+), 47 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index d70a901..0d17e88 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -6,6 +6,8 @@ import { GraphWidget } from '../widgets/graph-widget.component'; 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 'rxjs/add/operator/map'; @Component({ templateUrl: 'dashboard-customer.component.html' @@ -25,7 +27,7 @@ export class DashboardCustomerComponent implements OnInit { public chartType = 'doughnut'; public chartLegend = true; - public doughnutChartDataCategory: number[] = []; + public doughnutChartDataCategory: any[] = []; public doughnutChartLabelsCategory: string[] = []; public doughtnutChartOptionsCategory:any = { @@ -293,7 +295,6 @@ export class DashboardCustomerComponent implements OnInit { var dataset = data.datasets[tooltipItem.datasetIndex]; var value = dataset.data[tooltipItem.index]; return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2'); - return value || '0'; } // events diff --git a/src/app/dashboard/transaction-log.component.html b/src/app/dashboard/transaction-log.component.html index 424897e..9b07ec1 100644 --- a/src/app/dashboard/transaction-log.component.html +++ b/src/app/dashboard/transaction-log.component.html @@ -1,49 +1,6 @@
    -
    -
    - Log of Outgoing Transactions - This lists all purchases that have been submitted. -
    -
    - - - - - - - - - - - -
    SellerValuePurchase Time
    - - - -
    -
    - No Transactions available. -
    -
    Recurring Transactions @@ -140,6 +97,49 @@ No Recurring Transactions.
    +
    +
    + Log of Outgoing Transactions + This lists all purchases that have been submitted. +
    +
    + + + + + + + + + + + +
    SellerValuePurchase Time
    + + + +
    +
    + No Transactions available. +
    +
    diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 8e4d931..13887c7 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -97,6 +97,14 @@
    • +
  • + +
    +
    +
    Click to Close Menu
    +
    +     +
    • diff --git a/src/app/layouts/full-layout.component.ts b/src/app/layouts/full-layout.component.ts index 453a8df..ff74ceb 100644 --- a/src/app/layouts/full-layout.component.ts +++ b/src/app/layouts/full-layout.component.ts @@ -39,7 +39,6 @@ export class FullLayoutComponent implements OnInit { .logout() .subscribe( result => { - console.log('Logged out!'); localStorage.clear(); this.router.navigate(['/login']); } diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index 3b8b39c..80f64e1 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -3,7 +3,6 @@ import { ApiService } from '../providers/api-service'; import { CustPiesService } from '../providers/cust-pies.service'; import { DataType } from '../shared/data-types.enum'; import { ChartData } from '../_interfaces/chart-data'; -import * as moment from 'moment'; import 'rxjs/add/operator/map'; @Component({ From 5f49a738b1e15c0fa49c5eeb08ffd5db27bdba09 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Mon, 16 Apr 2018 14:52:19 +0100 Subject: [PATCH 09/12] Added hint for closing menu --- src/app/layouts/full-layout.component.html | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 13887c7..baf33dd 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -25,6 +25,13 @@
    From 2ca7fd458a65cc4a20b87d78e0fcbe78ab78e5d3 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Mon, 16 Apr 2018 15:08:23 +0100 Subject: [PATCH 10/12] Fixed instruction for close menu button --- src/app/layouts/full-layout.component.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index baf33dd..58baf2c 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -26,10 +26,8 @@