Upgrade Balance Chart component to Angular2.
This commit is contained in:
parent
863160881f
commit
003b4de822
@ -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",
|
||||||
|
@ -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;
|
|
||||||
|
@ -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;
|
||||||
|
@ -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 => {
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user