fixed view of charts to show currency where relevant

This commit is contained in:
piratefinn 2018-04-12 14:12:34 +01:00
parent 61cd0905d1
commit 52a2b6716c
2 changed files with 51 additions and 18 deletions

View file

@ -1,7 +1,7 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-8"> <div class="col-12">
<h4 class="card-title mb-0">All Purchases</h4> <h4 class="card-title mb-0">All Purchases</h4>
</div> </div>
</div> </div>
@ -16,17 +16,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div *ngIf="showCategoryDoughnutChart" class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-8"> <div class="col-12">
<h4 class="card-title mb-0">Weekly Spend</h4> <h4 class="card-title mb-0">Weekly Spending by Category</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"
[data]="doughnutChartDataCategory" [datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory" [labels]="doughnutChartLabelsCategory"
[options]="doughtnutChartOptionsCategory"
[legend]="chartLegend" [legend]="chartLegend"
[chartType]="chartType" [chartType]="chartType"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
@ -37,8 +38,8 @@
<div *ngIf="showEssentialBarChart" class="card"> <div *ngIf="showEssentialBarChart" class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-8"> <div class="col-12">
<h4 class="card-title mb-0">Essential Purchases</h4> <h4 class="card-title mb-0">No. of Essential Purchases</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
@ -55,8 +56,8 @@
<div *ngIf="showCategoryBarChart" class="card"> <div *ngIf="showCategoryBarChart" class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-8"> <div class="col-12">
<h4 class="card-title mb-0">Month Purchases by Category</h4> <h4 class="card-title mb-0">Monthly Spending by Category</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">

View file

@ -1,4 +1,5 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
import { ApiService } from '../providers/api-service'; import { ApiService } from '../providers/api-service';
import { CustPiesService } from '../providers/cust-pies.service'; import { CustPiesService } from '../providers/cust-pies.service';
import { DataType } from '../shared/data-types.enum'; import { DataType } from '../shared/data-types.enum';
@ -19,6 +20,16 @@ export class PiePanel implements OnInit {
public doughnutChartDataCategory: number[] = []; public doughnutChartDataCategory: number[] = [];
public doughnutChartLabelsCategory: string[] = []; public doughnutChartLabelsCategory: string[] = [];
public doughtnutChartOptionsCategory:any = {
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.tooltipLabelCallback(tooltip, data);
},
},
},
}
dayList: any[] = []; dayList: any[] = [];
valueList: number[] = []; valueList: number[] = [];
myWeek1: any; myWeek1: any;
@ -32,6 +43,7 @@ export class PiePanel implements OnInit {
public purchaseEssential: number; public purchaseEssential: number;
public showEssentialBarChart = false; public showEssentialBarChart = false;
public showCategoryBarChart = false; public showCategoryBarChart = false;
public showCategoryDoughnutChart = false;
public barChartDataEssential:any[]=[ public barChartDataEssential:any[]=[
{data: 0, label: 'Essential', stack: '1'}, {data: 0, label: 'Essential', stack: '1'},
@ -53,7 +65,22 @@ export class PiePanel implements OnInit {
public barChartOptionsCategory:any = { public barChartOptionsCategory:any = {
scaleShowVerticalLines: false, 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 barChartTypeCategory:string = 'bar';
public barChartLegendCategory:boolean = false; public barChartLegendCategory:boolean = false;
@ -69,6 +96,7 @@ export class PiePanel implements OnInit {
constructor( constructor(
private api: ApiService, private api: ApiService,
private pieService: CustPiesService, private pieService: CustPiesService,
private currencyPipe: CurrencyPipe,
) { ) {
this.setDate(); this.setDate();
this.pieService.getPie().subscribe( this.pieService.getPie().subscribe(
@ -96,28 +124,25 @@ export class PiePanel implements OnInit {
} }
private setChartData(dataLocal: any, dataCat: any) { private setChartData(dataLocal: any, dataCat: any) {
console.log(dataLocal, dataCat);
this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]); this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
this.barChartLabelsCategory = Object.keys(dataCat); this.barChartLabelsCategory = Object.keys(dataCat);
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]); let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
this.barChartDataCategory = [ this.barChartDataCategory = [
{data: barChartDataCategoryInitial, label: 'Series A'}, {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 is currently a workaround for ng2-charts labels
setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0); setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0); setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
console.log(this.barChartDataCategory); this.showCategoryDoughnutChart = true;
console.log(barChartDataCategoryInitial);
this.showCategoryBarChart = true; this.showCategoryBarChart = true;
} }
private setDate () { private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD'); 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) { private setWeekData (data: any) {
@ -151,4 +176,11 @@ export class PiePanel implements OnInit {
return obj[key]; 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';
}
} }