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}}</span> </div> + <section class="statistics-page__info"> + <p class="statistics-page-info__paragraph"> + {{t "pages.statistics.description" htmlSafe="true"}} + </p> + </section> + <section class="statistics-page__filter"> <PixSelect @onChange={{this.handleDomainFilter}} @@ -109,7 +115,7 @@ export default class Statistics extends Component { }}</PixButton> </section> - <section class="statistics-page__section"> + <section class="statistics-page__cover-rate"> <table class="panel"> <caption class="screen-reader-only">{{t "pages.statistics.table.caption"}}</caption> <thead> diff --git a/orga/app/styles/components/statistics.scss b/orga/app/styles/components/statistics.scss index 07e5bf0719e..81fdaaf00f3 100644 --- a/orga/app/styles/components/statistics.scss +++ b/orga/app/styles/components/statistics.scss @@ -1,18 +1,37 @@ -.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; -} + &-header__date { + @extend %pix-body-xs; + } + + &__section { + tbody > tr { + &:nth-child(odd) { + background-color: var(--pix-neutral-20); + } + } + } + + &__info { + margin-bottom: var(--pix-spacing-8x); + } + + &-info__paragraph { + @extend %pix-body-m; + + } -.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); + } } } } diff --git a/orga/tests/integration/components/statistics/index-test.gjs b/orga/tests/integration/components/statistics/index-test.gjs index 40459b160c2..7d00d6a11a5 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,19 @@ 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(<template><Statistics @model={{model}} /></template>); + + //then + assert.ok(getByTextWithHtml(t('pages.statistics.description'))); + }); + 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.'<br>' Positioning reflects the average level of your participants in relation to the maximum level they could have reached.'<br>' 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.'<br>' Le positionnement rend compte du niveau moyen de vos participants sur le niveau maximum qu’ils auraient pu atteindre.'<br>' 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.'<br>' Positionering geeft het gemiddelde niveau van je deelnemers weer ten opzichte van het maximale niveau dat ze hadden kunnen bereiken.'<br>' 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}." },