108 lines
2.4 KiB
TypeScript
108 lines
2.4 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
|
|
import * as c3 from 'c3';
|
|
|
|
import {
|
|
Component, ElementRef,
|
|
Inject, Input, Output,
|
|
OnInit, OnChanges
|
|
} from '@angular/core';
|
|
|
|
import { Account } from '../accounts/account';
|
|
import { CategoryService } from './category.service';
|
|
|
|
@Component({
|
|
selector: 'category-chart',
|
|
template: '<div></div>'
|
|
})
|
|
export class CategoryChartComponent implements OnInit, OnChanges {
|
|
@Input() minDate: Date;
|
|
@Input() maxDate: Date;
|
|
@Input() account: Account;
|
|
|
|
chart: c3.ChartAPI;
|
|
|
|
constructor(
|
|
private elementRef: ElementRef,
|
|
private categoryService: CategoryService,
|
|
) {}
|
|
|
|
loadData(account: Account) {
|
|
this.categoryService.query(
|
|
account.id,
|
|
this.minDate,
|
|
this.maxDate
|
|
).subscribe((results) => {
|
|
var expenses=[],
|
|
revenues=[],
|
|
colors={},
|
|
names={};
|
|
|
|
var revenuesColor = 'green',
|
|
expensesColor = 'orange';
|
|
|
|
for(let result of results) {
|
|
if(result.revenues > 0) {
|
|
var revenuesName = 'revenues-' + result.category;
|
|
|
|
revenues.push([revenuesName, result.revenues]);
|
|
names[revenuesName] = result.category;
|
|
colors[revenuesName] = revenuesColor;
|
|
}
|
|
|
|
if(result.expenses < 0) {
|
|
var expensesName = 'expenses-' + result.category;
|
|
|
|
expenses.splice(0, 0, [expensesName, -result.expenses]);
|
|
names[expensesName] = result.category;
|
|
colors[expensesName] = expensesColor;
|
|
}
|
|
};
|
|
|
|
this.chart.unload();
|
|
|
|
this.chart.load({
|
|
columns: revenues.concat(expenses),
|
|
names: names,
|
|
colors: colors
|
|
});
|
|
});
|
|
};
|
|
|
|
ngOnInit() {
|
|
this.chart = c3.generate({
|
|
bindto: this.elementRef.nativeElement.children[0],
|
|
data: {
|
|
columns: [],
|
|
type: 'donut',
|
|
order: null,
|
|
},
|
|
tooltip: {
|
|
format: {
|
|
value: function(value, ratio, id, index) {
|
|
return value + '€';
|
|
}
|
|
}
|
|
},
|
|
donut: {
|
|
label: {
|
|
format: function(value) {
|
|
return value + '€';
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
});
|
|
};
|
|
|
|
ngOnChanges(changes) {
|
|
if('account' in changes && changes.account.currentValue) {
|
|
this.loadData(changes.account.currentValue);
|
|
} else if (this.account) {
|
|
this.loadData(this.account);
|
|
}
|
|
};
|
|
}
|