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

// 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 account = require('../accounts');

var ngResource = require('angular-resource');

var balanceChartModule = angular.module('balanceChartModule', [
    account.name,
    ngResource
])

.component('balanceChart', {
    template: '<div></div>',
    bindings: {
        account: '<',
        onUpdate: '&'
    },
    controller: function($routeParams, Balances, Account, $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'
        }
    );
});

module.exports = balanceChartModule;