From ca64dcd4e211ebd03c2231317e90426e392f086a Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Sun, 18 Jun 2017 00:46:20 +0200 Subject: [PATCH] Use angular-chart.js to draw balance chart. --- package.json | 2 + src/operations/balance-chart.component.js | 171 ++++++++++++++++++++++ src/operations/balance-chart.tmpl.html | 10 ++ src/operations/index.js | 5 +- src/operations/operations.html | 9 ++ 5 files changed, 196 insertions(+), 1 deletion(-) create mode 100644 src/operations/balance-chart.component.js create mode 100644 src/operations/balance-chart.tmpl.html diff --git a/package.json b/package.json index 7dfb26c..cdb6474 100644 --- a/package.json +++ b/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", diff --git a/src/operations/balance-chart.component.js b/src/operations/balance-chart.component.js new file mode 100644 index 0000000..e60782b --- /dev/null +++ b/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 . + */ +/* 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; diff --git a/src/operations/balance-chart.tmpl.html b/src/operations/balance-chart.tmpl.html new file mode 100644 index 0000000..13aa9ee --- /dev/null +++ b/src/operations/balance-chart.tmpl.html @@ -0,0 +1,10 @@ +
+ + +
diff --git a/src/operations/index.js b/src/operations/index.js index 250d94e..a9f94f2 100644 --- a/src/operations/index.js +++ b/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) { diff --git a/src/operations/operations.html b/src/operations/operations.html index 8bbb938..c9707ef 100644 --- a/src/operations/operations.html +++ b/src/operations/operations.html @@ -16,6 +16,15 @@ along with Accountant. If not, see . -->
+
+
+ +
+
+
+