add some dope ass charts to wallet dashboard

wowstash/blueprints/wallet/routes.py

@@ -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

wowstash/static/css/Chart.min.css

@@ -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}

wowstash/templates/wallet/dashboard.html

@@ -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>