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

191 lines
6.2 KiB
JavaScript

// 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';
var moment = require('moment'),
c3 = require('c3');
var angular = require('angular');
var ngResource = require('angular-resource');
module.exports = angular.module('balanceChartModule', [
ngResource
])
.component('balanceChart', {
template: '<div></div>',
bindings: {
account: '<',
onUpdate: '&'
},
controller: function($routeParams, Balances, $element) {
var vm = this;
vm.loadData = function() {
Balances.query({
id: $routeParams.accountId
}, function(results) {
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)
});
var x = vm.chart.x();
var balances = x.balances;
vm.onUpdate(balances[0], balances[balances.length - 1]);
});
};
vm.$onInit = function() {
var tomorrow = moment().endOf('day').valueOf();
vm.chart = c3.generate({
bindto: $element[0].children[0],
size: {
height: 450,
},
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'
// }]
//}
},
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'
}
}
},
grid: {
x: {
show: true,
},
y: {
show: true,
}
},
tooltip: {
format: {
value: function(value, ratio, id, index) {
return value + '€';
}
}
},
subchart: {
show: true,
onbrush: function(domain) {
vm.onUpdate({minDate: domain[0], maxDate: domain[1]});
}
}
});
vm.loadData();
};
vm.setLines = function(account) {
if(vm.chart) {
vm.chart.ygrids([
{ value: 0, axis: 'y2' },
{ value: 0, axis: 'y', class: 'zeroline'},
]);
vm.chart.ygrids.add({
value: account.authorized_overdraft,
axis: 'y',
class: 'overdraft'
});
}
};
vm.$onChanges = function(changes) {
if('account' in changes) {
if('$promise' in vm.account && vm.account.$resolved === false) {
vm.account.$promise.then(function(account) {
vm.setLines(account);
return account;
});
} else {
vm.setLines(vm.account);
}
}
};
}
})
.factory('Balances', function($resource) {
return $resource(
'/api/account/:id/daily_balances', {
id: '@id'
}
);
})
.name;