accountant-ui/src/operations/category-chart.component.ts

// 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 <http://www.gnu.org/licenses/>.
 */
/* 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: '<div></div>'
})
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);
                }
            };
}