update stats vis

static/js/appStatVis.js

 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) {

templates/users/appStatVis.html

@@ -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">