accountant-ui/src/operations/categoryChart.component.ts

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

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

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

import * as _ from 'underscore';

import { Account } from '../accounts/account';
import { Category } from './category';
import { CategoryService } from './category.service';


@Component({
  selector: 'category-chart',
  template: `<ngx-charts-bar-horizontal-2d
    [results]="data"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    barPadding="1">
  </ngx-charts-bar-horizontal-2d>`
})
export class CategoryChartComponent implements OnChanges {
  @Input() minDate: Date;
  @Input() maxDate: Date;
  @Input() account: Account;

  public data;

  public showXAxis = true;
  public showYAxis = true;
  public showXAxisLabel = false;
  public showYAxisLabel = false;

  constructor(
    private categoryService: CategoryService,
  ) {
    this.data = [];
  }

  loadData(account: Account) {
    this.categoryService.query(
      account.id,
      this.minDate,
      this.maxDate
    ).map((results: Category[]) => {
      return _.sortBy(results, 'income').reverse();
    }).map((results: Category[]) => {
      return results.map((result: Category) => {
        return {
          'name': result.category,
          'series': [{
            'name': 'expenses',
            'value': -Number(result.expenses)
          }, {
            'name': 'revenues',
            'value': Number(result.revenues)
          }]
        };
      });
    }).subscribe((results) => {
      this.data = results;
    });
  }

  ngOnChanges(changes) {
    if('account' in changes && changes.account.currentValue) {
      this.loadData(changes.account.currentValue);
    } else if (this.account) {
      this.loadData(this.account);
    }
  }
}