filter an accounts

public/app/js/controllers/BalanceCtrl.js

@@ -14,7 +14,7 @@ app.controller( 'BalanceCtrl',
 		      $scope.toolTipContentFunction = function () {
 			  return function ( key, x, y, e, graph ) {
 			      var details = $scope.balance.details[ key ];
-			      return '<material-content><h3>' + details.key + '</h3>' + '<table>' + _( details ).map( function ( transaction ) {
+			      return '<material-content><h3>' + key + '</h3>' + '<table>' + _( details ).map( function ( transaction ) {
 				  return '<tr><td>' + transaction.date + '</td><td>' + transaction.payee + '</td><td style="text-align: right">' + $filter( 'number' )( transaction.amount, 2 ) + ' ' + transaction.currency + '</td></tr>';
 			      } ).join( '' ) + '<tr><th></th><th>Total :</th><th>' + x + ' €</th></tr>' + '</table></material-content>';
 			  };
@@ -67,6 +67,12 @@ app.controller( 'BalanceCtrl',
 			  // }
 		      } );
 
+		      $scope.update_chart_data = function() {
+			  _($scope.balance.buckets).each( function( bucket ) {
+			      bucket.chart.data = $filter('filter')( bucket.data, bucket.account_selected, true );
+			  } );
+		      };
+
 		      var retrieve_data = function () {
 			  var from, to, period;
 
@@ -91,11 +97,17 @@ app.controller( 'BalanceCtrl',
 			      buckets: [ {
 				  categories: 'Expenses',
 				  data: [],
-				  total: 0
+				  total: 0,
+				  chart: {
+				      data: []
+				  }
 			      }, {
 				  categories: 'Income Equity',
 				  data: [],
-				  total: 0
+				  total: 0,
+				  chart: {
+				      data: []
+				  }
 			      } ],
 			      details: {}
 			  };
@@ -122,6 +134,8 @@ app.controller( 'BalanceCtrl',
 				      bucket.total = _( response.data ).reduce( function ( memo, account ) {
 					  return memo + account.amount;
 				      }, 0 );
+
+				      $scope.update_chart_data();
 				  } );
 			  } );
 		      };
@@ -142,24 +156,24 @@ app.controller( 'BalanceCtrl',
 			  $scope.period_offset = $scope.dates_salaries.length - 1;
 		      };
 
-		      API.dates_salaries()
-			  .then( function ( response ) {
-			      $scope.dates_salaries = response.data;
-
-			      $scope.reset_offset();
-
-			      // retrieve_data() when the value of week_offset changes
-			      // n.b.: triggered when week_offset is initialized above
-			      $scope.$watch( 'period_offset', function () {
-				  retrieve_data();
-			      } );
-
-			  } );
 		      API.accounts()
 			  .then( function ( response ) {
 			      $scope.accounts = response.data.map( function( account_ary ) {
 				  return account_ary.join( ':' );
 			      } );
+			      API.dates_salaries()
+				  .then( function ( response ) {
+				      $scope.dates_salaries = response.data;
+
+				      $scope.reset_offset();
+
+				      // retrieve_data() when the value of week_offset changes
+				      // n.b.: triggered when week_offset is initialized above
+				      $scope.$watch( 'period_offset', function () {
+					  retrieve_data();
+				      } );
+
+				  } );
 			  } );
 		  }
 		] );

public/app/js/templates/balance.tpl.html

@@ -15,9 +15,6 @@
 	<material-button class="material-theme-green"
 			 data-ng-click="after()"
 			 data-ng-class="{'disabled': period_offset == dates_salaries.length}">next</material-button>
-
-	<select data-ng-model="accounts.selected"
-		data-ng-options="account for account in accounts"></select>
       </div>
     </material-toolbar>
     <material-toolbar>
@@ -31,9 +28,14 @@
     <div flex data-ng-repeat="bucket in balance.buckets">
       <material-toolbar class="material-theme-light">
 	<h3>{{bucket.categories}}, total = {{bucket.total | number:2}} €</h3>
+	<select data-ng-model="bucket.account_selected"
+		data-ng-options="account.account for account in bucket.data"
+		data-ng-change="update_chart_data()">
+	  <option value=''>...</option>
+	</select>
       </material-toolbar>
       <material-content>
-	<nvd3-pie-chart data="bucket.data"
+	<nvd3-pie-chart data="bucket.chart.data"
 			x="xFunction()"
 			y="yFunction()"
 			height="300"
@@ -48,7 +50,7 @@
       </material-content>
       <material-content>
 	<table data-ng-table="tableParams" class="table">
-	  <tr data-ng-repeat="account in bucket.data"
+	  <tr data-ng-repeat="account in bucket.data | filter:bucket.account_selected"
 	      data-ng-class="{'even': $even, 'odd': $odd}"
 	      style="border-left:10px solid {{coloring_score( score_account( account.account ) )}};border-right:10px solid {{coloring_score( score_account( account.account ) )}}">
 	    <td data-title="'Account'"