Use angular-chart.js to draw balance chart.
This commit is contained in:
parent
86c32772c0
commit
ca64dcd4e2
@ -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",
|
||||
|
171
src/operations/balance-chart.component.js
Normal file
171
src/operations/balance-chart.component.js
Normal 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;
|
10
src/operations/balance-chart.tmpl.html
Normal file
10
src/operations/balance-chart.tmpl.html
Normal 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>
|
@ -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) {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user