feat(orga): create statistics component

Co-authored-by: Vincent Hardouin <[email protected]>

orga/app/components/statistics/index.gjs

@@ -0,0 +1,47 @@
+import { t } from 'ember-intl';
+
+import Header from '../table/header';
+import CoverRateGauge from './cover-rate-gauge';
+import TagLevel from './tag-level';
+
+const analysisByTubes = (model) => {
+  return model.data.sort(
+    (a, b) => a.competence_code.localeCompare(b.competence_code) || a.sujet.localeCompare(b.sujet),
+  );
+};
+
+<template>
+  <div class="statistics-page-header">
+    <h1 class="page-title">{{t "pages.statistics.title"}}</h1>
+  </div>
+
+  <section class="statistics">
+    <table class="panel">
+      <caption class="screen-reader-only">{{t "pages.statistics.table.caption"}}</caption>
+      <thead>
+        <tr>
+          <Header @size="wide" scope="col">{{t "pages.statistics.table.headers.skills"}}</Header>
+          <Header @size="medium" scope="col">{{t "pages.statistics.table.headers.subjects"}}</Header>
+          <Header @size="medium" @align="center" scope="col">{{t "pages.statistics.table.headers.cover-rate"}}</Header>
+          <Header @align="center" @size="medium" scope="col">{{t
+              "pages.statistics.table.headers.reached-level"
+            }}</Header>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each (analysisByTubes @model) as |line|}}
+          <tr>
+            <td>{{line.competence_code}} {{line.competence}}</td>
+            <td>{{line.sujet}}</td>
+            <td>
+              <CoverRateGauge @userLevel={{line.niveau_par_user}} @tubeLevel={{line.niveau_par_sujet}} />
+            </td>
+            <td class="table__column--center">
+              <TagLevel @level={{line.niveau_par_user}} />
+            </td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </section>
+</template>

orga/app/styles/app.scss

@@ -51,6 +51,8 @@
 @import 'components/sup-organization-participant/replace-students-modal';
 @import 'components/import-banner';
 @import 'components/import-information-banner';
+@import 'components/statistics';
+@import 'components/statistics/cover-rate-gauge';
 
 // pages
 @import 'pages/login';

orga/app/styles/components/statistics.scss

@@ -0,0 +1,15 @@
+.statistics-page-header {
+  display: flex;
+  gap: var(--pix-spacing-2x);
+  align-items: baseline;
+
+  &__date {
+    @extend %pix-body-xs;
+  }
+}
+
+tbody > tr {
+  &:nth-child(odd) {
+    background-color: var(--pix-neutral-20);
+  }
+}

orga/app/templates/authenticated/statistics.hbs

@@ -0,0 +1,3 @@
+{{page-title (t "pages.statistics.title")}}
+
+<Statistics::Index @model={{this.model}} />

orga/tests/integration/components/statistics/index-test.gjs

@@ -0,0 +1,62 @@
+import { render } from '@1024pix/ember-testing-library';
+import { t } from 'ember-intl/test-support';
+import Statistics from 'pix-orga/components/statistics/index';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | Statistics | Index', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('it should display title', async function (assert) {
+    //given
+    const model = {
+      data: [],
+    };
+
+    //when
+    const screen = await render(<template><Statistics @model={{model}} /></template>);
+
+    //then
+    assert.ok(screen.getByText(t('pages.statistics.title')));
+  });
+
+  test('it should display table headers', async function (assert) {
+    //given
+    const model = {
+      data: [],
+    };
+
+    //when
+    const screen = await render(<template><Statistics @model={{model}} /></template>);
+
+    //then
+    assert.ok(screen.getByRole('columnheader', { name: t('pages.statistics.table.headers.skills') }));
+    assert.ok(screen.getByRole('columnheader', { name: t('pages.statistics.table.headers.subjects') }));
+    assert.ok(screen.getByRole('columnheader', { name: t('pages.statistics.table.headers.reached-level') }));
+    assert.ok(screen.getByRole('columnheader', { name: t('pages.statistics.table.headers.cover-rate') }));
+  });
+
+  test('it should display rows data', async function (assert) {
+    //given
+    const model = {
+      data: [
+        {
+          competence_code: '2.1',
+          competence: 'Interagir',
+          sujet: 'Gérer ses contacts',
+          niveau_par_user: '1.30',
+          niveau_par_sujet: '1.50',
+        },
+      ],
+    };
+
+    //when
+    const screen = await render(<template><Statistics @model={{model}} /></template>);
+
+    //then
+    assert.ok(screen.getByRole('cell', { name: '2.1 Interagir' }));
+    assert.ok(screen.getByRole('cell', { name: 'Gérer ses contacts' }));
+    assert.ok(screen.getByRole('cell', { name: t('pages.statistics.level.novice') }));
+  });
+});