c'est trop dur d'avoir des graphiques parfaits, j'abandonne et je m'occupe de la mise en page en dernier. mais apres une (longue) pause.

parcoursup-app/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@riotjs/compiler": "^10.0.1",
+        "chart.css": "^0.1.1",
         "riot": "^10.1.3",
         "rollup-plugin-riot": "^10.0.0"
       },
@@ -480,6 +481,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.css": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/chart.css/-/chart.css-0.1.1.tgz",
+      "integrity": "sha512-/YZcm5FrkVsE8EOlVnn8Va9/GiSBPbD3fAFFbb0fJfplEsA92F52XUqQc8+uesfmGjsoxxw3JMc7bKuPsPx7Qw==",
+      "license": "MIT"
+    },
     "node_modules/css-simple-parser": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/css-simple-parser/-/css-simple-parser-3.0.2.tgz",
@@ -881,9 +888,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
       "engines": {
         "node": ">=12"

parcoursup-app/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@riotjs/compiler": "^10.0.1",
+    "chart.css": "^0.1.1",
     "riot": "^10.1.3",
     "rollup-plugin-riot": "^10.0.0"
   }

parcoursup-app/src/api/parcoursup.js

@@ -1,20 +1,37 @@
-const API_BASE = "https://data.education.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records";
+const API_BASE = "https://data.education.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records"
 
 
 
 export async function recupereFormations(motCle, limit = 20) 
 {
-  const url = `${API_BASE}?where=search("${motCle}")&limit=${limit}`;
-  
-  const response = await fetch(url);
-  const data = await response.json();
-  
-  return data.results;
+  const url = `${API_BASE}?where=search("${motCle}")&limit=${limit}`
+  const response = await fetch(url)
+  const data = await response.json()
+  return data.results
 }
 
-export async function recupereFormation(id) {
+
+
+export async function recupereFormation(id) 
+{
   const url = `${API_BASE}?where=cod_aff_form="${id}"&limit=1`
   const response = await fetch(url)
   const data = await response.json()
   return data.results[0]
 }
+
+
+
+export async function recupereEvolutionFormation(id) 
+{
+  const années = ["2020", "2021", "2022", "2023", "2024", "2025"]
+  
+  const promesses = années.map(annee => 
+    fetch(`${API_BASE}?where=cod_aff_form="${id}" AND session="${annee}"&limit=1`)
+      .then(r => r.json())
+      .then(data => data.results[0])
+  )
+  
+  const resultats = await Promise.all(promesses)
+  return resultats.filter(r => r !== null && r !== undefined)
+}

parcoursup-app/src/components/page-detail.riot

@@ -1,28 +1,179 @@
 <page-detail>
 
+  <div if={ !state.formation }>
+    Chargement...
+  </div>
 
   <div if={ state.formation }>
 
     <h2>{ state.formation.fil_lib_voe_acc }</h2>
-
     <h3>{ state.formation.g_ea_lib_vx }</h3>
-
     <p>{ state.formation.ville_etab } ({ state.formation.dep_lib })</p>
+    <a href="#">← Retour à la recherche</a>
 
-    <p> Taux d'accès : { state.formation.taux_acces_ens }% </p>
 
-    <p>Capacité : { state.formation.capa_fin } places</p>
+    <h4>Phase d'admission</h4>
 
-    <p>Candidatures : { state.formation.voe_tot }</p>
+    <table class="charts-css bar show-labels" style="height: 150px; width: 600px;">
+      <tbody>
 
-    <p>Admis : { state.formation.acc_tot }</p>
+        <tr>
+          <th scope="row">Places disponibles</th>
+          <td style={ '--size: ' + (state.formation.capa_fin / state.formation.voe_tot) }>
+            { state.formation.capa_fin }
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Candidatures</th>
+          <td style="--size: 1">
+            { state.formation.voe_tot }
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Admis</th>
+          <td style={ '--size: ' + (state.formation.acc_tot / state.formation.voe_tot) }>
+            { state.formation.acc_tot }
+          </td>
+        </tr>
+
+      </tbody>
+    </table>
+
+
+    <h4>Profil des admis — Type de bac</h4>
+
+    <table class="charts-css bar show-labels" style="height: 150px; width: 600px;">
+      <tbody>
+
+        <tr>
+          <th scope="row">Bac Général</th>
+          <td style={ '--size: ' + (state.formation.pct_bg / 100) }>
+            { state.formation.pct_bg }%
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Bac Techno</th>
+          <td style={ '--size: ' + (state.formation.pct_bt / 100) }>
+            { state.formation.pct_bt }%
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Bac Pro</th>
+          <td style={ '--size: ' + (state.formation.pct_bp / 100) }>
+            { state.formation.pct_bp }%
+          </td>
+        </tr>
+
+      </tbody>
+    </table>
+
+
+    <h4>Profil des admis — Mentions</h4>
+
+    <table class="charts-css bar show-labels" style="height: 200px; width: 600px;">
+      <tbody>
+
+        <tr>
+          <th scope="row">Sans mention</th>
+          <td style={ '--size: ' + (state.formation.pct_sansmention / 100) }>
+            { state.formation.pct_sansmention }%
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Assez Bien</th>
+          <td style={ '--size: ' + (state.formation.pct_ab / 100) }>
+            { state.formation.pct_ab }%
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Bien</th>
+          <td style={ '--size: ' + (state.formation.pct_b / 100) }>
+            { state.formation.pct_b }%
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Très Bien</th>
+          <td style={ '--size: ' + (state.formation.pct_tb / 100) }>
+            { state.formation.pct_tb }%
+          </td>
+        </tr>
+
+        <tr>
+          <th scope="row">Félicitations</th>
+          <td style={ '--size: ' + (state.formation.pct_tbf / 100) }>
+            { state.formation.pct_tbf }%
+          </td>
+        </tr>
+
+      </tbody>
+    </table>
+
+
+    <h4>Évolution du taux d'accès depuis 2020</h4>
+
+    <div if={ !state.evolution }>
+      Chargement de l'évolution...
+    </div>
+
+    <table if={ state.evolution } class="charts-css bar show-labels" style="height: 200px; width: 600px;">
+      <tbody>
+
+        <tr each={ annee in state.evolution }>
+          <th scope="row">{ annee.session }</th>
+          <td style={ '--size: ' + (annee.taux_acces_ens / 100) }>
+            { annee.taux_acces_ens }%
+          </td>
+        </tr>
+
+      </tbody>
+    </table>
 
   </div>
 
 
   
 
-  <div if = { !state.formation } >Chargement...</div>
+
+  <style>
+
+    th 
+    {
+      font-size: 11px;
+      white-space: nowrap;
+    }
+
+
+    
+
+
+
+    tr
+    {
+      height: 40px;
+    }
+
+    table
+    {
+      margin-left: 0;
+      display: block;
+    }
+
+    td
+    {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 5px;
+    }
+
+  </style>
 
 
 
@@ -30,15 +181,14 @@
 
   <script>
 
-    import { recupereFormation } from '../api/parcoursup.js'
-
-
+    import { recupereFormation, recupereEvolutionFormation } from '../api/parcoursup.js'
 
     export default 
     {
       state: 
       {
-        formation: null
+        formation: null,
+        evolution: null
       },
 
       async onMounted() 
@@ -46,7 +196,12 @@
         const id = this.props.id
         const formation = await recupereFormation(id)
         this.update({ formation })
+
+        const evolution = await recupereEvolutionFormation(id)
+        this.update({ evolution })
       }
     }
+
   </script>
+
 </page-detail>

parcoursup-app/src/main.js

@@ -1,6 +1,7 @@
 import { component, unmount } from 'riot'
 import App from './components/app.riot'
 import PageDetail from './components/page-detail.riot'
+import 'chart.css'
 
 const app = document.getElementById('app')
 let currentComponent = null