Commit 0e5b6cdb authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout interface visualisation appStats

parent f1734dda
......@@ -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),
......
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
{% 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
......@@ -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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment