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
|
|
@ -67,6 +67,13 @@ class LedgerRbApp < Sinatra::Base
|
|||
params[ :categories ] ).to_json
|
||||
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
|
||||
Ledger.version
|
||||
end
|
||||
|
|
|
|||
|
|
@ -132,41 +132,10 @@ app.controller( 'DashboardCtrl',
|
|||
};
|
||||
|
||||
$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 = {
|
||||
buckets: [ new Bucket( 'Expenses Liabilities Equity Income', period ),
|
||||
buckets: [ new Bucket( 'Expenses Liabilities Equity Income', $scope.period ),
|
||||
new Bucket( 'Assets', null ) ],
|
||||
details: {}
|
||||
};
|
||||
|
|
@ -203,38 +172,59 @@ app.controller( 'DashboardCtrl',
|
|||
|
||||
$scope.dates_salaries = [];
|
||||
$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;
|
||||
};
|
||||
|
||||
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.period = _($scope.periods).last();
|
||||
$scope.periods.push( 'from ' + _($scope.dates_salaries).last() );
|
||||
$scope.periods = _($scope.periods).reverse();
|
||||
} );
|
||||
};
|
||||
$scope.$watch( 'period', function () {
|
||||
retrieve_period_detailed_data();
|
||||
} );
|
||||
|
||||
var retrieve_accounts = function() {
|
||||
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();
|
||||
} );
|
||||
};
|
||||
|
||||
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 ) {
|
||||
return $http.get( '/api/ledger/budget', {
|
||||
params: {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,27 @@
|
|||
<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>
|
||||
<md-select data-ng-model="period">
|
||||
<md-option data-ng-repeat="period in periods">{{period}}</md-option>
|
||||
</md-select>
|
||||
</h2>
|
||||
</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-card flex="48" layout="column"
|
||||
data-ng-repeat="bucket in balance.buckets">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue