major overhaul in presentation
This commit is contained in:
Gwenhael Le Moine
parent
6e30dc6d83
commit
b8b2d37940
2 changed files with 150 additions and 183 deletions
|
|
@ -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 );
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue