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