added preliminary pie dashboard
This commit is contained in:
parent
6c202fa84a
commit
351aa5b2c1
2 changed files with 93 additions and 26 deletions
|
@ -1,4 +1,4 @@
|
||||||
<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">
|
||||||
|
@ -7,12 +7,30 @@
|
||||||
</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 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>
|
||||||
|
</div>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Reference in a new issue