Add some graphics for subscriptions stats

subscription/templates/subscription/stats.jinja

@@ -4,6 +4,11 @@
     {% trans %}Subscription stats{% endtrans %}
 {% endblock %}
 
+{% block head %}
+{{ super() }}
+<script type="text/javascript" src="{{ static('core/js/Chart.bundle.min.js') }}"></script>
+{% endblock %}
+
 {% block content %}
 
 <p>
@@ -14,11 +19,13 @@
     <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] }} : {{ subscriptions_total.filter(location=location[0]).count() }}<br>
+        {{ location[1] }} : <i class="nb">{{ subscriptions_total.filter(location=location[0]).count() }}</i><br>
     {% endfor %}
 <p>
 
@@ -33,20 +40,71 @@
         <th>{% trans %}Total{% endtrans %}</th>
         {% for type in subscriptions_types %}
         <tr>
-            <td>{{ subscriptions_types[type]['name'] }}</td>
+            <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] }} : {{ subscriptions_total_type_location.filter(payment_method=p_type[0]).count()}}<br>
+                {{ p_type[1] }} : <i class="nb">{{ subscriptions_total_type_location.filter(payment_method=p_type[0]).count()}}</i><br>
                 {% endfor %}
                 </td>
             {% endfor %}
-            <td>{{subscriptions_total_type.count()}}
+            <td class="total"><i class="nb">{{subscriptions_total_type.count()}}</i>
         </tr>
         {% endfor %}
 </table>
 
 {% endblock %}
+
+{% block script %}
+{{ super() }}
+<script>
+var ctx = document.getElementById("statsChart").getContext('2d');
+var labels = [];
+var total = [];
+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);
+});
+var myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: labels,
+        datasets: [{
+            label: 'Nombre de cotisations',
+            data: total,
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+            ],
+            borderColor: [
+                'rgba(255,99,132,1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero:true
+                }
+            }]
+        }
+    }
+});
+</script>
+{% endblock %}
\ No newline at end of file