camille/parcoursup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

c'est trop dur d'avoir des graphiques parfaits, j'abandonne et je m'occupe de la mise en page en dernier. mais apres une (longue) pause.

Browse Source
This commit is contained in:
camille
2026-03-28 18:23:03 +01:00
parent a7a9d5f75c
commit b26f3080f9
5 changed files with 204 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
parcoursup-app/src/api/parcoursup.js
+25 -8
View File
@@ -1,20 +1,37 @@
const API_BASE = "https://data.education.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records";
const API_BASE = "https://data.education.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records"
export async function recupereFormations(motCle, limit = 20)
{
const url = `${API_BASE}?where=search("${motCle}")&limit=${limit}`;
const response = await fetch(url);
const data = await response.json();
return data.results;
const url = `${API_BASE}?where=search("${motCle}")&limit=${limit}`
const response = await fetch(url)
const data = await response.json()
return data.results
}
export async function recupereFormation(id) {
export async function recupereFormation(id)
{
const url = `${API_BASE}?where=cod_aff_form="${id}"&limit=1`
const response = await fetch(url)
const data = await response.json()
return data.results[0]
}
export async function recupereEvolutionFormation(id)
{
const années = ["2020", "2021", "2022", "2023", "2024", "2025"]
const promesses = années.map(annee =>
fetch(`${API_BASE}?where=cod_aff_form="${id}" AND session="${annee}"&limit=1`)
.then(r => r.json())
.then(data => data.results[0])
)
const resultats = await Promise.all(promesses)
return resultats.filter(r => r !== null && r !== undefined)
}
parcoursup-app/src/components/page-detail.riot
+167 -12
View File
@@ -1,28 +1,179 @@
<page-detail>
<div if={ !state.formation }>
Chargement...
</div>
<div if={ state.formation }>
<h2> { state.formation.fil_lib_voe_acc } </h2>
<h2>{ state.formation.fil_lib_voe_acc }</h2>
<h3>{ state.formation.g_ea_lib_vx }</h3>
<p>{ state.formation.ville_etab } ({ state.formation.dep_lib })</p>
<a href="#">← Retour à la recherche</a>
<h3> { state.formation.g_ea_lib_vx } </h3>
<p> { state.formation.ville_etab } ({ state.formation.dep_lib }) </p>
<h4>Phase d'admission</h4>
<p> Taux d'accès : { state.formation.taux_acces_ens }% </p>
<table class="charts-css bar show-labels" style="height: 150px; width: 600px;">
<tbody>
<p>Capacité : { state.formation.capa_fin } places</p>
<tr>
<th scope="row">Places disponibles</th>
<td style={ '--size: ' + (state.formation.capa_fin / state.formation.voe_tot) }>
{ state.formation.capa_fin }
</td>
</tr>
<p>Candidatures : { state.formation.voe_tot }</p>
<tr>
<th scope="row">Candidatures</th>
<td style="--size: 1">
{ state.formation.voe_tot }
</td>
</tr>
<p>Admis : { state.formation.acc_tot }</p>
<tr>
<th scope="row">Admis</th>
<td style={ '--size: ' + (state.formation.acc_tot / state.formation.voe_tot) }>
{ state.formation.acc_tot }
</td>
</tr>
</tbody>
</table>
<h4>Profil des admis — Type de bac</h4>
<table class="charts-css bar show-labels" style="height: 150px; width: 600px;">
<tbody>
<tr>
<th scope="row">Bac Général</th>
<td style={ '--size: ' + (state.formation.pct_bg / 100) }>
{ state.formation.pct_bg }%
</td>
</tr>
<tr>
<th scope="row">Bac Techno</th>
<td style={ '--size: ' + (state.formation.pct_bt / 100) }>
{ state.formation.pct_bt }%
</td>
</tr>
<tr>
<th scope="row">Bac Pro</th>
<td style={ '--size: ' + (state.formation.pct_bp / 100) }>
{ state.formation.pct_bp }%
</td>
</tr>
</tbody>
</table>
<h4>Profil des admis — Mentions</h4>
<table class="charts-css bar show-labels" style="height: 200px; width: 600px;">
<tbody>
<tr>
<th scope="row">Sans mention</th>
<td style={ '--size: ' + (state.formation.pct_sansmention / 100) }>
{ state.formation.pct_sansmention }%
</td>
</tr>
<tr>
<th scope="row">Assez Bien</th>
<td style={ '--size: ' + (state.formation.pct_ab / 100) }>
{ state.formation.pct_ab }%
</td>
</tr>
<tr>
<th scope="row">Bien</th>
<td style={ '--size: ' + (state.formation.pct_b / 100) }>
{ state.formation.pct_b }%
</td>
</tr>
<tr>
<th scope="row">Très Bien</th>
<td style={ '--size: ' + (state.formation.pct_tb / 100) }>
{ state.formation.pct_tb }%
</td>
</tr>
<tr>
<th scope="row">Félicitations</th>
<td style={ '--size: ' + (state.formation.pct_tbf / 100) }>
{ state.formation.pct_tbf }%
</td>
</tr>
</tbody>
</table>
<h4>Évolution du taux d'accès depuis 2020</h4>
<div if={ !state.evolution }>
Chargement de l'évolution...
</div>
<table if={ state.evolution } class="charts-css bar show-labels" style="height: 200px; width: 600px;">
<tbody>
<tr each={ annee in state.evolution }>
<th scope="row">{ annee.session }</th>
<td style={ '--size: ' + (annee.taux_acces_ens / 100) }>
{ annee.taux_acces_ens }%
</td>
</tr>
</tbody>
</table>
</div>
<div if = { !state.formation } >Chargement...</div>
<style>
th
{
font-size: 11px;
white-space: nowrap;
}
tr
{
height: 40px;
}
table
{
margin-left: 0;
display: block;
}
td
{
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 5px;
}
</style>
@@ -30,15 +181,14 @@
<script>
import { recupereFormation } from '../api/parcoursup.js'
import { recupereFormation, recupereEvolutionFormation } from '../api/parcoursup.js'
export default
{
state:
{
formation: null
formation: null,
evolution: null
},
async onMounted()
@@ -46,7 +196,12 @@
const id = this.props.id
const formation = await recupereFormation(id)
this.update({ formation })
const evolution = await recupereEvolutionFormation(id)
this.update({ evolution })
}
}
</script>
</page-detail>
parcoursup-app/src/main.js
+1
View File
@@ -1,6 +1,7 @@
import { component, unmount } from 'riot'
import App from './components/app.riot'
import PageDetail from './components/page-detail.riot'
import 'chart.css'
const app = document.getElementById('app')
let currentComponent = null