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

View file

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

View file

@ -10,9 +10,8 @@ app.component('dashboard',
.then((response) => {
ctrl.periods = [];
let largest_cat = _(response.data).reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, []);
_.chain(largest_cat)
_.chain(response.data)
.reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, [])
.pluck('date')
.each((date) => {
_(response.data).each((cat) => {
@ -33,8 +32,7 @@ app.component('dashboard',
});
});
ctrl.graphiques = {
monthly_values: {
ctrl.graphique = {
options: {
chart: {
type: 'multiBarChart',
@ -62,13 +60,8 @@ app.component('dashboard',
useInteractiveGuideline: true,
multibar: {
dispatch: {
elementClick: (event) => {
console.log('change period')
console.log(ctrl.period)
ctrl.period = event.data.x;
console.log(ctrl.period)
elementClick: function(event) {
ctrl.period = event.data.x; // FIXME: doesn't trigger data-binding
}
}
}
@ -97,7 +90,6 @@ app.component('dashboard',
};
})
.value()
}
};
ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value();
@ -124,9 +116,9 @@ app.component('dashboard',
</select>
</div>
<div class="graph" style="width: 80%; float: left;">
<nvd3 data="$ctrl.graphiques.monthly_values.data"
options="$ctrl.graphiques.monthly_values.options">
</nvd3>
<nvd3 data="$ctrl.graphique.data"
options="$ctrl.graphique.options">
</nvd3>{{$ctrl.period}}
</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>
</h1>
<bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
<bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
</div>
`
});