Improve bindings between components.

src/operations/balance-chart.component.js

@@ -33,17 +33,14 @@ var balanceChartModule = angular.module('balanceChartModule', [
 .component('balanceChart', {
     template: '<div></div>',
     bindings: {
-        minDate: '<',
-        maxDate: '<'
+        onUpdate: '&'
     },
     controller: function($routeParams, Balances, $element, $log) {
         var vm = this;
 
         vm.loadData = function() {
             Balances.query({
-                id: $routeParams.accountId,
-                //begin: vm.minDate.format('YYYY-MM-DD'),
-                //end: vm.maxDate.format('YYYY-MM-DD')
+                id: $routeParams.accountId
             }, function(results) {
                 var headers = [['x', 'balances', 'expenses', 'revenues']];
 
@@ -59,18 +56,19 @@ var balanceChartModule = angular.module('balanceChartModule', [
                 vm.chart.load({
                     rows: headers.concat(rows)
                 });
+
+                var x = vm.chart.x();
+                var balances = x.balances;
+
+                vm.onUpdate(balances[0], balances[balances.length - 1]);
             });
         };
 
         vm.$onInit = function() {
-            $log.log($element);
-
             vm.chart = c3.generate({
-                //bindto: $element[0],
                 bindto: $element[0].children[0],
                 size: {
                     height: 500,
-                //    witdh: 800,
                 },
                 data: {
                     x: 'x',
@@ -129,16 +127,15 @@ var balanceChartModule = angular.module('balanceChartModule', [
                     }
                 },
                 subchart: {
-                    show: true
+                    show: true,
+                    onbrush: function(domain) {
+                        vm.onUpdate({minDate: domain[0], maxDate: domain[1]});
+                    }
                 }
             });
 
             vm.loadData();
         };
-
-        vm.$onChange = function(changes) {
-            vm.loadData();
-        };
     }
 }).factory('Balances', function($resource) {
     return $resource(

src/operations/index.js

@@ -63,9 +63,6 @@ var operationModule = angular.module('accountant.operations', [
 
     var vm = this;
 
-    vm.minDate = moment().date(1).month(11).year(2016);
-    vm.maxDate = moment();
-
     /*
      * Add an empty operation.
      */
@@ -81,12 +78,15 @@ var operationModule = angular.module('accountant.operations', [
     /*
      * Load operations.
      */
-    vm.load = function() {
+    vm.load = function(minDate, maxDate) {
+        vm.minDate = minDate;
+        vm.maxDate = maxDate;
+
         return Operation.query({
             // eslint-disable-next-line camelcase
             account_id: $routeParams.accountId,
-            begin: vm.minDate.format('YYYY-MM-DD'),
-            end: vm.maxDate.format('YYYY-MM-DD')
+            begin: minDate ? moment(minDate).format('YYYY-MM-DD') : null,
+            end: maxDate ? moment(maxDate).format('YYYY-MM-DD') : null
         });
     };
 
@@ -183,7 +183,11 @@ var operationModule = angular.module('accountant.operations', [
         });
     };
 
-    vm.operations = vm.load();
+    vm.onUpdate = function(minDate, maxDate) {
+        vm.operations = vm.load(minDate, maxDate);
+    };
+
+    //vm.operations = vm.load();
 })
 
 .component('operationModifyModalComponent', {

src/operations/operations.html

@@ -18,9 +18,7 @@
 <div>
   <div class="row">
     <div class="col-md-9">
-      <balance-chart
-        min-date="operationsCtrl.minDate"
-        max-date="operationsCtrl.maxDate"/>
+      <balance-chart on-update="operationsCtrl.onUpdate(minDate, maxDate)"/>
     </div>
     <div class="col-md-3"></div>
   </div>