[FEATURE] Ajouter des descriptions dans la page statistiques (PIX-15457)

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>

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;
+  }
 }

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(<template><Statistics @model={{model}} /></template>);
+
+    //then
+    assert.ok(
+      getByTextWithHtml(
+        '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.',
+      ),
+    );
+  });
+
   module('pagination', function () {
     test('should have pagination on page', async function (assert) {
       //given

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}."
       },

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}."
       },

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}."
       },