accountant-ui/src/operations/categoryChart.component.ts

74 lines
1.9 KiB
TypeScript

// vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Logger } from '@nsalaun/ng-logger';
import * as _ from 'underscore';
import { Category } from './category';
import { CategoryService } from './category.service';
@Component({
selector: 'category-chart',
template: `<ngx-charts-bar-horizontal-2d
[results]="data"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
barPadding="1">
</ngx-charts-bar-horizontal-2d>`
})
export class CategoryChartComponent implements OnInit {
public data;
public showXAxis = true;
public showYAxis = true;
public showXAxisLabel = false;
public showYAxisLabel = false;
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
).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)
}]
};
});
}).subscribe((results) => {
this.data = results;
});
}
ngOnInit() {
this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
}
}