Display graph on admin page
This commit is contained in:
parent
a9384730ac
commit
8acdf30ba4
@ -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}">
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 …</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 …</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>
|
||||
|
||||
Reference in New Issue
Block a user