189 lines
9.4 KiB
Plaintext
189 lines
9.4 KiB
Plaintext
<statistiqueFormation>
|
|
<div class="box p-5 my-5" if={isPossible(props.formation, props.choix)}>
|
|
|
|
<div class="recap box has-background-light has-text-weight-normal">
|
|
<p>Moyenne des admis : <span class="is-pulled-right">13.1</span></p>
|
|
<p>Nombre de formations : <span class="is-pulled-right">80</span></p>
|
|
<p>Capacité : <span class="is-pulled-right">122</span></p>
|
|
<div class="is-flex m-0">
|
|
<p class="column is-5 p-0">Sélectivité :</p>
|
|
<div class="column p-0">
|
|
<progress-bar select="46">
|
|
<div class="columns is-mobile is-vcentered">
|
|
<div class="column is-narrow pr-1">
|
|
<p class="has-text-right has-text-weight-bold">(46%)</p>
|
|
</div>
|
|
<div class="column pl-0">
|
|
<progress max="100" class="progress is-warning" value="54"></progress>
|
|
</div>
|
|
</div>
|
|
</progress-bar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<bar-chart label="Répartition par genre">
|
|
<div class="bar-chart block m-5">
|
|
<div class="has-text-centered block is-size-5">
|
|
<h2 class="is-unselectable">Répartition par genre</h2>
|
|
</div>
|
|
<div class="is-size-7">
|
|
<div class="columns is-mobile is-vcentered">
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:52%;background-color:#003f5c;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">52%</p>
|
|
</div>
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:48%;background-color:#f95d6a;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">48%</p>
|
|
</div>
|
|
</div>
|
|
<div class="columns is-mobile is-justify-content-center">
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Femme" style="background-color:#003f5c"></span>
|
|
<span class="is-unselectable">F</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Homme" style="background-color:#f95d6a"></span>
|
|
<span class="is-unselectable">H</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</bar-chart>
|
|
|
|
|
|
<bar-chart label="Répartition par bac">
|
|
<div class="bar-chart block m-5">
|
|
<div class="has-text-centered block is-size-5">
|
|
<h2 class="is-unselectable">Répartition par bac</h2>
|
|
</div>
|
|
<div class="is-size-7">
|
|
<div class="columns is-mobile is-vcentered">
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:51%;background-color:#003f5c;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">51%</p>
|
|
</div>
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:49%;background-color:#2f4b7c;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">49%</p>
|
|
</div>
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:1%;background-color:#665191;">
|
|
<p class="has-text-centered m-1 is-unselectable">1%</p>
|
|
</div>
|
|
</div>
|
|
<div class="columns is-mobile is-justify-content-center">
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Général" style="background-color:#003f5c"></span>
|
|
<span class="is-unselectable">Gen</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Technologique" style="background-color:#2f4b7c"></span>
|
|
<span class="is-unselectable">Tech</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Professionnel" style="background-color:#665191"></span>
|
|
<span class="is-unselectable">Pro</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Autre" style="background-color:#a05195"></span>
|
|
<span class="is-unselectable">Aut</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</bar-chart>
|
|
|
|
<bar-chart label="Répartition par mention au bac">
|
|
<div class="bar-chart block m-5">
|
|
<div class="has-text-centered block is-size-5">
|
|
<h2 class="is-unselectable">Répartition par mention au bac</h2>
|
|
</div>
|
|
<div class="is-size-7">
|
|
<div class="columns is-mobile is-vcentered">
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:28%;background-color:#003f5c;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">28%</p>
|
|
</div>
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:45%;background-color:#2f4b7c;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">45%</p>
|
|
</div>
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:24%;background-color:#665191;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">24%</p>
|
|
</div>
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:4%;background-color:#a05195;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">4%</p>
|
|
</div>
|
|
</div>
|
|
<div class="columns is-mobile is-justify-content-center">
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Passable" style="background-color:#003f5c"></span>
|
|
<span class="is-unselectable">P</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Assez Bien" style="background-color:#2f4b7c"></span>
|
|
<span class="is-unselectable">AB</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Bien" style="background-color:#665191"></span>
|
|
<span class="is-unselectable">B</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Très Bien" style="background-color:#a05195"></span>
|
|
<span class="is-unselectable">TB</span>
|
|
</span>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon-text">
|
|
<span class="icon" title="Très Bien avec Félicitation du jury" style="background-color:#f95d6a"></span>
|
|
<span class="is-unselectable">TBF</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</bar-chart>
|
|
</div>
|
|
|
|
<script>
|
|
export default function todos() {
|
|
return {
|
|
onBeforeMount(props, state) {
|
|
// initial state
|
|
this.state = {
|
|
statistique: ''
|
|
};
|
|
},
|
|
isPossible(fili, formation){
|
|
if(fili && formation){
|
|
this.getStatistique(fili, formation)
|
|
return true
|
|
}else{
|
|
return false;
|
|
}
|
|
},
|
|
|
|
async getStatistique(fili, formation){
|
|
let rep=await fetch(`https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=session&facet=contrat_etab&facet=cod_uai&facet=g_ea_lib_vx&facet=dep_lib&facet=region_etab_aff&facet=acad_mies&facet=ville_etab&facet=lib_for_voe_ins&facet=select_form&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&facet=detail_forma&facet=tri&facet=cod_aff_form&facet=etablissement_id_paysage&facet=composante_id_paysage&refine.form_lib_voe_acc=${encodeURIComponent(fili)}&refine.fil_lib_voe_acc=${encodeURIComponent(formation)}&timezone=Europe%2FBerlin`)
|
|
rep=await rep.json();
|
|
console.log(JSON.stringify(rep))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</statistiqueFormation> |