142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
|
|
import { Component, ViewChild, OnInit } from '@angular/core';
|
|
import { ActivatedRoute, ParamMap } from '@angular/router';
|
|
|
|
import { Logger } from '@nsalaun/ng-logger';
|
|
import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
|
|
|
|
import * as _ from 'underscore';
|
|
|
|
import { Category } from './category';
|
|
import { CategoryService } from './category.service';
|
|
|
|
|
|
@Component({
|
|
selector: 'category-chart',
|
|
template: `
|
|
<jqxChart #categoryChart
|
|
[width]="'100%'"
|
|
[height]="400"
|
|
[title]="'Categories'"
|
|
[description]="''"
|
|
[showLegend]="false"
|
|
[seriesGroups]="seriesGroups">
|
|
</jqxChart>
|
|
`
|
|
})
|
|
export class CategoryChartComponent implements OnInit {
|
|
@ViewChild('categoryChart') chart: jqxChartComponent;
|
|
|
|
public seriesGroups: any = [{
|
|
type: 'donut',
|
|
source: [],
|
|
//showLabels: true,
|
|
series: [{
|
|
dataField: 'value',
|
|
displayText: 'category',
|
|
initialAngle: 90,
|
|
radius: 130,
|
|
innerRadius: 90,
|
|
formatSettings: { sufix: '€', decimalPlaces: 2 },
|
|
radiusDataField: 'category',
|
|
colorFunction: (value, itemIndex, series, group) => {
|
|
if(group.source[itemIndex].type === 'expenses') {
|
|
return 'tomato';
|
|
}
|
|
|
|
return 'yellowgreen';
|
|
},
|
|
opacity: 0.5
|
|
}]
|
|
}, {
|
|
type: 'donut',
|
|
source: [],
|
|
showLabels: true,
|
|
series: [{
|
|
dataField: 'value',
|
|
displayText: 'name',
|
|
initialAngle: 90,
|
|
labelRadius: 50,
|
|
radius: 85,
|
|
innerRadius: 75,
|
|
formatSettings: { sufix: '€', decimalPlaces: 2 },
|
|
colorFunction: (value, itemIndex, series, group) => {
|
|
if(group.source[itemIndex].name === 'Expenses') {
|
|
return 'tomato';
|
|
}
|
|
|
|
return 'yellowgreen';
|
|
}
|
|
}]
|
|
}];
|
|
|
|
constructor(
|
|
private activatedRoute: ActivatedRoute,
|
|
private logger: Logger,
|
|
private categoryService: CategoryService,
|
|
) {
|
|
//this.data = [];
|
|
}
|
|
|
|
loadData() {
|
|
let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
|
|
let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
|
|
let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');
|
|
|
|
this.categoryService.query(
|
|
+accountId,
|
|
fromDay,
|
|
toDay
|
|
).subscribe((results: Category[]) => {
|
|
let expenses = _.filter(results, function(item: Category) {
|
|
return item.expenses < 0;
|
|
}).map(function(item: Category) {
|
|
return {
|
|
category: item.category,
|
|
value: -item.expenses,
|
|
type: 'expenses'
|
|
};
|
|
});
|
|
|
|
expenses = _.sortBy(expenses, 'value').reverse();
|
|
|
|
let revenues = _.filter(results, function(item: Category) {
|
|
return item.revenues > 0;
|
|
}).map(function(item: Category) {
|
|
return {
|
|
category: item.category,
|
|
value: item.revenues,
|
|
type: 'revenues'
|
|
};
|
|
});
|
|
|
|
revenues = _.sortBy(revenues, 'value');
|
|
|
|
this.seriesGroups[0].source = expenses.concat(revenues);
|
|
|
|
let totals = [
|
|
{name: 'Expenses', value: 0},
|
|
{name: 'Revenues', value: 0}
|
|
];
|
|
|
|
results.forEach(function(item: Category) {
|
|
totals[0].value -= item.expenses;
|
|
totals[1].value += item.revenues;
|
|
});
|
|
|
|
this.seriesGroups[1].source = totals;
|
|
|
|
if(this.chart && this.chart.host) {
|
|
this.chart.refresh();
|
|
}
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
|
|
|
|
this.loadData();
|
|
}
|
|
}
|