Add pie chart for MCQ/UCQ

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