Upgrade Category chart component to Angular2.

This commit is contained in:
Alexis Lahouze 2017-07-29 17:18:36 +02:00
parent 1bd59cbbf8
commit 02f447d63c
4 changed files with 49 additions and 38 deletions

View File

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

View File

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

View File

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

View File

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