fixed view of charts to show currency where relevant
This commit is contained in:
parent
61cd0905d1
commit
52a2b6716c
2 changed files with 51 additions and 18 deletions
|
@ -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">
|
||||||
|
|
|
@ -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';
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue