Use jqWidgets for balance chart.

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: '<div></div>'
+  template:  `
+<jqxChart #balanceChart
+  [width]="'100%'"
+  [height]="'100%'"
+  [title]="'Balance evolution'"
+  [description]="''"
+  [source]="data"
+  [xAxis]="xAxis"
+  [seriesGroups]="seriesGroups"
+  (onRangeSelectionChanged)="select($event)">
+</jqxChart>
+`
 })
-export class BalanceChartComponent implements OnInit, OnChanges {
+export class BalanceChartComponent implements OnChanges {
   @Input() account: Account;
   @Output() onUpdate: EventEmitter<DateRange> = new EventEmitter<DateRange>();
 
-  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});
+  }
 }

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,