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 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', {
template: '<div></div>',
bindings: {
minDate: '<',
maxDate: '<',
account: '<'
},
controller: function($element, categoryService) {
var vm = this;
@Component({
selector: 'category-chart',
template: '<div></div>'
})
export class CategoryChartComponent implements OnInit, OnChanges {
@Input() minDate: Date;
@Input() maxDate: Date;
@Input() account: Account;
vm.loadData = function(account: Account) {
categoryService.query(
chart: c3.ChartAPI;
constructor(
private elementRef: ElementRef,
private categoryService: CategoryService,
) {}
loadData(account: Account) {
this.categoryService.query(
account.id,
vm.minDate ? moment(vm.minDate).format('YYYY-MM-DD') : null,
vm.maxDate ? moment(vm.maxDate).format('YYYY-MM-DD') : null
this.minDate,
this.maxDate
).subscribe((results) => {
var expenses=[],
revenues=[],
@ -50,7 +60,7 @@ module.exports = angular.module('categoryChartModule', [
var revenuesColor = 'green',
expensesColor = 'orange';
angular.forEach(results, function(result) {
for(let result of results) {
if(result.revenues > 0) {
var revenuesName = 'revenues-' + result.category;
@ -67,11 +77,11 @@ module.exports = angular.module('categoryChartModule', [
names[expensesName] = result.category;
colors[expensesName] = expensesColor;
}
});
};
vm.chart.unload();
this.chart.unload();
vm.chart.load({
this.chart.load({
columns: revenues.concat(expenses),
names: names,
colors: colors
@ -79,9 +89,9 @@ module.exports = angular.module('categoryChartModule', [
});
};
vm.$onInit = function() {
vm.chart = c3.generate({
bindto: $element[0].children[0],
ngOnInit() {
this.chart = c3.generate({
bindto: this.elementRef.nativeElement.children[0],
data: {
columns: [],
type: 'donut',
@ -107,12 +117,11 @@ module.exports = angular.module('categoryChartModule', [
});
};
vm.$onChanges = function(changes) {
ngOnChanges(changes) {
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'),
ngStrap = require('angular-strap');
var categoryChartModule = require('./category-chart.component');
import accountModule from '@accountant/accounts';
import { BalanceChartComponent } from './balanceChart.component';
import { CategoryService } from './category.service';
import { CategoryChartComponent } from './category-chart.component';
var OperationFactory = require('./operation.factory');
var OperationController = require('./operation.controller');
@ -44,7 +42,6 @@ export default angular.module('accountant.operations', [
ngResource,
ngStrap,
accountModule,
categoryChartModule
])
.factory('toastrService', downgradeInjectable(ToastrService))
@ -53,10 +50,12 @@ export default angular.module('accountant.operations', [
.controller('OperationController', OperationController)
.factory('categoryService', downgradeInjectable(CategoryService))
.directive('balanceChart', downgradeComponent({
component: BalanceChartComponent
}) as angular.IDirectiveFactory)
.directive('categoryChart', downgradeComponent({
component: CategoryChartComponent
}) as angular.IDirectiveFactory)
.name;

View File

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

View File

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