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

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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';

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

import * as _ from 'underscore';

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 OnInit {
  public data;

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

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

  loadData() {
    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
    let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
    let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');

    this.categoryService.query(
      +accountId,
      fromDay,
      toDay
    ).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;
    });
  }

  ngOnInit() {
    this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
  }
}