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

var angular = require('angular');

var balanceChartTmpl   = require('./balance-chart.tmpl.html');

var ngResource = require('angular-resource'),
    ngChartJs    = require('angular-chart.js'),
    chartJs    = require('chart.js'),
    chartJsAnnotation = require('chartjs-plugin-annotation');

chartJs.plugins.register([
    'annotation'
]);

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

.component('balanceChart', {
    templateUrl: balanceChartTmpl,
    bindings: {
        minDate: '<',
        maxDate: '<'
    },
    controller: function($routeParams, $log, Balances) {
        var vm = this;

        vm.options = {
            scales: {
                yAxes: [{
                    id: 'y-axis-left',
                    type: 'linear',
                    display: true,
                    position: 'left'
                }, {
                    id: 'y-axis-right',
                    type: 'linear',
                    display: true,
                    position: 'right',
                    stacked: false
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day',
                    },
                    stacked: true,
                    ticks: {
                        autoSkippadding: 10
                    }
                }]
            },
            annotation: {
                annotations: [{
                    type: 'line',
                    scaleID: 'y-axis-left',
                    value: -200,
                    borderColor: '#FF0000',
                    borderWidth: 4
                }]
            }
        };

        vm.colors = [
            '#4e74ff', '#ff6363', '#268c26'
        ];

        vm.datasetOverride = [{
            label: "Balance",
            borderWidth: 3,
            type: 'line',
            yAxisID: 'y-axis-left'
        }, {
            label: "Expenses",
            borderWidth: 3,
            barThickness: 3,
            type: 'bar',
            yAxisID: 'y-axis-right'
        }, {
            label: "Revenues",
            type: 'bar',
            yAxisID: 'y-axis-right'
        }];

        vm.data = {
            data: [[], [], []],
            labels: []
        };

        vm.loadData = function() {
            $log.log(vm.minDate, vm.maxDate);

            vm.data = Balances.query({
                id: $routeParams.accountId,
                begin: vm.minDate.format('YYYY-MM-DD'),
                end: vm.maxDate.format('YYYY-MM-DD')
            }).$promise.then(function(results) {
                var labels   = [],
                    balances = [],
                    expenses = [],
                    revenues = [];

                angular.forEach(results, function(result) {
                    labels.push(result.operation_date);
                    balances.push(result.balance);
                    expenses.push(result.expenses);
                    revenues.push(result.revenues);
                });

                vm.data = {
                    data: [
                        balances,
                        expenses,
                        revenues
                    ],
                    labels: labels
                };

                return vm.data;
            });
        };

        vm.$onInit = function() {
            vm.loadData();
        };

        vm.$onChange = function(changes) {
            vm.loadData();
        };
    }
}).factory('Balances', function($resource) {
    return $resource(
        '/api/account/:id/daily_balances', {
            id: '@id'
        }
    );
})
    
.config(function (ChartJsProvider) {
    ChartJsProvider.setOptions({
        colors : [
            '#803690', '#00ADF9', '#DCDCDC',
            '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'
        ],
        responsive: true
    });
});

module.exports = balanceChartModule;