From 003b4de822ba0ae3149156128014e8de9b047e49 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Thu, 27 Jul 2017 14:03:39 +0200 Subject: [PATCH] Upgrade Balance Chart component to Angular2. --- package.json | 1 + src/operations/balance-chart.component.ts | 119 ++++++++++++++-------- src/operations/index.ts | 14 +-- src/operations/operation.controller.ts | 6 +- src/operations/operations.html | 4 +- 5 files changed, 92 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index bd502b0..0fb07bd 100644 --- a/package.json +++ b/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", diff --git a/src/operations/balance-chart.component.ts b/src/operations/balance-chart.component.ts index d273aae..3ef68b6 100644 --- a/src/operations/balance-chart.component.ts +++ b/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: '
', - 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: '
' +}) +export class BalanceChartComponent implements OnInit, OnChanges { + @Input() account: Account; + @Output() onUpdate: EventEmitter = new EventEmitter(); + + 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; +} diff --git a/src/operations/index.ts b/src/operations/index.ts index 7274179..bba2ba4 100644 --- a/src/operations/index.ts +++ b/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; diff --git a/src/operations/operation.controller.ts b/src/operations/operation.controller.ts index e294a08..d8bf2d3 100644 --- a/src/operations/operation.controller.ts +++ b/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 => { diff --git a/src/operations/operations.html b/src/operations/operations.html index 4989849..a53afa7 100644 --- a/src/operations/operations.html +++ b/src/operations/operations.html @@ -18,8 +18,8 @@
- +