mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2025-01-13 08:01:20 +01:00
refactor design
This commit is contained in:
Gwenhael Le Moine
parent
35432857a4
commit
e71f417aa2
2 changed files with 37 additions and 93 deletions
|
|
@ -3,6 +3,6 @@
|
|||
md-content table { max-width: 99%;
|
||||
width: 99%;
|
||||
margin: 0 0.5%; }
|
||||
|
||||
md-card select { height: 100%; }
|
||||
.even{background-color:#ddd}
|
||||
.odd{background-color:#eee}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,43 @@
|
|||
<md-content flex="100" layout="column" layout-gt-md="row">
|
||||
<md-card flex="20">
|
||||
<select multiple="true" data-ng-model="graphed_accounts" style="height: 100%">
|
||||
<option data-ng-repeat="account in accounts">{{account}}</option>
|
||||
</select>
|
||||
<md-content flex="100" layout="column">
|
||||
<md-card flex="100" layout="row">
|
||||
<md-card flex="15">
|
||||
<select multiple="true" data-ng-model="graphed_accounts">
|
||||
<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 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">
|
||||
<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"
|
||||
<md-card flex="100" layout="column"
|
||||
data-ng-repeat="bucket in balance.buckets">
|
||||
<md-toolbar>
|
||||
<h4 data-ng-repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</h4>
|
||||
<!-- <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>
|
||||
<span data-ng-repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
|
||||
</md-toolbar>
|
||||
<md-content>
|
||||
<md-card>
|
||||
<md-content layout="row">
|
||||
<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
|
||||
data="bucket.data"
|
||||
x="xFunction()"
|
||||
|
|
@ -68,7 +54,7 @@
|
|||
<svg></svg>
|
||||
</nvd3-pie-chart>
|
||||
</md-card>
|
||||
<md-card>
|
||||
<md-card flex="55">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -96,46 +82,4 @@
|
|||
</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue