From 82c50438a64b1d92d218604df9fdf933863de4ca Mon Sep 17 00:00:00 2001 From: Alexandre Monney Date: Fri, 13 Dec 2024 11:24:16 +0100 Subject: [PATCH] feat(orga): add description on statistics page Co-authored-by: Vincent Hardouin --- orga/app/components/statistics/index.gjs | 8 +++- orga/app/styles/components/statistics.scss | 48 +++++++++++-------- .../components/statistics/index-test.gjs | 19 +++++++- orga/translations/en.json | 1 + orga/translations/fr.json | 1 + orga/translations/nl.json | 1 + 6 files changed, 57 insertions(+), 21 deletions(-) diff --git a/orga/app/components/statistics/index.gjs b/orga/app/components/statistics/index.gjs index 137871def56..16936117d06 100644 --- a/orga/app/components/statistics/index.gjs +++ b/orga/app/components/statistics/index.gjs @@ -94,6 +94,12 @@ export default class Statistics extends Component { {{this.extractedDate}} +
+

+ {{t "pages.statistics.description" htmlSafe="true"}} +

+
+
-
+
diff --git a/orga/app/styles/components/statistics.scss b/orga/app/styles/components/statistics.scss index 07e5bf0719e..fd1185729f3 100644 --- a/orga/app/styles/components/statistics.scss +++ b/orga/app/styles/components/statistics.scss @@ -1,25 +1,35 @@ -.statistics-page__header { - display: flex; - gap: var(--pix-spacing-2x); - align-items: baseline; - margin-bottom: var(--pix-spacing-8x); -} +.statistics-page{ + &__header { + display: flex; + gap: var(--pix-spacing-2x); + align-items: baseline; + margin-bottom: var(--pix-spacing-8x); + } -.statistics-page-header__date { - @extend %pix-body-xs; -} + &__info { + margin-bottom: var(--pix-spacing-8x); + } + + &__filter { + display: flex; + gap: var(--pix-spacing-4x); + align-items: end; + margin-bottom: var(--pix-spacing-8x); + } -.statistics-page__section { - tbody > tr { - &:nth-child(odd) { - background-color: var(--pix-neutral-20); + &__cover-rate { + tbody > tr { + &:nth-child(odd) { + background-color: var(--pix-neutral-20); + } } } -} -.statistics-page__filter { - display: flex; - gap: var(--pix-spacing-4x); - align-items: end; - margin-bottom: var(--pix-spacing-8x); + &-header__date { + @extend %pix-body-xs; + } + + &-info__paragraph { + @extend %pix-body-m; + } } diff --git a/orga/tests/integration/components/statistics/index-test.gjs b/orga/tests/integration/components/statistics/index-test.gjs index 40459b160c2..e764a99f88f 100644 --- a/orga/tests/integration/components/statistics/index-test.gjs +++ b/orga/tests/integration/components/statistics/index-test.gjs @@ -1,4 +1,4 @@ -import { clickByName, render } from '@1024pix/ember-testing-library'; +import { clickByName, getByTextWithHtml, render } from '@1024pix/ember-testing-library'; import Service from '@ember/service'; import { click } from '@ember/test-helpers'; import dayjs from 'dayjs'; @@ -75,6 +75,23 @@ module('Integration | Component | Statistics | Index', function (hooks) { assert.ok(screen.getByRole('cell', { name: t('pages.statistics.level.novice') })); }); + test('it should display table description', async function (assert) { + //given + const model = { + data: [], + }; + + //when + await render(); + + //then + assert.ok( + getByTextWithHtml( + 'Le tableau ci-dessous vous permet de visualiser le positionnement de vos participants par sujet.
Le positionnement rend compte du niveau moyen de vos participants sur le niveau maximum qu’ils auraient pu atteindre.
Ces données tiennent compte de toutes les participations partagées dans le cadre des campagnes d’évaluation non supprimées de votre organisation.', + ), + ); + }); + module('pagination', function () { test('should have pagination on page', async function (assert) { //given diff --git a/orga/translations/en.json b/orga/translations/en.json index d64171bbe46..0764ce9a681 100644 --- a/orga/translations/en.json +++ b/orga/translations/en.json @@ -1464,6 +1464,7 @@ "statistics": { "title": "Statistics", "before-date": "on", + "description": "The table below shows how your participants are positioned by subject.'
' Positioning reflects the average level of your participants in relation to the maximum level they could have reached.'
' This data takes into account all participations shared as part of your organisation's evaluation campaigns that have not been deleted.", "gauge": { "label": "On the topic, your participants achieved a level of {userLevel} out of a maximum reachable level of {tubeLevel}." }, diff --git a/orga/translations/fr.json b/orga/translations/fr.json index 6bbfb2479f7..d3730c75250 100644 --- a/orga/translations/fr.json +++ b/orga/translations/fr.json @@ -1470,6 +1470,7 @@ "statistics": { "title": "Statistiques", "before-date": "au", + "description": "Le tableau ci-dessous vous permet de visualiser le positionnement de vos participants par sujet.'
' Le positionnement rend compte du niveau moyen de vos participants sur le niveau maximum qu’ils auraient pu atteindre.'
' Ces données tiennent compte de toutes les participations partagées dans le cadre des campagnes d’évaluation non supprimées de votre organisation.", "gauge": { "label": "Sur le sujet vos participants ont obtenu un niveau de {userLevel} sur un niveau maximum atteignable de {tubeLevel}." }, diff --git a/orga/translations/nl.json b/orga/translations/nl.json index fac6c1e0834..6a3a6987a8e 100644 --- a/orga/translations/nl.json +++ b/orga/translations/nl.json @@ -1465,6 +1465,7 @@ "select-label": "Domein", "title": "Statistieken", "before-date": "op", + "description": "De tabel hieronder laat zien hoe je deelnemers per onderwerp zijn gepositioneerd.'
' Positionering geeft het gemiddelde niveau van je deelnemers weer ten opzichte van het maximale niveau dat ze hadden kunnen bereiken.'
' Deze gegevens houden rekening met alle deelnames die zijn gedeeld als onderdeel van de evaluatiecampagnes van je organisatie en die niet zijn verwijderd.", "gauge": { "label": "Je deelnemers behaalden een {userLevel} op een maximaal haalbaar niveau van {tubeLevel}." },
{{t "pages.statistics.table.caption"}}