Add pie chart for MCQ/UCQ

This commit is contained in:
nemunaire 2022-05-01 12:59:53 +02:00
parent 9854c2dbab
commit e852f7c76a
4 changed files with 98 additions and 3 deletions

17
ui/package-lock.json generated
View File

@ -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==",
"dev": true
"integrity": "sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ=="
},
"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",

View File

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

View File

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

View File

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