charte graphique

parcoursup/app.riot

@@ -1,44 +1,22 @@
 <app>
-  <div class="page">
+  <header class="site-header">
-    <h1>Open Data Parcoursup</h1>
+    <div class="header-inner">
-    <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
+      <div class="logo">
+        <span class="logo-icon"></span>
+        <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
+      </div>
+      <div class="header-badge" if={ state.selectedFormations.length > 0 }>
+        { state.selectedFormations.length } sélection(s)
+      </div>
+    </div>
+  </header>
 
-    <p><b>{ state.selectedFormations.length }</b> formation(s) sélectionnée(s)</p>
+  <div class="page">
 
     <div if={ !state.selected }>
       <search-bar onsearch={ launchSearch }></search-bar>
 
-      <p if={ state.hasSearched && !state.loading }>
+      <div class="detail-card comparateur-card" if={ state.selectedFormations.length > 0 }>
-        <b>{ state.query }</b> : { state.total } résultat(s)
-      </p>
-
-      <div class="layout">
-        <div>
-          <result-list
-            results={ state.results }
-            hasSearched={ state.hasSearched }
-            loading={ state.loading }
-            ondetail={ showDetail }
-            onselect={ addToSelection }>
-          </result-list>
-
-          <div class="compare-controls" if={ state.total > state.limit }>
-            <button onclick={ previousPage } disabled={ state.page === 1 }>
-              Précédent
-            </button>
-
-            <p>Page { state.page } / { getTotalPages() }</p>
-
-            <button onclick={ nextPage } disabled={ state.page === getTotalPages() }>
-              Suivant
-            </button>
-          </div>
-        </div>
-
-        <map-view results={ state.results }></map-view>
-      </div>
-
-      <div class="detail-card" if={ state.selectedFormations.length > 0 }>
         <h3>Comparateur</h3>
 
         <p>Choisis ton profil pour comparer les formations sélectionnées.</p>
@@ -75,7 +53,7 @@
           </div>
         </div>
 
-        <button onclick={ clearSelection }>Vider la sélection</button>
+        <button class="btn btn-danger" onclick={ clearSelection }>Vider la sélection</button>
 
         <hr />
 
@@ -102,11 +80,41 @@
             </span>
           </p>
 
-          <button onclick={ () => removeFromSelection(f.id) }>
+          <button class="btn btn-small btn-outline" onclick={ () => removeFromSelection(f.id) }>
             Retirer
           </button>
         </div>
       </div>
+
+      <p class="result-count" if={ state.hasSearched && !state.loading }>
+        <b>{ state.query }</b> — { state.total } résultat(s)
+      </p>
+
+      <map-view results={ state.results }></map-view>
+
+      <div class="layout">
+        <div>
+          <result-list
+            results={ state.results }
+            hasSearched={ state.hasSearched }
+            loading={ state.loading }
+            ondetail={ showDetail }
+            onselect={ addToSelection }>
+          </result-list>
+
+          <div class="pagination" if={ state.total > state.limit }>
+            <button class="btn btn-outline" onclick={ previousPage } disabled={ state.page === 1 }>
+              ← Précédent
+            </button>
+
+            <span class="page-info">Page { state.page } / { getTotalPages() }</span>
+
+            <button class="btn btn-outline" onclick={ nextPage } disabled={ state.page === getTotalPages() }>
+              Suivant →
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div if={ state.selected }>

parcoursup/components/detail-view.riot

@@ -148,6 +148,146 @@
       </tbody>
     </table>
 
-    <button onclick={ () => props.onback() }>Retour</button>
+    <!-- ===================== GRAPHIQUES CHARTS.CSS ===================== -->
+
+    <h2 class="charts-heading">Profil des admis</h2>
+
+    <div class="charts-section">
+
+      <!-- Graphique 1 : Répartition par type de bac -->
+      <div class="chart-wrapper">
+        <h3>Répartition par type de bac</h3>
+
+        <div id="chart-bac">
+          <table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">
+            <thead>
+              <tr>
+                <th scope="col">Type</th>
+                <th scope="col">Pourcentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">Général</th>
+                <td style="--size: { safe(props.formation.pctGeneral) }; --color: #3d7fff;">
+                  <span class="data">{ props.formation.pctGeneral || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Techno</th>
+                <td style="--size: { safe(props.formation.pctTechno) }; --color: #f59e0b;">
+                  <span class="data">{ props.formation.pctTechno || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Pro</th>
+                <td style="--size: { safe(props.formation.pctPro) }; --color: #10b981;">
+                  <span class="data">{ props.formation.pctPro || 0 }%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+      </div>
+
+      <!-- Graphique 2 : Mentions au bac -->
+      <div class="chart-wrapper">
+        <h3>Mentions au bac des admis</h3>
+
+        <div id="chart-mentions">
+          <table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">
+            <thead>
+              <tr>
+                <th scope="col">Mention</th>
+                <th scope="col">Pourcentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">Sans</th>
+                <td style="--size: { safe(props.formation.pctSansMention) }; --color: #94a3b8;">
+                  <span class="data">{ props.formation.pctSansMention || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">AB</th>
+                <td style="--size: { safe(props.formation.pctAB) }; --color: #60a5fa;">
+                  <span class="data">{ props.formation.pctAB || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Bien</th>
+                <td style="--size: { safe(props.formation.pctB) }; --color: #34d399;">
+                  <span class="data">{ props.formation.pctB || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">TB</th>
+                <td style="--size: { safe(props.formation.pctTB) }; --color: #fbbf24;">
+                  <span class="data">{ props.formation.pctTB || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">TB Féli.</th>
+                <td style="--size: { safe(props.formation.pctTBF) }; --color: #f472b6;">
+                  <span class="data">{ props.formation.pctTBF || 0 }%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Graphique 3 : Profil sociologique (barres horizontales, pleine largeur) -->
+      <div class="chart-wrapper chart-full">
+        <h3>Profil sociologique</h3>
+
+        <div id="chart-profil">
+          <table class="charts-css bar show-labels show-primary-axis show-4-secondary-axes data-spacing-14">
+            <thead>
+              <tr>
+                <th scope="col">Catégorie</th>
+                <th scope="col">Pourcentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">Femmes</th>
+                <td style="--size: { safe(props.formation.pctFemmes) }; --color: #a78bfa;">
+                  <span class="data">{ props.formation.pctFemmes || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Boursiers</th>
+                <td style="--size: { safe(props.formation.pctBoursiers) }; --color: #fb923c;">
+                  <span class="data">{ props.formation.pctBoursiers || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Néo-bac</th>
+                <td style="--size: { safe(props.formation.pctNeoBac) }; --color: #2dd4bf;">
+                  <span class="data">{ props.formation.pctNeoBac || 0 }%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+
+    <button onclick={ () => props.onback() } class="btn-retour">Retour à la liste</button>
+  </div>
+
+  <script>
+    export default {
+      safe(val) {
+        if (val === null || val === undefined || isNaN(val)) return 0
+        var v = val / 100
+        if (v > 1) return 1
+        if (v < 0) return 0
+        return Math.round(v * 100) / 100
+      }
+    }
+  </script>
 </detail-view>

parcoursup/index.html

@@ -3,14 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Parcoursup Riot</title>
+    <title>Parcoursup Explorer</title>
 
     <link rel="stylesheet" href="./style.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" />
 
     <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-  
   </head>
 <body>
   <app></app>