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

// 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');

import accountModule from '@accountant/accounts';

module.exports = angular.module('balanceChartModule', [
    ngResource,
    accountModule
])

    .component('balanceChart', {
        template: '<div></div>',
        bindings: {
            account: '<',
            onUpdate: '&'
        },
        controller: function(accountIdService, DailyBalanceService, $element) {
            var vm = this;

            vm.loadData = function() {
                DailyBalanceService.query(
                    accountIdService.get()
                ).subscribe(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'},
                    ]);

                    if(account) {
                        vm.chart.ygrids.add({
                            value: account.authorized_overdraft,
                            axis: 'y',
                            class: 'overdraft'
                        });
                    }
                }
            };

            vm.$onChanges = function(changes) {
                if('account' in changes) {
                    vm.setLines(changes.account.currentValue);
                } else {
                    vm.setLines(vm.account);
                }
            };
        }
    })
    
    .name;