Miroirs/ledgerrb
1
0
Fork 0
mirror of https://github.com/gwenhael-le-moine/ledgerrb.git synced 2025-01-27 07:58:31 +01:00
Code Issues Projects Releases Packages Wiki Activity

refactor design

Browse source
This commit is contained in:
Gwenhael Le Moine 2015-09-17 10:16:42 +02:00
parent 35432857a4
commit e71f417aa2
2 changed files with 37 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/app/css/app.css
View file

@ -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}

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

@ -1,57 +1,43 @@
<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="15">
<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>
</select>
</md-card>
<md-card flex="75">
<nvd3-multi-bar-chart
data="monthly_values"
id="monthlyValues"
height="300"
showXAxis="true"
showYAxis="true"
showLegend="true"
interactive="true"
tooltips="true"
tooltipContent="barGraphToolTipContentFunction()"
rotateLabels="67"
margin="{left:70,top:70,bottom:70,right:125}" >
<svg></svg>
</nvd3-multi-bar-chart>
</md-card>
</md-card> </md-card>
<md-card flex="75">
<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"
margin="{left:70,top:70,bottom:70,right:125}" >
<svg></svg>
</nvd3-multi-bar-chart>
</md-card>
</md-content>
<md-toolbar flex="100" layout="column" layout-gt-md="row" layout-align="center center"> <md-card flex="100" layout="column"
<h2>
<md-input-container>
<md-select data-ng-model="period">
<md-option data-ng-repeat="period in periods">{{period}}</md-option>
</md-select>
</md-input-container>
</h2>
</md-toolbar>
<md-content flex="100" layout="column" layout-gt-md="row">
<md-card flex="48" layout="column"
data-ng-repeat="bucket in balance.buckets"> data-ng-repeat="bucket in balance.buckets">
<md-toolbar> <md-toolbar>
<h4 data-ng-repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</h4> <span data-ng-repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
<!-- <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-toolbar>
<md-content> <md-content layout="row">
<md-card> <md-card flex="15">
<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-card>
<md-card flex="20">
<nvd3-pie-chart <nvd3-pie-chart
data="bucket.data" data="bucket.data"
x="xFunction()" x="xFunction()"
@ -68,7 +54,7 @@
<svg></svg> <svg></svg>
</nvd3-pie-chart> </nvd3-pie-chart>
</md-card> </md-card>
<md-card> <md-card flex="55">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -96,46 +82,4 @@
</md-card> </md-card>
</md-content> </md-content>
</md-card> </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>