Use angular-chart.js to draw balance chart.

This commit is contained in:
Alexis Lahouze 2017-06-18 00:46:20 +02:00
parent 86c32772c0
commit ca64dcd4e2
5 changed files with 196 additions and 1 deletions

View File

@ -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",

View File

@ -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;

View File

@ -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>

View File

@ -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) {

View File

@ -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>