Upgrade Balance Chart component to Angular2.

This commit is contained in:
Alexis Lahouze 2017-07-27 14:03:39 +02:00
parent 863160881f
commit 003b4de822
5 changed files with 92 additions and 52 deletions

View File

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

View File

@ -18,34 +18,56 @@
/* jshint node: true */ /* jshint node: true */
'use strict'; 'use strict';
var moment = require('moment'), import * as moment from 'moment';
c3 = require('c3'); 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', [ class DateRange {
ngResource, minDate: Date;
accountModule maxDate: Date;
]) }
.component('balanceChart', { class xAxis {
template: '<div></div>', balances: Date[];
bindings: { expenses: Date[];
account: '<', revenues: Date[];
onUpdate: '&' }
},
controller: function(accountIdService, DailyBalanceService, $element) {
var vm = this;
vm.loadData = function() { @Component({
DailyBalanceService.query( selector: 'balance-chart',
accountIdService.get() template: '<div></div>'
).subscribe(function(results) { })
var headers = [['date', 'balances', 'expenses', 'revenues']]; 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) { var rows = results.map(function(result) {
return [ 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) 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; 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(); var tomorrow = moment().endOf('day').valueOf();
vm.chart = c3.generate({ this.chart = c3.generate({
bindto: $element[0].children[0], bindto: this.elementRef.nativeElement.children[0],
size: { size: {
height: 450, height: 450,
}, },
@ -144,23 +178,23 @@ module.exports = angular.module('balanceChartModule', [
subchart: { subchart: {
show: true, show: true,
onbrush: function(domain) { 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) { setLines(account: Account) {
if(vm.chart) { if(this.chart) {
vm.chart.ygrids([ this.chart.ygrids([
{ value: 0, axis: 'y2' }, { value: 0, axis: 'y2' },
{ value: 0, axis: 'y', class: 'zeroline'}, { value: 0, axis: 'y', class: 'zeroline'},
]); ]);
if(account) { if(account) {
vm.chart.ygrids.add({ this.chart.ygrids.add({
value: account.authorized_overdraft, value: account.authorized_overdraft,
axis: 'y', axis: 'y',
class: 'overdraft' 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) { if('account' in changes) {
vm.setLines(changes.account.currentValue); this.setLines(changes.account.currentValue);
} else { } else {
vm.setLines(vm.account); this.setLines(this.account);
} }
}; };
} }
})
.name;

View File

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

View File

@ -1,3 +1,5 @@
import * as moment from 'moment';
var operationFormTmpl = require('./operation.form.tmpl.html'), var operationFormTmpl = require('./operation.form.tmpl.html'),
operationDeleteTmpl = require('./operation.delete.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.onUpdate = function(dateRange) {
vm.operations = vm.load(minDate, maxDate); vm.operations = vm.load(dateRange.minDate, dateRange.maxDate);
}; };
AccountService.get($stateParams.accountId).subscribe(account => { AccountService.get($stateParams.accountId).subscribe(account => {

View File

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