accountant-ui/src/operations/balance-chart.component.ts

183 lines
6.0 KiB
TypeScript
Raw Normal View History

// vim: set tw=80 ts=4 sw=4 sts=4:
/*
This file is part of Accountant.
Accountant is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Accountant is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
*/
/* jshint node: true */
'use strict';
2017-07-01 14:50:17 +02:00
var moment = require('moment'),
c3 = require('c3');
var angular = require('angular');
var ngResource = require('angular-resource');
import accountModule from '@accountant/accounts';
module.exports = angular.module('balanceChartModule', [
ngResource,
accountModule
])
2017-07-05 21:48:20 +02:00
.component('balanceChart', {
template: '<div></div>',
bindings: {
account: '<',
onUpdate: '&'
},
controller: function(accountIdService, DailyBalanceService, $element) {
2017-07-05 21:48:20 +02:00
var vm = this;
vm.loadData = function() {
DailyBalanceService.query(
accountIdService.get()
).subscribe(function(results) {
2017-07-05 21:48:20 +02:00
var headers = [['date', 'balances', 'expenses', 'revenues']];
var rows = results.map(function(result) {
return [
result.operation_date,
result.balance,
result.expenses,
result.revenues
];
});
vm.chart.unload();
vm.chart.load({
rows: headers.concat(rows)
});
2017-07-05 21:48:20 +02:00
var x = vm.chart.x();
var balances = x.balances;
2017-07-05 21:48:20 +02:00
vm.onUpdate(balances[0], balances[balances.length - 1]);
2017-07-01 14:50:17 +02:00
});
2017-07-05 21:48:20 +02:00
};
2017-07-02 00:11:02 +02:00
2017-07-05 21:48:20 +02:00
vm.$onInit = function() {
var tomorrow = moment().endOf('day').valueOf();
vm.chart = c3.generate({
bindto: $element[0].children[0],
size: {
height: 450,
2017-07-01 14:50:17 +02:00
},
2017-07-05 21:48:20 +02:00
data: {
x: 'date',
rows: [],
axes: {
expenses: 'y2',
revenues: 'y2'
},
type: 'bar',
types: {
balances: 'area'
},
groups: [
['expenses', 'revenues']
],
// Disable for the moment because there is an issue when
// using subchart line is not refreshed after subset
// selection.
//regions: {
// balances: [{
// start: tomorrow,
// style: 'dashed'
// }]
//}
2017-07-01 14:50:17 +02:00
},
2017-07-05 21:48:20 +02:00
regions: [{
start: tomorrow,
}],
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d',
rotate: 50,
}
},
y: {
label: {
text: 'Amount',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Amount',
position: 'outer-middle'
}
2017-07-01 14:50:17 +02:00
}
},
2017-07-05 21:48:20 +02:00
grid: {
x: {
show: true,
},
y: {
show: true,
2017-07-01 14:50:17 +02:00
}
},
2017-07-05 21:48:20 +02:00
tooltip: {
format: {
value: function(value, ratio, id, index) {
return value + '€';
}
2017-07-01 14:50:17 +02:00
}
},
2017-07-05 21:48:20 +02:00
subchart: {
2017-07-01 14:50:17 +02:00
show: true,
2017-07-05 21:48:20 +02:00
onbrush: function(domain) {
vm.onUpdate({minDate: domain[0], maxDate: domain[1]});
2017-07-01 14:50:17 +02:00
}
}
});
2017-07-05 21:48:20 +02:00
vm.loadData();
};
vm.setLines = function(account) {
if(vm.chart) {
vm.chart.ygrids([
{ value: 0, axis: 'y2' },
{ value: 0, axis: 'y', class: 'zeroline'},
]);
if(account) {
vm.chart.ygrids.add({
value: account.authorized_overdraft,
axis: 'y',
class: 'overdraft'
});
}
2017-07-05 21:36:23 +02:00
}
2017-07-05 21:48:20 +02:00
};
vm.$onChanges = function(changes) {
if('account' in changes) {
vm.setLines(changes.account.currentValue);
} else {
vm.setLines(vm.account);
2017-07-05 21:48:20 +02:00
}
};
}
2017-07-05 21:48:20 +02:00
})
.name;