style: review style du widget (#298)

mission-apprentissage · Nov 28, 2024 · fcec2e9 · fcec2e9
1 parent 65fa48e
commit fcec2e9
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 12 deletions.
diff --git a/server/src/cli.js b/server/src/cli.js
@@ -118,8 +118,12 @@ cli
   .command("computeContinuumStats")
   .description("Calcule les données statistiques manquantes pour les anciens/nouveaux diplomes")
   .argument("[stats]", "Le nom des stats à importer (formations,certifications,regionales)", asArray)
-  .action((stats) => {
-    runScript(() => computeContinuumStats({ stats }));
+  .option(
+    "--millesime [millesime]",
+    "Spécifie un millésime à importer (attention les millésimes nationales et formations/regionales sont différents"
+  )
+  .action((stats, options) => {
+    runScript(() => computeContinuumStats({ stats, millesime: options.millesime }));
   });
 
 cli

diff --git a/server/src/jobs/stats/computeContinuumStats.js b/server/src/jobs/stats/computeContinuumStats.js
@@ -203,6 +203,8 @@ export async function computeContinuumStats(options = {}) {
   let stats = options.stats || ["certifications", "regionales", "formations"];
   const result = { total: 0, created: 0, updated: 0, failed: 0 };
 
+  const millesime = options.millesime || null;
+
   function handleError(e, context = {}) {
     logger.error({ err: e, ...context }, `Impossible de calculer les données pour les anciens/nouveaux diplomes`);
     result.failed++;
@@ -211,7 +213,7 @@ export async function computeContinuumStats(options = {}) {
 
   await oleoduc(
     mergeStreams(stats.map(streamStats)),
-    filterData(({ data }) => data.donnee_source.type === "self"),
+    filterData(({ data }) => data.donnee_source.type === "self" && (!millesime || data.millesime === millesime)),
     transformData(async ({ data, statName }) => {
       const query = { ...getQueryForStats({ data, statName, millesime: data.millesime }) };
 

diff --git a/server/src/jobs/stats/importFormationsSupStats.js b/server/src/jobs/stats/importFormationsSupStats.js
@@ -106,6 +106,7 @@ export async function importFormationsSupStats(options = {}) {
               code_certification: formationStats.diplome,
               type: "self",
             },
+            libelle_etablissement: formationStats.uo_lib,
             "_meta.insersup": {
               etablissement_libelle: formationStats.uo_lib,
               etablissement_actuel_libelle: formationStats.uo_lib_actuel,

diff --git a/server/src/services/widget/templates/assets/remixicon.light.symbol.svg b/server/src/services/widget/templates/assets/remixicon.light.symbol.svg
diff --git a/server/src/services/widget/templates/common/header.ejs b/server/src/services/widget/templates/common/header.ejs
@@ -149,7 +149,7 @@
   .card {
     margin-top: 10px;
     padding: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 2rem;
   }
 
   .card-footer {
@@ -171,6 +171,12 @@
     margin-right: 0;
   }
 
+  .external-small[target=_blank]:after {
+    --icon-size: 0.75rem;
+    height: var(--icon-size);
+    width: var(--icon-size);
+  }
+
 
   @media screen and (min-width: <%=options.responsiveWidth %>) {}
 
@@ -188,5 +194,10 @@
     .card-footer {
       text-align: left;
     }
+
+    .card {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
   }
 </style>
diff --git a/server/src/services/widget/templates/stats/default.1.ejs b/server/src/services/widget/templates/stats/default.1.ejs
@@ -106,6 +106,13 @@
       vertical-align: text-top;
     }
 
+
+    .block-title .description {
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 28px;
+    }
+
     .body-description {
       margin-bottom: 10px;
     }
@@ -274,22 +281,28 @@
 
     @media screen and (max-width: <%=options.responsiveWidth %>) {
       :root {
-        --body-width: min(calc(var(--widget-width) * 0.8 / <%=maxEleves %>), 30px);
+        --body-width: 50px;
         --body-height: calc(var(--body-width) * 1.8125);
 
         --body-icon-width: calc(var(--body-width) * 0.4);
         --body-icon-left: calc(var(--body-width) * 0.29);
         --body-icon-top: calc(var(--body-width) * 0.5);
       }
 
+
+      .body-group {
+        flex-wrap: wrap;
+        justify-content: normal;
+      }
+
       .bodies {
         display: flex;
         align-items: flex-start;
         justify-content: center;
         flex-direction: column;
         gap: 2px;
         margin-bottom: 10px;
-        margin-left: 10px;
+        margin-left: 0px;
         ;
       }
 
@@ -314,7 +327,27 @@
 
     @media screen and (max-width: 30em) {
       .block-title {
-        font-size: 12px;
+        font-size: 16px;
+      }
+
+      .block-title .description {
+        font-size: 20px;
+      }
+
+      .block-title .icon {
+        width: 22px;
+        height: 22px;
+      }
+    }
+
+    @media screen and (max-width: 19em) {
+      :root {
+        --body-width: 45px;
+        --body-height: calc(var(--body-width) * 1.8125);
+
+        --body-icon-width: calc(var(--body-width) * 0.4);
+        --body-icon-left: calc(var(--body-width) * 0.29);
+        --body-icon-top: calc(var(--body-width) * 0.5);
       }
     }
   </style>
@@ -427,7 +460,7 @@
     <% } %>
 
     <div class="card-footer">
-      Données issues du dispositif <a target="_blank" href="https://beta.gouv.fr/startups/exposition-ij.html"><%= data.filiere === "superieur" ? "InserSup" : "InserJeunes" %></a> promotions <%= millesimesDouble ? millesimes[0] + " et " + millesimes[1] : millesimes[0] %>. <a target="_blank" href="https://documentation.exposition.inserjeunes.beta.gouv.fr/"> D’où viennent ces données ?</a>
+      Données issues du dispositif <a target="_blank" class="external-small" href="https://beta.gouv.fr/startups/exposition-ij.html"><%= data.filiere === "superieur" ? "InserSup" : "InserJeunes" %></a> promotions <%= millesimesDouble ? millesimes[0] + " et " + millesimes[1] : millesimes[0] %>. <a target="_blank" class="external-small" href="https://documentation.exposition.inserjeunes.beta.gouv.fr/"> D’où viennent ces données ?</a>
     </div>
   </div>
 </body>

diff --git a/server/src/services/widget/templates/stats/personas.1.ejs b/server/src/services/widget/templates/stats/personas.1.ejs
@@ -28,8 +28,10 @@
     <div class="block modal-link plausible-event-name=Modal+Open+<%= key %> <%= taux[key].value == 0 ? "grey-variant" : infos[key].colorText %>" onClick="showModal('<%= key %>')">
       <div class="block-title">
         <div>
-          <div><%= taux[key].description %></div>
-          <div><%= infos[key].title %> ⓘ</div>
+          <div class="description"><%= taux[key].description %></div>
+          <div><%= infos[key].title %> <svg class="remix icon">
+              <use xlink:href="#ri-information-line" />
+            </svg></div>
         </div>
       </div>
     </div>
@@ -42,11 +44,13 @@
   <% if (taux[key].value > 0) { %>
   <div onClick="showModal('<%= key %>')" class="block block-<%= key %> modal-link plausible-event-name=Modal+Open+<%= key %> <%= taux[key].value == 0 ? "grey-variant" : infos[key].colorText %>">
     <div class="block-title">
-      <div><%= taux[key].description %></div>
+      <div class="description"><%= taux[key].description %></div>
       <div>
         <svg class="remix icon">
           <use xlink:href="<%= infos[key].icon %>" />
-        </svg><%= infos[key].title %> ⓘ
+        </svg><%= infos[key].title %> <svg class="remix icon">
+          <use xlink:href="#ri-information-line" />
+        </svg>
       </div>
     </div>
   </div>

diff --git a/server/tests/jobs/stats/importFormationsSupStats-test.js b/server/tests/jobs/stats/importFormationsSupStats-test.js
@@ -55,6 +55,7 @@ describe("importFormationsSupStats", () => {
       code_certification: "2500200",
       code_certification_type: "sise",
       libelle: "METIERS DE L'ENSEIGNEMENT",
+      libelle_etablissement: "Université Côte d'Azur",
       millesime: "2020_2021",
       filiere: "superieur",
       date_fermeture: new Date("2023-01-01T00:00:00.000Z"),