Miroirs/credger
1
0
Fork 0
mirror of https://github.com/gwenhael-le-moine/credger.git synced 2024-12-26 09:58:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

++

Browse source
This commit is contained in:
Gwenhael Le Moine 2017-12-05 11:45:54 +01:00
parent a838613031
commit a3937f8e8a
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
1 changed files with 34 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
public/ts/components/dashboard.ts
View file

@ -20,6 +20,7 @@ app.component('dashboard',
.compact() .compact()
.flatten() .flatten()
.value(); .value();
ctrl.retrieve_graph_values(ctrl.graphed_accounts); ctrl.retrieve_graph_values(ctrl.graphed_accounts);
}; };
@ -44,25 +45,23 @@ app.component('dashboard',
}); });
}) })
.each((cat) => { .each((cat) => {
cat = _(cat).sortBy((month) => { cat = _(cat).sortBy((month) => { return month.date; });
return month.date;
});
}); });
ctrl.graphique = { ctrl.graphique = {
options: { options: {
chart: { chart: {
type: 'multiBarChart', type: 'multiBarChart',
height: 300, height: 450,
stacked: true, stacked: true,
showControls: true, showControls: true,
showLegend: true, showLegend: true,
showLabels: true, showLabels: true,
showValues: true, showValues: true,
showYAxis: false, showYAxis: true,
x: (d) => { return d.x; }, x: (d) => { return d.x; },
y: (d) => { return d.y; }, y: (d) => { return d.y ? d.y : 0; },
valueFormat: (d) => { return `${d} €`; }, valueFormat: (d) => { return `${d} €`; },
xAxis: { xAxis: {
@ -75,13 +74,6 @@ app.component('dashboard',
rotateLabels: -67, rotateLabels: -67,
labelSunbeamLayout: true, labelSunbeamLayout: true,
useInteractiveGuideline: true, useInteractiveGuideline: true,
multibar: {
dispatch: {
elementClick: function(event) {
ctrl.period = event.data.x; // FIXME: doesn't trigger data-binding
}
}
}
} }
}, },
data: _.chain(response.data) data: _.chain(response.data)
@ -90,17 +82,18 @@ app.component('dashboard',
.map((key) => { .map((key) => {
return { return {
key: key, key: key,
values: _.chain(response.data[key]).map((value) => { values: _.chain(response.data[key])
let date = new Date(value.date); .map((value) => {
let period = date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1); let date = new Date(value.date);
ctrl.periods.push(period); let period = date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1);
ctrl.periods.push(period);
return { return {
key: key, key: key,
x: period, x: period,
y: parseInt(value.amount) y: parseInt(value.amount)
}; };
}) })
.sortBy((item) => { return item.x; }) .sortBy((item) => { return item.x; })
.value() .value()
}; };
@ -108,6 +101,8 @@ app.component('dashboard',
.value() .value()
}; };
console.log(ctrl.graphique)
ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value(); ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value();
ctrl.period = _(ctrl.periods).first(); ctrl.period = _(ctrl.periods).first();
}); });
@ -139,24 +134,24 @@ app.component('dashboard',
template: ` template: `
<div class="dashboard"> <div class="dashboard">
<div class="global-graph" style="height: 300px;"> <div class="global-graph" style="height: 450px;">
<div class="accounts" style="width: 20%; height: 100%; float: left;"> <div class="accounts" style="width: 20%; height: 100%; float: left;">
<ul> <ul>
<li ng:repeat="account in $ctrl.main_accounts_depths"> <li ng:repeat="account in $ctrl.main_accounts_depths">
<label>{{account.name}} depth</label> <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> <rzslider rz-slider-options="{floor: 0, ceil: account.max_depth, onEnd: $ctrl.compute_selected_accounts}" rz-slider:model="account.depth"></rzslider>
</li> </li>
</ul> </ul>
</div> </div>
<div class="accounts" style="width: 20%; height: 100%; float: left;"> <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)"> <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> <option ng:repeat="account in $ctrl.accounts">{{account}}</option>
</select> </select>
</div> </div>
<div class="graph" style="width: 60%; float: left;"> <div class="graph" style="width: 60%; float: left;">
<nvd3 data="$ctrl.graphique.data" <nvd3 data="$ctrl.graphique.data"
options="$ctrl.graphique.options"> options="$ctrl.graphique.options">
</nvd3>{{$ctrl.period}} </nvd3>{{$ctrl.period}}
</div> </div>