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

added preliminary pie dashboard

Browse source
This commit is contained in:
piratefinn 2018-03-26 15:47:21 +01:00
parent 6c202fa84a
commit 351aa5b2c1
2 changed files with 93 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,36 @@
<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-sm-8">
<h4 class="card-title mb-0">All Purchases</h4> <h4 class="card-title mb-0">All Purchases</h4>
</div><!--/.col--> </div><!--/.col-->
</div><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"
[data]="doughnutChartData" [data]="doughnutChartDataLocal"
[labels]="doughnutChartLabels" [labels]="doughnutChartLabelsLocal"
[legend]="chartLegend" [legend]="chartLegend"
[chartType]="chartType" [chartType]="chartType"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas> (chartClick)="chartClicked($event)"></canvas>
</div>
</div> </div>
</div> </div>
</div>
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-8">
<h4 class="card-title mb-0">Weekly Spend</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[data]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>

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

@ -1,7 +1,10 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
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';
import { ChartData } from '../_interfaces/chart-data'; import { ChartData } from '../_interfaces/chart-data';
import * as moment from 'moment';
import 'rxjs/add/operator/map';
@Component({ @Component({
selector: 'panel-pie', selector: 'panel-pie',
@ -11,27 +14,73 @@ export class PiePanel implements OnInit {
public chartType = 'doughnut'; public chartType = 'doughnut';
public chartLegend = true; public chartLegend = true;
public doughnutChartLabels: string[] = []; public doughnutChartDataLocal: number[] = [];
public doughnutChartData: number[] = []; public doughnutChartLabelsLocal: string[] = [];
public doughnutChartDataCategory: number[] = [];
public doughnutChartLabelsCategory: string[] = [];
dayList: any[] = [];
valueList: number[] = [];
myWeek1: any;
myWeek2: any;
myWeek3: any;
myWeek4: any;
//Old //Old
// public mainChartElements = 7; // public mainChartElements = 7;
constructor( constructor(
private api: ApiService,
private pieService: CustPiesService, private pieService: CustPiesService,
) { } ) {
this.setDate();
public ngOnInit(): void { this.pieService.getPie().subscribe(
this.pieService.getPie() result => {
.subscribe( result => this.setData(result.pie) ); this.setWeekData(result);
this.setChartData(result.data.local_all);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
} }
private setData(data: any) { public ngOnInit(): void {
this.doughnutChartData = Object.keys(data).map(key => data[key]);
}
private setChartData(data1: any) {
this.doughnutChartDataLocal = Object.keys(data1).map(key => data1[key]);
this.doughnutChartDataCategory = this.weekList1.value||0).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.doughnutChartLabels = Object.keys(data), 0); setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(data1), 0);
setTimeout(() => this.doughnutChartLabelsCategory = Object.keys(this.weekList1.category), 0);
console.log(this.doughnutChartDataCategory);
console.log(this.doughnutChartLabelsCategory);
}
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) {
function prop<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
this.weekList1 = prop(data.data.categories, this.myWeek1);
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