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

// vim: set tw=80 ts=2 sw=2 sts=2 :

import * as c3 from 'c3';

import {
  Component, ElementRef,
  Inject, Input, Output, EventEmitter,
  OnInit, OnChanges
} from '@angular/core';

import { Logger } from '@nsalaun/ng-logger';

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,
    private logger: Logger,
  ) {}

  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);
    }
  };
}