From 9d17a331fa6b2eb277277a6ed69b8aa490e9a618 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 13 Apr 2018 16:07:26 +0100 Subject: [PATCH] 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'; - } - }