From f19403f0ea05d6404c3d5cc658d1ba04ebb78626 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Sun, 10 Jun 2018 10:03:45 +0200 Subject: [PATCH] Use jqWidgets for balance chart. --- src/operations/balanceChart.component.ts | 202 ++++++++--------------- src/operations/operation.module.ts | 2 + 2 files changed, 75 insertions(+), 129 deletions(-) diff --git a/src/operations/balanceChart.component.ts b/src/operations/balanceChart.component.ts index 3773418..2d80b0a 100644 --- a/src/operations/balanceChart.component.ts +++ b/src/operations/balanceChart.component.ts @@ -1,15 +1,15 @@ // vim: set tw=80 ts=2 sw=2 sts=2: import * as moment from 'moment'; -import * as c3 from 'c3'; import { - Component, ElementRef, + Component, Inject, Input, Output, EventEmitter, - OnInit, OnChanges + OnChanges } from '@angular/core'; import { Account } from '../accounts/account'; +import { DailyBalance } from './dailyBalance'; import { DailyBalanceService } from '../accounts/dailyBalance.service'; class DateRange { @@ -19,152 +19,91 @@ class DateRange { @Component({ selector: 'balance-chart', - template: '
' + template: ` + + +` }) -export class BalanceChartComponent implements OnInit, OnChanges { +export class BalanceChartComponent implements OnChanges { @Input() account: Account; @Output() onUpdate: EventEmitter = new EventEmitter(); - private chart: c3.ChartAPI; - private balances: number[]; + public data; + + public xAxis: any = { + dataField: 'operation_date', + type: 'date', + baseUnit: 'day', + //unitInterval: 10, + + rangeSelector: { + size: 80, + padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 }, + backgroundColor: 'white', + dataField: 'balance', + baseUnit: 'month', + gridLines: { visible: false }, + serieType: 'line', + //labels: { + // formatFunction: (value: any): any => { + // return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2); + // } + //} + } + }; + + public seriesGroups: any = [{ + // type: 'column', + // series: [{ + // dataField: 'revenues' + // }, { + // dataField: 'expenses' + // }] + //}, { + type: 'line', + series: [{ + dataField: 'balance' + }], + bands: [{ + minValue: 0, maxValue: 0, fillColor: 'orange', lineWidth: 2 + }, { + minValue: 0, maxValue: 0, fillColor: 'red', lineWidth: 2 + }] + }]; constructor( - private elementRef: ElementRef, private dailyBalanceService: DailyBalanceService, ) { + this.data = []; } loadData(account: Account) { this.dailyBalanceService.query( account.id ).subscribe((results) => { - var headers: any[][] = [['date', 'balances', 'expenses', 'revenues']]; - - var rows = results.map(function(result) { - return [ - result.operation_date, - result.balance, - result.expenses, - result.revenues - ]; - }); - - this.chart.unload(); - - this.chart.load({ - rows: headers.concat(rows) - }); - - var x: any; - - x = this.chart.x(); - - var balances = x.balances; + this.data = results; this.onUpdate.emit({ - minDate: balances[0], - maxDate: balances[balances.length - 1] + minDate: moment(results[0].operation_date).toDate(), + maxDate: moment(results[results.length - 1].operation_date).toDate() }); }); - }; - - ngOnInit() { - var tomorrow = moment().endOf('day').valueOf(); - - this.chart = c3.generate({ - bindto: this.elementRef.nativeElement.children[0], - size: { - height: 450, - }, - data: { - x: 'date', - rows: [], - axes: { - expenses: 'y2', - revenues: 'y2' - }, - type: 'bar', - types: { - balances: 'area' - }, - groups: [ - ['expenses', 'revenues'] - ], - // Disable for the moment because there is an issue when - // using subchart line is not refreshed after subset - // selection. - //regions: { - // balances: [{ - // start: tomorrow, - // style: 'dashed' - // }] - //} - }, - regions: [{ - start: tomorrow, - }], - axis: { - x: { - type: 'timeseries', - tick: { - format: '%Y-%m-%d', - rotate: 50, - } - }, - y: { - label: { - text: 'Amount', - position: 'outer-middle' - } - }, - y2: { - show: true, - label: { - text: 'Amount', - position: 'outer-middle' - } - } - }, - grid: { - x: { - show: true, - }, - y: { - show: true, - } - }, - tooltip: { - format: { - value: function(value, ratio, id, index) { - return value + '€'; - } - } - }, - subchart: { - show: true, - onbrush: (domain) => { - this.onUpdate.emit({minDate: domain[0], maxDate: domain[1]}); - } - } - }); - }; + } setLines(account: Account) { - if(this.chart) { - this.chart.ygrids([ - { value: 0, axis: 'y2' }, - { value: 0, axis: 'y', class: 'zeroline'}, - ]); - - if(account) { - this.chart.ygrids.add({ - value: account.authorized_overdraft, - axis: 'y', - class: 'overdraft' - }); - } + if (account) { + this.seriesGroups[0].bands[1].minValue = account.authorized_overdraft; + this.seriesGroups[0].bands[1].maxValue = account.authorized_overdraft; } - }; + } ngOnChanges(changes) { if('account' in changes && changes.account.currentValue) { @@ -173,5 +112,10 @@ export class BalanceChartComponent implements OnInit, OnChanges { } else { this.setLines(this.account); } - }; + } + + select(event: any) { + let args = event.args; + this.onUpdate.emit({minDate: args.minValue, maxDate: args.maxValue}); + } } diff --git a/src/operations/operation.module.ts b/src/operations/operation.module.ts index d5e9018..c2ebcd3 100644 --- a/src/operations/operation.module.ts +++ b/src/operations/operation.module.ts @@ -11,6 +11,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { ToastrModule } from 'ngx-toastr'; import { TextMaskModule } from 'angular2-text-mask'; +import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart'; import { BalanceChartComponent } from './balanceChart.component'; import { CategoryChartComponent } from './categoryChart.component'; @@ -42,6 +43,7 @@ import { OperationListState } from './operation.states'; OperationService, ], declarations: [ + jqxChartComponent, BalanceChartComponent, CategoryChartComponent, OperationRowComponent,