Change category graph type.

src/operations/categoryChart.component.ts

@@ -1,101 +1,73 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-import * as c3 from 'c3';
-
 import {
   Component, ElementRef,
   Inject, Input, Output,
-  OnInit, OnChanges
+  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: '<div></div>'
+  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, OnChanges {
+export class CategoryChartComponent implements OnChanges {
   @Input() minDate: Date;
   @Input() maxDate: Date;
   @Input() account: Account;
 
-  chart: c3.ChartAPI;
+  public data;
+
+  public showXAxis = true;
+  public showYAxis = true;
+  public showXAxisLabel = false;
+  public showYAxisLabel = false;
 
   constructor(
-    private elementRef: ElementRef,
     private categoryService: CategoryService,
-  ) {}
+  ) {
+    this.data = [];
+  }
 
   loadData(account: Account) {
     this.categoryService.query(
       account.id,
       this.minDate,
       this.maxDate
-    ).subscribe((results) => {
-      var expenses=[],
-        revenues=[],
-        colors={},
-        names={};
-
-      var revenuesColor = 'green',
-        expensesColor = 'orange';
-
-      for(let result of results) {
-        if(result.revenues > 0) {
-          var revenuesName = 'revenues-' + result.category;
-
-          revenues.push([revenuesName, result.revenues]);
-          names[revenuesName] = result.category;
-          colors[revenuesName] = revenuesColor;
-        }
-
-        if(result.expenses < 0) {
-          var expensesName = 'expenses-' + result.category;
-
-          expenses.splice(0, 0, [expensesName, -result.expenses]);
-          names[expensesName] = result.category;
-          colors[expensesName] = expensesColor;
-        }
-      };
-
-      this.chart.unload();
-
-      this.chart.load({
-        columns: revenues.concat(expenses),
-        names: names,
-        colors: colors
+    ).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.chart = c3.generate({
-      bindto: this.elementRef.nativeElement.children[0],
-      data: {
-        columns: [],
-        type: 'donut',
-        order: null,
-      },
-      tooltip: {
-        format: {
-          value: function(value, ratio, id, index) {
-            return value + '€';
-          }
-        }
-      },
-      donut: {
-        label: {
-          format: function(value) {
-            return value + '€';
-          }
-        }
-      },
-      legend: {
-        show: false
-      }
-    });
-  };
+  }
 
   ngOnChanges(changes) {
     if('account' in changes && changes.account.currentValue) {

src/operations/operation.module.ts

@@ -8,6 +8,7 @@ import { RouterModule } from '@angular/router';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ToastrModule } from 'ngx-toastr';
 import { TextMaskModule } from 'angular2-text-mask';
 
@@ -33,6 +34,7 @@ import { OperationListState } from './operation.states';
     NgLoggerModule,
     ToastrModule,
     NgbModule,
+    NgxChartsModule,
     TextMaskModule
   ],
   providers: [