h0v1n8-web/website/rotbot/templates/rotbot/user.html

{% extends "base.html" %}
{% block content %}
  <div class="ui six small inverted grey statistics">
    <div class="statistic">
      <div class="value">
        <i class="comment icon"></i>
        {{ total_messages }}
      </div>
      <div class="label">
        messages
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="theater masks icon"></i>
        {{ total_actions }}
      </div>
      <div class="label">
        Actions
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="bullhorn icon"></i>
        {{ total_notices }}
      </div>
      <div class="label">
        Notces
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="user plus icon"></i>
        {{ total_joins }}
      </div>
      <div class="label">
        Joins
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="jet fighter icon"></i>
        {{ total_kicks }}
      </div>
      <div class="label">
        Kicks
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="user slash icon"></i>
        {{ total_kicked }}
      </div>
      <div class="label">
        Kicked
      </div>
    </div>
  </div>
  <div class="ui six tiny inverted grey statistics">
    <div class="statistic">
      <div class="value">
        <i class="thermometer half alternate icon"></i>
        {{ user.level }}
      </div>
      <div class="label">
        Level
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="tachometer alternate icon"></i>
          <i class="inverted seedling corner icon"></i>
        </i>
        {{ user.xp_spent }}
      </div>
      <div class="label">
        XP spent
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="gas pump icon"></i>
          <i class="inverted seedling corner icon"></i>
        </i>
        {{ user.ap_spent }}
      </div>
      <div class="label">
        AP spent
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="coins icon"></i>{{ user.coin }}
      </div>
      <div class="label">
        Coin
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="coins icon"></i>
          <i class="inverted corner shopping cart icon"></i>
        </i>
        {{ user.coin_spent }}
      </div>
      <div class="label">
        Coin spent
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="coins icon"></i>
          <i class="inverted corner gift icon"></i>
        </i>
        {{ user.coin_given }}
      </div>
      <div class="label">
        Coin given
      </div>
    </div>
  </div>

  <i class="history icon"></i>Last seen {{ last_event_type }}
  {% if user.last_event_subject %}
    <i class="icons"><i class="heading icon"></i><i class="corner history icon"></i></i>{{ user.last_event_subject }}
  {% endif %}
  {% if user.last_event_channel %}
    in <i class="icons"><i class="hashtag icon"></i><i class="corner history icon"></i></i>{{ user.last_event_channel }}
  {% endif %}
  {% if user.last_event_content %}
    for <i class="icons"><i class="envelope icon"></i><i class="corner history icon"></i></i>{{ user.last_event_content }}
  {% endif %}
  at {{ user.last_event_datetime }}

  <i class="microphone alternate slash icon"></i>{{ user.no_chat }}

<div class="chart-container" style="position: relative;  ">
  <canvas class="chart" id="chart-ab8d96fb-eb46-434a-9b74-a2f6e6135324"></canvas>
</div>

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
    var ctx = document.getElementById("chart-ab8d96fb-eb46-434a-9b74-a2f6e6135324").getContext("2d");

    new Chart(ctx, {{ chart|safe }});
});
</script>

{% endblock content %}


<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
            'rgba(150.5492475744623109, 150.8156862745098039, 0.4318339100346021)',

            ],
            borderColor: [
                'rgba(150.5492475744623109, 150.8156862745098039, 0.4318339100346021)',
                'hsl(0.3712, 0.33999999999999997, 0.86)',
                'hsl(0.3712, 0.33999999999999997, 0.86)',
                'hsl(120, 50%, 50%)',
                'hsl(120, 50%, 50%)',
                'hsl(120, 50%, 50%)',
                'hsl(120, 50%, 50%)',
            ],
            borderWidth: 4
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>