Reimplement category chart.

package.json

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

src/operations/category-chart.component.js

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

src/operations/index.js

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

src/operations/operations.html

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