{% extends 'base.html' %}

{% block content %}

<div class="container" style="text-align:center;">

  <h3>Stats</h3>

  <div style="width: 100%; text-align: center;">
    <div class="charts">
      <canvas id="wow_wallet"></canvas>
      <canvas id="wow_earnings"></canvas>
      <canvas id="swap_stats"></canvas>
    </div>
  </div>

  <script src="/static/js/Chart.bundle.min.js"></script>
  <script>
    var monero = '#f96b0e';
    var set_title = function(t){
      return {
        display: true,
        text: t,
        fontColor: 'white',
      }
    }

    {% for i in wow_txes %}
    // console.log("{{ i['in'] }}")
    {% endfor %}

{#
    var ctx = document.getElementById('wow_wallet').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: [0, {% for i in wow_txes %}'{{ wow_txes[i].timestamp  }}',{% endfor %}],
        datasets: [{
          label: 'Balance',
          backgroundColor: wownero,
          borderColor: wownero,
          data: [
            0, {% for i in wow_txes %}{{ wow_txes[i].total }},{% endfor %}
          ],
          fill: false,
        }]
      },
      options: {
        title: set_title('Wownero Wallet Balance')
      }
    });

    var ctx = document.getElementById('wow_earnings').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['WOW', 'USD'],
          datasets: [{
            label: 'Wownero Earnings',
            backgroundColor: wownero,
            borderColor: wownero,
            data: [
              {{ earnings['wow'] | from_atomic_wow }}, {{ earnings['wow_as_ausd'] | from_atomic_usd }}
            ],
            fill: false,
          }]
        },
        options: {
          title: set_title('Wownero Earnings')
        }
      });
#}
  </script>

</div>

{% endblock %}