Add pie chart for MCQ/UCQ

ui/package-lock.json

@@ -984,6 +984,11 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
+    "frappe-charts": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/frappe-charts/-/frappe-charts-1.6.2.tgz",
+      "integrity": "sha512-9TC3/+YVUi84yYoEbxFiSqu+1FQ5If/ydUNj6i8FRpwynd08t6a7RkS+IRJozAk6NfdL8/LVTTE1DUOjjKZZxg=="
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1616,8 +1621,7 @@
     "svelte": {
       "version": "3.48.0",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.48.0.tgz",
-      "integrity": "sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==",
+      "integrity": "sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ=="
-      "dev": true
     },
     "svelte-check": {
       "version": "2.7.0",
@@ -1635,6 +1639,15 @@
         "typescript": "*"
       }
     },
+    "svelte-frappe-charts": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/svelte-frappe-charts/-/svelte-frappe-charts-1.9.1.tgz",
+      "integrity": "sha512-cp2Sv+EXxdH5nIJ9I6ant9XP73Sc8CGXLzb0h8vpV0viH+zCCE+CEmo/cOiWL4JWNZrxRJ5UBdDGVk5nnORyKA==",
+      "requires": {
+        "frappe-charts": "^1.6.2",
+        "svelte": "^3.44.0"
+      }
+    },
     "svelte-hmr": {
       "version": "0.14.11",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.11.tgz",

ui/package.json

@@ -26,5 +26,8 @@
     "tslib": "^2.4.0",
     "typescript": "^4.6.4"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "svelte-frappe-charts": "^1.9.1"
+  }
 }

ui/src/components/CorrectionPieChart.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+ import Chart from 'svelte-frappe-charts';
+
+ let className = '';
+ export { className as class };
+
+ export let question = null;
+
+ function refreshProposals() {
+     let req = question.getProposals();
+
+     req.then((proposals) => {
+         const proposal_idx = { };
+         for (const proposal of proposals) {
+             data.labels.push(proposal.label);
+             data.datasets[0].values.push(0);
+             proposal_idx[proposal.id] = new String(data.labels.length - 1);
+         }
+
+         req_responses = refreshResponses();
+         req_responses.then((responses) => {
+             for (const res of responses) {
+                 data.datasets[0].values[proposal_idx[res.value]] += 1;
+             }
+         });
+     });
+
+     return req;
+ }
+ let req_proposals = refreshProposals();
+ let req_responses = null;
+
+ let data = {
+     labels: [],
+     datasets: [
+         {
+             values: []
+         }
+     ]
+   };
+</script>
+
+<div class="{className}">
+    {#await req_proposals}
+        <div class="text-center mt-4">
+            <div class="spinner-border text-primary mx-3" role="status"></div>
+            <span>Récupération des propositions&hellip;</span>
+        </div>
+    {:then}
+        {#await req_responses}
+            <div class="text-center mt-4">
+                <div class="spinner-border text-primary mx-3" role="status"></div>
+                <span>Récupération des réponses&hellip;</span>
+            </div>
+        {:then}
+            <Chart data={data} type="pie" maxSlices="9" />
+        {/await}
+    {/await}
+</div>

ui/src/routes/surveys/[sid]/responses/[rid].svelte

@@ -13,6 +13,7 @@
 
 <script lang="ts">
  import Correction from '../../../../components/Correction.svelte';
+ import CorrectionPieChart from '../../../../components/CorrectionPieChart.svelte';
  import CorrectionReference from '../../../../components/CorrectionReference.svelte';
  import SurveyBadge from '../../../../components/SurveyBadge.svelte';
  import QuestionHeader from '../../../../components/QuestionHeader.svelte';
@@ -22,6 +23,7 @@
  export let surveyP;
  export let rid;
 
+ let showChart = false;
  let showResponses = false;
  let showStudent = false;
  let notCorrected = false;
@@ -106,6 +108,18 @@
                             {/if}
                         </button>
                     {/if}
+                    {#if question.kind == "ucq" || question.kind == "mcq"}
+                        <button
+                            type="button"
+                            class="btn btn-sm float-end mx-1"
+                            class:btn-outline-info={!showChart}
+                            class:btn-info={showChart}
+                            on:click={() => showChart = !showChart}
+                            title="Afficher les résultats"
+                        >
+                            <i class="bi bi-bar-chart-line-fill"></i>
+                        </button>
+                    {/if}
                     <button
                         type="button"
                         class="btn btn-sm float-end mx-1"
@@ -137,6 +151,12 @@
                         templates={correctionTemplates}
                     />
                 {/if}
+                {#if showChart}
+                    <CorrectionPieChart
+                        {question}
+                        class="card-body"
+                    />
+                {/if}
             </div>
 
             <Correction