Upgrade Category chart component to Angular2.
This commit is contained in:
parent
1bd59cbbf8
commit
02f447d63c
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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 {}
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user