mirror of
https://github.com/gwenhael-le-moine/credger.git
synced 2024-12-25 09:58:43 +01:00
much better graph control
This commit is contained in:
Gwenhael Le Moine
parent
b27922ed53
commit
a838613031
4 changed files with 78 additions and 34 deletions
|
|
@ -14,6 +14,7 @@
|
|||
|
||||
<link type="text/css" rel="stylesheet" href="/vendor/node_modules/nvd3/build/nv.d3.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/vendor/node_modules/angular-loading-bar/build/loading-bar.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/vendor/node_modules/angularjs-slider/dist/rzslider.min.css">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="/css/app.css"/>
|
||||
</head>
|
||||
|
|
@ -37,6 +38,7 @@
|
|||
<script src="/vendor/node_modules/angular-moment/angular-moment.min.js"></script>
|
||||
<script src="/vendor/node_modules/angular-nvd3/dist/angular-nvd3.min.js"></script>
|
||||
<script src="/vendor/node_modules/angular-loading-bar/build/loading-bar.min.js"></script>
|
||||
<script src="/vendor/node_modules/angularjs-slider/dist/rzslider.min.js"></script>
|
||||
|
||||
<!-- APP -->
|
||||
<script src="/js/app.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ var app = angular.module('app',
|
|||
'nvd3',
|
||||
'angularMoment',
|
||||
'chieffancypants.loadingBar',
|
||||
'rzModule',
|
||||
])
|
||||
.config(['$stateProvider', '$urlRouterProvider',
|
||||
function($stateProvider, $urlRouterProvider) {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,28 @@ app.component('dashboard',
|
|||
controller: ['$filter', 'API',
|
||||
function($filter, API) {
|
||||
let ctrl = this;
|
||||
ctrl.graphed_accounts = ['Expenses', 'Income'];
|
||||
|
||||
let retrieve_graph_values = (period, categories) => {
|
||||
API.graph_values(period, categories)
|
||||
ctrl.compute_selected_accounts = () => {
|
||||
ctrl.graphed_accounts = _.chain(ctrl.main_accounts_depths)
|
||||
.map((account) => {
|
||||
if (account.depth < 1) {
|
||||
return null;
|
||||
} else {
|
||||
return _(ctrl.raw_accounts)
|
||||
.select((account2) => {
|
||||
return account2[0] == account.name && account2.length == account.depth;
|
||||
})
|
||||
.map((account3) => { return account3.join(":"); });
|
||||
}
|
||||
})
|
||||
.compact()
|
||||
.flatten()
|
||||
.value();
|
||||
ctrl.retrieve_graph_values(ctrl.graphed_accounts);
|
||||
};
|
||||
|
||||
ctrl.retrieve_graph_values = (categories) => {
|
||||
API.graph_values("", categories.join(" "))
|
||||
.then((response) => {
|
||||
ctrl.periods = [];
|
||||
|
||||
|
|
@ -24,20 +42,20 @@ app.component('dashboard',
|
|||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.each((cat) => {
|
||||
cat = _(cat).sortBy((month) => {
|
||||
return month.date;
|
||||
});
|
||||
});
|
||||
|
||||
_(response.data).each((cat) => {
|
||||
cat = _(cat).sortBy((month) => {
|
||||
return month.date;
|
||||
});
|
||||
});
|
||||
|
||||
ctrl.graphique = {
|
||||
options: {
|
||||
chart: {
|
||||
type: 'multiBarChart',
|
||||
height: 300,
|
||||
showControls: false,
|
||||
stacked: true,
|
||||
showControls: true,
|
||||
showLegend: true,
|
||||
showLabels: true,
|
||||
showValues: true,
|
||||
|
|
@ -52,7 +70,6 @@ app.component('dashboard',
|
|||
return `${d}${d == ctrl.period ? '*' : ''}`;
|
||||
}
|
||||
},
|
||||
stacked: false,
|
||||
duration: 500,
|
||||
reduceXTicks: false,
|
||||
rotateLabels: -67,
|
||||
|
|
@ -71,7 +88,6 @@ app.component('dashboard',
|
|||
.keys()
|
||||
.reverse()
|
||||
.map((key) => {
|
||||
let multiplicator = (key == "Income") ? -1 : 1;
|
||||
return {
|
||||
key: key,
|
||||
values: _.chain(response.data[key]).map((value) => {
|
||||
|
|
@ -82,7 +98,7 @@ app.component('dashboard',
|
|||
return {
|
||||
key: key,
|
||||
x: period,
|
||||
y: parseInt(value.amount) * multiplicator
|
||||
y: parseInt(value.amount)
|
||||
};
|
||||
})
|
||||
.sortBy((item) => { return item.x; })
|
||||
|
|
@ -99,34 +115,58 @@ app.component('dashboard',
|
|||
|
||||
API.accounts()
|
||||
.then((response) => {
|
||||
ctrl.raw_accounts = response.data;
|
||||
ctrl.raw_accounts = response.data.sort((account) => { return account.length; }).reverse();
|
||||
ctrl.accounts = ctrl.raw_accounts.map((account_ary) => { return account_ary.join(':'); });
|
||||
});
|
||||
|
||||
retrieve_graph_values('', ctrl.graphed_accounts.join(' '));
|
||||
ctrl.main_accounts_depths = _.chain(ctrl.raw_accounts)
|
||||
.select((account) => { return account.length == 1; })
|
||||
.map((account) => {
|
||||
return {
|
||||
name: account[0],
|
||||
depth: _(['Expenses', 'Income']).contains(account[0]) ? 1 : 0,
|
||||
max_depth: _.chain(ctrl.raw_accounts)
|
||||
.select((account2) => { return account2[0] == account[0] })
|
||||
.reduce((memo, account3) => { return account3.length > memo ? account3.length : memo; }, 0)
|
||||
.value()
|
||||
};
|
||||
})
|
||||
.value();
|
||||
|
||||
ctrl.compute_selected_accounts();
|
||||
});
|
||||
}
|
||||
],
|
||||
|
||||
template: `
|
||||
<div class="dashboard">
|
||||
<div class="global-graph" style="height: 300px;">
|
||||
<div class="accounts" style="width: 20%; height: 100%; float: left;">
|
||||
<select style="height: 100%;" multiple ng:model="$ctrl.graphed_accounts">
|
||||
<option ng:repeat="account in $ctrl.accounts">{{account}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="graph" style="width: 80%; float: left;">
|
||||
<nvd3 data="$ctrl.graphique.data"
|
||||
options="$ctrl.graphique.options">
|
||||
</nvd3>{{$ctrl.period}}
|
||||
<div class="dashboard">
|
||||
<div class="global-graph" style="height: 300px;">
|
||||
<div class="accounts" style="width: 20%; height: 100%; float: left;">
|
||||
<ul>
|
||||
<li ng:repeat="account in $ctrl.main_accounts_depths">
|
||||
<label>{{account.name}} depth</label>
|
||||
<rzslider rz-slider-options="{floor: 0, ceil: account.max_depth, onEnd: $ctrl.compute_selected_accounts}" rz-slider:model="account.depth"></rzslider>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="accounts" style="width: 20%; height: 100%; float: left;">
|
||||
<select style="height: 100%;" multiple ng:model="$ctrl.graphed_accounts" ng:change="$ctrl.retrieve_graph_values($ctrl.graphed_accounts)">
|
||||
<option ng:repeat="account in $ctrl.accounts">{{account}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="graph" style="width: 60%; float: left;">
|
||||
<nvd3 data="$ctrl.graphique.data"
|
||||
options="$ctrl.graphique.options">
|
||||
</nvd3>{{$ctrl.period}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 style="text-align: center;">
|
||||
<select ng:options="p as p | amDateFormat:'MMMM YYYY' for p in $ctrl.periods" ng:model="$ctrl.period"></select>
|
||||
</h1>
|
||||
|
||||
<bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
|
||||
</div>
|
||||
|
||||
<h1 style="text-align: center;">
|
||||
<select ng:options="p as p | amDateFormat:'MMMM YYYY' for p in $ctrl.periods" ng:model="$ctrl.period"></select>
|
||||
</h1>
|
||||
|
||||
<bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
|
|
|||
1
public/vendor/package.json
vendored
1
public/vendor/package.json
vendored
|
|
@ -29,6 +29,7 @@
|
|||
"angular-moment": "^1.0.0-beta.6",
|
||||
"angular-nvd3": "^1.0.8",
|
||||
"angularjs-nvd3-directives": "0.0.8",
|
||||
"angularjs-slider": "^6.4.3",
|
||||
"boilerplate": "^0.6.1",
|
||||
"d3": "^3.5.17",
|
||||
"google-closure-compiler-js": "^20170910.0.1",
|
||||
|
|
|
|||
Loading…
Reference in a new issue