Sith/subscription/templates/subscription/stats.jinja

{% extends "core/base.jinja" %}

{% block title %}
  {% trans %}Subscription stats{% endtrans %}
{% endblock %}

{% block head %}
  {{ super() }}
  <script type="text/javascript" src="{{ static('vendored/chart/Chart.bundle.min.js') }}"></script>
{% endblock %}

{% block content %}

  <p>
    {{ form.start_date.label }}<br>
    {{ form.start_date }}<br><br>
    {{ form.end_date.label }}<br>
    {{ form.end_date }}<br>
    <p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
  </p>

  <canvas id="statsChart" width="400" height="200"></canvas>

  <p>
    {% trans %}Total subscriptions{% endtrans %} : {{ subscriptions_total.count() }}<br><br>
    {% trans %}Subscriptions by type{% endtrans %}<br><br>
    {% for location in locations %}
      {{ location[1] }} : <i class="nb">{{ subscriptions_total.filter(location=location[0]).count() }}</i><br>
    {% endfor %}
    <p>

      <br>

      <table>
        <tr>
          <th>{% trans %}Subscription type{% endtrans %}</th>
          {% for location in locations %}
            <th>{{ location[1] }}</th>
          {% endfor %}
          <th id="graphLabel">{% trans %}Total{% endtrans %}</th>
          {% for type in subscriptions_types %}
            <tr>
              <td><i class="types" >{{ subscriptions_types[type]['name'] }}</i></td>
              {% set subscriptions_total_type = subscriptions_total.filter(subscription_type=type) %}
              {% for location in locations %}
                <td>
                  {% set subscriptions_total_type_location = subscriptions_total_type.filter(location=location[0]) %}
                  {% trans %}Total{% endtrans %} : {{ subscriptions_total_type_location.count()}}<br>
                  {% for p_type in payment_types %}
                    {{ p_type[1] }} : <i class="nb">{{ subscriptions_total_type_location.filter(payment_method=p_type[0]).count()}}</i><br>
                  {% endfor %}
                </td>
              {% endfor %}
              <td class="total"><i class="nb">{{subscriptions_total_type.count()}}</i>
              </tr>
          {% endfor %}
        </table>

{% endblock %}

{% block script %}
  {{ super() }}
  <script>
    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    function getRandomColorUniq(list) {
      var color = getRandomColor();
      while (list.includes(color)){
        color = getRandomColor();
      }
      return color;
    }
    function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
      });

      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }

    var ctx = document.getElementById("statsChart").getContext('2d');
    var labels = [];
    var total = [];
    var colors = [];
    var colors_dimmed = [];
    Array.from(document.getElementsByClassName("types")).forEach(function(element){
      labels.push(element.childNodes[0].data);
    });
    Array.from(document.getElementsByClassName("total")).forEach(function(element){
      total.push(element.childNodes[0].childNodes[0].data);
    });
    labels.forEach(function(element){
      colors.push(getRandomColorUniq(colors));
    });
    colors.forEach(function(element){
      var rgb_color = hexToRgb(element);
      colors_dimmed.push('rgba(' + rgb_color.r + ', ' + rgb_color.g + ', ' + rgb_color.b + ', 0.2)');
    });
    console.log(colors);console.log(colors_dimmed);
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: document.getElementById("graphLabel").childNodes[0].data,
          data: total,
          backgroundColor: colors_dimmed,
          borderColor: colors,
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true
            }
          }]
        }
      }
    });
  </script>
{% endblock %}