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.filter_data = function() {
|
||||||
_(ctrl.balance.buckets).each(function(bucket) {
|
_(ctrl.balance.buckets).each(function(bucket) {
|
||||||
bucket.data = [];
|
bucket.data = [{ key: 'accounts', values: [] }];
|
||||||
|
|
||||||
if (_(bucket.accounts_selected).isEmpty() && bucket.score_threshold === 0) {
|
if (_(bucket.accounts_selected).isEmpty() && bucket.score_threshold === 0) {
|
||||||
bucket.data = bucket.raw_data;
|
bucket.data[0].values = bucket.raw_data;
|
||||||
} else {
|
} else {
|
||||||
_(bucket.accounts_selected).each(function(account_selected) {
|
_(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) {
|
.groupBy(function(account) {
|
||||||
return account.account.split(':')[0];
|
return account.account.split(':')[0];
|
||||||
})
|
})
|
||||||
|
|
@ -123,17 +123,22 @@ app.component('dashboard',
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.pie_graph_options = {
|
this.graph_options = {
|
||||||
chart: {
|
chart: {
|
||||||
type: 'pieChart',
|
type: 'discreteBarChart',
|
||||||
donut: true,
|
height: 600,
|
||||||
donutRatio: 0.25,
|
margin: {
|
||||||
height: 300,
|
"top": 20,
|
||||||
|
"right": 20,
|
||||||
|
"bottom": 200,
|
||||||
|
"left": 55
|
||||||
|
},
|
||||||
x: function(d) { return d.account; },
|
x: function(d) { return d.account; },
|
||||||
y: function(d) { return d.amount; },
|
y: function(d) { return d.amount; },
|
||||||
showLabels: false,
|
valueFormat: function(d) { return `${d} €`; },
|
||||||
showLegend: true,
|
showYAxis: false,
|
||||||
legendPosition: 'right',
|
showValues: true,
|
||||||
|
rotateLabels: -67,
|
||||||
showTooltipPercent: true,
|
showTooltipPercent: true,
|
||||||
duration: 500,
|
duration: 500,
|
||||||
labelThreshold: 0.01,
|
labelThreshold: 0.01,
|
||||||
|
|
@ -146,10 +151,9 @@ app.component('dashboard',
|
||||||
ctrl.depth = 99;
|
ctrl.depth = 99;
|
||||||
|
|
||||||
let retrieve_period_detailed_data = function() {
|
let retrieve_period_detailed_data = function() {
|
||||||
console.log(ctrl.period)
|
|
||||||
ctrl.balance = {
|
ctrl.balance = {
|
||||||
buckets: [new Bucket('Expenses Liabilities Equity Income', ctrl.period),
|
buckets: [new Bucket('Expenses Liabilities Equity Income', ctrl.period)],// ,
|
||||||
new Bucket('Assets', null)],
|
// new Bucket('Assets', null)],
|
||||||
details: {}
|
details: {}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -162,7 +166,6 @@ app.component('dashboard',
|
||||||
.then(function(response) {
|
.then(function(response) {
|
||||||
bucket.raw_data = _.chain(response.data)
|
bucket.raw_data = _.chain(response.data)
|
||||||
.map(function(account) {
|
.map(function(account) {
|
||||||
account.amount = (account.amount < 0) ? account.amount * -1 : account.amount;
|
|
||||||
account.score = score_account(account.account);
|
account.score = score_account(account.account);
|
||||||
return account;
|
return account;
|
||||||
})
|
})
|
||||||
|
|
@ -233,7 +236,7 @@ app.component('dashboard',
|
||||||
stacked: false,
|
stacked: false,
|
||||||
duration: 500,
|
duration: 500,
|
||||||
reduceXTicks: false,
|
reduceXTicks: false,
|
||||||
rotateLabels: 67,
|
rotateLabels: -67,
|
||||||
labelSunbeamLayout: true,
|
labelSunbeamLayout: true,
|
||||||
useInteractiveGuideline: false,
|
useInteractiveGuideline: false,
|
||||||
multibar: {
|
multibar: {
|
||||||
|
|
@ -292,65 +295,69 @@ app.component('dashboard',
|
||||||
],
|
],
|
||||||
template: `
|
template: `
|
||||||
<md-content flex="100" layout="column">
|
<md-content flex="100" layout="column">
|
||||||
<md-card flex="100" layout="row">
|
<md-card flex="100" layout="row">
|
||||||
<md-card flex="20">
|
<md-card flex="20">
|
||||||
<select style="height: 100%;" multiple ng:model="$ctrl.graphed_accounts">
|
<select style="height: 100%;" multiple ng:model="$ctrl.graphed_accounts">
|
||||||
<option ng:repeat="account in $ctrl.accounts">{{account}}</option>
|
<option ng:repeat="account in $ctrl.accounts">{{account}}</option>
|
||||||
</select>
|
</select>
|
||||||
</md-card>
|
</md-card>
|
||||||
<md-card flex="81">
|
<md-card flex="81">
|
||||||
<nvd3 data="$ctrl.graphiques.monthly_values.data"
|
<nvd3 data="$ctrl.graphiques.monthly_values.data"
|
||||||
options="$ctrl.graphiques.monthly_values.options"></nvd3>
|
options="$ctrl.graphiques.monthly_values.options"></nvd3>
|
||||||
</md-card>
|
</md-card>
|
||||||
</md-card>
|
</md-card>
|
||||||
<h1 style="text-align: center;">{{$ctrl.period | amDateFormat:'MMMM YYYY'}}</h1>
|
<h1 style="text-align: center;">{{$ctrl.period | amDateFormat:'MMMM YYYY'}}</h1>
|
||||||
<md-card flex="100" layout="column"
|
<md-card flex="100" layout="column"
|
||||||
ng:repeat="bucket in $ctrl.balance.buckets">
|
ng:repeat="bucket in $ctrl.balance.buckets">
|
||||||
<md-toolbar>
|
<md-toolbar>
|
||||||
<span ng:repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
|
<span ng:repeat="account in bucket.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
|
||||||
</md-toolbar>
|
</md-toolbar>
|
||||||
<md-content layout="row">
|
<md-content layout="row">
|
||||||
<md-card flex="20">
|
<!--
|
||||||
<select style="height: 100%;" multiple
|
<md-card flex="20">
|
||||||
ng:model="bucket.accounts_selected"
|
<select style="height: 100%;" multiple
|
||||||
ng:options="account.account for account in bucket.raw_data | orderBy:'account'"
|
ng:model="bucket.accounts_selected"
|
||||||
ng:change="filter_data()">
|
ng:options="account.account for account in bucket.raw_data | orderBy:'account'"
|
||||||
<option value=''>...</option>
|
ng:change="filter_data()">
|
||||||
</select>
|
<option value=''>...</option>
|
||||||
</md-card>
|
</select>
|
||||||
<md-card flex="78">
|
</md-card>
|
||||||
<nvd3 data="bucket.data"
|
-->
|
||||||
options="bucket.pie_graph_options" >
|
<md-card flex="78">
|
||||||
</nvd3>
|
<nvd3 data="bucket.data"
|
||||||
</md-card>
|
options="bucket.graph_options" >
|
||||||
<!-- <md-card flex="56">
|
</nvd3>
|
||||||
<table class="table">
|
</md-card>
|
||||||
<thead>
|
<!--
|
||||||
<tr>
|
<md-card flex="56">
|
||||||
<th><md-buton ng:click="bucket.order_by( 'account' )">account</md-buton></th>
|
<table class="table">
|
||||||
<th><md-buton ng:click="bucket.order_by( 'amount' )">amount</md-buton></th>
|
<thead>
|
||||||
<th><md-buton ng:click="bucket.order_by( 'score' )">score</md-buton></th>
|
<tr>
|
||||||
</tr>
|
<th><md-buton ng:click="bucket.order_by( 'account' )">account</md-buton></th>
|
||||||
</thead>
|
<th><md-buton ng:click="bucket.order_by( 'amount' )">amount</md-buton></th>
|
||||||
<tbody>
|
<th><md-buton ng:click="bucket.order_by( 'score' )">score</md-buton></th>
|
||||||
<tr ng:repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
|
</tr>
|
||||||
ng:class="{'even': $even, 'odd': $odd}"
|
</thead>
|
||||||
style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
|
<tbody>
|
||||||
<td style="border-bottom:1px solid {{coloring_score( account.score )}}">
|
<tr ng:repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
|
||||||
{{account.account}}
|
ng:class="{'even': $even, 'odd': $odd}"
|
||||||
</td>
|
style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
|
||||||
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
<td style="border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||||
{{account.amount | number:2}} €
|
{{account.account}}
|
||||||
</td>
|
</td>
|
||||||
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||||
{{account.score}}
|
{{account.amount | number:2}} €
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
<td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
|
||||||
</tbody>
|
{{account.score}}
|
||||||
</table>
|
</td>
|
||||||
</md-card> -->
|
</tr>
|
||||||
</md-content>
|
</tbody>
|
||||||
</md-card>
|
</table>
|
||||||
</md-content>
|
</md-card>
|
||||||
|
-->
|
||||||
|
</md-content>
|
||||||
|
</md-card>
|
||||||
|
</md-content>
|
||||||
`
|
`
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue