Skip to content

Navigation Menu

Sign in
Sign up

feat(results): average, median, range and Net Promoter Score for scale questions #3635

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
global-prog wants to merge 3 commits into nextcloud:main
base: main
Choose a base branch
Loading
from global-prog:contrib/response-statistics
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 151 additions & 0 deletions src/components/Results/ResultsSummary.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,44 @@
</ol>
</div>

<!-- Summary figures for scale questions, shown above the per-value bars -->
<dl v-if="numericStats" class="question-summary__figures">
<div>
<dt>{{ t('forms', 'Average') }}</dt>
<dd>{{ numericStats.mean }}</dd>
</div>
<div>
<dt>{{ t('forms', 'Median') }}</dt>
<dd>{{ numericStats.median }}</dd>
</div>
<div>
<dt>{{ t('forms', 'Lowest') }}</dt>
<dd>{{ numericStats.min }}</dd>
</div>
<div>
<dt>{{ t('forms', 'Highest') }}</dt>
<dd>{{ numericStats.max }}</dd>
</div>
<div v-if="npsScore !== null">
<dt>{{ t('forms', 'Net Promoter Score') }}</dt>
<dd>
{{ npsScore }}
<span class="question-summary__figures-detail">
{{
t(
'forms',
'{promoters}% promoters, {detractors}% detractors',
{
promoters: npsBreakdown.promoters,
detractors: npsBreakdown.detractors,
},
)
}}
</span>
</dd>
</div>
</dl>

<!-- Answers with countable results for visualization -->
<ol
v-else-if="answerTypes[question.type].predefined"
Expand Down Expand Up @@ -613,9 +651,97 @@ export default defineComponent({
return answersModels
})

/**
* Every numeric answer given to this question.
*/
const numericValues = computed<number[]>(() => {
if (props.question.type !== 'linearscale') {
return []
}
const values: number[] = []
for (const submission of props.submissions) {
for (const answer of submission.answers ?? []) {
if (answer.questionId !== props.question.id) {
continue
}
const value = parseFloat(answer.text)
if (!isNaN(value)) {
values.push(value)
}
}
}
return values
})

/**
* Summary statistics for a scale question.
*
* The median is reported next to the average because a single extreme answer moves
* an average a long way at the response counts most forms see.
*/
const numericStats = computed(() => {
const values = numericValues.value
if (values.length === 0) {
return null
}
const sorted = [...values].sort((a, b) => a - b)
const middle = Math.floor(sorted.length / 2)
const median =
sorted.length % 2
? sorted[middle]
: (sorted[middle - 1] + sorted[middle]) / 2
const round = (value: number) => Math.round(value * 100) / 100

return {
count: values.length,
mean: round(values.reduce((a, b) => a + b, 0) / values.length),
median: round(median),
min: round(sorted[0]),
max: round(sorted[sorted.length - 1]),
}
})

/**
* Promoter and detractor shares for a question shaped like a Net Promoter Score
* question, i.e. a 0-10 scale, using the usual 9-10 / 7-8 / 0-6 split.
*/
const npsBreakdown = computed(() => {
if (
props.question.extraSettings?.optionsLowest !== 0
|| props.question.extraSettings?.optionsHighest !== 10
) {
return null
}
const values = numericValues.value
if (values.length === 0) {
return null
}
const share = (count: number) =>
Math.round((count / values.length) * 100)
return {
promoters: share(values.filter((value) => value >= 9).length),
passives: share(
values.filter((value) => value >= 7 && value <= 8).length,
),
detractors: share(values.filter((value) => value <= 6).length),
}
})

/**
* The Net Promoter Score itself: promoters minus detractors.
*/
const npsScore = computed(() =>
npsBreakdown.value
? npsBreakdown.value.promoters - npsBreakdown.value.detractors
: null,
)

return {
IconFile,
answerTypes,
numericStats,
npsBreakdown,
npsScore,
questionTypeLabel,
questionOptions,
rankingStats,
Expand Down Expand Up @@ -768,4 +894,29 @@ export default defineComponent({
}
}
}

.question-summary__figures {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0 0 8px;

dt {
color: var(--color-text-maxcontrast);
font-size: 0.9em;
}

dd {
font-size: 1.2em;
font-weight: bold;
margin: 0;
}

&-detail {
color: var(--color-text-maxcontrast);
display: block;
font-size: 0.75em;
font-weight: normal;
}
}
</style>
Loading

AltStyle によって変換されたページ (->オリジナル) /