Upgrade Category chart component to Angular2.

src/operations/category-chart.component.ts

@@ -21,26 +21,36 @@
 import * as moment from 'moment';
 import * as c3 from 'c3';
 
-import * as angular from 'angular';
+import {
+  Component, ElementRef,
+  Inject, Input, Output, EventEmitter,
+  OnInit, OnChanges
+} from '@angular/core';
 
-module.exports = angular.module('categoryChartModule', [
-])
+import { Account } from '../accounts/account';
+import { CategoryService } from './category.service';
 
-    .component('categoryChart', {
-        template: '<div></div>',
-        bindings: {
-            minDate: '<',
-            maxDate: '<',
-            account: '<'
-        },
-        controller: function($element, categoryService) {
-            var vm = this;
+@Component({
+    selector: 'category-chart',
+    template: '<div></div>'
+})
+export class CategoryChartComponent implements OnInit, OnChanges {
+    @Input() minDate: Date;
+    @Input() maxDate: Date;
+    @Input() account: Account;
 
-            vm.loadData = function(account: Account) {
-                categoryService.query(
+    chart: c3.ChartAPI;
+
+    constructor(
+        private elementRef: ElementRef,
+        private categoryService: CategoryService,
+    ) {}
+
+            loadData(account: Account) {
+                this.categoryService.query(
                     account.id,
-                    vm.minDate ? moment(vm.minDate).format('YYYY-MM-DD') : null,
-                    vm.maxDate ? moment(vm.maxDate).format('YYYY-MM-DD') : null
+                    this.minDate,
+                    this.maxDate
                 ).subscribe((results) => {
                     var expenses=[],
                         revenues=[],
@@ -50,7 +60,7 @@ module.exports = angular.module('categoryChartModule', [
                     var revenuesColor = 'green',
                         expensesColor = 'orange';
 
-                    angular.forEach(results, function(result) {
+                    for(let result of results) {
 
                         if(result.revenues > 0) {
                             var revenuesName = 'revenues-' + result.category;
@@ -67,11 +77,11 @@ module.exports = angular.module('categoryChartModule', [
                             names[expensesName] = result.category;
                             colors[expensesName] = expensesColor;
                         }
-                    });
+                    };
 
-                    vm.chart.unload();
+                    this.chart.unload();
 
-                    vm.chart.load({
+                    this.chart.load({
                         columns: revenues.concat(expenses),
                         names: names,
                         colors: colors
@@ -79,9 +89,9 @@ module.exports = angular.module('categoryChartModule', [
                 });
             };
 
-            vm.$onInit = function() {
-                vm.chart = c3.generate({
-                    bindto: $element[0].children[0],
+            ngOnInit() {
+                this.chart = c3.generate({
+                    bindto: this.elementRef.nativeElement.children[0],
                     data: {
                         columns: [],
                         type: 'donut',
@@ -107,12 +117,11 @@ module.exports = angular.module('categoryChartModule', [
                 });
             };
 
-            vm.$onChanges = function(changes) {
+            ngOnChanges(changes) {
                 if('account' in changes && changes.account.currentValue) {
-                    vm.loadData(changes.account.currentValue);
+                    this.loadData(changes.account.currentValue);
+                } else if (this.account) {
+                    this.loadData(this.account);
                 }
             };
 }
-    })
-
-    .name;

src/operations/index.ts

@@ -30,12 +30,10 @@ import { ToastrService } from 'ngx-toastr';
 var ngResource       = require('angular-resource'),
     ngStrap          = require('angular-strap');
 
-var categoryChartModule = require('./category-chart.component');
-
 import accountModule from '@accountant/accounts';
 
 import { BalanceChartComponent } from './balanceChart.component';
-import { CategoryService } from './category.service';
+import { CategoryChartComponent } from './category-chart.component';
 
 var OperationFactory = require('./operation.factory');
 var OperationController = require('./operation.controller');
@@ -44,7 +42,6 @@ export default angular.module('accountant.operations', [
     ngResource,
     ngStrap,
     accountModule,
-    categoryChartModule
 ])
 
     .factory('toastrService', downgradeInjectable(ToastrService))
@@ -53,10 +50,12 @@ export default angular.module('accountant.operations', [
 
     .controller('OperationController', OperationController)
 
-    .factory('categoryService', downgradeInjectable(CategoryService))
-
     .directive('balanceChart', downgradeComponent({
         component: BalanceChartComponent
     }) as angular.IDirectiveFactory)
 
+    .directive('categoryChart', downgradeComponent({
+        component: CategoryChartComponent
+    }) as angular.IDirectiveFactory)
+
     .name;

src/operations/operation.module.ts

@@ -9,6 +9,7 @@ import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { RestangularModule } from 'ngx-restangular';
 
 import { BalanceChartComponent } from './balanceChart.component';
+import { CategoryChartComponent } from './category-chart.component';
 import { CategoryService } from './category.service'
 
 @NgModule({
@@ -24,9 +25,11 @@ import { CategoryService } from './category.service'
   ],
   declarations: [
     BalanceChartComponent,
+    CategoryChartComponent,
   ],
   entryComponents: [
     BalanceChartComponent,
+    CategoryChartComponent,
   ]
 })
 export class OperationModule {}

src/operations/operations.html

@@ -23,9 +23,9 @@
     </div>
     <div class="col-md-3">
       <category-chart
-        min-date="operationsCtrl.minDate"
-        max-date="operationsCtrl.maxDate"
-        account="operationsCtrl.account"/>
+        [min-date]="operationsCtrl.minDate"
+        [max-date]="operationsCtrl.maxDate"
+        [account]="operationsCtrl.account"><category-chart>
     </div>
   </div>