public-html2/parcoursup/components/detail-view.riot

<detail-view>
  <!--
    ==========================================================================
    COMPOSANT <detail-view>

    RÔLE : fiche détaillée d'une formation avec :
      - Informations générales (établissement, ville, capacité...)
      - Tableau de la phase principale d'admission (par type de bac)
      - Tableau de la phase complémentaire
      - Timeline de vitesse de remplissage (30 mai / 16 juin / 11 juillet)
      - Graphiques Charts.css : répartition bac, mentions, profil sociologique
      - Historique 2020–2025 (appel à chargerHistoriqueFormation via l'API)

    PROPS reçues depuis <app> :
      - formation : objet Formation normalisé (via creerFormation dans formation.js)
      - onback    : callback() → retour à la liste de résultats

    BIBLIOTHÈQUES UTILISÉES :
      - Charts.css : graphiques déclaratifs via HTML/CSS uniquement (pas de JS)
        Les graphiques sont construits dynamiquement via innerHTML
    ==========================================================================
  -->
  <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>

  <script>
    export default {

      // ========================================================================
      // ÉTAT LOCAL du composant
      // historique           : tableau des données historiques 2020-2025
      // chargementHistorique : true pendant la requête API historique
      // ========================================================================
      state: {
        historique:           [],
        chargementHistorique: false
      },

      // Cycle de vie Riot : appelé une fois après l'insertion dans le DOM
      // On lance les graphiques ET le chargement de l'historique en parallèle
      onMounted() {
        this.afficherGraphiques();
        this.chargerHistorique(); // appel API asynchrone (ne bloque pas le rendu)
      },

      // Cycle de vie Riot : appelé après chaque mise à jour des props ou de l'état
      // Nécessaire car Charts.css construit le HTML des graphiques via innerHTML
      onUpdated() {
        this.afficherGraphiques();

        // On attend d'avoir les données historiques avant de construire ces graphiques
        if (this.state.historique.length > 0) {
          this.afficherGraphiquesHistoriques();
        }
      },

      // Retour à la liste des résultats (délègue au parent via props.onback)
      retourListe() {
        this.props.onback();
      },

      // ========================================================================
      // limiterValeur(val)
      // RÔLE : convertir un pourcentage (0–100) en proportion (0–1) pour Charts.css.
      //
      // Charts.css utilise la propriété CSS custom --size (entre 0 et 1)
      // pour déterminer la hauteur/largeur d'une barre.
      // Ex: 75% d'accès → --size: 0.75 → barre à 75% de hauteur
      //
      // On clamp la valeur entre 0 et 1 pour éviter les débordements.
      // ========================================================================
      limiterValeur(val) {
        if (val === null || val === undefined || isNaN(val)) {
          return 0; // valeur manquante → barre à 0
        }

        var v = val / 100; // conversion % → proportion

        if (v > 1) { return 1; } // max : barre pleine
        if (v < 0) { return 0; } // min : barre vide

        return Math.round(v * 100) / 100; // arrondi à 2 décimales
      },

      // ========================================================================
      // afficherGraphiques()
      // RÔLE : construire et injecter les 3 graphiques Charts.css de la formation.
      //
      // Pourquoi innerHTML ? Charts.css nécessite une structure HTML <table> précise
      // avec des CSS custom properties (--size, --color) sur chaque <td>.
      // Ces tables sont générées dynamiquement et injectées dans les divs ref=...
      //
      // Les 3 graphiques :
      //   - graphBac      : colonnes → répartition par type de bac des admis
      //   - graphMentions : colonnes → répartition par mention au bac des admis
      //   - graphProfil   : barres horizontales → % femmes, boursiers, néo-bacs
      // ========================================================================
      afficherGraphiques() {
        var f = this.props.formation;
        if (!f) {
          return; // pas de formation chargée → rien à afficher
        }

        // this.$() est la méthode Riot pour sélectionner un élément dans le DOM du composant
        var graphBac      = this.$('[ref="graphBac"]');
        var graphMentions = this.$('[ref="graphMentions"]');
        var graphProfil   = this.$('[ref="graphProfil"]');

        // Graphique 1 : répartition par type de bac (colonnes verticales)
        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' }
          ]);
        }

        // Graphique 2 : répartition par mention au bac (colonnes verticales)
        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' }
          ]);
        }

        // Graphique 3 : profil sociologique (barres horizontales)
        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' }
          ]);
        }
      },

      // ========================================================================
      // chargerHistorique()
      // RÔLE : charger les données 2020–2025 depuis api.js pour les graphiques
      //        d'évolution historique.
      //
      // Le code UAI est extrait de l'ID de la formation (format "CODUAI-NomFormation")
      // On le passe à chargerHistoriqueFormation() qui fait 6 appels API en série.
      // ========================================================================
      async chargerHistorique() {
        var f = this.props.formation;
        if (!f) {
          return;
        }

        // L'ID de la formation est construit comme "COD_UAI-NomFormation"
        // On extrait la partie avant le premier tiret pour avoir le code UAI
        var codUai = f.id.split('-')[0];

        if (!codUai || !window.chargerHistoriqueFormation) {
          return; // pas de code UAI ou fonction non disponible
        }

        this.update({ chargementHistorique: true }); // affiche le spinner de chargement

        try {
          var historique = await window.chargerHistoriqueFormation(codUai, f.nom);
          this.update({ historique: historique, chargementHistorique: false });
          // onUpdated() est automatiquement appelé après update() → affichera les graphiques
        } 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)
      // RÔLE : générer le HTML d'un graphique en colonnes verticales (Charts.css).
      //
      // PARAMÈTRE : tableau d'objets { label, valeur, couleur }
      //   - label   : étiquette affichée sous la colonne
      //   - valeur  : pourcentage (0–100) → converti en proportion par limiterValeur()
      //   - couleur : couleur CSS de la colonne (hex ou nom)
      //
      // FORMAT Charts.css :
      //   <table class="charts-css column ...">
      //     <tbody>
      //       <tr>
      //         <th scope="row">Général</th>
      //         <td style="--size: 0.75; --color: #3d7fff;"><span class="data">75%</span></td>
      //       </tr>
      //     </tbody>
      //   </table>
      // ========================================================================
      construireGraphiqueColonnes(elements) {
        var lignes = '';

        for (var i = 0; i < elements.length; i++) {
          var el      = elements[i];
          var taille  = this.limiterValeur(el.valeur); // proportion 0–1 pour --size
          var affiche = el.valeur || 0;                // valeur brute à afficher dans le tooltip

          lignes += '<tr>';
          lignes += '<th scope="row">' + el.label + '</th>';
          lignes += '<td style="--size: ' + taille + '; --color: ' + el.couleur + ';">';
          lignes += '<span class="data">' + affiche + '%</span>'; // affiché au survol
          lignes += '</td></tr>';
        }

        // Classes Charts.css expliquées :
        //   column                  → graphique en colonnes verticales
        //   show-labels             → affiche les étiquettes (th)
        //   show-primary-axis       → affiche l'axe horizontal du bas
        //   show-4-secondary-axes   → affiche 4 lignes de grille horizontales
        //   data-spacing-10         → espace de 10px entre les colonnes
        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)
      // RÔLE : générer le HTML d'un graphique en barres horizontales (Charts.css).
      //
      // Identique à construireGraphiqueColonnes() mais avec class="charts-css bar"
      // → les barres s'étendent horizontalement au lieu de verticalement.
      // Utilisé pour le profil sociologique (femmes, boursiers, néo-bacs).
      // ========================================================================
      construireGraphiqueBarres(elements) {
        var lignes = '';

        for (var i = 0; i < elements.length; i++) {
          var el      = elements[i];
          var taille  = this.limiterValeur(el.valeur); // proportion 0–1
          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>';
        }

        // "bar" à la place de "column" → barres horizontales
        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>