Upgrade Balance Chart component to Angular2.

package.json

@@ -48,6 +48,7 @@
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
     "@nsalaun/ng-logger": "^2.0.1",
     "@types/angular": "^1.6.27",
+    "@types/c3": "^0.4.44",
     "@types/node": "^8.0.16",
     "@uirouter/angularjs": "^1.0.5",
     "@uirouter/core": "^5.0.5",

src/operations/balance-chart.component.ts

@@ -18,34 +18,56 @@
 /* jshint node: true */
 'use strict';
 
-var moment = require('moment'),
-    c3     = require('c3');
+import * as moment from 'moment';
+import * as c3 from 'c3';
 
-var angular = require('angular');
+import {
+    Component, ElementRef,
+    Inject, Input, Output, EventEmitter,
+    OnInit, OnChanges
+} from '@angular/core';
 
-var ngResource = require('angular-resource');
+import { Logger } from '@nsalaun/ng-logger';
 
-import accountModule from '@accountant/accounts';
+import { Account } from '../accounts/account';
+import { DailyBalanceService } from '../accounts/dailyBalance.service';
 
-module.exports = angular.module('balanceChartModule', [
-    ngResource,
-    accountModule
-])
+class DateRange {
+    minDate: Date;
+    maxDate: Date;
+}
 
-    .component('balanceChart', {
-        template: '<div></div>',
-        bindings: {
-            account: '<',
-            onUpdate: '&'
-        },
-        controller: function(accountIdService, DailyBalanceService, $element) {
-            var vm = this;
+class xAxis {
+    balances: Date[];
+    expenses: Date[];
+    revenues: Date[];
+}
 
-            vm.loadData = function() {
-                DailyBalanceService.query(
-                    accountIdService.get()
-                ).subscribe(function(results) {
-                    var headers = [['date', 'balances', 'expenses', 'revenues']];
+@Component({
+    selector: 'balance-chart',
+    template: '<div></div>'
+})
+export class BalanceChartComponent implements OnInit, OnChanges {
+    @Input() account: Account;
+    @Output() onUpdate: EventEmitter<DateRange> = new EventEmitter<DateRange>();
+
+    private chart: c3.ChartAPI;
+    private balances: number[];
+
+    constructor(
+        private elementRef: ElementRef,
+        private logger: Logger,
+        private dailyBalanceService: DailyBalanceService,
+        @Inject('accountIdService') private accountIdService,
+    ) {
+        this.logger.log("Constructor BalanceChartComponent")
+    }
+
+            loadData() {
+                this.dailyBalanceService.query(
+                    this.accountIdService.get()
+                ).subscribe((results) => {
+                    var headers: any[][] = [['date', 'balances', 'expenses', 'revenues']];
 
                     var rows = results.map(function(result) {
                         return [
@@ -56,24 +78,36 @@ module.exports = angular.module('balanceChartModule', [
                         ];
                     });
 
-                    vm.chart.unload();
+                    this.chart.unload();
 
-                    vm.chart.load({
+                    this.chart.load({
                         rows: headers.concat(rows)
                     });
 
-                    var x = vm.chart.x();
+                    var x: any;
+
+                    x = this.chart.x();
+
+                    this.logger.log("x", x);
+
                     var balances = x.balances;
 
-                    vm.onUpdate(balances[0], balances[balances.length - 1]);
+                    this.onUpdate.emit({
+                        minDate: balances[0],
+                        maxDate: balances[balances.length - 1]
+                    });
                 });
             };
 
-            vm.$onInit = function() {
+            $onInit() {
+                this.ngOnInit();
+            }
+
+            ngOnInit() {
                 var tomorrow = moment().endOf('day').valueOf();
 
-                vm.chart = c3.generate({
-                    bindto: $element[0].children[0],
+                this.chart = c3.generate({
+                    bindto: this.elementRef.nativeElement.children[0],
                     size: {
                         height: 450,
                     },
@@ -144,23 +178,23 @@ module.exports = angular.module('balanceChartModule', [
                     subchart: {
                         show: true,
                         onbrush: function(domain) {
-                            vm.onUpdate({minDate: domain[0], maxDate: domain[1]});
+                            this.onUpdate.emit({minDate: domain[0], maxDate: domain[1]});
                         }
                     }
                 });
 
-                vm.loadData();
+                this.loadData();
             };
 
-            vm.setLines = function(account) {
-                if(vm.chart) {
-                    vm.chart.ygrids([
+            setLines(account: Account) {
+                if(this.chart) {
+                    this.chart.ygrids([
                         { value: 0, axis: 'y2' },
                         { value: 0, axis: 'y', class: 'zeroline'},
                     ]);
 
                     if(account) {
-                        vm.chart.ygrids.add({
+                        this.chart.ygrids.add({
                             value: account.authorized_overdraft,
                             axis: 'y',
                             class: 'overdraft'
@@ -169,14 +203,15 @@ module.exports = angular.module('balanceChartModule', [
                 }
             };
 
-            vm.$onChanges = function(changes) {
+            $onChanges(changes) {
+                this.ngOnChanges(changes);
+            }
+
+            ngOnChanges(changes) {
                 if('account' in changes) {
-                    vm.setLines(changes.account.currentValue);
+                    this.setLines(changes.account.currentValue);
                 } else {
-                    vm.setLines(vm.account);
+                    this.setLines(this.account);
                 }
             };
-        }
-    })
-    
-    .name;
+}

src/operations/index.ts

@@ -18,9 +18,7 @@
 /* jshint node: true */
 'use strict';
 
-var moment = require('moment');
-
-var angular = require('angular');
+import * as angular from 'angular';
 
 import {
     downgradeInjectable,
@@ -32,11 +30,12 @@ import { ToastrService } from 'ngx-toastr';
 var ngResource       = require('angular-resource'),
     ngStrap          = require('angular-strap');
 
-var balanceChartModule  = require('./balance-chart.component'),
-    categoryChartModule = require('./category-chart.component');
+var categoryChartModule = require('./category-chart.component');
 
 import accountModule from '@accountant/accounts';
 
+import { BalanceChartComponent } from './balance-chart.component';
+
 var OperationFactory = require('./operation.factory');
 var OperationController = require('./operation.controller');
 
@@ -44,7 +43,6 @@ export default angular.module('accountant.operations', [
     ngResource,
     ngStrap,
     accountModule,
-    balanceChartModule,
     categoryChartModule
 ])
 
@@ -54,4 +52,8 @@ export default angular.module('accountant.operations', [
 
     .controller('OperationController', OperationController)
 
+    .directive('balanceChart', downgradeComponent({
+        component: BalanceChartComponent
+    }) as angular.IDirectiveFactory)
+
     .name;

src/operations/operation.controller.ts

@@ -1,3 +1,5 @@
+import * as moment from 'moment';
+
 var operationFormTmpl   = require('./operation.form.tmpl.html'),
     operationDeleteTmpl = require('./operation.delete.tmpl.html');
 
@@ -141,8 +143,8 @@ module.exports = function($stateParams, $modal, toastrService, Operation,
         });
     };
 
-    vm.onUpdate = function(minDate, maxDate) {
-        vm.operations = vm.load(minDate, maxDate);
+    vm.onUpdate = function(dateRange) {
+        vm.operations = vm.load(dateRange.minDate, dateRange.maxDate);
     };
 
     AccountService.get($stateParams.accountId).subscribe(account => {

src/operations/operations.html

@@ -18,8 +18,8 @@
 <div>
   <div class="row">
     <div class="col-md-9">
-      <balance-chart on-update="operationsCtrl.onUpdate(minDate, maxDate)"
-        account="operationsCtrl.account"/>
+      <balance-chart (on-update)="operationsCtrl.onUpdate($event)"
+        [account]="operationsCtrl.account"></balance-chart>
     </div>
     <div class="col-md-3">
       <category-chart