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

<detail-view>
  <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">

      <!-- 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>