Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

working essential bar chart

Browse source
This commit is contained in:
piratefinn 2018-04-09 19:19:06 +01:00
parent 351aa5b2c1
commit 511f680800
2 changed files with 58 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app/panels/pie-panel.component.html
View file

@ -3,8 +3,8 @@
<div class="row"> <div class="row">
<div class="col-sm-8"> <div class="col-sm-8">
<h4 class="card-title mb-0">All Purchases</h4> <h4 class="card-title mb-0">All Purchases</h4>
</div><!--/.col--> </div>
</div><!--/.row--> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"
[data]="doughnutChartDataLocal" [data]="doughnutChartDataLocal"
@ -21,8 +21,8 @@
<div class="row"> <div class="row">
<div class="col-sm-8"> <div class="col-sm-8">
<h4 class="card-title mb-0">Weekly Spend</h4> <h4 class="card-title mb-0">Weekly Spend</h4>
</div><!--/.col--> </div>
</div><!--/.row--> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"
[data]="doughnutChartDataCategory" [data]="doughnutChartDataCategory"
@ -34,3 +34,21 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="showEssentialChart" class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-8">
<h4 class="card-title mb-0">Essential Purchases</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart
[datasets]="barChartDataEssential"
[labels]="barChartLabelsEssential"
[options]="barChartOptionsEssential"
[chartType]="barChartTypeEssential"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>

40
src/app/panels/pie-panel.component.ts
View file

@ -26,6 +26,30 @@ export class PiePanel implements OnInit {
myWeek3: any; myWeek3: any;
myWeek4: any; myWeek4: any;
public purchaseNotEssential: number;
public purchaseEssential: number;
public showEssentialChart = false;
public barChartDataEssential:any[]=[
{data: 0, label: 'Essential', stack: '1'},
{data: 0, label: 'Non-Essential', stack: '1'},
];
public barChartLabelsEssential:string[] = ['All Purchases'];
public barChartOptionsEssential:any = {
responsive: true,
scales:{
xAxes:[{
stacked:true
}],
yAxes:[{
stacked:true
}]
}
};
public barChartTypeEssential:string = 'horizontalBar';
//Old //Old
// public mainChartElements = 7; // public mainChartElements = 7;
@ -39,6 +63,13 @@ export class PiePanel implements OnInit {
result => { result => {
this.setWeekData(result); this.setWeekData(result);
this.setChartData(result.data.local_all); this.setChartData(result.data.local_all);
this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
this.barChartDataEssential = [
{data: [this.purchaseEssential], label: 'Essential', stack: '1'},
{data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
];
this.showEssentialChart = true;
}, },
error => { error => {
console.log('Retrieval Error'); console.log('Retrieval Error');
@ -53,12 +84,12 @@ export class PiePanel implements OnInit {
private setChartData(data1: any) { private setChartData(data1: any) {
this.doughnutChartDataLocal = Object.keys(data1).map(key => data1[key]); this.doughnutChartDataLocal = Object.keys(data1).map(key => data1[key]);
this.doughnutChartDataCategory = this.weekList1.value||0).map(key => this.weekList1.value[key]); //this.doughnutChartDataCategory = (this.weekList1.value).map(key => this.weekList1.value[key]);
// 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(data1), 0);
setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0); //setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0);
console.log(this.doughnutChartDataCategory); // console.log(this.doughnutChartDataCategory);
console.log(this.doughnutChartLabelsCategory); // console.log(this.doughnutChartLabelsCategory);
} }
private setDate () { private setDate () {
@ -74,6 +105,7 @@ 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.weekList2 = prop(data.data.categories, this.myWeek2);
this.weekList3 = prop(data.data.categories, this.myWeek3); this.weekList3 = prop(data.data.categories, this.myWeek3);
this.weekList4 = prop(data.data.categories, this.myWeek4); this.weekList4 = prop(data.data.categories, this.myWeek4);