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

simplify

Browse source
This commit is contained in:
Gwenhael Le Moine 2017-11-24 16:49:24 +01:00
parent 1f06a12fe4
commit 107ed1c093
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
2 changed files with 83 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
public/ts/components/bucket.ts
View file

@ -38,26 +38,27 @@ app.component('bucket',
.then(function success(response) { .then(function success(response) {
let format_transaction = (transaction) => { let format_transaction = (transaction) => {
return ` return `
<tr> <tr>
<td>${transaction.date}</td> <td>${transaction.date}</td>
<td>${transaction.payee}</td> <td>${transaction.payee}</td>
<td style="text-align: right;">${transaction.amount} ${transaction.currency}</td> <td style="text-align: right;">${transaction.amount} ${transaction.currency}</td>
</tr>`; </tr>`;
}; };
swal({ swal({
title: response.data.key, title: response.data.key,
html: `<table style="width: 100%;"> html: `
<thead> <table style="width: 100%;">
<tr> <thead>
<td>Date</td><td>Payee</td><td>Amount</td> <tr>
</tr> <td>Date</td><td>Payee</td><td>Amount</td>
</thead> </tr>
<tbody> </thead>
${response.data.values.map(function(transaction) { return format_transaction(transaction); }).join("")} <tbody>
</tbody> ${response.data.values.map(function(transaction) { return format_transaction(transaction); }).join("")}
<tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot> </tbody>
</table>`}); <tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot>
</table>`});
}, function error(response) { alert("error!"); }); }, function error(response) { alert("error!"); });
} }
} }
@ -87,15 +88,15 @@ ${response.data.values.map(function(transaction) { return format_transaction(tra
} }
], ],
template: ` template: `
<div class="bucket"> <div class="bucket">
<div class="content"> <div class="content">
<div class="graph"> <div class="graph">
<nvd3 data="$ctrl.data" <nvd3 data="$ctrl.data"
options="$ctrl.graph_options"> options="$ctrl.graph_options">
</nvd3> </nvd3>
</div>
</div> </div>
</div> </div>
</div>
` `
}); });

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

@ -10,9 +10,8 @@ app.component('dashboard',
.then((response) => { .then((response) => {
ctrl.periods = []; ctrl.periods = [];
let largest_cat = _(response.data).reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, []); _.chain(response.data)
.reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, [])
_.chain(largest_cat)
.pluck('date') .pluck('date')
.each((date) => { .each((date) => {
_(response.data).each((cat) => { _(response.data).each((cat) => {
@ -33,71 +32,64 @@ app.component('dashboard',
}); });
}); });
ctrl.graphiques = { ctrl.graphique = {
monthly_values: { options: {
options: { chart: {
chart: { type: 'multiBarChart',
type: 'multiBarChart', height: 300,
height: 300, showControls: false,
showControls: false, showLegend: true,
showLegend: true, showLabels: true,
showLabels: true, showValues: true,
showValues: true, showYAxis: false,
showYAxis: false,
x: (d) => { return d.x; }, x: (d) => { return d.x; },
y: (d) => { return d.y; }, y: (d) => { return d.y; },
valueFormat: (d) => { return `${d} €`; }, valueFormat: (d) => { return `${d} €`; },
xAxis: { xAxis: {
tickFormat: (d) => { tickFormat: (d) => {
return `${d}${d == ctrl.period ? '*' : ''}`; return `${d}${d == ctrl.period ? '*' : ''}`;
} }
}, },
stacked: false, stacked: false,
duration: 500, duration: 500,
reduceXTicks: false, reduceXTicks: false,
rotateLabels: -67, rotateLabels: -67,
labelSunbeamLayout: true, labelSunbeamLayout: true,
useInteractiveGuideline: true, useInteractiveGuideline: true,
multibar: { multibar: {
dispatch: { dispatch: {
elementClick: (event) => { elementClick: function(event) {
console.log('change period') ctrl.period = event.data.x; // FIXME: doesn't trigger data-binding
console.log(ctrl.period)
ctrl.period = event.data.x;
console.log(ctrl.period)
}
} }
} }
} }
}, }
data: _.chain(response.data) },
.keys() data: _.chain(response.data)
.reverse() .keys()
.map((key) => { .reverse()
let multiplicator = (key == "Income") ? -1 : 1; .map((key) => {
return { let multiplicator = (key == "Income") ? -1 : 1;
key: key, return {
values: _.chain(response.data[key]).map((value) => { key: key,
let date = new Date(value.date); values: _.chain(response.data[key]).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) * multiplicator y: parseInt(value.amount) * multiplicator
}; };
}) })
.sortBy((item) => { return item.x; }) .sortBy((item) => { return item.x; })
.value() .value()
}; };
}) })
.value() .value()
}
}; };
ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value(); ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value();
@ -124,9 +116,9 @@ app.component('dashboard',
</select> </select>
</div> </div>
<div class="graph" style="width: 80%; float: left;"> <div class="graph" style="width: 80%; float: left;">
<nvd3 data="$ctrl.graphiques.monthly_values.data" <nvd3 data="$ctrl.graphique.data"
options="$ctrl.graphiques.monthly_values.options"> options="$ctrl.graphique.options">
</nvd3> </nvd3>{{$ctrl.period}}
</div> </div>
</div> </div>
@ -134,7 +126,7 @@ app.component('dashboard',
<select ng:options="p as p | amDateFormat:'MMMM YYYY' for p in $ctrl.periods" ng:model="$ctrl.period"></select> <select ng:options="p as p | amDateFormat:'MMMM YYYY' for p in $ctrl.periods" ng:model="$ctrl.period"></select>
</h1> </h1>
<bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket> <bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
</div> </div>
` `
}); });