Display graph on admin page

ui/src/components/CorrectionPieChart.svelte

@@ -31,38 +31,41 @@
      return req;
  }
  let req_proposals = null;
+ export let proposals = null;
  let req_responses = null;
  let mean = null;
 
- if (question.kind == "int") {
-     req_responses = question.getResponses();
-     req_responses.then((responses) => {
-         const values = [];
-         const proposal_idx = { };
-         for (const res of responses) {
-             if (proposal_idx[res.value]) {
-                 data.datasets[0].values[proposal_idx[res.value]] += 1;
-                 values.push(Number(res.value));
-             } else {
-                 data.labels.push(res.value);
-                 data.datasets[0].values.push(1);
-                 proposal_idx[res.value] = new String(data.labels.length - 1);
-             }
-         }
-         mean = Math.trunc(values.reduce((p, e) => p + e) / values.length*10)/10;
-     });
- } else {
-     req_proposals = refreshProposals();
- }
-
- let data = {
+ export let data = {
      labels: [],
      datasets: [
          {
              values: []
          }
      ]
-   };
+ };
+
+ if (!proposals) {
+     if (question.kind == "int") {
+         req_responses = question.getResponses();
+         req_responses.then((responses) => {
+             const values = [];
+             const proposal_idx = { };
+             for (const res of responses) {
+                 if (proposal_idx[res.value]) {
+                     data.datasets[0].values[proposal_idx[res.value]] += 1;
+                     values.push(Number(res.value));
+                 } else {
+                     data.labels.push(res.value);
+                     data.datasets[0].values.push(1);
+                     proposal_idx[res.value] = new String(data.labels.length - 1);
+                 }
+             }
+             mean = Math.trunc(values.reduce((p, e) => p + e) / values.length*10)/10;
+         });
+     } else {
+         req_proposals = refreshProposals();
+     }
+ }
 </script>
 
 <div class="{className}">

ui/src/components/QuestionProposals.svelte

@@ -35,7 +35,8 @@
         {#if kind == 'mcq'}
             <input
                 type="checkbox"
-                class="form-check-input"
+                class:btn-check={live}
+                class:form-check-input={!live}
                 disabled={readonly}
                 name={prefixid + 'proposal' + proposal.id_question}
                 id={prefixid + 'p' + proposal.id}
@@ -90,7 +91,8 @@
                 class:form-check-label={!live}
                 class:btn={live}
                 class:btn-lg={live}
-                class:btn-primary={live}
+                class:btn-primary={live && value.indexOf(proposal.id.toString()) != -1}
+                class:btn-outline-primary={live && value.indexOf(proposal.id.toString()) == -1}
                 for={prefixid + 'p' + proposal.id}
             >
                 {proposal.label}

ui/src/routes/surveys/[sid]/admin.svelte

@@ -11,6 +11,7 @@
 
 <script>
  import { user } from '../../../stores/user';
+ import CorrectionPieChart from '../../../components/CorrectionPieChart.svelte';
  import SurveyAdmin from '../../../components/SurveyAdmin.svelte';
  import SurveyBadge from '../../../components/SurveyBadge.svelte';
  import { getSurvey } from '../../../lib/surveys';
@@ -84,6 +85,52 @@
      responsesbyid = tmp;
  }
 
+ let graph_data = {labels:[]};
+ async function reset_graph_data(questionid) {
+     if (questionid) {
+         const labels = [];
+         const flabels = [];
+
+         let question = null;
+         for (const q of await req_questions) {
+             if (q.id == current_question) {
+                 question = q;
+             }
+         }
+
+         if (question) {
+             for (const p of await question.getProposals()) {
+                 flabels.push(p.id.toString());
+                 labels.push(p.label);
+             }
+         }
+
+         graph_data = {
+             labels,
+             flabels,
+             datasets: [
+                 {
+                     values: labels.map(() => 0)
+                 }
+             ]
+         }
+     }
+
+     if (current_question && responses[current_question] && graph_data.labels.length != 0) {
+         const values = graph_data.datasets[0].values.map(() => 0);
+
+         for (const u in responses[current_question]) {
+             const res = responses[current_question][u];
+             for (const r of res.split(',')) {
+                 let idx = graph_data.flabels.indexOf(r);
+                 values[idx] += 1;
+             }
+         }
+
+         graph_data.datasets[0].values = values;
+     }
+ }
+
  let asks = [];
  function wsconnect() {
      if (ws !== null) return;
@@ -127,11 +174,14 @@
              } else {
                  timer_end = null;
              }
+             reset_graph_data(data.question);
          } else if (data.action && data.action == "stats") {
              wsstats = data.stats;
          } else if (data.action && data.action == "new_response") {
-             if (!responses[data.question]) responses[data.question] = {};
+             if (!responses[data.question]) responses[data.question] = { };
              responses[data.question][data.user] = data.value;
+
+             reset_graph_data();
          } else if (data.action && data.action == "new_ask") {
              asks.push({"id": data.question, "content": data.value, "userid": data.user});
              asks = asks;
@@ -258,7 +308,6 @@
                                     class="btn btn-sm"
                                     class:btn-outline-success={!corrected}
                                     class:btn-success={corrected}
-                                    disabled={!current_question || !ws_up}
                                     on:click={() => { corrected = !corrected } }
                                     title="La prochaine question est affichée corrigée"
                                 >
@@ -419,6 +468,17 @@
                                         <span>Chargement des propositions &hellip;</span>
                                     </div>
                                 {:then proposals}
+                                    {#if current_question == question.id}
+                                        <CorrectionPieChart
+                                            {question}
+                                            {proposals}
+                                            data={graph_data}
+                                        />
+                                    {:else}
+                                        <CorrectionPieChart
+                                            {question}
+                                        />
+                                    {/if}
                                     <div class="card mb-4">
                                         <table class="table table-sm table-striped table-hover mb-0">
                                             <tbody>
@@ -446,6 +506,17 @@
                                         <span>Chargement des propositions &hellip;</span>
                                     </div>
                                 {:then proposals}
+                                    {#if current_question == question.id}
+                                        <CorrectionPieChart
+                                            {question}
+                                            {proposals}
+                                            data={graph_data}
+                                        />
+                                    {:else}
+                                        <CorrectionPieChart
+                                            {question}
+                                        />
+                                    {/if}
                                     <div class="card mb-4">
                                         <table class="table table-sm table-striped table-hover mb-0">
                                             <tbody>