Use query parameters in Category chart component.

src/operations/categoryChart.component.ts

@@ -1,16 +1,12 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-import {
-  Component, ElementRef,
-  Inject, Input, Output,
-  OnChanges
-} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Logger } from '@nsalaun/ng-logger';
 
 import * as _ from 'underscore';
 
-import { Account } from '../accounts/account';
 import { Category } from './category';
 import { CategoryService } from './category.service';
 
@@ -26,11 +22,7 @@ import { CategoryService } from './category.service';
     barPadding="1">
   </ngx-charts-bar-horizontal-2d>`
 })
-export class CategoryChartComponent implements OnChanges {
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() account: Account;
-
+export class CategoryChartComponent implements OnInit {
   public data;
 
   public showXAxis = true;
@@ -39,16 +31,22 @@ export class CategoryChartComponent implements OnChanges {
   public showYAxisLabel = false;
 
   constructor(
+    private activatedRoute: ActivatedRoute,
+    private logger: Logger,
     private categoryService: CategoryService,
   ) {
     this.data = [];
   }
 
-  loadData(account: Account) {
+  loadData() {
+    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
+    let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
+    let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');
+
     this.categoryService.query(
-      account.id,
-      this.minDate,
-      this.maxDate
+      +accountId,
+      fromDay,
+      toDay
     ).map((results: Category[]) => {
       return _.sortBy(results, 'income').reverse();
     }).map((results: Category[]) => {
@@ -69,11 +67,7 @@ export class CategoryChartComponent implements OnChanges {
     });
   }
 
-  ngOnChanges(changes) {
-    if('account' in changes && changes.account.currentValue) {
-      this.loadData(changes.account.currentValue);
-    } else if (this.account) {
-      this.loadData(this.account);
-    }
+  ngOnInit() {
+    this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
   }
 }

src/operations/operationList.component.ts

@@ -25,10 +25,7 @@ import { OperationEditModalComponent } from './operationEditModal.component';
     </div>
 
     <div class="col-md-4">
-      <category-chart
-        [minDate]="minDate"
-        [maxDate]="maxDate"
-        [account]="account"></category-chart>
+      <category-chart></category-chart>
     </div>
   </div>