add some dope ass charts to wallet dashboard

mm-logging
lza_menace 3 years ago
parent 7f9d5a4f95
commit e195319cdf

@ -64,6 +64,7 @@ def dashboard():
return render_template(
'wallet/dashboard.html',
transfers=all_transfers,
sorted_txes=get_sorted_txes(transfers),
balances=balances,
address=address,
qrcode=qrcode,
@ -168,3 +169,30 @@ def send():
for field, errors in send_form.errors.items():
flash(f'{send_form[field].label}: {", ".join(errors)}')
return redirect(redirect_url)
def get_sorted_txes(_txes):
total = 0
txes = {}
sorted_txes = {}
for tx_type in _txes:
for t in _txes[tx_type]:
txes[t['txid']] = {
'type': tx_type,
'amount': t['amount'],
'timestamp': t['timestamp'],
'fee': t['fee']
}
for i in sorted(txes.items(), key=lambda x: x[1]['timestamp']):
if i[1]['type'] == 'in':
total += i[1]['amount']
elif i[1]['type'] == 'out':
total -= i[1]['amount']
total -= i[1]['fee']
sorted_txes[i[0]] = {
'type': i[1]['type'],
'amount': i[1]['amount'],
'timestamp': i[1]['timestamp'],
'total': total
}
return sorted_txes

@ -0,0 +1 @@
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}

File diff suppressed because one or more lines are too long

@ -37,6 +37,41 @@
<div class="container">
<div class="section-heading text-center">
<h2>Transfers</h2>
<div style="width: 70%; text-align: center; margin: 0 auto;">
<canvas id="wow_wallet"></canvas>
<canvas id="wow_wallet_scatter"></canvas>
</div>
<script src="/static/js/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="/static/css/Chart.min.css"/>
<script>
var wownero = '#ff2ad4';
var set_title = function(t){
return {
display: true,
text: t,
fontColor: 'white',
}
}
var ctx = document.getElementById('wow_wallet').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: [0, {% for i in sorted_txes %}'{{ sorted_txes[i].timestamp | datestamp }}',{% endfor %}],
datasets: [{
label: 'Balance',
backgroundColor: wownero,
borderColor: wownero,
data: [0, {% for i in sorted_txes %}{{ sorted_txes[i].total | from_atomic }},{% endfor %}],
fill: false,
}]
},
options: {
title: set_title('Wownero Wallet Balance')
}
});
</script>
<table class="table table-striped table-hover table-responsive table-responsive-sm tx-table">
<tr>
<th>Date</th>