Commit 2df1cc4a authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

update stats vis

parent 0e5b6cdb
var appdata = [];
var stats = {};
var filter= {app:[],mod:[],pay:[],lan:[],use:[],age:[]}
var initfilter = {app:[],mod:[],pay:[],lan:[],use:[],age:[]}
getStats()
......@@ -18,16 +19,73 @@ async function getStats() {
appdata = await response.json();
console.log(appdata);
document.getElementById('nbTracesTotal').innerText = appdata.appdata.length;
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);
if (!filter.app.includes(a)) {
filter.app.push(a);
initfilter.app.push(a);
}
if (!filter.mod.includes(m)) {
filter.mod.push(m);
initfilter.mod.push(m);
}
if (!filter.pay.includes(c)) {
filter.pay.push(c);
initfilter.pay.push(c);
}
if (!filter.lan.includes(l)) {
filter.lan.push(l);
initfilter.lan.push(l);
}
if (!filter.use.includes(i)) {
filter.use.push(i);
initfilter.use.push(i);
}
if (!filter.age.includes(ag)) {
filter.age.push(ag);
initfilter.age.push(ag);
}
}
makeCharts(filter)
}
function select(param) {
if ( initfilter.app.includes(param) ) {
if ( filter.app.length == 1 ) filter.app = initfilter.app;
else {
filter.app = [param]
}
} else if ( initfilter.mod.includes(param) ) {
if ( filter.mod.length == 1 ) filter.mod = initfilter.mod;
else {
filter.mod = [param]
}
} else if ( initfilter.pay.includes(param) ) {
if ( filter.pay.length == 1 ) filter.pay = initfilter.pay;
else {
filter.pay = [param]
}
} else if ( initfilter.lan.includes(param) ) {
if ( filter.lan.length == 1 ) filter.lan = initfilter.lan;
else {
filter.lan = [param]
}
} else if ( initfilter.use.includes(param) ) {
if ( filter.use.length == 1 ) filter.use = initfilter.use;
else {
filter.use = [param]
}
} else if ( initfilter.age.includes(param) ) {
if ( filter.age.length == 1 ) filter.age = initfilter.age;
else {
filter.age = [param]
}
}
updateCharts(filter);
}
var chartApps;
var chartModules;
var chartPays;
......@@ -43,8 +101,8 @@ function makeCharts(filter) {
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);
chartUsers = makeChart('chartUsers', stats.use2freq, false);
chartAgents = makeChart('chartAgents', stats.age2freq, false);
chartTime = makeTimeChart('chartTime', stats.day2traces);
}
......@@ -75,6 +133,7 @@ function summarize(filter, data, day2traces){
var lan2freq = {};
var use2freq = {};
var age2freq = {};
var cpt = 0;
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)) {
......@@ -98,8 +157,11 @@ function summarize(filter, data, day2traces){
var df = d.slice(0,10);
if (Object.keys(day2traces).includes(df)) day2traces[df]++;
cpt++
}
}
document.getElementById('nbTraces').innerText = cpt;
return {
'app2freq':app2freq,
'mod2freq':mod2freq,
......@@ -111,8 +173,7 @@ function summarize(filter, data, day2traces){
}
}
function makeChart(canvasName, stats) {
function makeChart(canvasName, stats, legend=true) {
var data = {
labels: Object.keys(stats),
datasets: [{
......@@ -129,10 +190,20 @@ function makeChart(canvasName, stats) {
options: {
plugins: {
legend: {
display: true,
display: legend,
position: 'bottom'
}
},
onClick: (e, activeEls) => {
let datasetIndex = activeEls[0].datasetIndex;
let dataIndex = activeEls[0].index;
let datasetLabel = e.chart.data.datasets[datasetIndex].label;
let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
let label = e.chart.data.labels[dataIndex];
console.log("In click", datasetLabel, label, value);
select(label);
}
}
};
......@@ -140,11 +211,12 @@ function makeChart(canvasName, stats) {
document.getElementById(canvasName),
config
);
return myChart
}
// DISPLAY TIME CHART
function makeTimeChart(canvasName, day2traces) {
......
......@@ -11,6 +11,7 @@
<h1>Statistiques d'utilisation des applications ALeM</h1>
<p>(depuis le 7 août 2022)</p>
<strong><span id="nbTraces"></span> traces sélectionnées sur <span id="nbTracesTotal"></span> traces enregistrées.</strong>
<div class="container">
<div class="row">
<div class="col myChart">
......
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