[FEATURE] Afficher les statistiques dans Pix Orga (PIX-15455)

api/src/prescription/organization-learner/application/organization-learners-controller.js

@@ -1,5 +1,6 @@
 import { NoProfileRewardsFoundError } from '../../../profile/domain/errors.js';
 import { usecases } from '../domain/usecases/index.js';
+import * as analysisByTubesSerializer from '../infrastructure/serializers/jsonapi/analysis-by-tubes-serializer.js';
 
 const getAttestationZipForDivisions = async function (request, h) {
   const organizationId = request.params.organizationId;
@@ -17,10 +18,11 @@ const getAttestationZipForDivisions = async function (request, h) {
   }
 };
 
-const getAnalysisByTubes = async function (request, h) {
+const getAnalysisByTubes = async function (request, h, dependencies = { analysisByTubesSerializer }) {
   const organizationId = request.params.organizationId;
   const result = await usecases.getAnalysisByTubes({ organizationId });
-  return h.response(result).code(200);
+  const serializedResult = dependencies.analysisByTubesSerializer.serialize(result);
+  return h.response(serializedResult).code(200);
 };
 
 const organizationLearnersController = {

api/src/prescription/organization-learner/infrastructure/serializers/jsonapi/analysis-by-tubes-serializer.js

@@ -0,0 +1,19 @@
+import { randomUUID } from 'node:crypto';
+
+import jsonapiSerializer from 'jsonapi-serializer';
+
+const { Serializer } = jsonapiSerializer;
+
+const serialize = function (analysisByTubes) {
+  return new Serializer('analysis-by-tubes', {
+    transform(analysisByTubes) {
+      return {
+        id: randomUUID(),
+        ...analysisByTubes,
+      };
+    },
+    attributes: ['data'],
+  }).serialize(analysisByTubes);
+};
+
+export { serialize };

api/tests/prescription/organization-learner/acceptance/application/organization-learner-route_test.js

@@ -109,11 +109,16 @@ describe('Prescription | Organization Learner | Acceptance | Application | Organ
         const response = await server.inject(options);
 
         // then
+        const expectedResult = {
+          data: {
+            attributes: {
+              data: 'expected-data',
+            },
+            type: 'analysis-by-tubes',
+          },
+        };
         expect(response.statusCode).to.equal(200);
-        expect(response.result).to.deep.equal({
-          data: expectedData,
-          status: 'success',
-        });
+        expect(response.result.data).to.deep.includes(expectedResult.data);
       });
     });
   });

api/tests/prescription/organization-learner/unit/application/organization-learners-controller_test.js

@@ -98,13 +98,19 @@ describe('Unit | Application | Organization-Learner | organization-learners-cont
     });
   });
 
-  describe('#getLearnersLevelsByTubes', function () {
+  describe('#getAnalysisByTubes', function () {
     it('should return data', async function () {
       // given
       const organizationId = 123;
 
+      const useCaseResult = Symbol('use-case-result');
       sinon.stub(usecases, 'getAnalysisByTubes');
-      usecases.getAnalysisByTubes.withArgs({ organizationId }).resolves();
+      usecases.getAnalysisByTubes.withArgs({ organizationId }).resolves(useCaseResult);
+      const analysisByTubesSerializer = {
+        serialize: sinon.stub(),
+      };
+      const expectedResult = Symbol('expected-result');
+      analysisByTubesSerializer.serialize.withArgs(useCaseResult).returns(expectedResult);
 
       const request = {
         params: {
@@ -113,9 +119,12 @@ describe('Unit | Application | Organization-Learner | organization-learners-cont
       };
 
       // when
-      const response = await organizationLearnersController.getAnalysisByTubes(request, hFake);
+      const response = await organizationLearnersController.getAnalysisByTubes(request, hFake, {
+        analysisByTubesSerializer,
+      });
 
       // then
+      expect(response.source).to.equal(expectedResult);
       expect(response.statusCode).to.equal(200);
     });
   });

api/tests/prescription/organization-learner/unit/infrastructure/serializers/jsonapi/analysis-by-tubes-serializer_test.js

@@ -0,0 +1,21 @@
+import * as serializer from '../../../../../../../src/prescription/organization-learner/infrastructure/serializers/jsonapi/analysis-by-tubes-serializer.js';
+import { expect } from '../../../../../../test-helper.js';
+
+describe('Unit | Serializer | JSONAPI | analysis-by-tubes-serializer', function () {
+  describe('#serialize', function () {
+    it('should convert an analysis-by-tubes object into JSON API data', function () {
+      // given
+      const analysisByTubes = { data: [{}] };
+      const expectedType = 'analysis-by-tubes';
+      const expectedData = analysisByTubes.data;
+
+      // when
+      const json = serializer.serialize(analysisByTubes);
+
+      // then
+      expect(json.data.type).to.equal(expectedType);
+      expect(json.data.attributes.data).to.deep.equal(expectedData);
+      expect(json.data.id).to.exist;
+    });
+  });
+});

orga/app/adapters/analysis-by-tube.js

@@ -0,0 +1,10 @@
+import ApplicationAdapter from './application';
+
+export default class AnalysisByTubeAdapter extends ApplicationAdapter {
+  urlForQueryRecord(query) {
+    const { organizationId } = query;
+    delete query.organizationId;
+
+    return `${this.host}/${this.namespace}/organizations/${organizationId}/organization-learners-level-by-tubes`;
+  }
+}

orga/app/components/layout/sidebar.gjs

@@ -122,18 +122,18 @@ export default class SidebarMenu extends Component {
           {{t "navigation.main.team"}}
         </PixNavigationButton>
 
-        {{#if this.shouldDisplayStatisticsEntry}}
-          <PixNavigationButton @route="authenticated.statistics" @icon="monitoring">
-            {{t "navigation.main.statistics"}}
-          </PixNavigationButton>
-        {{/if}}
-
         {{#if this.shouldDisplayPlacesEntry}}
           <PixNavigationButton @route="authenticated.places" @icon="seat">
             {{t "navigation.main.places"}}
           </PixNavigationButton>
         {{/if}}
 
+        {{#if this.shouldDisplayStatisticsEntry}}
+          <PixNavigationButton @route="authenticated.statistics" @icon="monitoring">
+            {{t "navigation.main.statistics"}}
+          </PixNavigationButton>
+        {{/if}}
+
         {{#if this.documentationUrl}}
           <PixNavigationButton href={{this.documentationUrl}} @target="_blank" rel="noopener noreferrer" @icon="book">
             {{t "navigation.main.documentation"}}

orga/app/components/statistics/cover-rate-gauge.gjs

@@ -0,0 +1,69 @@
+import { guidFor } from '@ember/object/internals';
+import { htmlSafe } from '@ember/template';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+const MAX_REACHABLE_LEVEL = 7;
+
+export default class CoverRateGauge extends Component {
+  get id() {
+    return guidFor(this);
+  }
+
+  get userLevel() {
+    return this.formatNumber(this.args.userLevel);
+  }
+
+  get tubeLevel() {
+    return this.formatNumber(this.args.tubeLevel);
+  }
+
+  formatNumber = (str) => {
+    const num = Number(str);
+    const oneDigitNum = num.toFixed(1);
+    if (oneDigitNum.toString().endsWith('0')) {
+      return Math.ceil(num);
+    }
+    return oneDigitNum;
+  };
+
+  getGaugeSizeStyle = (level, { withExtraPercentage }) => {
+    const gaugeSize = (level / MAX_REACHABLE_LEVEL) * 100;
+    return htmlSafe(`width: calc(${gaugeSize}% + ${withExtraPercentage ? 5 : 0}%)`);
+  };
+
+  <template>
+    <div class="cover-rate-gauge">
+      <div class="cover-rate-gauge__container">
+        <div
+          class="cover-rate-gauge__level cover-rate-gauge__level--tube-level"
+          style={{this.getGaugeSizeStyle this.tubeLevel withExtraPercentage=true}}
+        >
+          {{this.tubeLevel}}
+        </div>
+        <div class="cover-rate-gauge__background">
+          <label for={{this.id}} class="screen-reader-only">{{t
+              "pages.statistics.gauge.label"
+              userLevel=this.userLevel
+              tubeLevel=this.tubeLevel
+            }}</label>
+          <progress
+            class="cover-rate-gauge__progress"
+            id={{this.id}}
+            max={{this.tubeLevel}}
+            value={{this.userLevel}}
+            style={{this.getGaugeSizeStyle this.tubeLevel withExtraPercentage=false}}
+          >
+            {{this.userLevel}}
+          </progress>
+        </div>
+        <div
+          class="cover-rate-gauge__level cover-rate-gauge__level--user-level"
+          style={{this.getGaugeSizeStyle this.userLevel withExtraPercentage=true}}
+        >
+          {{this.userLevel}}
+        </div>
+      </div>
+    </div>
+  </template>
+}

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-page__section">
+    <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.topics"}}</Header>
+          <Header @size="medium" @align="center" scope="col">{{t "pages.statistics.table.headers.positioning"}}</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/components/statistics/tag-level.gjs

@@ -0,0 +1,23 @@
+import PixTag from '@1024pix/pix-ui/components/pix-tag';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+const MAX_LEVEL = {
+  novice: 3,
+  independent: 4,
+  advanced: 6,
+};
+
+export default class TagLevel extends Component {
+  get category() {
+    const parsedLevel = Math.ceil(parseFloat(this.args.level));
+    if (parsedLevel < MAX_LEVEL.novice) return 'pages.statistics.level.novice';
+    if (parsedLevel < MAX_LEVEL.independent) return 'pages.statistics.level.independent';
+    if (parsedLevel < MAX_LEVEL.advanced) return 'pages.statistics.level.advanced';
+    return 'pages.statistics.level.expert';
+  }
+
+  <template>
+    <PixTag>{{t this.category}}</PixTag>
+  </template>
+}

orga/app/models/analysis-by-tube.js

@@ -0,0 +1,5 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class AnalysisByTube extends Model {
+  @attr() data;
+}

orga/app/routes/authenticated/statistics.js

@@ -4,10 +4,15 @@ import { service } from '@ember/service';
 export default class AuthenticatedStatisticsRoute extends Route {
   @service currentUser;
   @service router;
+  @service store;
 
   beforeModel() {
     if (!this.currentUser.canAccessStatisticsPage) {
       this.router.replaceWith('application');
     }
   }
+
+  model() {
+    return this.store.queryRecord('analysis-by-tube', { organizationId: this.currentUser.organization.id });
+  }
 }

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,13 @@
+.statistics-page__header {
+  display: flex;
+  gap: var(--pix-spacing-2x);
+  align-items: baseline;
+}
+
+.statistics-page__section {
+  tbody > tr {
+    &:nth-child(odd) {
+      background-color: var(--pix-neutral-20);
+    }
+  }
+}