Reimplement category chart.
This commit is contained in:
parent
0cd5dab07c
commit
7004b6cf44
@ -35,7 +35,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"angular": "^1.6",
|
||||
"angular-chart.js": "^1.1.1",
|
||||
"angular-http-auth": "^1.5",
|
||||
"angular-messages": "^1.6",
|
||||
"angular-resource": "^1.6",
|
||||
@ -48,10 +47,7 @@
|
||||
"bootstrap": "^3.3.7",
|
||||
"bootstrap-additions": "^0.3.1",
|
||||
"c3": "^0.4.13",
|
||||
"chartjs-plugin-annotation": "^0.5.5",
|
||||
"font-awesome": "^4.7.0",
|
||||
"highcharts-ng": "^1.1",
|
||||
"highstock-release": "^5.0.12",
|
||||
"jquery": "^3.2",
|
||||
"meanie-angular-storage": "^1.3.1",
|
||||
"moment": "^2.18"
|
||||
|
130
src/operations/category-chart.component.js
Normal file
130
src/operations/category-chart.component.js
Normal file
@ -0,0 +1,130 @@
|
||||
// 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'),
|
||||
c3 = require('c3');
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngResource = require('angular-resource');
|
||||
|
||||
var categoryChartModule = angular.module('categoryChartModule', [
|
||||
ngResource
|
||||
])
|
||||
|
||||
.component('categoryChart', {
|
||||
template: '<div></div>',
|
||||
bindings: {
|
||||
minDate: '<',
|
||||
maxDate: '<'
|
||||
},
|
||||
controller: function($routeParams, $element, Categories, Incomes, $log) {
|
||||
var vm = this;
|
||||
|
||||
vm.loadData = function() {
|
||||
Categories.query({
|
||||
id: $routeParams.accountId,
|
||||
begin: vm.minDate ? moment(vm.minDate).format('YYYY-MM-DD') : null,
|
||||
end: vm.maxDate ? moment(vm.maxDate).format('YYYY-MM-DD') : null
|
||||
}, function(results) {
|
||||
var expenses=[],
|
||||
revenues=[],
|
||||
colors={},
|
||||
names={};
|
||||
|
||||
var revenuesColor = 'green',
|
||||
expensesColor = 'orange';
|
||||
|
||||
angular.forEach(results, function(result) {
|
||||
var revenuesName = 'revenues-' + result.category;
|
||||
|
||||
revenues.push([revenuesName, result.revenues]);
|
||||
names[revenuesName] = result.category;
|
||||
colors[revenuesName] = revenuesColor;
|
||||
|
||||
var expensesName = 'expenses-' + result.category;
|
||||
|
||||
expenses.splice(0, 0, [expensesName, -result.expenses]);
|
||||
names[expensesName] = result.category;
|
||||
colors[expensesName] = expensesColor;
|
||||
});
|
||||
|
||||
// vm.chart.unload();
|
||||
|
||||
vm.chart.load({
|
||||
columns: revenues.concat(expenses),
|
||||
names: names,
|
||||
colors: colors
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
vm.$onInit = function() {
|
||||
vm.chart = c3.generate({
|
||||
bindto: $element[0].children[0],
|
||||
data: {
|
||||
columns: [],
|
||||
type: 'donut',
|
||||
order: null,
|
||||
},
|
||||
tooltip: {
|
||||
format: {
|
||||
value: function(value, ratio, id, index) {
|
||||
return value + '€';
|
||||
}
|
||||
}
|
||||
},
|
||||
donut: {
|
||||
label: {
|
||||
format: function(value) {
|
||||
return value + '€';
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
//vm.loadData();
|
||||
};
|
||||
|
||||
vm.$onChanges = function() {
|
||||
$log.log('onChange', vm.minDate, vm.maxDate);
|
||||
|
||||
vm.loadData();
|
||||
};
|
||||
|
||||
}
|
||||
}).factory('Categories', function($resource) {
|
||||
return $resource(
|
||||
'/api/account/:id/category', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
}).factory('Incomes', function($resource) {
|
||||
return $resource(
|
||||
'/api/account/:id/income', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
module.exports = categoryChartModule;
|
@ -25,7 +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 balanceChartModule = require('./balance-chart.component.js'),
|
||||
categoryChartModule = require('./category-chart.component.js');
|
||||
|
||||
var ngResource = require('angular-resource'),
|
||||
ngMessages = require('angular-messages'),
|
||||
@ -39,7 +40,8 @@ var operationModule = angular.module('accountant.operations', [
|
||||
ngUiBootstrap,
|
||||
ngUiNotification,
|
||||
ngStrap,
|
||||
balanceChartModule.name
|
||||
balanceChartModule.name,
|
||||
categoryChartModule.name
|
||||
])
|
||||
|
||||
.config(function($resourceProvider) {
|
||||
|
@ -20,7 +20,11 @@
|
||||
<div class="col-md-9">
|
||||
<balance-chart on-update="operationsCtrl.onUpdate(minDate, maxDate)"/>
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
<div class="col-md-3">
|
||||
<category-chart
|
||||
min-date="operationsCtrl.minDate"
|
||||
max-date="operationsCtrl.maxDate"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
Loading…
Reference in New Issue
Block a user