111 lines
3.4 KiB
Svelte
111 lines
3.4 KiB
Svelte
<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(secret);
|
|
|
|
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 = question.getResponses(secret);
|
|
req_responses.then((responses) => {
|
|
for (const res of responses) {
|
|
const rsplt = res.value.split(',');
|
|
for (const r of rsplt) {
|
|
data.datasets[0].values[proposal_idx[r]] += 1;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
return req;
|
|
}
|
|
let req_proposals = null;
|
|
export let proposals = null;
|
|
export let secret = null;
|
|
let req_responses = null;
|
|
let mean = null;
|
|
|
|
export let data = {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
values: []
|
|
}
|
|
]
|
|
};
|
|
|
|
if (!proposals) {
|
|
if (question.kind && (question.kind == "int" || question.kind.startsWith("list"))) {
|
|
req_responses = question.getResponses(secret);
|
|
req_responses.then((responses) => {
|
|
const values = [];
|
|
const proposal_idx = { };
|
|
for (const response of responses) {
|
|
let ress = [];
|
|
if (question.kind.startsWith("list")) {
|
|
ress = response.value.split('\n');
|
|
} else {
|
|
ress.push(response.value);
|
|
}
|
|
for (const res of ress) {
|
|
if (res == "") continue;
|
|
if (proposal_idx[res]) {
|
|
data.datasets[0].values[proposal_idx[res]] += 1;
|
|
values.push(Number(res));
|
|
} else {
|
|
data.labels.push(res);
|
|
data.datasets[0].values.push(1);
|
|
proposal_idx[res] = new String(data.labels.length - 1);
|
|
}
|
|
}
|
|
}
|
|
if (question.kind == "int") {
|
|
mean = Math.trunc(values.reduce((p, e) => p + e) / values.length*10)/10;
|
|
}
|
|
});
|
|
} else {
|
|
req_proposals = refreshProposals();
|
|
}
|
|
}
|
|
</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…</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…</span>
|
|
</div>
|
|
{:then}
|
|
{#if mean !== null}
|
|
<div class="text-center">
|
|
Moyenne représentative : <strong>{mean}</strong>
|
|
</div>
|
|
{/if}
|
|
{#if question.kind === "mcq"}
|
|
<Chart data={data} type="bar" />
|
|
{:else if question.kind === "list"}
|
|
<Chart data={data} type="pie" />
|
|
{:else}
|
|
<Chart data={data} type="pie" maxSlices="9" />
|
|
{/if}
|
|
{/await}
|
|
{/await}
|
|
</div>
|