weekly view fixed, broken category bar chart
Chart needs fixing and currencies should pipe to show currency
This commit is contained in:
parent
511f680800
commit
093cdef3cf
2 changed files with 56 additions and 24 deletions
|
@ -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>
|
||||||
|
|
|
@ -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];
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue