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/app.riot
+46 -38
View File
@@ -1,44 +1,22 @@
<app>
<div class="page">
<h1>Open Data Parcoursup</h1>
<p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
<header class="site-header">
<div class="header-inner">
<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 }>
<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 }>
<div class="detail-card comparateur-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 }>
@@ -325,4 +333,4 @@
}
}
</script>
</app>
</app>
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>
parcoursup/index.html
+8 -8
View File
@@ -3,23 +3,23 @@
<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>
<script src="./components/search-bar.riot" type="riot"></script>
<script src="./components/result-list.riot" type="riot"></script>
<script src="./components/detail-view.riot" type="riot"></script>
<script src="./components/map-view.riot" type="riot"></script>
<script src="./app.riot" type="riot"></script>
<script src="./components/result-list.riot" type="riot"></script>
<script src="./components/detail-view.riot" type="riot"></script>
<script src="./components/map-view.riot" type="riot"></script>
<script src="./app.riot" type="riot"></script>
<script type="module">
import { fetchFormations } from './api.js'
parcoursup/style.css
+557 -157
View File
File diff suppressed because it is too large Load Diff