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'; + } + }