mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2024-12-26 09:59:18 +01:00
discreteBarGraph
This commit is contained in:
Gwenhael Le Moine
parent
a2615407de
commit
c9140a6aa9
3 changed files with 114 additions and 104 deletions
File diff suppressed because one or more lines are too long
19
public/app/js/app.min.js
vendored
19
public/app/js/app.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -75,17 +75,17 @@ app.component('dashboard',
|
|||
|
||||
ctrl.filter_data = function() {
|
||||
_(ctrl.balance.buckets).each(function(bucket) {
|
||||
bucket.data = [];
|
||||
bucket.data = [{ key: 'accounts', values: [] }];
|
||||
|
||||
if (_(bucket.accounts_selected).isEmpty() && bucket.score_threshold === 0) {
|
||||
bucket.data = bucket.raw_data;
|
||||
bucket.data[0].values = bucket.raw_data;
|
||||
} else {
|
||||
_(bucket.accounts_selected).each(function(account_selected) {
|
||||
bucket.data = bucket.data.concat($filter('filter')(bucket.raw_data, account_selected, true));
|
||||
bucket.data[0].values = bucket.data[0].values.concat($filter('filter')(bucket.raw_data, account_selected, true));
|
||||
});
|
||||
}
|
||||
|
||||
bucket.total_detailed = _.chain(bucket.data)
|
||||
bucket.total_detailed = _.chain(bucket.data[0].values)
|
||||
.groupBy(function(account) {
|
||||
return account.account.split(':')[0];
|
||||
})
|
||||
|
|
@ -123,17 +123,22 @@ app.component('dashboard',
|
|||
}
|
||||
};
|
||||
|
||||
this.pie_graph_options = {
|
||||
this.graph_options = {
|
||||
chart: {
|
||||
type: 'pieChart',
|
||||
donut: true,
|
||||
donutRatio: 0.25,
|
||||
height: 300,
|
||||
type: 'discreteBarChart',
|
||||
height: 600,
|
||||
margin: {
|
||||
"top": 20,
|
||||
"right": 20,
|
||||
"bottom": 200,
|
||||
"left": 55
|
||||
},
|
||||
x: function(d) { return d.account; },
|
||||
y: function(d) { return d.amount; },
|
||||
showLabels: false,
|
||||
showLegend: true,
|
||||
legendPosition: 'right',
|
||||
valueFormat: function(d) { return `${d} €`; },
|
||||
showYAxis: false,
|
||||
showValues: true,
|
||||
rotateLabels: -67,
|
||||
showTooltipPercent: true,
|
||||
duration: 500,
|
||||
labelThreshold: 0.01,
|
||||
|
|
@ -146,10 +151,9 @@ app.component('dashboard',
|
|||
ctrl.depth = 99;
|
||||
|
||||
let retrieve_period_detailed_data = function() {
|
||||
console.log(ctrl.period)
|
||||
ctrl.balance = {
|
||||
buckets: [new Bucket('Expenses Liabilities Equity Income', ctrl.period),
|
||||
new Bucket('Assets', null)],
|
||||
buckets: [new Bucket('Expenses Liabilities Equity Income', ctrl.period)],// ,
|
||||
// new Bucket('Assets', null)],
|
||||
details: {}
|
||||
};
|
||||
|
||||
|
|
@ -162,7 +166,6 @@ app.component('dashboard',
|
|||
.then(function(response) {
|
||||
bucket.raw_data = _.chain(response.data)
|
||||
.map(function(account) {
|
||||
account.amount = (account.amount < 0) ? account.amount * -1 : account.amount;
|
||||
account.score = score_account(account.account);
|
||||
return account;
|
||||
})
|
||||
|
|
@ -233,7 +236,7 @@ app.component('dashboard',
|
|||
stacked: false,
|
||||
duration: 500,
|
||||
reduceXTicks: false,
|
||||
rotateLabels: 67,
|
||||
rotateLabels: -67,
|
||||
labelSunbeamLayout: true,
|
||||
useInteractiveGuideline: false,
|
||||
multibar: {
|
||||
|
|
@ -292,65 +295,69 @@ app.component('dashboard',
|
|||
],
|
||||
template: `
|
||||
<md-content flex="100" layout="column">
|
||||
<md-card flex="100" layout="row">
|
||||
<md-card flex="20">
|
||||
<select style="height: 100%;" multiple ng:model="$ctrl.graphed_accounts">
|
||||
<option ng:repeat="account in $ctrl.accounts">{{account}}</option>
|
||||
</select>
|
||||
</md-card>
|
||||
<md-card flex="81">
|
||||
<nvd3 data="$ctrl.graphiques.monthly_values.data"
|
||||
options="$ctrl.graphiques.monthly_values.options"></nvd3>
|
||||
</md-card>
|
||||
</md-card>
|
||||
<h1 style="text-align: center;">{{$ctrl.period | amDateFormat:'MMMM YYYY'}}</h1>
|
||||
<md-card flex="100" layout="column"
|
||||
ng:repeat="bucket in $ctrl.balance.buckets">
|
||||
<md-toolbar>
|
||||
<span ng:repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
|
||||
</md-toolbar>
|
||||
<md-content layout="row">
|
||||
<md-card flex="20">
|
||||
<select style="height: 100%;" multiple
|
||||
ng:model="bucket.accounts_selected"
|
||||
ng:options="account.account for account in bucket.raw_data | orderBy:'account'"
|
||||
ng:change="filter_data()">
|
||||
<option value=''>...</option>
|
||||
</select>
|
||||
</md-card>
|
||||
<md-card flex="78">
|
||||
<nvd3 data="bucket.data"
|
||||
options="bucket.pie_graph_options" >
|
||||
</nvd3>
|
||||
</md-card>
|
||||
<!-- <md-card flex="56">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><md-buton ng:click="bucket.order_by( 'account' )">account</md-buton></th>
|
||||
<th><md-buton ng:click="bucket.order_by( 'amount' )">amount</md-buton></th>
|
||||
<th><md-buton ng:click="bucket.order_by( 'score' )">score</md-buton></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng:repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
|
||||
ng:class="{'even': $even, 'odd': $odd}"
|
||||
style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
|
||||
<td style="border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||
{{account.account}}
|
||||
</td>
|
||||
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||
{{account.amount | number:2}} €
|
||||
</td>
|
||||
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||
{{account.score}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</md-card> -->
|
||||
</md-content>
|
||||
</md-card>
|
||||
</md-content>
|
||||
<md-card flex="100" layout="row">
|
||||
<md-card flex="20">
|
||||
<select style="height: 100%;" multiple ng:model="$ctrl.graphed_accounts">
|
||||
<option ng:repeat="account in $ctrl.accounts">{{account}}</option>
|
||||
</select>
|
||||
</md-card>
|
||||
<md-card flex="81">
|
||||
<nvd3 data="$ctrl.graphiques.monthly_values.data"
|
||||
options="$ctrl.graphiques.monthly_values.options"></nvd3>
|
||||
</md-card>
|
||||
</md-card>
|
||||
<h1 style="text-align: center;">{{$ctrl.period | amDateFormat:'MMMM YYYY'}}</h1>
|
||||
<md-card flex="100" layout="column"
|
||||
ng:repeat="bucket in $ctrl.balance.buckets">
|
||||
<md-toolbar>
|
||||
<span ng:repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
|
||||
</md-toolbar>
|
||||
<md-content layout="row">
|
||||
<!--
|
||||
<md-card flex="20">
|
||||
<select style="height: 100%;" multiple
|
||||
ng:model="bucket.accounts_selected"
|
||||
ng:options="account.account for account in bucket.raw_data | orderBy:'account'"
|
||||
ng:change="filter_data()">
|
||||
<option value=''>...</option>
|
||||
</select>
|
||||
</md-card>
|
||||
-->
|
||||
<md-card flex="78">
|
||||
<nvd3 data="bucket.data"
|
||||
options="bucket.graph_options" >
|
||||
</nvd3>
|
||||
</md-card>
|
||||
<!--
|
||||
<md-card flex="56">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><md-buton ng:click="bucket.order_by( 'account' )">account</md-buton></th>
|
||||
<th><md-buton ng:click="bucket.order_by( 'amount' )">amount</md-buton></th>
|
||||
<th><md-buton ng:click="bucket.order_by( 'score' )">score</md-buton></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng:repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
|
||||
ng:class="{'even': $even, 'odd': $odd}"
|
||||
style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
|
||||
<td style="border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||
{{account.account}}
|
||||
</td>
|
||||
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||
{{account.amount | number:2}} €
|
||||
</td>
|
||||
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||
{{account.score}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</md-card>
|
||||
-->
|
||||
</md-content>
|
||||
</md-card>
|
||||
</md-content>
|
||||
`
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue