yolou/public-html2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

charte graphique

Browse Source
This commit is contained in:
Seri-Khane YOLOU
2026-03-19 14:37:08 +01:00
parent 3bbc60fd68
commit 83020dcb5b
4 changed files with 753 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
parcoursup/components/detail-view.riot
+142 -2
View File
@@ -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>
</detail-view>
<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>