merge
This commit is contained in:
Gwenhael Le Moine
commit
f191e1283d
3 changed files with 94 additions and 180 deletions
|
|
@ -3,6 +3,6 @@
|
||||||
md-content table { max-width: 99%;
|
md-content table { max-width: 99%;
|
||||||
width: 99%;
|
width: 99%;
|
||||||
margin: 0 0.5%; }
|
margin: 0 0.5%; }
|
||||||
|
md-card select { height: 100%; }
|
||||||
.even{background-color:#ddd}
|
.even{background-color:#ddd}
|
||||||
.odd{background-color:#eee}
|
.odd{background-color:#eee}
|
||||||
|
|
|
||||||
|
|
@ -22,10 +22,8 @@ app.controller( 'DashboardCtrl',
|
||||||
|
|
||||||
// compute an account's score: from 1 (good) to 10 (bad), 0 is neutral/undecided
|
// compute an account's score: from 1 (good) to 10 (bad), 0 is neutral/undecided
|
||||||
var score_account = function ( account ) {
|
var score_account = function ( account ) {
|
||||||
if ( account.match( /^Income:(salaire|Sécu|Mutuelle)$/ ) ) {
|
if ( account.match( /^Income/ ) ) {
|
||||||
return 11;
|
return -10;
|
||||||
} else if ( account.match( /^Income:(Gift|Remboursement)$/ ) ) {
|
|
||||||
return 12;
|
|
||||||
} else if ( account.match( /^Expenses:(courses|Hang)$/ ) ) {
|
} else if ( account.match( /^Expenses:(courses|Hang)$/ ) ) {
|
||||||
return 1;
|
return 1;
|
||||||
} else if ( account.match( /^Expenses:Home/ ) ) {
|
} else if ( account.match( /^Expenses:Home/ ) ) {
|
||||||
|
|
@ -41,9 +39,9 @@ app.controller( 'DashboardCtrl',
|
||||||
} else if ( account.match( /^Expenses:Gadgets/ ) ) {
|
} else if ( account.match( /^Expenses:Gadgets/ ) ) {
|
||||||
return 10;
|
return 10;
|
||||||
} else if ( account.match( /^Liabilities/ ) ) {
|
} else if ( account.match( /^Liabilities/ ) ) {
|
||||||
return 1000;
|
return 0;
|
||||||
} else if ( account.match( /^Assets/ ) ) {
|
} else if ( account.match( /^Assets/ ) ) {
|
||||||
return 100;
|
return -100;
|
||||||
} else {
|
} else {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
@ -53,18 +51,14 @@ app.controller( 'DashboardCtrl',
|
||||||
var adjusted_score = score;
|
var adjusted_score = score;
|
||||||
var color_scale = [ '#99f', '#0f0', '#3f0', '#6f0', '#9f0', '#cf0', '#fc0', '#f90', '#f60', '#f30', '#f00' ];
|
var color_scale = [ '#99f', '#0f0', '#3f0', '#6f0', '#9f0', '#cf0', '#fc0', '#f90', '#f60', '#f30', '#f00' ];
|
||||||
|
|
||||||
if ( score >= 1000 ) {
|
if ( score <= -100 ) {
|
||||||
// Liabilities
|
|
||||||
adjusted_score = score - 1000;
|
|
||||||
color_scale = [ '#0ff' ];
|
|
||||||
} else if ( score >= 100 ) {
|
|
||||||
// Assets
|
// Assets
|
||||||
adjusted_score = score - 100;
|
adjusted_score = ( score * -1 ) - 100;
|
||||||
color_scale = [ '#f0f' ];
|
color_scale = [ '#f0f' ];
|
||||||
} else if ( score >= 11 ) {
|
} else if ( score <= -10 ) {
|
||||||
// Income
|
// Income
|
||||||
adjusted_score = score - 11;
|
adjusted_score = ( score * -1 ) - 10;
|
||||||
color_scale = [ '#360', '#369' ];
|
color_scale = [ '#360' ];
|
||||||
}
|
}
|
||||||
|
|
||||||
return color_scale[ adjusted_score ];
|
return color_scale[ adjusted_score ];
|
||||||
|
|
@ -97,7 +91,7 @@ app.controller( 'DashboardCtrl',
|
||||||
return memo + account.amount;
|
return memo + account.amount;
|
||||||
}, 0 );
|
}, 0 );
|
||||||
} )
|
} )
|
||||||
.value();
|
.value();
|
||||||
bucket.total_detailed = _.chain(bucket.total_detailed)
|
bucket.total_detailed = _.chain(bucket.total_detailed)
|
||||||
.keys()
|
.keys()
|
||||||
.map( function( key ) {
|
.map( function( key ) {
|
||||||
|
|
@ -109,12 +103,6 @@ app.controller( 'DashboardCtrl',
|
||||||
} );
|
} );
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.select = { score_higher_than: function( bucket, score ) {
|
|
||||||
bucket.accounts_selected = _(bucket.raw_data).filter( function( account ) {
|
|
||||||
return account.score >= score;
|
|
||||||
} );
|
|
||||||
}};
|
|
||||||
|
|
||||||
var Bucket = function( categories, period ) {
|
var Bucket = function( categories, period ) {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
this.categories = categories;
|
this.categories = categories;
|
||||||
|
|
@ -164,29 +152,11 @@ app.controller( 'DashboardCtrl',
|
||||||
}, 0 );
|
}, 0 );
|
||||||
bucket.accounts_selected = bucket.raw_data;
|
bucket.accounts_selected = bucket.raw_data;
|
||||||
|
|
||||||
$scope.select.score_higher_than( bucket, bucket.score_threshold );
|
|
||||||
$scope.filter_data();
|
$scope.filter_data();
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
};
|
};
|
||||||
|
|
||||||
// $scope.dates_salaries = [];
|
|
||||||
|
|
||||||
// var retrieve_dates_salaries = function() {
|
|
||||||
// API.dates_salaries()
|
|
||||||
// .then( function ( response ) {
|
|
||||||
// $scope.dates_salaries = response.data;
|
|
||||||
// $scope.periods= [];
|
|
||||||
// for ( var i = 0 ; i < ( $scope.dates_salaries.length - 1 ) ; i++ ) {
|
|
||||||
// $scope.periods.push( 'from ' + $scope.dates_salaries[i] + ' to ' + $scope.dates_salaries[i+1] );
|
|
||||||
// }
|
|
||||||
// $scope.periods.push( 'from ' + _($scope.dates_salaries).last() );
|
|
||||||
// $scope.periods = _($scope.periods).reverse();
|
|
||||||
// $scope.period = _($scope.periods).first();
|
|
||||||
// } );
|
|
||||||
// };
|
|
||||||
//retrieve_dates_salaries();
|
|
||||||
|
|
||||||
var retrieve_accounts = function() {
|
var retrieve_accounts = function() {
|
||||||
API.accounts()
|
API.accounts()
|
||||||
.then( function ( response ) {
|
.then( function ( response ) {
|
||||||
|
|
|
||||||
|
|
@ -1,141 +1,85 @@
|
||||||
<md-content flex="100" layout="column" layout-gt-md="row">
|
<md-content flex="100" layout="column">
|
||||||
<md-card flex="20">
|
<md-card flex="100" layout="row">
|
||||||
<select multiple="true" data-ng-model="graphed_accounts" style="height: 100%">
|
<md-card flex="20">
|
||||||
<option data-ng-repeat="account in accounts">{{account}}</option>
|
<select multiple="true" data-ng-model="graphed_accounts">
|
||||||
</select>
|
<option data-ng-repeat="account in accounts">{{account}}</option>
|
||||||
</md-card>
|
</select>
|
||||||
<md-card flex="75">
|
</md-card>
|
||||||
<nvd3-multi-bar-chart
|
<md-card flex="81">
|
||||||
data="monthly_values"
|
<nvd3-multi-bar-chart
|
||||||
id="monthlyValues"
|
data="monthly_values"
|
||||||
height="350"
|
id="monthlyValues"
|
||||||
showXAxis="true"
|
height="300"
|
||||||
showYAxis="true"
|
showXAxis="true"
|
||||||
showLegend="true"
|
showYAxis="true"
|
||||||
interactive="true"
|
showLegend="true"
|
||||||
tooltips="true"
|
interactive="true"
|
||||||
tooltipContent="barGraphToolTipContentFunction()"
|
tooltips="true"
|
||||||
rotateLabels="67"
|
tooltipContent="barGraphToolTipContentFunction()"
|
||||||
margin="{left:70,top:70,bottom:70,right:125}" >
|
rotateLabels="67"
|
||||||
<svg></svg>
|
margin="{left:70,top:70,bottom:70,right:125}" >
|
||||||
</nvd3-multi-bar-chart>
|
<svg></svg>
|
||||||
</md-card>
|
</nvd3-multi-bar-chart>
|
||||||
</md-content>
|
</md-card>
|
||||||
|
</md-card>
|
||||||
|
|
||||||
<md-toolbar flex="100" layout="column" layout-gt-md="row" layout-align="center center">
|
<md-card flex="100" layout="column"
|
||||||
<h2>
|
data-ng-repeat="bucket in balance.buckets">
|
||||||
<md-input-container>
|
<md-toolbar>
|
||||||
<md-select data-ng-model="period" aria-label="what">
|
<span data-ng-repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
|
||||||
<md-option data-ng-repeat="period in periods">{{period}}</md-option>
|
</md-toolbar>
|
||||||
</md-select>
|
<md-content layout="row">
|
||||||
</md-input-container>
|
<md-card flex="20">
|
||||||
</h2>
|
<select multiple
|
||||||
</md-toolbar>
|
data-ng-model="bucket.accounts_selected"
|
||||||
|
data-ng-options="account.account for account in bucket.raw_data | orderBy:'account'"
|
||||||
<md-content flex="100" layout="column" layout-gt-md="row">
|
data-ng-change="filter_data()">
|
||||||
<md-card flex="48" layout="column"
|
<option value=''>...</option>
|
||||||
data-ng-repeat="bucket in balance.buckets">
|
</select>
|
||||||
<md-toolbar>
|
</md-card>
|
||||||
<h4 data-ng-repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</h4>
|
<md-card flex="20">
|
||||||
<!-- <md-slider discrete
|
<nvd3-pie-chart
|
||||||
aria-label="score threshold"
|
data="bucket.data"
|
||||||
min="0" max="10" step="1"
|
x="xFunction()"
|
||||||
data-ng-model="bucket.score_threshold"
|
y="yFunction()"
|
||||||
data-ng-change="select.score_higher_than( bucket, bucket.score_threshold ); filter_data()">
|
height="300"
|
||||||
</md-slider> -->
|
margin="{left:0,top:0,bottom:0,right:0}"
|
||||||
<select multiple
|
color="color()"
|
||||||
data-ng-model="bucket.accounts_selected"
|
tooltips="true"
|
||||||
data-ng-options="account.account for account in bucket.raw_data | orderBy:'account'"
|
tooltipcontent="toolTipContentFunction()"
|
||||||
data-ng-change="filter_data()">
|
showLabels="true"
|
||||||
<option value=''>...</option>
|
labelType="value"
|
||||||
</select>
|
donut="true"
|
||||||
</md-toolbar>
|
donutRatio="0.25">
|
||||||
<md-content>
|
<svg></svg>
|
||||||
<md-card>
|
</nvd3-pie-chart>
|
||||||
<nvd3-pie-chart
|
</md-card>
|
||||||
data="bucket.data"
|
<md-card flex="56">
|
||||||
x="xFunction()"
|
<table class="table">
|
||||||
y="yFunction()"
|
<thead>
|
||||||
height="300"
|
<tr>
|
||||||
margin="{left:0,top:0,bottom:0,right:0}"
|
<th><md-buton data-ng-click="bucket.order_by( 'account' )">account</md-buton></th>
|
||||||
color="color()"
|
<th><md-buton data-ng-click="bucket.order_by( 'amount' )">amount</md-buton></th>
|
||||||
tooltips="true"
|
<th><md-buton data-ng-click="bucket.order_by( 'score' )">score</md-buton></th>
|
||||||
tooltipcontent="toolTipContentFunction()"
|
</tr>
|
||||||
showLabels="true"
|
</thead>
|
||||||
labelType="value"
|
<tbody>
|
||||||
donut="true"
|
<tr data-ng-repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
|
||||||
donutRatio="0.25">
|
data-ng-class="{'even': $even, 'odd': $odd}"
|
||||||
<svg></svg>
|
style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
|
||||||
</nvd3-pie-chart>
|
<td style="border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||||
</md-card>
|
{{account.account}}
|
||||||
<md-card>
|
</td>
|
||||||
<table class="table">
|
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||||
<thead>
|
{{account.amount | number:2}} €
|
||||||
<tr>
|
</td>
|
||||||
<th><md-buton data-ng-click="bucket.order_by( 'account' )">account</md-buton></th>
|
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||||
<th><md-buton data-ng-click="bucket.order_by( 'amount' )">amount</md-buton></th>
|
{{account.score}}
|
||||||
<th><md-buton data-ng-click="bucket.order_by( 'score' )">score</md-buton></th>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</tbody>
|
||||||
<tbody>
|
</table>
|
||||||
<tr data-ng-repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
|
</md-card>
|
||||||
data-ng-class="{'even': $even, 'odd': $odd}"
|
</md-content>
|
||||||
style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
|
</md-card>
|
||||||
<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-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
|
|
||||||
ng-class="{'md-warn': account.percentage > 100, 'md-warn md-hue-3': account.account == '(unbudgeted)' }"
|
|
||||||
md-mode="determinate"
|
|
||||||
value="{{account.percentage}}"></md-progress-linear>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</md-card> -->
|
|
||||||
</md-content>
|
</md-content>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue