add monthly graph, refactoring
This commit is contained in:
Gwenhael Le Moine
parent
d5d3e3c31c
commit
025e281148
4 changed files with 90 additions and 77 deletions
7
app.rb
7
app.rb
|
|
@ -66,6 +66,13 @@ class LedgerRbApp < Sinatra::Base
|
||||||
Ledger.budget( params[ :period ],
|
Ledger.budget( params[ :period ],
|
||||||
params[ :categories ] ).to_json
|
params[ :categories ] ).to_json
|
||||||
end
|
end
|
||||||
|
|
||||||
|
get '/api/ledger/graph_values/?' do
|
||||||
|
param :period, String, default: nil
|
||||||
|
param :categories, String, default: 'Expenses'
|
||||||
|
|
||||||
|
Ledger.graph_values( params[:period], params[:categories].split(' ') ).to_json
|
||||||
|
end
|
||||||
|
|
||||||
get '/api/ledger/version/?' do
|
get '/api/ledger/version/?' do
|
||||||
Ledger.version
|
Ledger.version
|
||||||
|
|
|
||||||
|
|
@ -132,41 +132,10 @@ app.controller( 'DashboardCtrl',
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.depth = 99;
|
$scope.depth = 99;
|
||||||
var retrieve_data = function () {
|
|
||||||
var from, to, period;
|
|
||||||
|
|
||||||
if ( $scope.period_offset === $scope.dates_salaries.length ) {
|
|
||||||
$scope.from_date = moment( _($scope.dates_salaries).last() ).add( 1, 'month' ).toDate();
|
|
||||||
|
|
||||||
from = moment( $scope.from_date );
|
|
||||||
|
|
||||||
period = 'from ' + from.year() + '-' + ( from.month() + 1 ) + '-' + from.date();
|
|
||||||
} else {
|
|
||||||
$scope.from_date = new Date( $scope.dates_salaries[ $scope.period_offset ] );
|
|
||||||
$scope.to_date = ( $scope.period_offset < $scope.dates_salaries.length - 1 ) ? new Date( $scope.dates_salaries[ $scope.period_offset + 1 ] ) : moment( $scope.from_date ).add( 1, 'month' ).toDate();
|
|
||||||
|
|
||||||
from = moment( $scope.from_date );
|
|
||||||
to = moment( $scope.to_date );
|
|
||||||
|
|
||||||
period = 'from ' + from.year() + '-' + ( from.month() + 1 ) + '-' + from.date();
|
|
||||||
period += ' to ' + to.year() + '-' + ( to.month() + 1 ) + '-' + to.date();
|
|
||||||
}
|
|
||||||
|
|
||||||
// API.budget( { period: period,
|
|
||||||
// categories: 'Expenses' } )
|
|
||||||
// .then( function( response ) {
|
|
||||||
// $scope.budget = response.data;
|
|
||||||
|
|
||||||
// $scope.total_budget = _.chain($scope.budget)
|
|
||||||
// .pluck( 'amount' )
|
|
||||||
// .reduce( function( acc, amount ) { return acc + amount; },
|
|
||||||
// 0 )
|
|
||||||
// .value();
|
|
||||||
// $scope.total_unbudgeted = _($scope.budget).findWhere( { percentage: -1 } ).amount;
|
|
||||||
// } );
|
|
||||||
|
|
||||||
|
var retrieve_period_detailed_data = function () {
|
||||||
$scope.balance = {
|
$scope.balance = {
|
||||||
buckets: [ new Bucket( 'Expenses Liabilities Equity Income', period ),
|
buckets: [ new Bucket( 'Expenses Liabilities Equity Income', $scope.period ),
|
||||||
new Bucket( 'Assets', null ) ],
|
new Bucket( 'Assets', null ) ],
|
||||||
details: {}
|
details: {}
|
||||||
};
|
};
|
||||||
|
|
@ -203,38 +172,59 @@ app.controller( 'DashboardCtrl',
|
||||||
|
|
||||||
$scope.dates_salaries = [];
|
$scope.dates_salaries = [];
|
||||||
$scope.period_offset = 0;
|
$scope.period_offset = 0;
|
||||||
$scope.after = function () {
|
|
||||||
if ( $scope.period_offset < $scope.dates_salaries.length ) {
|
|
||||||
$scope.period_offset++;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
$scope.before = function () {
|
|
||||||
if ( $scope.period_offset > 0 ) {
|
|
||||||
$scope.period_offset--;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
$scope.reset_offset = function () {
|
|
||||||
$scope.period_offset = $scope.dates_salaries.length - 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
API.accounts()
|
var retrieve_dates_salaries = function() {
|
||||||
.then( function ( response ) {
|
API.dates_salaries()
|
||||||
$scope.accounts = response.data.map( function( account_ary ) {
|
.then( function ( response ) {
|
||||||
return account_ary.join( ':' );
|
$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.period = _($scope.periods).last();
|
||||||
|
$scope.periods.push( 'from ' + _($scope.dates_salaries).last() );
|
||||||
|
$scope.periods = _($scope.periods).reverse();
|
||||||
} );
|
} );
|
||||||
API.dates_salaries()
|
};
|
||||||
.then( function ( response ) {
|
$scope.$watch( 'period', function () {
|
||||||
$scope.dates_salaries = response.data;
|
retrieve_period_detailed_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();
|
|
||||||
} );
|
|
||||||
|
|
||||||
|
var retrieve_accounts = function() {
|
||||||
|
API.accounts()
|
||||||
|
.then( function ( response ) {
|
||||||
|
$scope.accounts = response.data.map( function( account_ary ) {
|
||||||
|
return account_ary.join( ':' );
|
||||||
} );
|
} );
|
||||||
|
} );
|
||||||
|
};
|
||||||
|
|
||||||
|
var retrieve_graph_values = function( params ) {
|
||||||
|
API.graph_values( params ).then( function( response ) {
|
||||||
|
$scope.monthly_values = _.chain( response.data )
|
||||||
|
.keys()
|
||||||
|
.reverse()
|
||||||
|
.map( function( key ) {
|
||||||
|
var multiplicator = ( key == "Income" ) ? -1 : 1;
|
||||||
|
return { "key": key,
|
||||||
|
"values": _(response.data[ key ]).map( function( value ) {
|
||||||
|
var date = new Date( value.date );
|
||||||
|
return [ date.getFullYear() + '-' + ( date.getMonth() < 9 ? '0' : '' ) + ( date.getMonth() + 1 ),
|
||||||
|
parseInt( value.amount ) * multiplicator ];
|
||||||
|
} ) };
|
||||||
|
} )
|
||||||
|
.value();
|
||||||
} );
|
} );
|
||||||
|
};
|
||||||
|
$scope.barGraphToolTipContentFunction = function () {
|
||||||
|
return function ( key, x, y, e, graph ) {
|
||||||
|
return '<md-content><h3><em>' + key + '</em> during ' + x + '</h3><h2>' + y + ' €</h2></md-content>';
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
retrieve_accounts();
|
||||||
|
retrieve_dates_salaries();
|
||||||
|
retrieve_graph_values( { period: '',
|
||||||
|
categories: 'Expenses Income'} );
|
||||||
}
|
}
|
||||||
] );
|
] );
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,15 @@ app.service( 'API',
|
||||||
} );
|
} );
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.graph_values = function( params ) {
|
||||||
|
return $http.get( '/api/ledger/graph_values', {
|
||||||
|
params: {
|
||||||
|
period: params.period,
|
||||||
|
categories: params.categories
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
};
|
||||||
|
|
||||||
this.budget = function( params ) {
|
this.budget = function( params ) {
|
||||||
return $http.get( '/api/ledger/budget', {
|
return $http.get( '/api/ledger/budget', {
|
||||||
params: {
|
params: {
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,27 @@
|
||||||
<md-toolbar flex="100" layout="column" layout-gt-md="row" layout-align="center center">
|
<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>
|
<h2>
|
||||||
<div flex="48" layout="row" layout-align="space-around center">
|
<md-select data-ng-model="period">
|
||||||
<md-button class="md-raised md-primary"
|
<md-option data-ng-repeat="period in periods">{{period}}</md-option>
|
||||||
aria-label="before"
|
</md-select>
|
||||||
data-ng-click="before()"
|
</h2>
|
||||||
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-toolbar>
|
||||||
|
|
||||||
|
<md-content flex="100">
|
||||||
|
<nvd3-multi-bar-chart
|
||||||
|
data="monthly_values"
|
||||||
|
id="monthlyValues"
|
||||||
|
height="350"
|
||||||
|
showXAxis="true"
|
||||||
|
showYAxis="true"
|
||||||
|
showLegend="true"
|
||||||
|
interactive="true"
|
||||||
|
tooltips="true"
|
||||||
|
tooltipContent="barGraphToolTipContentFunction()"
|
||||||
|
rotateLabels="67">
|
||||||
|
<svg></svg>
|
||||||
|
</nvd3-multi-bar-chart>
|
||||||
|
</md-content>
|
||||||
|
|
||||||
<md-content flex="100" layout="column" layout-gt-md="row">
|
<md-content flex="100" layout="column" layout-gt-md="row">
|
||||||
<md-card flex="48" layout="column"
|
<md-card flex="48" layout="column"
|
||||||
data-ng-repeat="bucket in balance.buckets">
|
data-ng-repeat="bucket in balance.buckets">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue