{% extends "base" %}

{% block content %}

  <script src="/static/scripts/chart.js"></script>

  <code>

    <div class="card border-bottom-0 border-start-0 border-end-0 rounded-0">
      <div class="card-body" align="center">
        <div class="value-text">
          <div class="darkorange-text"><i class="bi bi-pc-display-horizontal"></i> NODE VERSIONS ({{ total }})</div>
          <div style="position: relative; height:60vh; width:90vw"><canvas id="1"></canvas></div>
        </div>
      </div>
    </div>

    <div class="card border-bottom-0 border-start-0 border-end-0 rounded-0">
      <div class="card-body" align="center">
        <div class="value-text">
          <div class="darkorange-text"><i class="bi bi-activity"></i> HASHRATE</div>
          <div style="position: relative; height:60vh; width:90vw"><canvas id="2"></canvas></div>
        </div>
      </div>
    </div>
    
    <div class="card border-bottom-0 border-start-0 border-end-0 rounded-0">
      <div class="card-body" align="center">
        <div class="value-text">
          <div class="darkorange-text"><i class="bi bi-speedometer2"></i> TRANSACTIONS & FEES</div>
          <div style="position: relative; height:60vh; width:90vw"><canvas id="3"></canvas></div>
        </div>
      </div>
    </div>

  </code>

  <script>
    var ctx = document.getElementById('2').getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 600);
    gradient.addColorStop(0, 'rgba(178, 81, 16, 1)');
    gradient.addColorStop(1, 'rgba(255, 158, 93, 0)');
    
    <!-- Node Version Chart -->
    var options = {
      maintainAspectRatio: false,
      plugins: {
        legend: {
          labels: {
            color: 'gray',
          },
          position: 'top'
        },
      },
    };

    var data = {
      labels: {{ user_agent }},
      datasets: [{
          label: " Count",
          borderWidth: 1,
          data: {{ count }}
      }]
    };

    new Chart(document.getElementById("1"), {
      type: 'pie',
      data: data,
      options: options
    });


    <!-- Hashrate Chart -->
    var options = {
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
      },
      plugins: {
        legend: {
          display: false
        },
      },
      scales: {
        x: { 
          grid: {
            display: false
          }
        },
        y: {
          grid: {
            display: false
          }
        },
      }
    };

    var data = {
      labels: {{ date }},
      datasets: [{
        label: 'Hashrate (kG/s)',
        data: {{ hashrate }},
        fill: true,
        borderColor: "#b25110",
        backgroundColor: gradient,
        tension: 0.1
      }]
    };

    new Chart(document.getElementById("2"), {
      type: 'line',
      data: data,
      options: options
    });
    

    <!-- Transactions & Fees Chart -->
    var options = {
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
      },
      plugins: {
        legend: {
          display: true
        },
      },
      scales: {
        x: { 
          grid: {
            display: false
          }
        },
        y: {
          grid: {
            display: false
          }
        },
      }
    };

    var data = {
      labels: {{ date }},
      datasets: [
        {
          label: 'Transactions',
          data: {{ txns }},
          fill: false,
          tension: 0.1
        },
        {
          label: 'Fees',
          data: {{ fees }},
          fill: false,
          tension: 0.1
        }
      ]
    };

    new Chart(document.getElementById("3"), {
      type: 'line',
      data: data,
      options: options
    });
    
  </script>


{% endblock %}