gwh/ledgerrb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

interactive monthly graph

Browse source
This commit is contained in:
Gwenhael Le Moine 2015-09-03 16:55:58 +02:00
parent 14dedcf779
commit 2474f8c570
2 changed files with 35 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/app/js/controllers/DashboardCtrl.js
View file

@ -221,10 +221,14 @@ app.controller( 'DashboardCtrl',
return '<md-content><h3><em>' + key + '</em> during ' + x + '</h3><h2>' + y + ' €</h2></md-content>'; return '<md-content><h3><em>' + key + '</em> during ' + x + '</h3><h2>' + y + ' €</h2></md-content>';
}; };
}; };
$scope.graphed_accounts = [ 'Expenses', 'Income' ];
retrieve_accounts(); retrieve_accounts();
retrieve_dates_salaries(); retrieve_dates_salaries();
$scope.$watch( 'graphed_accounts', function () {
retrieve_graph_values( { period: '', retrieve_graph_values( { period: '',
categories: 'Expenses Income'} ); categories: $scope.graphed_accounts.join(' ') } );
} );
} }
] ); ] );

16
public/app/js/templates/dashboard.html
View file

@ -1,12 +1,22 @@
<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> <h2>
<md-input-container>
<md-select data-ng-model="period"> <md-select data-ng-model="period">
<md-option data-ng-repeat="period in periods">{{period}}</md-option> <md-option data-ng-repeat="period in periods">{{period}}</md-option>
</md-select> </md-select>
</md-input-container>
</h2> </h2>
</md-toolbar> </md-toolbar>
<md-content flex="100"> <md-content flex="100" layout="column" layout-gt-md="row">
<md-card flex="20">
<md-input-container>
<md-select multiple="true" data-ng-model="graphed_accounts">
<md-option data-ng-repeat="account in accounts">{{account}}</md-option>
</md-select>
</md-input-container>
</md-card>
<md-card flex="75">
<nvd3-multi-bar-chart <nvd3-multi-bar-chart
data="monthly_values" data="monthly_values"
id="monthlyValues" id="monthlyValues"
@ -17,9 +27,11 @@
interactive="true" interactive="true"
tooltips="true" tooltips="true"
tooltipContent="barGraphToolTipContentFunction()" tooltipContent="barGraphToolTipContentFunction()"
rotateLabels="67"> rotateLabels="67"
margin="{left:70,top:70,bottom:70,right:125}" >
<svg></svg> <svg></svg>
</nvd3-multi-bar-chart> </nvd3-multi-bar-chart>
</md-card>
</md-content> </md-content>
<md-content flex="100" layout="column" layout-gt-md="row"> <md-content flex="100" layout="column" layout-gt-md="row">