revert - bug

2026-04-01 19:48:25 +02:00
parent 4b4a47abfc
commit 726fd382da
9 changed files with 2370 additions and 244 deletions
@@ -1,15 +1,428 @@
 <detail-view>
-  <div if={ props.formation } class="detail-card">
-    <h2>{ props.formation.nom }</h2>
-    <p><b>Établissement :</b> { props.formation.etablissement }</p>
-    <p><b>Ville :</b> { props.formation.ville }</p>
-    <p><b>Département :</b> { props.formation.departement }</p>
-    <p><b>Filière :</b> { props.formation.filiere }</p>
-    <p><b>Sélectivité :</b> { props.formation.selectivite }</p>
-    <p><b>Capacité :</b> { props.formation.capacite }</p>
-    <p><b>Candidats :</b> { props.formation.candidats }</p>
-    <p><b>Admis :</b> { props.formation.admis }</p>
-    <p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
-    <button onclick={ () => props.onback() }>Retour</button>
+  <div if={ props.formation } class="detail-page">
+    <h2>Formation</h2>
+    <h1 class="formation-title">{ props.formation.etablissement } - { props.formation.nom }</h1>
+    <div class="formation-meta">
+      <p><b>Ville :</b> { props.formation.ville }</p>
+      <p><b>Département :</b> { props.formation.departement } { props.formation.departementLib }</p>
+      <p><b>Académie :</b> { props.formation.academie }</p>
+      <p>{ props.formation.contrat }</p>
+      <p><b>Capacité :</b> { props.formation.capacite }</p>
+    </div>
+
+    <div class="detail-grid">
+      <div>
+        <h2>Phase principale d'admission</h2>
+        <table class="detail-table">
+          <thead>
+            <tr>
+              <th>Bac</th>
+              <th>Voeux</th>
+              <th>Classés</th>
+              <th>Propositions</th>
+              <th>Acceptés</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Gén</td>
+              <td>{ props.formation.voePPGeneral }</td>
+              <td>{ props.formation.classesPPGeneral }</td>
+              <td>{ props.formation.propositionsPPGeneral }</td>
+              <td>{ props.formation.acceptesPPGeneral }</td>
+            </tr>
+            <tr>
+              <td>Techno</td>
+              <td>{ props.formation.voePPTechno }</td>
+              <td>{ props.formation.classesPPTechno }</td>
+              <td>{ props.formation.propositionsPPTechno }</td>
+              <td>{ props.formation.acceptesPPTechno }</td>
+            </tr>
+            <tr>
+              <td>Pro</td>
+              <td>{ props.formation.voePPPro }</td>
+              <td>{ props.formation.classesPPPro }</td>
+              <td>{ props.formation.propositionsPPPro }</td>
+              <td>{ props.formation.acceptesPPPro }</td>
+            </tr>
+            <tr>
+              <td>Autres</td>
+              <td>{ props.formation.voePPAutres }</td>
+              <td>{ props.formation.classesPPAutres }</td>
+              <td>{ props.formation.propositionsPPAutres }</td>
+              <td>{ props.formation.acceptesPPAutres }</td>
+            </tr>
+            <tr class="total-row">
+              <td>Total</td>
+              <td>{ props.formation.voePPTotal }</td>
+              <td>{ props.formation.classesPPTotal }</td>
+              <td>{ props.formation.propositionsPPTotal }</td>
+              <td>{ props.formation.acceptesPPTotal }</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="timeline-box">
+        <h3>Vitesse de remplissage</h3>
+        <div class="timeline">
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div>
+              <b>Ouverture 30 mai</b><br />
+              { props.formation.pctDebutPhase }%
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div>
+              <b>16 juin</b><br />
+              { props.formation.pctDateBac }%
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div>
+              <b>11 juillet</b><br />
+              { props.formation.pctFinPhase }%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h2>Phase complémentaire d'admission</h2>
+    <table class="detail-table">
+      <thead>
+        <tr>
+          <th>Bac</th>
+          <th>Voeux</th>
+          <th>Classés</th>
+          <th>Propositions</th>
+          <th>Acceptés</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Gén</td>
+          <td>{ props.formation.voePCGeneral }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>Techno</td>
+          <td>{ props.formation.voePCTechno }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>Pro</td>
+          <td>{ props.formation.voePCPro }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>Autres</td>
+          <td>{ props.formation.voePCAutres }</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr class="total-row">
+          <td>Total</td>
+          <td>{ props.formation.voePCTotal }</td>
+          <td>{ props.formation.classesPCTotal }</td>
+          <td>{ props.formation.acceptesPCTotal }</td>
+          <td>{ props.formation.acceptesPCTotal }</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- ==================== GRAPHIQUES CHARTS.CSS ==================== -->
+
+    <h2 class="charts-heading">Profil des admis</h2>
+
+    <div class="charts-section">
+      <div class="chart-wrapper">
+        <h3>Répartition par type de bac</h3>
+        <div id="chart-bac" ref="graphBac"></div>
+      </div>
+
+      <div class="chart-wrapper">
+        <h3>Mentions au bac des admis</h3>
+        <div id="chart-mentions" ref="graphMentions"></div>
+      </div>
+
+      <div class="chart-wrapper chart-full">
+        <h3>Profil sociologique</h3>
+        <div id="chart-profil" ref="graphProfil"></div>
+      </div>
+    </div>
+
+    <!-- ==================== ÉVOLUTION HISTORIQUE ==================== -->
+
+    <h2 class="charts-heading">Évolution depuis 2020</h2>
+
+    <div if={ state.chargementHistorique } class="message">
+      Chargement de l'historique...
+    </div>
+
+    <div if={ !state.chargementHistorique && state.historique.length === 0 } class="message">
+      Aucune donnée historique disponible pour cette formation.
+    </div>
+
+    <div class="charts-section" if={ state.historique.length > 0 }>
+      <div class="chart-wrapper">
+        <h3>Taux d'accès par année</h3>
+        <div id="chart-evolution-taux" ref="graphTaux"></div>
+      </div>
+
+      <div class="chart-wrapper">
+        <h3>Nombre de candidats et admis</h3>
+        <div id="chart-evolution-candidats" ref="graphCandidats"></div>
+      </div>
+
+      <div class="chart-wrapper chart-full">
+        <h3>Évolution des mentions au bac</h3>
+        <div ref="graphMentionsHist"></div>
+      </div>
+    </div>
+
+    <button onclick={ retourListe } class="btn-retour">Retour à la liste</button>
  </div>
-</detail-view>
+
+  <script>
+    export default {
+
+      state: {
+        historique:          [],
+        chargementHistorique: false
+      },
+
+      onMounted() {
+        this.afficherGraphiques();
+        this.chargerHistorique();
+      },
+
+      onUpdated() {
+        this.afficherGraphiques();
+
+        if (this.state.historique.length > 0) {
+          this.afficherGraphiquesHistoriques();
+        }
+      },
+
+      // Retour à la liste des résultats
+      retourListe() {
+        this.props.onback();
+      },
+
+      // Limiter une valeur entre 0 et 1 pour Charts.css
+      limiterValeur(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;
+      },
+
+      afficherGraphiques() {
+        var f = this.props.formation;
+        if (!f) {
+          return;
+        }
+
+        var graphBac      = this.$('[ref="graphBac"]');
+        var graphMentions = this.$('[ref="graphMentions"]');
+        var graphProfil   = this.$('[ref="graphProfil"]');
+
+        if (graphBac) {
+          graphBac.innerHTML = this.construireGraphiqueColonnes([
+            { label: 'Général', valeur: f.pctGeneral, couleur: '#3d7fff' },
+            { label: 'Techno',  valeur: f.pctTechno,  couleur: '#f59e0b' },
+            { label: 'Pro',     valeur: f.pctPro,     couleur: '#10b981' }
+          ]);
+        }
+
+        if (graphMentions) {
+          graphMentions.innerHTML = this.construireGraphiqueColonnes([
+            { label: 'Sans',     valeur: f.pctSansMention, couleur: '#94a3b8' },
+            { label: 'AB',       valeur: f.pctAB,          couleur: '#60a5fa' },
+            { label: 'Bien',     valeur: f.pctB,           couleur: '#34d399' },
+            { label: 'TB',       valeur: f.pctTB,          couleur: '#fbbf24' },
+            { label: 'TB Féli.', valeur: f.pctTBF,         couleur: '#f472b6' }
+          ]);
+        }
+
+        if (graphProfil) {
+          graphProfil.innerHTML = this.construireGraphiqueBarres([
+            { label: 'Femmes',    valeur: f.pctFemmes,    couleur: '#a78bfa' },
+            { label: 'Boursiers', valeur: f.pctBoursiers, couleur: '#fb923c' },
+            { label: 'Néo-bac',  valeur: f.pctNeoBac,    couleur: '#2dd4bf' }
+          ]);
+        }
+      },
+
+      async chargerHistorique() {
+        var f = this.props.formation;
+        if (!f) {
+          return;
+        }
+
+        var codUai = f.id.split('-')[0];
+
+        if (!codUai || !window.chargerHistoriqueFormation) {
+          return;
+        }
+
+        this.update({ chargementHistorique: true });
+
+        try {
+          var historique = await window.chargerHistoriqueFormation(codUai, f.nom);
+          this.update({ historique: historique, chargementHistorique: false });
+        } catch (e) {
+          console.error('Erreur chargement historique :', e);
+          this.update({ historique: [], chargementHistorique: false });
+        }
+      },
+
+      afficherGraphiquesHistoriques() {
+        var historique = this.state.historique;
+        if (!historique || historique.length === 0) {
+          return;
+        }
+
+        var graphTaux         = this.$('[ref="graphTaux"]');
+        var graphCandidats    = this.$('[ref="graphCandidats"]');
+        var graphMentionsHist = this.$('[ref="graphMentionsHist"]');
+
+        // Graphique : taux d'accès par année
+        if (graphTaux) {
+          var elementsAnnee = [];
+
+          for (var i = 0; i < historique.length; i++) {
+            elementsAnnee.push({
+              label:   '' + historique[i].annee,
+              valeur:  historique[i].tauxAcces,
+              couleur: '#1a936f'
+            });
+          }
+
+          graphTaux.innerHTML = this.construireGraphiqueColonnes(elementsAnnee);
+        }
+
+        // Graphique : candidats vs admis
+        if (graphCandidats) {
+          var maxCandidats = 0;
+
+          for (var i = 0; i < historique.length; i++) {
+            if (historique[i].candidats > maxCandidats) {
+              maxCandidats = historique[i].candidats;
+            }
+          }
+
+          var lignes = '';
+
+          for (var i = 0; i < historique.length; i++) {
+            var h           = historique[i];
+            var tailleCand  = 0;
+            var tailleAdmis = 0;
+
+            if (maxCandidats > 0) {
+              tailleCand  = Math.round((h.candidats / maxCandidats) * 100) / 100;
+              tailleAdmis = Math.round((h.admis / maxCandidats) * 100) / 100;
+            }
+
+            lignes += '<tr>';
+            lignes += '<th scope="row">' + h.annee + '</th>';
+            lignes += '<td style="--size: ' + tailleCand + '; --color: #2a5298;">';
+            lignes += '<span class="data">' + h.candidats + '</span></td>';
+            lignes += '<td style="--size: ' + tailleAdmis + '; --color: #1a936f;">';
+            lignes += '<span class="data">' + h.admis + '</span></td>';
+            lignes += '</tr>';
+          }
+
+          graphCandidats.innerHTML = '<table class="charts-css column multiple show-labels show-primary-axis show-4-secondary-axes data-spacing-10">'
+            + '<thead><tr><th scope="col">Année</th><th scope="col">Candidats</th><th scope="col">Admis</th></tr></thead>'
+            + '<tbody>' + lignes + '</tbody></table>';
+        }
+
+        // Tableau : évolution des mentions
+        if (graphMentionsHist) {
+          var tableau = '<table class="detail-table">';
+          tableau += '<thead><tr><th>Année</th><th>Sans mention</th><th>AB</th><th>Bien</th><th>TB</th><th>TB Féli.</th></tr></thead>';
+          tableau += '<tbody>';
+
+          for (var i = 0; i < historique.length; i++) {
+            var h = historique[i];
+            tableau += '<tr>';
+            tableau += '<td><b>' + h.annee + '</b></td>';
+            tableau += '<td>' + h.pctSansMention + '%</td>';
+            tableau += '<td>' + h.pctAB + '%</td>';
+            tableau += '<td>' + h.pctB + '%</td>';
+            tableau += '<td>' + h.pctTB + '%</td>';
+            tableau += '<td>' + h.pctTBF + '%</td>';
+            tableau += '</tr>';
+          }
+
+          tableau += '</tbody></table>';
+          graphMentionsHist.innerHTML = tableau;
+        }
+      },
+
+      construireGraphiqueColonnes(elements) {
+        var lignes = '';
+
+        for (var i = 0; i < elements.length; i++) {
+          var el      = elements[i];
+          var taille  = this.limiterValeur(el.valeur);
+          var affiche = el.valeur || 0;
+
+          lignes += '<tr>';
+          lignes += '<th scope="row">' + el.label + '</th>';
+          lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">';
+          lignes += '<span class="data">' + affiche + '%</span>';
+          lignes += '</td></tr>';
+        }
+
+        return '<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">%</th></tr></thead>'
+          + '<tbody>' + lignes + '</tbody></table>';
+      },
+
+      construireGraphiqueBarres(elements) {
+        var lignes = '';
+
+        for (var i = 0; i < elements.length; i++) {
+          var el      = elements[i];
+          var taille  = this.limiterValeur(el.valeur);
+          var affiche = el.valeur || 0;
+
+          lignes += '<tr>';
+          lignes += '<th scope="row">' + el.label + '</th>';
+          lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">';
+          lignes += '<span class="data">' + affiche + '%</span>';
+          lignes += '</td></tr>';
+        }
+
+        return '<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">%</th></tr></thead>'
+          + '<tbody>' + lignes + '</tbody></table>';
+      }
+
+    };
+  </script>
+
+</detail-view>