Rewrote category chart.

src/operations/categoryChart.component.ts

@@ -1,9 +1,10 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-import { Component, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Logger } from '@nsalaun/ng-logger';
+import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
 
 import * as _ from 'underscore';
 
@@ -13,29 +14,69 @@ 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>`
+  template: `
+<jqxChart #categoryChart
+  [width]="'100%'"
+  [height]="400"
+  [title]="'Categories'"
+  [description]="''"
+  [showLegend]="false"
+  [seriesGroups]="seriesGroups">
+</jqxChart>
+`
 })
 export class CategoryChartComponent implements OnInit {
-  public data;
+  @ViewChild('categoryChart') chart: jqxChartComponent;
 
-  public showXAxis = true;
-  public showYAxis = true;
-  public showXAxisLabel = false;
-  public showYAxisLabel = false;
+  public seriesGroups: any = [{
+    type: 'donut',
+    source: [],
+    //showLabels: true,
+    series: [{
+      dataField: 'value',
+      displayText: 'category',
+      initialAngle: 90,
+      radius: 130,
+      innerRadius: 90,
+      formatSettings: { sufix: '€', decimalPlaces: 2 },
+      radiusDataField: 'category',
+      colorFunction: (value, itemIndex, series, group) => {
+        if(group.source[itemIndex].type === 'expenses') {
+          return 'tomato';
+        }
+
+        return 'yellowgreen';
+      },
+      opacity: 0.5
+    }]
+  }, {
+    type: 'donut',
+    source: [],
+    showLabels: true,
+    series: [{
+      dataField: 'value',
+      displayText: 'name',
+      initialAngle: 90,
+      labelRadius: 50,
+      radius: 85,
+      innerRadius: 75,
+      formatSettings: { sufix: '€', decimalPlaces: 2 },
+      colorFunction: (value, itemIndex, series, group) => {
+        if(group.source[itemIndex].name === 'Expenses') {
+          return 'tomato';
+        }
+
+        return 'yellowgreen';
+      }
+    }]
+  }];
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private logger: Logger,
     private categoryService: CategoryService,
   ) {
-    this.data = [];
+    //this.data = [];
   }
 
   loadData() {
@@ -47,27 +88,54 @@ export class CategoryChartComponent implements OnInit {
       +accountId,
       fromDay,
       toDay
-    ).map((results: Category[]) => {
-      return _.sortBy(results, 'income').reverse();
-    }).map((results: Category[]) => {
-      return results.map((result: Category) => {
+    ).subscribe((results: Category[]) => {
+      let expenses = _.filter(results, function(item: Category) {
+        return item.expenses < 0;
+      }).map(function(item: Category) {
         return {
-          'name': result.category,
-          'series': [{
-            'name': 'expenses',
-            'value': -Number(result.expenses)
-          }, {
-            'name': 'revenues',
-            'value': Number(result.revenues)
-          }]
+          category: item.category,
+          value: -item.expenses,
+          type: 'expenses'
         };
       });
-    }).subscribe((results) => {
-      this.data = results;
+
+      expenses = _.sortBy(expenses, 'value').reverse();
+
+      let revenues = _.filter(results, function(item: Category) {
+        return item.revenues > 0;
+      }).map(function(item: Category) {
+        return {
+          category: item.category,
+          value: item.revenues,
+          type: 'revenues'
+        };
+      });
+
+      revenues = _.sortBy(revenues, 'value');
+
+      this.seriesGroups[0].source = expenses.concat(revenues);
+
+      let totals = [
+        {name: 'Expenses', value: 0},
+        {name: 'Revenues', value: 0}
+      ];
+
+      results.forEach(function(item: Category) {
+        totals[0].value -= item.expenses;
+        totals[1].value += item.revenues;
+      });
+
+      this.seriesGroups[1].source = totals;
+
+      if(this.chart && this.chart.host) {
+        this.chart.refresh();
+      }
     });
   }
 
   ngOnInit() {
     this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
+
+    this.loadData();
   }
 }