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

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

import * as moment from 'moment';

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

import { Logger } from '@nsalaun/ng-logger';
import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';

import { Account } from '../accounts/account';
import { DailyBalance } from './dailyBalance';
import { DailyBalanceService } from '../accounts/dailyBalance.service';

@Component({
  selector: 'balance-chart',
  template:  `
<jqxChart #balanceChart
  [width]="'100%'"
  [height]="400"
  [title]="'Balance evolution'"
  [description]="''"
  [source]="data"
  [xAxis]="xAxis"
  [valueAxis]="valueAxis"
  [seriesGroups]="seriesGroups"
  (onRangeSelectionChanged)="select($event)">
</jqxChart>
`
})
export class BalanceChartComponent implements OnInit {
  private _account: Account;
  @ViewChild('balanceChart') chart: jqxChartComponent;

  public data;

  public xAxis: any = {
    type: 'date',
    dataField: 'operation_date',
    displayText: 'Date',
    baseUnit: 'day',

    bands: [{
      fillColor: 'blue',
      opacity: 0.10
    }],

    rangeSelector: {
      size: 80,
      padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
      backgroundColor: 'white',
      dataField: 'balance',
      //baseUnit: 'month',
      baseUnit: 'day',
      gridLines: { visible: false },
      serieType: 'line',
      //labels: {
      //  formatFunction: (value: any): any => {
      //    return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
      //  }
      //}
    }
  };

  public valueAxis: any = {
    title: {
      visible: false
    },
  };

  public seriesGroups: any = [{
    type: 'stackedcolumn',
    valueAxis: {
      title: { text: 'Expenses/revenues' },
      position: 'right',
      visible: true,
      gridLines: { visible: false },
      labels: {
        horizontalAlignment: 'left',
        formatSettings: {
          sufix:  '€',
          decimalPlaces: 2
        },
      }
    },
    series: [{
      dataField: 'expenses',
      displayText: 'Expenses',
      fillColor: 'tomato'
    }, {
      dataField: 'revenues',
      displayText: 'Revenues',
      fillColor: 'yellowgreen'
    }]
  }, {
    type: 'stepline',
    valueAxis: {
      title: { text: 'Balance' },
      //gridLines: { visible: false },
      labels: {
        formatSettings: {
          sufix:  '€',
          decimalPlaces: 2
        }
      }
    },
    series: [{
      dataField: 'balance',
      displayText: 'Balance',
      fillColor: 'steelblue'
    }],
    bands: [{
      minValue: 0, maxValue: 0, fillColor: 'orange', lineWidth: 1
    }, {
      minValue: 0, maxValue: 0, fillColor: 'red', lineWidth: 1
    }]
  }];

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private logger: Logger,
    private dailyBalanceService: DailyBalanceService,
  ) {
    this.data = [];
  }

  loadData() {
    this.logger.info('Loading data.');

    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');

    this.dailyBalanceService.query(
      +accountId
    ).subscribe((results) => {
      this.data = results;

      let lastResult = results[results.length -1];

      this.updateXBands(results[0].operation_date, lastResult.operation_date);
    });
  }

  setLines(account: Account) {
    if (account) {
      this.seriesGroups[1].bands[1].minValue = account.authorized_overdraft;
      this.seriesGroups[1].bands[1].maxValue = account.authorized_overdraft;
    }
  }

  ngOnInit() {
    this.activatedRoute.queryParamMap.subscribe((params: ParamMap) => {
      let fromDay = params.get('from');
      let toDay = params.get('to');

      this.xAxis.minValue = moment(fromDay).toDate();
      this.xAxis.maxValue = moment(toDay).toDate();

      if(this.chart && this.chart.host) {
        this.chart.refresh();
      }
    });

    this.loadData();
  }

  @Input()
  set account(account: Account) {
    this._account = account;

    this.setLines(account);
  }

  get account(): Account {
    return this._account;
  }

  updateXBands(minDate, maxDate) {
    if(moment(maxDate) > moment()) {
      if(moment(minDate) < moment()) {
        this.xAxis.bands[0].minValue = moment().toDate();
      } else {
        this.xAxis.bands[0].minValue = moment(minDate).toDate();
      }
      this.xAxis.bands[0].maxValue = moment(maxDate).toDate();
    }
  }

  select(event: any) {
    let args = event.args;

    this.updateXBands(args.minValue, args.maxValue);

    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');

    this.router.navigate(['account', accountId, 'operations'], {
      queryParams: {
        from: moment(args.minValue).format('YYYY-MM-DD'),
        to: moment(args.maxValue).format('YYYY-MM-DD')
      }
    });
  }
}