Verified Commit 595605e7 authored by Tim Vis茅e's avatar Tim Vis茅e
Browse files

Show balance history graph on wallet page

parent a3f0de1b
Pipeline #186330228 passed with stage
in 5 minutes and 4 seconds
......@@ -81,10 +81,44 @@ class WalletController extends Controller {
->findOrFail($walletId);
$transactions = $wallet->lastTransactions();
// Build balance graph item data
$balance_graph_items = $wallet
// TODO: choose proper limit
->lastTransactions(35)
->get()
->filter(function($t) {
return $t->state == Transaction::STATE_SUCCESS;
})
->map(function($t) use($wallet) {
// TODO: add date and some other parameters as well
return [
'time' => $t->created_at,
'amount' => $t->cost($wallet),
];
});
$balance_accum = $wallet->balance;
$balance_graph_items = $balance_graph_items
->map(function($data) use(&$balance_accum) {
$data['balance'] = $balance_accum;
$balance_accum = round($balance_accum - $data['amount'], 2);
return $data;
})
->reverse()
->values();
// Build graph data
if($balance_graph_items->count() >= 5) {
$balance_graph_items->each(function($t) use(&$balance_graph_data) {
$balance_graph_data['labels'][] = $t['time']->longRelativeDiffForHumans() . ' (' . $t['time']->format('Y-m-d H:m') . ')';
$balance_graph_data['datasets'][0]['data'][] = $t['balance'];
});
}
return view('community.wallet.show')
->with('economy', $economy)
->with('wallet', $wallet)
->with('transactions', $transactions->get());
->with('transactions', $transactions->get())
->with('balance_graph_data', $balance_graph_data ?? null);
}
/**
......
......@@ -2,6 +2,13 @@
@section('title', $wallet->name)
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
@endpush
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.css">
@endpush
@php
// Define menulinks
$menulinks[] = [
......@@ -74,6 +81,43 @@
<div class="ui divider hidden"></div>
@if($balance_graph_data != null)
<canvas id="chartBalanceGraph"
height="50"
aria-label="@lang('misc.balance')"
role="img"></canvas>
<script>
var data = JSON.parse('{!! json_encode($balance_graph_data) !!}');
data.datasets[0].borderColor = 'rgb(75, 192, 192)';
data.datasets[0].backgroundColor = 'rgba(75, 192, 192, 0.5)';
new Chart(
document.getElementById('chartBalanceGraph').getContext('2d'),
{
type: 'line',
data: data,
options: {
animation: false,
legend: false,
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
ticks: {
callback: function(value, index, values) {
return '鈧 ' + value;
}
}
}]
}
}
},
);
</script>
<div class="ui divider hidden"></div>
@endif
{{-- Transaction list --}}
@include('transaction.include.list', [
'groups' => [[
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment