purple-explorer/views/reward.pug

extends layout

block content
  .row
    .col-xs-12.col-md-12
      .card.card-default.card-address-summary
        .card-header(style='position:relative;')
          strong #{settings.locale.heavy_title}
            span.small  (#{settings.symbol})
        table.table.table-bordered.table-striped.summary-table
          thead
            tr
              th #{settings.locale.ex_supply}
                span.small  (#{settings.symbol})
              th #{settings.locale.heavy_cap}
                span.small  (#{settings.symbol})
              th #{settings.locale.heavy_phase}
              th #{settings.locale.heavy_maxvote}
              th #{settings.locale.heavy_reward}
              th #{settings.locale.heavy_estnext}
          tbody
            tr
              td
                =heavy.supply
              td
                =heavy.cap
              td
                =heavy.phase
              td
                =heavy.maxvote
              td
                =heavy.reward
              td
                =heavy.estnext
  .row
    .col-md-3
      .card.card-default
        .card-body
          div.text-center
            canvas(id="myChart2", width="150", height="150")
              script.
                var ctx = document.getElementById("myChart2").getContext("2d");
                var data = [
                  {
                    value: ((#{stats.count}/3600)%1)*100,
                    color: "rgba(92,184,92,1.0)"
                  },
                  {
                    value: (1-((#{stats.count}/3600)%1))*100,
                    color: "#222"
                  }
                ]
                new Chart(ctx).Doughnut(data);
            h5 #{settings.locale.heavy_changein}
            h5
              =heavy.nextin
          form
            table.table
              thead
                tbody
                  tr
                    th #{settings.locale.heavy_key}
                    td
                  tr
                    th #{settings.locale.heavy_vote}
                    td
                      div(style="width:20px;height:20px;background-color:#428bca")
                  tr
                    th #{settings.locale.heavy_current}
                    td
                      div(style="width:20px;height:20px;background-color:#222")
                  tr
                    th #{settings.locale.heavy_estnext}
                    td
                      div(style="width:20px;height:20px;background-color:rgba(92,184,92,1.0)")
    .col-md-9
      .card.card-default
        .card-body
          div.text-center
            .div
              strong #{settings.locale.heavy_lastxvotes}
            .div
              canvas(id="myChart", width="800", height="300", style="margin-left:-30px;margin-top:30px;")
                script.
                  var ctx = document.getElementById("myChart").getContext("2d");
                  var options = {
                    scaleOverride: true,
                    scaleSteps: 8,
                    scaleStepWidth: 1,
                    scaleStartValue: 0,
                    bezierCurve: false
                  }
                  var data = {
                    labels: [#{(votes.length > 0 ? votes[0].count : '0')},#{(votes.length > 1 ? votes[1].count : '0')},#{(votes.length > 2 ? votes[2].count : '0')},#{(votes.length > 3 ? votes[3].count : '0')},#{(votes.length > 4 ? votes[4].count : '0')},#{(votes.length > 5 ? votes[5].count : '0')},#{(votes.length > 6 ? votes[6].count : '0')},#{(votes.length > 7 ? votes[7].count : '0')},#{(votes.length > 8 ? votes[8].count : '0')},#{(votes.length > 9 ? votes[9].count : '0')},#{(votes.length > 10 ? votes[10].count : '0')},#{(votes.length > 11 ? votes[11].count : '0')},#{(votes.length > 12 ? votes[12].count : '0')},#{(votes.length > 13 ? votes[13].count : '0')},#{(votes.length > 14 ? votes[14].count : '0')},#{(votes.length > 15 ? votes[15].count : '0')},#{(votes.length > 16 ? votes[16].count : '0')},#{(votes.length > 17 ? votes[17].count : '0')},#{(votes.length > 18 ? votes[18].count : '0')},#{(votes.length > 19 ? votes[19].count : '0')}],
                    datasets: [
                      {
                        fillColor: "rgba(66,139,202,0.5)",
                        strokeColor: "rgba(66,139,202,0.8)",
                        pointColor: '#428bca',
                        pointStrokeColor: "#fff",
                        data: [#{(votes.length > 0 ? votes[0].vote : '0')},#{(votes.length > 1 ? votes[1].vote : '0')},#{(votes.length > 2 ? votes[2].vote : '0')},#{(votes.length > 3 ? votes[3].vote : '0')},#{(votes.length > 4 ? votes[4].vote : '0')},#{(votes.length > 5 ? votes[5].vote : '0')},#{(votes.length > 6 ? votes[6].vote : '0')},#{(votes.length > 7 ? votes[7].vote : '0')},#{(votes.length > 8 ? votes[8].vote : '0')},#{(votes.length > 9 ? votes[9].vote : '0')},#{(votes.length > 10 ? votes[10].vote : '0')},#{(votes.length > 11 ? votes[11].vote : '0')},#{(votes.length > 12 ? votes[12].vote : '0')},#{(votes.length > 13 ? votes[13].vote : '0')},#{(votes.length > 14 ? votes[14].vote : '0')},#{(votes.length > 15 ? votes[15].vote : '0')},#{(votes.length > 16 ? votes[16].vote : '0')},#{(votes.length > 17 ? votes[17].vote : '0')},#{(votes.length > 18 ? votes[18].vote : '0')},#{(votes.length > 19 ? votes[19].vote : '0')}]
                      },
                      {
                        fillColor: "rgba(151,187,205,0.0)",
                        strokeColor: '#222',
                        pointColor: "rgba(0,0,0,0)",
                        pointStrokeColor: "rgba(0,0,0,0.0)",
                        data: [#{(votes.length > 0 ? votes[0].reward : '0')},#{(votes.length > 1 ? votes[1].reward : '0')},#{(votes.length > 2 ? votes[2].reward : '0')},#{(votes.length > 3 ? votes[3].reward : '0')},#{(votes.length > 4 ? votes[4].reward : '0')},#{(votes.length > 5 ? votes[5].reward : '0')},#{(votes.length > 6 ? votes[6].reward : '0')},#{(votes.length > 7 ? votes[7].reward : '0')},#{(votes.length > 8 ? votes[8].reward : '0')},#{(votes.length > 9 ? votes[9].reward : '0')},#{(votes.length > 10 ? votes[10].reward : '0')},#{(votes.length > 11 ? votes[11].reward : '0')},#{(votes.length > 12 ? votes[12].reward : '0')},#{(votes.length > 13 ? votes[13].reward : '0')},#{(votes.length > 14 ? votes[14].reward : '0')},#{(votes.length > 15 ? votes[15].reward : '0')},#{(votes.length > 16 ? votes[16].reward : '0')},#{(votes.length > 17 ? votes[17].reward : '0')},#{(votes.length > 18 ? votes[18].reward : '0')},#{(votes.length > 19 ? votes[19].reward : '0')}]
                      }
                    ]
                  }
                  var myNewChart = new Chart(ctx).Line(data,options);