2017-07-29 17:21:45 +02:00
|
|
|
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
|
|
|
2017-07-29 17:18:36 +02:00
|
|
|
import {
|
|
|
|
Component, ElementRef,
|
2017-07-29 17:22:25 +02:00
|
|
|
Inject, Input, Output,
|
2018-06-09 23:34:03 +02:00
|
|
|
OnChanges
|
2017-07-29 17:18:36 +02:00
|
|
|
} from '@angular/core';
|
|
|
|
|
2018-06-09 23:34:03 +02:00
|
|
|
import { Logger } from '@nsalaun/ng-logger';
|
|
|
|
|
|
|
|
import * as _ from 'underscore';
|
|
|
|
|
2017-07-29 17:18:36 +02:00
|
|
|
import { Account } from '../accounts/account';
|
2018-06-09 23:34:03 +02:00
|
|
|
import { Category } from './category';
|
2017-07-29 17:18:36 +02:00
|
|
|
import { CategoryService } from './category.service';
|
|
|
|
|
2018-06-09 23:34:03 +02:00
|
|
|
|
2017-07-29 17:18:36 +02:00
|
|
|
@Component({
|
2017-07-29 17:21:45 +02:00
|
|
|
selector: 'category-chart',
|
2018-06-09 23:34:03 +02:00
|
|
|
template: `<ngx-charts-bar-horizontal-2d
|
|
|
|
[results]="data"
|
|
|
|
[xAxis]="showXAxis"
|
|
|
|
[yAxis]="showYAxis"
|
|
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
|
|
barPadding="1">
|
|
|
|
</ngx-charts-bar-horizontal-2d>`
|
2017-07-29 17:18:36 +02:00
|
|
|
})
|
2018-06-09 23:34:03 +02:00
|
|
|
export class CategoryChartComponent implements OnChanges {
|
2017-07-29 17:21:45 +02:00
|
|
|
@Input() minDate: Date;
|
|
|
|
@Input() maxDate: Date;
|
|
|
|
@Input() account: Account;
|
|
|
|
|
2018-06-09 23:34:03 +02:00
|
|
|
public data;
|
|
|
|
|
|
|
|
public showXAxis = true;
|
|
|
|
public showYAxis = true;
|
|
|
|
public showXAxisLabel = false;
|
|
|
|
public showYAxisLabel = false;
|
2017-07-29 17:21:45 +02:00
|
|
|
|
|
|
|
constructor(
|
|
|
|
private categoryService: CategoryService,
|
2018-06-09 23:34:03 +02:00
|
|
|
) {
|
|
|
|
this.data = [];
|
|
|
|
}
|
2017-07-29 17:21:45 +02:00
|
|
|
|
|
|
|
loadData(account: Account) {
|
|
|
|
this.categoryService.query(
|
|
|
|
account.id,
|
|
|
|
this.minDate,
|
|
|
|
this.maxDate
|
2018-06-09 23:34:03 +02:00
|
|
|
).map((results: Category[]) => {
|
|
|
|
return _.sortBy(results, 'income').reverse();
|
|
|
|
}).map((results: Category[]) => {
|
|
|
|
return results.map((result: Category) => {
|
|
|
|
return {
|
|
|
|
'name': result.category,
|
|
|
|
'series': [{
|
|
|
|
'name': 'expenses',
|
|
|
|
'value': -Number(result.expenses)
|
|
|
|
}, {
|
|
|
|
'name': 'revenues',
|
|
|
|
'value': Number(result.revenues)
|
|
|
|
}]
|
|
|
|
};
|
2017-07-29 17:21:45 +02:00
|
|
|
});
|
2018-06-09 23:34:03 +02:00
|
|
|
}).subscribe((results) => {
|
|
|
|
this.data = results;
|
2017-07-29 17:21:45 +02:00
|
|
|
});
|
2018-06-09 23:34:03 +02:00
|
|
|
}
|
2017-07-29 17:21:45 +02:00
|
|
|
|
|
|
|
ngOnChanges(changes) {
|
|
|
|
if('account' in changes && changes.account.currentValue) {
|
|
|
|
this.loadData(changes.account.currentValue);
|
|
|
|
} else if (this.account) {
|
|
|
|
this.loadData(this.account);
|
|
|
|
}
|
|
|
|
};
|
2017-07-29 17:18:36 +02:00
|
|
|
}
|