From b8b2d37940fc0077e782a6c8026a31c9a30e8c21 Mon Sep 17 00:00:00 2001
From: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
Date: Fri, 15 May 2015 10:45:03 +0200
Subject: [PATCH] major overhaul in presentation

---
 public/app/js/controllers/DashboardCtrl.js |  41 ++-
 public/app/js/templates/dashboard.html     | 292 +++++++++------------
 2 files changed, 150 insertions(+), 183 deletions(-)

diff --git a/public/app/js/controllers/DashboardCtrl.js b/public/app/js/controllers/DashboardCtrl.js
index 6fae3d76..64abbd6e 100644
--- a/public/app/js/controllers/DashboardCtrl.js
+++ b/public/app/js/controllers/DashboardCtrl.js
@@ -23,9 +23,9 @@ app.controller( 'DashboardCtrl',
 		      // compute an account's score: from 1 (good) to 10 (bad), 0 is neutral/undecided
 		      var score_account = function ( account ) {
 			  if ( account.match( /^Income:(salaire|Sécu|Mutuelle)$/ ) ) {
-			      return 1;
+			      return 11;
 			  } else if ( account.match( /^Income:(Gift|Remboursement)$/ ) ) {
-			      return 6;
+			      return 12;
 			  } else if ( account.match( /^Expenses:(courses|Hang)$/ ) ) {
 			      return 1;
 			  } else if ( account.match( /^Expenses:Home/ ) ) {
@@ -40,14 +40,34 @@ app.controller( 'DashboardCtrl',
 			      return 9;
 			  } else if ( account.match( /^Expenses:Gadgets/ ) ) {
 			      return 10;
+			  } else if ( account.match( /^Liabilities/ ) ) {
+			      return 1000;
+			  } else if ( account.match( /^Assets/ ) ) {
+			      return 100;
 			  } else {
 			      return 0;
 			  }
 		      };
 
 		      $scope.coloring_score = function ( score ) {
+			  var adjusted_score = score;
 			  var color_scale = [ '#99f', '#0f0', '#3f0', '#6f0', '#9f0', '#cf0', '#fc0', '#f90', '#f60', '#f30', '#f00' ];
-			  return color_scale[ score ];
+
+			  if ( score >= 1000 ) {
+			      // Liabilities
+			      adjusted_score = score - 1000;
+			      color_scale = [ '#0ff' ];
+			  } else if ( score >= 100 ) {
+			      // Assets
+			      adjusted_score = score - 100;
+			      color_scale = [ '#f0f' ];
+			  } else if ( score >= 11 ) {
+			      // Income
+			      adjusted_score = score - 11;
+			      color_scale = [ '#ff0', '#ff9' ];
+			  }
+
+			  return color_scale[ adjusted_score ];
 		      };
 
 		      $scope.color = function () {
@@ -96,8 +116,7 @@ app.controller( 'DashboardCtrl',
 		      };
 
 		      $scope.balance = {
-			  buckets: [ new Bucket( 'Expenses' ),
-				     new Bucket( 'Income' ) ],
+			  buckets: [ new Bucket( 'Expenses Assets Liabilities Income' ) ],
 			  details: {}
 		      };
 
@@ -134,12 +153,6 @@ app.controller( 'DashboardCtrl',
 				  $scope.total_unbudgeted = _($scope.budget).findWhere( { percentage: -1 } ).amount;
 			      } );
 
-			  API.register( { period: period,
-					  categories: '' } )
-			      .then( function( response ) {
-				  $scope.balance.details = _($scope.balance.details).extend( _(response.data.values).groupBy( 'account' ) );
-			      } );
-
 			  _($scope.balance.buckets).each( function( bucket ) {
 			      API.balance( { period: period,
 					     categories: bucket.categories } )
@@ -153,7 +166,11 @@ app.controller( 'DashboardCtrl',
 					  .sortBy( function ( account ) {
 					      return 1 / account.amount;
 					  } )
-					  .value();
+					  .sortBy( function ( account ) {
+					      return account.account.split(":")[0];
+					  } )
+					  .value()
+					  .reverse();
 				      bucket.raw_total = _( response.data ).reduce( function ( memo, account ) {
 					  return memo + account.amount;
 				      }, 0 );
diff --git a/public/app/js/templates/dashboard.html b/public/app/js/templates/dashboard.html
index 3bfca30e..67c79037 100644
--- a/public/app/js/templates/dashboard.html
+++ b/public/app/js/templates/dashboard.html
@@ -1,177 +1,127 @@
 <md-toolbar flex="100" layout="column" layout-gt-md="row" layout-align="center center">
-    <h2 flex="48">From {{from_date | date:'longDate'}} <span data-ng-if="to_date">to {{to_date | date:'longDate'}}</span></h2>
-    <div flex="48" layout="row" layout-align="space-around center">
-	<md-button class="md-raised md-primary"
-		   aria-label="before"
-		   data-ng-click="before()"
-		   data-ng-class="{'disabled': period_offset == 0}">prev</span></md-button>
-	<md-button class="md-raised"
-		   aria-label="now"
-		   data-ng-click="reset_offset()"
-		   data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}">Now</md-button>
-	<md-button class="md-raised md-primary"
-		   aria-label="after"
-		   data-ng-click="after()"
-		   data-ng-class="{'disabled': period_offset == dates_salaries.length}">next</buttmd-on>
-    </div>
+	<h2 flex="48">From {{from_date | date:'longDate'}} <span data-ng-if="to_date">to {{to_date | date:'longDate'}}</span></h2>
+	<div flex="48" layout="row" layout-align="space-around center">
+		<md-button class="md-raised md-primary"
+			aria-label="before"
+			data-ng-click="before()"
+			data-ng-class="{'disabled': period_offset == 0}">prev</span></md-button>
+		<md-button class="md-raised"
+			aria-label="now"
+			data-ng-click="reset_offset()"
+			data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}">Now</md-button>
+		<md-button class="md-raised md-primary"
+			aria-label="after"
+			data-ng-click="after()"
+			data-ng-class="{'disabled': period_offset == dates_salaries.length}">next</buttmd-on>
+	</div>
 </md-toolbar>
 <md-content flex="100" layout="column" layout-gt-md="row">
-    <md-card flex="48" layout="column">
-	<table class="table">
-	    <thead>
-		<tr>
-		    <th style="width: 11%">Account</th>
-		    <th style="width: 3%">Spent</th>
-		    <th style="width: 3%">Budgeted</th>
-		    <th style="width: 3%">Percentage</th>
-		    <th>Progress</th>
-		</tr>
-	    </thead>
-	    <tbody>
-		<tr data-ng-repeat="account in budget"
-		    data-ng-class="{'even': $even, 'odd': $odd}">
-		    <td>
-			{{account.account}}
-		    </td>
-		    <td style="text-align: right;">
-			{{account.amount | number:2}}{{account.currency}}
-		    </td>
-		    <td style="text-align: right;">
-			<span data-ng-if="account.percentage >= 0">{{account.budget | number:2}}{{account.currency}}</span>
-			<span data-ng-if="account.percentage < 0">
-			    {{balance.buckets[1].raw_total - total_budget | number:2}}{{account.currency}}
-			</span>
-		    </td>
-		    <td style="text-align: right;">
-			<span data-ng-if="account.percentage >= 0">{{account.percentage | number:2}}%</span>
-			<span data-ng-if="account.percentage < 0">
-			    {{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100 | number:2}}%
-			</span>
-		    </td>
-		    <td>
-			<md-progress-linear md-theme="red" mode="determinate" value="{{account.percentage}}"
-					    data-ng-if="account.percentage > 100"></md-progress-linear>
-			<md-progress-linear md-theme="brown" mode="determinate"
-					    value="{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100}}"
-					    data-ng-if="account.percentage < 0"></md-progress-linear>
-			<md-progress-linear mode="determinate" value="{{account.percentage}}"
-					    data-ng-if="account.percentage <= 100"></md-progress-linear>
-		    </td>
-		</tr>
-	    </tbody>
-	</table>
-    </md-card>
-    <md-card flex="48" layout="column">
-	<table class="table">
-	    <thead>
-		<tr>
-		    <th style="width: 11%">Account</th>
-		    <th style="width: 3%">Left</th>
-		    <th style="width: 3%">Total</th>
-		    <th style="width: 3%">Percentage</th>
-		    <th>Progress</th>
-		</tr>
-	    </thead>
-	    <tbody>
-		<tr class="odd">
-		    <td>
-			Balance
-		    </td>
-		    <td style="text-align: right;">
-			{{balance.buckets[1].raw_total - balance.buckets[0].raw_total | number:2}}{{budget[0].currency}}
-		    </td>
-		    <td style="text-align: right;">
-			{{balance.buckets[1].raw_total | number:2}}{{budget[0].currency}}
-		    </td>
-		    <td style="text-align: right;">
-			{{( ( balance.buckets[1].raw_total - balance.buckets[0].raw_total ) / balance.buckets[1].raw_total ) * 100 | number:2}}%
-		    </td>
-		    <td>
-			<md-progress-linear md-theme="green" mode="determinate"
-					    value="{{( ( balance.buckets[1].raw_total - balance.buckets[0].raw_total ) / balance.buckets[1].raw_total ) * 100}}"></md-progress-linear>
-		    </td>
-		</tr>
-		<tr class="even">
-		    <td>
-			Potential savings
-		    </td>
-		    <td style="text-align: right;">
-			{{balance.buckets[1].raw_total - total_budget - total_unbudgeted | number:2}}{{budget[0].currency}}
-		    </td>
-		    <td style="text-align: right;">
-			{{balance.buckets[1].raw_total - total_budget | number:2}}{{budget[0].currency}}
-		    </td>
-		    <td style="text-align: right;">
-			{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / ( balance.buckets[1].raw_total - total_budget ) ) * 100 | number:2}}%
-		    </td>
-		    <td>
-			<md-progress-linear md-theme="green" mode="determinate"
-					    value="{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100}}"></md-progress-linear>
-		    </td>
-		</tr>
-	    </tbody>
-	</table>
-    </md-card>
-</md-content>
-<md-content flex="100" layout="column" layout-gt-md="row">
-    <md-card flex="48" layout="column"
-	     data-ng-repeat="bucket in balance.buckets">
-	<md-toolbar>
-	    <h3>{{bucket.categories}}, total = {{bucket.total | number:2}} €</h3>
-	    <md-slider discrete
-		       aria-label="score threshold"
-		       min="0" max="10" step="1"
-		       data-ng-model="bucket.score_threshold"
-		       data-ng-change="select.score_higher_than( bucket, bucket.score_threshold ); filter_data()">
-	    </md-slider>
-	    <select multiple
-		    data-ng-model="bucket.accounts_selected"
-		    data-ng-options="account.account for account in bucket.raw_data | orderBy:'account'"
-		    data-ng-change="filter_data()">
-		<option value=''>...</option>
-	    </select>
-	</md-toolbar>
-	<md-content>
-	    <md-card>
-		<nvd3-pie-chart data="bucket.data"
-				x="xFunction()"
-				y="yFunction()"
-				height="300"
-				margin="{left:0,top:0,bottom:0,right:0}"
-				color="color()"
-				tooltips="true"
-				tooltipcontent="toolTipContentFunction()"
-				showLabels="true"
-				labelType="value">
-		    <svg></svg>
-		</nvd3-pie-chart>
-	    </md-card>
-	    <md-card>
+	<md-card flex="48" layout="column">
 		<table class="table">
-		    <thead>
-			<tr>
-			    <th><md-buton data-ng-click="bucket.order_by( 'account' )">account</md-buton></th>
-			    <th><md-buton data-ng-click="bucket.order_by( 'amount' )">amount</md-buton></th>
-			    <th><md-buton data-ng-click="bucket.order_by( 'score' )">score</md-buton></th>
-			</tr>
-		    </thead>
-		    <tbody>
-			<tr data-ng-repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
-			    data-ng-class="{'even': $even, 'odd': $odd}"
-			    style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
-			    <td style="border-bottom:1px solid {{coloring_score( account.score )}}">
-				{{account.account}}
-			    </td>
-			    <td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
-				{{account.amount | number:2}} €
-			    </td>
-			    <td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
-				{{account.score}}
-			    </td>
-			</tr>
-		    </tbody>
+			<thead>
+				<tr>
+					<th style="width: 11%">Account</th>
+					<th style="width: 3%">Spent</th>
+					<th style="width: 3%">Budgeted</th>
+					<th style="width: 3%">Percentage</th>
+					<th>Progress</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr data-ng-repeat="account in budget"
+					data-ng-class="{'even': $even, 'odd': $odd}">
+					<td>
+						{{account.account}}
+					</td>
+					<td style="text-align: right;">
+						{{account.amount | number:2}}{{account.currency}}
+					</td>
+					<td style="text-align: right;">
+						<span data-ng-if="account.percentage >= 0">{{account.budget | number:2}}{{account.currency}}</span>
+						<span data-ng-if="account.percentage < 0">
+							{{balance.buckets[1].raw_total - total_budget | number:2}}{{account.currency}}
+						</span>
+					</td>
+					<td style="text-align: right;">
+						<span data-ng-if="account.percentage >= 0">{{account.percentage | number:2}}%</span>
+						<span data-ng-if="account.percentage < 0">
+							{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100 | number:2}}%
+						</span>
+					</td>
+					<td>
+						<md-progress-linear md-theme="red" mode="determinate" value="{{account.percentage}}"
+							data-ng-if="account.percentage > 100"></md-progress-linear>
+						<md-progress-linear md-theme="brown" mode="determinate"
+							value="{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100}}"
+							data-ng-if="account.percentage < 0"></md-progress-linear>
+						<md-progress-linear mode="determinate" value="{{account.percentage}}"
+							data-ng-if="account.percentage <= 100"></md-progress-linear>
+					</td>
+				</tr>
+			</tbody>
 		</table>
-	    </md-card>
-	</md-content>
-    </md-card>
+	</md-card>
+	<md-card flex="48" layout="column"
+		data-ng-repeat="bucket in balance.buckets">
+		<md-toolbar>
+			<h3>{{bucket.categories}}, total = {{bucket.total | number:2}} €</h3>
+			<md-slider discrete
+				aria-label="score threshold"
+				min="0" max="10" step="1"
+				data-ng-model="bucket.score_threshold"
+				data-ng-change="select.score_higher_than( bucket, bucket.score_threshold ); filter_data()">
+			</md-slider>
+			<select multiple
+				data-ng-model="bucket.accounts_selected"
+				data-ng-options="account.account for account in bucket.raw_data | orderBy:'account'"
+				data-ng-change="filter_data()">
+				<option value=''>...</option>
+			</select>
+		</md-toolbar>
+		<md-content>
+			<md-card>
+				<nvd3-pie-chart
+					data="bucket.data"
+					x="xFunction()"
+					y="yFunction()"
+					height="300"
+					margin="{left:0,top:0,bottom:0,right:0}"
+					color="color()"
+					tooltips="true"
+					tooltipcontent="toolTipContentFunction()"
+					showLabels="true"
+					labelType="value"
+					donut="true"
+					donutRatio="0.25">
+					<svg></svg>
+				</nvd3-pie-chart>
+			</md-card>
+			<md-card>
+				<table class="table">
+					<thead>
+						<tr>
+							<th><md-buton data-ng-click="bucket.order_by( 'account' )">account</md-buton></th>
+							<th><md-buton data-ng-click="bucket.order_by( 'amount' )">amount</md-buton></th>
+							<th><md-buton data-ng-click="bucket.order_by( 'score' )">score</md-buton></th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr data-ng-repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
+							data-ng-class="{'even': $even, 'odd': $odd}"
+							style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
+							<td style="border-bottom:1px solid {{coloring_score( account.score )}}">
+								{{account.account}}
+							</td>
+							<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
+								{{account.amount | number:2}} €
+							</td>
+							<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
+								{{account.score}}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</md-card>
+		</md-content>
+	</md-card>
 </md-content>