ajout interface visualisation appStats

clavierPhono/urls.py

@@ -67,6 +67,7 @@ urlpatterns = [
     path('_delFile/', csrf_exempt(user_views.removeFile)),
     path('_saveTrace/', csrf_exempt(user_views.saveTrace)),
     path('_playIpa/', csrf_exempt(clavier_views.playIpa)),
+    path('_getAppStats/', csrf_exempt(user_views.getAppStats)),
 
     path('_getStats/', csrf_exempt(user_views.getTracesStats)),
     path('_getSynthVocTraces/', csrf_exempt(user_views.getSynthVocTraces)),
@@ -74,7 +75,9 @@ urlpatterns = [
     path('users/', user_views.usersPage, name='users'),
     path('users/<str:username>/', user_views.userInfo, name='userInfo'),
     path('downloadTraces/', csrf_exempt(user_views.downloadTraces), name='downloadTraces'),
-    path('addStat/', csrf_exempt(user_views.addStat))
+    path('addStat/', csrf_exempt(user_views.addStat)),
+
+    path('stats/', user_views.appStatVis)
 
     # path('getActivity/',  csrf_exempt(clavier_views.getActivity)),
     # path('switchstress/', clavier_views.openSwitchStress),

static/js/appStatVis.js

+var appdata = [];
+var stats = {};
+var filter= {app:[],mod:[],pay:[],lan:[],use:[],age:[]}
+
+getStats()
+
+async function getStats() {
+    // Paramètres d'envoi
+    const options = {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        }
+    };
+    
+    // ENVOI
+	const response = await fetch('/_getAppStats/', options);
+    appdata = await response.json();
+    console.log(appdata);
+
+    for (var {date:d, app:a, module:m, ip:i, agent:ag, country:c, lang:l} of appdata.appdata) {
+        if (!filter.app.includes(a)) filter.app.push(a);
+        if (!filter.mod.includes(m)) filter.mod.push(m);
+        if (!filter.pay.includes(c)) filter.pay.push(c);
+        if (!filter.lan.includes(l)) filter.lan.push(l);
+    }
+    makeCharts(filter)
+
+}
+
+var chartApps;
+var chartModules;
+var chartPays;
+var chartLangues;
+var chartUsers;
+var chartAgents;
+var chartTime;
+
+function makeCharts(filter) {
+    stats = summarize(filter, appdata.appdata, appdata.day2traces);
+
+    chartApps = makeChart('chartApps', stats.app2freq);
+    chartModules = makeChart('chartModules', stats.mod2freq);
+    chartPays = makeChart('chartPays', stats.pay2freq);
+    chartLangues = makeChart('chartLangues', stats.lan2freq);
+    chartUsers = makeChart('chartUsers', stats.use2freq);
+    chartAgents = makeChart('chartAgents', stats.age2freq);
+
+    chartTime = makeTimeChart('chartTime', stats.day2traces);
+}
+
+function updateCharts(filter) {
+    for (x in appdata.day2traces) appdata.day2traces[x] = 0;
+    stats = summarize(filter, appdata.appdata, appdata.day2traces);
+
+    upd(chartApps, stats.app2freq);
+    upd(chartModules, stats.mod2freq);
+    upd(chartPays, stats.pay2freq);
+    upd(chartLangues, stats.lan2freq);
+    upd(chartUsers, stats.use2freq);
+    upd(chartAgents, stats.age2freq);   
+    upd(chartTime, stats.day2traces);
+}
+
+function upd(chart, s) {
+    chart.data.labels = Object.keys(s);
+    chart.data.datasets[0].data = Object.values(s);
+    chart.update();
+}
+
+function summarize(filter, data, day2traces){
+    var app2freq = {};
+    var mod2freq = {};
+    var pay2freq = {};
+    var lan2freq = {};
+    var use2freq = {};
+    var age2freq = {};
+
+    for (var {date:d, app:a, module:m, ip:i, agent:ag, country:c, lang:l} of data) {
+        if (filter.app.includes(a) && filter.mod.includes(m) && filter.pay.includes(c) && filter.lan.includes(l)) {
+            if (!Object.keys(app2freq).includes(a)) app2freq[a]=0;
+            app2freq[a]++;
+    
+            if (!Object.keys(mod2freq).includes(m)) mod2freq[m]=0;
+            mod2freq[m]++;
+    
+            if (!Object.keys(pay2freq).includes(c)) pay2freq[c]=0;
+            pay2freq[c]++;
+    
+            if (!Object.keys(lan2freq).includes(l)) lan2freq[l]=0;
+            lan2freq[l]++;
+    
+            if (!Object.keys(use2freq).includes(i)) use2freq[i]=0;
+            use2freq[i]++;
+    
+            if (!Object.keys(age2freq).includes(ag)) age2freq[ag]=0;
+            age2freq[ag]++;
+    
+            var df = d.slice(0,10);
+            if (Object.keys(day2traces).includes(df)) day2traces[df]++;
+        }
+    }
+    return {
+        'app2freq':app2freq,
+        'mod2freq':mod2freq,
+        'pay2freq':pay2freq,
+        'lan2freq':lan2freq,
+        'use2freq':use2freq,
+        'age2freq':age2freq,
+        'day2traces':day2traces
+    }
+}
+
+
+function makeChart(canvasName, stats) {
+    var data = {
+        labels: Object.keys(stats),
+        datasets: [{
+          label: canvasName,
+          data: Object.values(stats),
+          backgroundColor: COLORS,
+          hoverOffset: 4
+        }]
+      };
+    
+    const config = {
+        type: 'doughnut',
+        data: data,
+        options: {
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'bottom'
+                }
+            }
+        }
+    };
+    
+    const myChart = new Chart(
+        document.getElementById(canvasName),
+        config
+      );
+    
+    return myChart
+}
+
+
+// DISPLAY TIME CHART
+
+function makeTimeChart(canvasName, day2traces) {
+    const labels = Object.keys(day2traces);
+    
+      const data = {
+        labels: labels,
+        datasets: [{
+          label: canvasName,
+          backgroundColor: 'rgb(255, 99, 132)',
+          borderColor: 'rgb(255, 99, 132)',
+          data: Object.values(day2traces),
+        }]
+      };
+    
+      const config = {
+        type: 'line',
+        data: data,
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+          }
+      };
+
+      const myChart = new Chart(
+        document.getElementById(canvasName),
+        config
+      );
+
+    return myChart
+}
+
+
+
+//////////////////////////////////
+
+const COLORS = [
+    '#4dc9f6',
+    '#f67019',
+    '#f53794',
+    '#537bc4',
+    '#acc236',
+    '#166a8f',
+    '#00a950',
+    '#58595b',
+    '#8549ba'
+  ];
\ No newline at end of file

templates/users/appStatVis.html

+{% extends "base.html" %}
+{% load static %}
+
+
+{% block styles %}
+    <link href="{% static 'styles/loading.css'%}" rel="stylesheet">
+{% endblock styles %}
+
+
+{% block content %}
+
+<h1>Statistiques d'utilisation des applications ALeM</h1>
+<p>(depuis le 7 août 2022)</p>
+<div class="container">
+    <div class="row">
+        <div class="col myChart">
+            <canvas id="chartApps"></canvas>
+        </div>
+        <div class="col myChart">
+            <canvas id="chartModules"></canvas>
+        </div>
+        <div class="col myChart">
+            <canvas id="chartPays"></canvas>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col myChart">
+            <canvas id="chartLangues"></canvas>
+        </div>
+        <div class="col myChart">
+            <canvas id="chartUsers"></canvas>
+        </div>
+        <div class="col myChart">
+            <canvas id="chartAgents"></canvas>
+        </div>
+    </div>
+</div>
+  
+<div style="height: 300px;position:relative">
+    <canvas id="chartTime"></canvas>
+</div>
+
+{% endblock content %}
+
+
+{% block javascript %}
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script type="text/javascript" src="{% static 'js/appStatVis.js' %}"></script>
+{% endblock %}
\ No newline at end of file

users/views.py

@@ -666,4 +666,33 @@ def getCountry(ip):
 
     data = response.json()
     return data['country']
-    
\ No newline at end of file
+
+
+@allowed_users(allowed_roles=['admin'])
+def appStatVis(request):
+    return render(request, 'users/appStatVis.html')
+
+@allowed_users(allowed_roles=['admin'])
+def getAppStats(request):
+
+    statlist = []
+    for s in appstats.objects.all():
+        statlist.append({
+            "date": s.date,
+            "app": s.app,
+            "module": s.module,
+            "ip": s.ip,
+            "agent": s.agent,
+            "country": s.country,
+            "lang": s.lang
+        })
+
+    daylist = np.arange('2022-08-07', np.datetime64('today', 'D')+np.timedelta64(1, 'D'), dtype='datetime64[D]')
+    
+    day2traces = {}
+    # Initialisation liste vide
+    for day in daylist:
+        day2traces[str(day)] = 0
+
+    data = { "appdata": statlist, "day2traces":day2traces }
+    return JsonResponse(data)
\ No newline at end of file