// vim: set tw=80 ts=4 sw=4 sts=4: /* This file is part of Accountant. Accountant is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Accountant is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Accountant. If not, see . */ /* jshint node: true */ 'use strict'; import * as moment from 'moment'; import * as c3 from 'c3'; import { Component, ElementRef, Inject, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core'; import { Account } from '../accounts/account'; import { CategoryService } from './category.service'; @Component({ selector: 'category-chart', template: '
' }) export class CategoryChartComponent implements OnInit, OnChanges { @Input() minDate: Date; @Input() maxDate: Date; @Input() account: Account; chart: c3.ChartAPI; constructor( private elementRef: ElementRef, private categoryService: CategoryService, ) {} loadData(account: Account) { this.categoryService.query( account.id, this.minDate, this.maxDate ).subscribe((results) => { var expenses=[], revenues=[], colors={}, names={}; var revenuesColor = 'green', expensesColor = 'orange'; for(let result of results) { if(result.revenues > 0) { var revenuesName = 'revenues-' + result.category; revenues.push([revenuesName, result.revenues]); names[revenuesName] = result.category; colors[revenuesName] = revenuesColor; } if(result.expenses < 0) { var expensesName = 'expenses-' + result.category; expenses.splice(0, 0, [expensesName, -result.expenses]); names[expensesName] = result.category; colors[expensesName] = expensesColor; } }; this.chart.unload(); this.chart.load({ columns: revenues.concat(expenses), names: names, colors: colors }); }); }; ngOnInit() { this.chart = c3.generate({ bindto: this.elementRef.nativeElement.children[0], data: { columns: [], type: 'donut', order: null, }, tooltip: { format: { value: function(value, ratio, id, index) { return value + '€'; } } }, donut: { label: { format: function(value) { return value + '€'; } } }, legend: { show: false } }); }; ngOnChanges(changes) { if('account' in changes && changes.account.currentValue) { this.loadData(changes.account.currentValue); } else if (this.account) { this.loadData(this.account); } }; }