Use angular-chart.js to draw balance chart.

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "angular": "^1.6",
+    "angular-chart.js": "^1.1.1",
     "angular-http-auth": "^1.5",
     "angular-messages": "^1.6",
     "angular-resource": "^1.6",
@@ -46,6 +47,7 @@
     "bootbox": "^4.4.0",
     "bootstrap": "^3.3.7",
     "bootstrap-additions": "^0.3.1",
+    "chartjs-plugin-annotation": "^0.5.5",
     "font-awesome": "^4.7.0",
     "highcharts-ng": "^1.1",
     "highstock-release": "^5.0.12",

src/operations/balance-chart.component.js

@@ -0,0 +1,171 @@
+// 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;

src/operations/balance-chart.tmpl.html

@@ -0,0 +1,10 @@
+<div>
+    <canvas id="balances-chart" class="chart-bar"
+        height='80'
+        chart-data="$ctrl.data.data"
+        chart-labels="$ctrl.data.labels"
+        chart-colors="$ctrl.colors"
+        chart-options="$ctrl.options"
+        chart-dataset-override="$ctrl.datasetOverride">
+    </canvas>
+</div>

src/operations/index.js

@@ -25,6 +25,8 @@ var angular = require('angular');
 var operationFormTmpl   = require('./operation.form.tmpl.html'),
     operationDeleteTmpl = require('./operation.delete.tmpl.html');
 
+var balanceChartModule = require('./balance-chart.component.js');
+
 var ngResource       = require('angular-resource'),
     ngMessages       = require('angular-messages'),
     ngUiBootstrap    = require('angular-ui-bootstrap'),
@@ -36,7 +38,8 @@ var operationModule = angular.module('accountant.operations', [
     ngMessages,
     ngUiBootstrap,
     ngUiNotification,
-    ngStrap
+    ngStrap,
+    balanceChartModule.name
 ])
 
 .config(function($resourceProvider) {

src/operations/operations.html

@@ -16,6 +16,15 @@
     along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div>
+  <div class="row">
+    <div class="col-md-9">
+      <balance-chart
+        min-date="operationsCtrl.minDate"
+        max-date="operationsCtrl.maxDate"/>
+    </div>
+    <div class="col-md-3"></div>
+  </div>
+
   <div class="row">
     <table class="table table-striped table-condensed table-hover">
       <thead>