125 lines
2.9 KiB
TypeScript
125 lines
2.9 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2:
|
|
|
|
import * as moment from 'moment';
|
|
|
|
import {
|
|
Component,
|
|
Inject, Input, Output, EventEmitter,
|
|
OnChanges
|
|
} from '@angular/core';
|
|
|
|
import { Account } from '../accounts/account';
|
|
import { DailyBalance } from './dailyBalance';
|
|
import { DailyBalanceService } from '../accounts/dailyBalance.service';
|
|
|
|
class DateRange {
|
|
minDate: Date;
|
|
maxDate: Date;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'balance-chart',
|
|
template: `
|
|
<jqxChart #balanceChart
|
|
[width]="'100%'"
|
|
[height]="'100%'"
|
|
[title]="'Balance evolution'"
|
|
[description]="''"
|
|
[source]="data"
|
|
[xAxis]="xAxis"
|
|
[seriesGroups]="seriesGroups"
|
|
(onRangeSelectionChanged)="select($event)">
|
|
</jqxChart>
|
|
`
|
|
})
|
|
export class BalanceChartComponent implements OnChanges {
|
|
@Input() account: Account;
|
|
@Output() onUpdate: EventEmitter<DateRange> = new EventEmitter<DateRange>();
|
|
|
|
public data;
|
|
|
|
public xAxis: any = {
|
|
dataField: 'operation_date',
|
|
type: 'date',
|
|
baseUnit: 'day',
|
|
//unitInterval: 10,
|
|
|
|
rangeSelector: {
|
|
size: 80,
|
|
padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
|
|
backgroundColor: 'white',
|
|
dataField: 'balance',
|
|
baseUnit: 'month',
|
|
gridLines: { visible: false },
|
|
serieType: 'line',
|
|
//labels: {
|
|
// formatFunction: (value: any): any => {
|
|
// return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
|
|
// }
|
|
//}
|
|
}
|
|
};
|
|
|
|
public seriesGroups: any = [{
|
|
type: 'stackedcolumn',
|
|
series: [{
|
|
dataField: 'expenses',
|
|
fillColor: 'red'
|
|
}, {
|
|
dataField: 'revenues',
|
|
fillColor: 'green'
|
|
}]
|
|
}, {
|
|
type: 'line',
|
|
series: [{
|
|
dataField: 'balance',
|
|
fillColor: 'blue'
|
|
}],
|
|
bands: [{
|
|
minValue: 0, maxValue: 0, fillColor: 'orange', lineWidth: 1
|
|
}, {
|
|
minValue: 0, maxValue: 0, fillColor: 'red', lineWidth: 1
|
|
}]
|
|
}];
|
|
|
|
constructor(
|
|
private dailyBalanceService: DailyBalanceService,
|
|
) {
|
|
this.data = [];
|
|
}
|
|
|
|
loadData(account: Account) {
|
|
this.dailyBalanceService.query(
|
|
account.id
|
|
).subscribe((results) => {
|
|
this.data = results;
|
|
|
|
this.onUpdate.emit({
|
|
minDate: moment(results[0].operation_date).toDate(),
|
|
maxDate: moment(results[results.length - 1].operation_date).toDate()
|
|
});
|
|
});
|
|
}
|
|
|
|
setLines(account: Account) {
|
|
if (account) {
|
|
this.seriesGroups[1].bands[1].minValue = account.authorized_overdraft;
|
|
this.seriesGroups[1].bands[1].maxValue = account.authorized_overdraft;
|
|
}
|
|
}
|
|
|
|
ngOnChanges(changes) {
|
|
if('account' in changes && changes.account.currentValue) {
|
|
this.loadData(changes.account.currentValue);
|
|
this.setLines(changes.account.currentValue);
|
|
} else {
|
|
this.setLines(this.account);
|
|
}
|
|
}
|
|
|
|
select(event: any) {
|
|
let args = event.args;
|
|
this.onUpdate.emit({minDate: args.minValue, maxDate: args.maxValue});
|
|
}
|
|
}
|