weekly view fixed, broken category bar chart

Chart needs fixing and currencies should pipe to show currency
This commit is contained in:
piratefinn 2018-04-11 19:10:03 +01:00
parent 511f680800
commit 093cdef3cf
2 changed files with 56 additions and 24 deletions

View file

@ -34,15 +34,15 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="showEssentialChart" 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-sm-8">
<h4 class="card-title mb-0">Essential Purchases</h4> <h4 class="card-title mb-0">Essential Purchases</h4>
</div><!--/.col--> </div>
</div><!--/.row--> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart <canvas baseChart class="chart"
[datasets]="barChartDataEssential" [datasets]="barChartDataEssential"
[labels]="barChartLabelsEssential" [labels]="barChartLabelsEssential"
[options]="barChartOptionsEssential" [options]="barChartOptionsEssential"
@ -52,3 +52,22 @@
</div> </div>
</div> </div>
</div> </div>
<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>
</div>
<div class="chart-wrapper">
<canvas baseChart
[datasets]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>

View file

@ -26,17 +26,18 @@ export class PiePanel implements OnInit {
myWeek3: any; myWeek3: any;
myWeek4: any; myWeek4: any;
weekList1 = [];
public purchaseNotEssential: number; public purchaseNotEssential: number;
public purchaseEssential: number; public purchaseEssential: number;
public showEssentialChart = false; public showEssentialBarChart = false;
public showCategoryBarChart = false;
public barChartDataEssential:any[]=[ public barChartDataEssential:any[]=[
{data: 0, label: 'Essential', stack: '1'}, {data: 0, label: 'Essential', stack: '1'},
{data: 0, label: 'Non-Essential', stack: '1'}, {data: 0, label: 'Non-Essential', stack: '1'},
]; ];
public barChartLabelsEssential:string[] = ['All Purchases']; public barChartLabelsEssential:string[] = ['All Purchases'];
public barChartOptionsEssential:any = { public barChartOptionsEssential:any = {
responsive: true, responsive: true,
scales:{ scales:{
@ -50,6 +51,17 @@ export class PiePanel implements OnInit {
}; };
public barChartTypeEssential:string = 'horizontalBar'; public barChartTypeEssential:string = 'horizontalBar';
public barChartOptionsCategory:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartTypeCategory:string = 'bar';
public barChartLegendCategory:boolean = false;
public barChartDataCategory:any[]=[
{data: 0, label: 'Series A'},
];
public barChartLabelsCategory:string[] = [];
//Old //Old
// public mainChartElements = 7; // public mainChartElements = 7;
@ -62,14 +74,15 @@ export class PiePanel implements OnInit {
this.pieService.getPie().subscribe( this.pieService.getPie().subscribe(
result => { result => {
this.setWeekData(result); this.setWeekData(result);
this.setChartData(result.data.local_all); this.setChartData(result.data.local_all, result.data.cat_total);
this.purchaseEssential = result.data.essentials.purchase_no_essential_total; this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential; this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
this.barChartDataEssential = [ this.barChartDataEssential = [
{data: [this.purchaseEssential], label: 'Essential', stack: '1'}, {data: [this.purchaseEssential], label: 'Essential', stack: '1'},
{data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'}, {data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
]; ];
this.showEssentialChart = true; this.showEssentialBarChart = true;
}, },
error => { error => {
console.log('Retrieval Error'); console.log('Retrieval Error');
@ -82,14 +95,18 @@ export class PiePanel implements OnInit {
} }
private setChartData(data1: any) { private setChartData(dataLocal: any, dataCat: any) {
this.doughnutChartDataLocal = Object.keys(data1).map(key => data1[key]); console.log(dataLocal, dataCat);
//this.doughnutChartDataCategory = (this.weekList1.value).map(key => this.weekList1.value[key]); this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
this.barChartLabelsCategory = Object.keys(dataCat);
this.barChartDataCategory = Object.keys(dataCat).map(key => dataCat[key]);
this.doughnutChartDataCategory = this.weekList1.map(function(a) {return a.value;});
// setTimeout is currently a workaround for ng2-charts labels // setTimeout is currently a workaround for ng2-charts labels
setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(data1), 0); setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
//setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0); setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
// console.log(this.doughnutChartDataCategory); console.log(this.barChartDataCategory);
// console.log(this.doughnutChartLabelsCategory); console.log(this.barChartLabelsCategory);
this.showCategoryBarChart = true;
} }
private setDate () { private setDate () {
@ -105,14 +122,6 @@ export class PiePanel implements OnInit {
return obj[key]; return obj[key];
} }
this.weekList1 = prop(data.data.categories, this.myWeek1); this.weekList1 = prop(data.data.categories, this.myWeek1);
console.log(this.weekList1);
this.weekList2 = prop(data.data.categories, this.myWeek2);
this.weekList3 = prop(data.data.categories, this.myWeek3);
this.weekList4 = prop(data.data.categories, this.myWeek4);
this.weekEssential1 = prop(data.data.essentials, this.myWeek1);
this.weekEssential2 = prop(data.data.essentials, this.myWeek2);
this.weekEssential3 = prop(data.data.essentials, this.myWeek3);
this.weekEssential4 = prop(data.data.essentials, this.myWeek4);
} }
// convert Hex to RGBA // convert Hex to RGBA
@ -135,4 +144,8 @@ export class PiePanel implements OnInit {
console.log(e); console.log(e);
} }
private prop<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
} }