ajout liste des formation avec toutes les stats ainsi que la capacite, les % de femmes, répartition par bac et par mention
This commit is contained in:
martins
parent
140f80154d
commit
6502ab8c7d
@ -8,7 +8,9 @@
|
||||
<script src="./riot/suiviformation.riot" type="riot"></script>
|
||||
<script src="./riot/choixformation.riot" type="riot"></script>
|
||||
<script src="./riot/app.riot" type="riot"></script>
|
||||
<script src="./riot/pourcentageForma.riot" type="riot"></script>
|
||||
<script src="./riot/statistiqueFormation.riot" type="riot"></script>
|
||||
<script src="./riot/tableuFormation.riot" type="riot"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<title>S4WEB</title>
|
||||
</head>
|
||||
|
||||
21
js/model.js
21
js/model.js
@ -1,21 +0,0 @@
|
||||
|
||||
|
||||
async function getFiliere(search){
|
||||
try {
|
||||
let xhr=new XMLHttpRequest();
|
||||
xhr.open("get", `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&sort=tri&facet=fili&timezone=Europe%2FBerlin&q=${search}`);
|
||||
xhr.responseType = "json";
|
||||
|
||||
xhr.onload=() =>{
|
||||
if(xhr.status == 200){
|
||||
resolbe(xhr.response)
|
||||
}else{
|
||||
PromiseRejectionEvent(xhr.statusText)
|
||||
}
|
||||
}
|
||||
|
||||
xhr.onerror= () => PromiseRejectionEvent("Erreur Reseau");
|
||||
return xhr.send();
|
||||
} catch (error){}
|
||||
return null;
|
||||
}
|
||||
107
riot/app.riot
107
riot/app.riot
@ -5,7 +5,13 @@
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<statistiqueFormation statistique={state.statistique} moyenne={state.moyenne} selectivite={state.selectivite} pct_femme={state.pct_femme}> </statistiqueFormation>
|
||||
<div class="box p-5 my-5" if={state.statistique!=''}>
|
||||
<pourcentageForma statistique={state.statistique} moyenne={state.moyenne} selectivite={state.selectivite} capacite={state.capacite}></pourcentageForma>
|
||||
<statistiqueFormation pct_femme={state.pct_femme} repartitionBac={state.pct_Bac} repartitionMention={state.repartitionMention}></statistiqueFormation>
|
||||
</div>
|
||||
<div class="box p-5 my-5" if={state.statistique!=''}>
|
||||
<tableuFormation records={state.statistique.records}></tableuFormation>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,7 +24,10 @@
|
||||
statistique: '',
|
||||
selectivite: '',
|
||||
moyenne: '',
|
||||
pct_femme: ''
|
||||
pct_femme: '',
|
||||
pct_Bac: '',
|
||||
capacite: '',
|
||||
repartitionMention: ''
|
||||
};
|
||||
},
|
||||
|
||||
@ -31,7 +40,10 @@
|
||||
statistique: '',
|
||||
selectivite: '',
|
||||
moyenne: '',
|
||||
pct_femme: ''
|
||||
pct_femme: '',
|
||||
pct_Bac: '',
|
||||
capacite: '',
|
||||
repartitionMention: ''
|
||||
})
|
||||
},
|
||||
|
||||
@ -64,7 +76,7 @@
|
||||
}, 0);
|
||||
|
||||
this.update({
|
||||
selectivite: Math.round(gen/total)-1
|
||||
selectivite: Math.round(gen/total)
|
||||
})
|
||||
},
|
||||
|
||||
@ -144,10 +156,97 @@
|
||||
})
|
||||
},
|
||||
|
||||
getRepartitionBac(records){
|
||||
|
||||
let general=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_bg){
|
||||
accumulateur += (valeurCourante.fields.acc_bg)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let pro=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_bp){
|
||||
accumulateur += (valeurCourante.fields.acc_bp)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let tecno=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_bt){
|
||||
accumulateur += (valeurCourante.fields.acc_bt)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let total=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_neobac){
|
||||
accumulateur += (valeurCourante.fields.acc_neobac)
|
||||
}
|
||||
if(valeurCourante.fields.acc_at){
|
||||
accumulateur += (valeurCourante.fields.acc_at)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let autre=total - (general+tecno+pro);
|
||||
|
||||
this.update({
|
||||
capacite: Math.round(total/records.length),
|
||||
pct_Bac: new Array(Math.round(general/total*100), Math.round(tecno/total*100), Math.round(pro/total*100), Math.round(autre/total*100))
|
||||
})
|
||||
},
|
||||
|
||||
getRepartitionMention(records){
|
||||
|
||||
let sans=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_sansmention){
|
||||
accumulateur += (valeurCourante.fields.acc_sansmention)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let assez=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_ab){
|
||||
accumulateur += (valeurCourante.fields.acc_ab)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let bien=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_b){
|
||||
accumulateur += (valeurCourante.fields.acc_b)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let tres=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_tb){
|
||||
accumulateur += (valeurCourante.fields.acc_tb)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let felicitation=records.reduce(function (accumulateur, valeurCourante) {
|
||||
if(valeurCourante.fields.acc_tbf){
|
||||
accumulateur += (valeurCourante.fields.acc_tbf)
|
||||
}
|
||||
return accumulateur;
|
||||
}, 0);
|
||||
|
||||
let total=sans+assez+bien+tres+felicitation;
|
||||
|
||||
this.update({
|
||||
repartitionMention: new Array(Math.round(sans/total*100), Math.round(assez/total*100), Math.round(bien/total*100), Math.round(tres/total*100), Math.round(felicitation/total*100))
|
||||
})
|
||||
},
|
||||
|
||||
calcule(){
|
||||
this.getSelectivite(this.state.statistique.records)
|
||||
this.getMoyenne(this.state.statistique.records)
|
||||
this.getPctFemme(this.state.statistique.records)
|
||||
this.getRepartitionBac(this.state.statistique.records)
|
||||
this.getRepartitionMention(this.state.statistique.records)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
38
riot/pourcentageForma.riot
Normal file
38
riot/pourcentageForma.riot
Normal file
@ -0,0 +1,38 @@
|
||||
<pourcentageForma>
|
||||
<div class="recap box has-background-light has-text-weight-normal">
|
||||
<p>Moyenne des admis : <span class="is-pulled-right" if={props.moyenne}>{props.moyenne}</span></p>
|
||||
<p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
|
||||
<p>Capacité : <span class="is-pulled-right" if={props.capacite}>{props.capacite}</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={props.getSelectivite} if={props.selectivite}>
|
||||
<div class="columns is-mobile is-vcentered">
|
||||
<div class="column is-narrow pr-1">
|
||||
<p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
|
||||
</div>
|
||||
<div class="column pl-0">
|
||||
<progress class="progress is-info" value="{100-props.selectivite}" max="100" if={props.selectivite >= 75}>{props.selectivite}%</progress>
|
||||
<progress class="progress is-success" value="{100-props.selectivite}" max="100" if={props.selectivite >= 50 && props.selectivite < 75}>{props.selectivite}%</progress>
|
||||
<progress class="progress is-warning" value="{100-props.selectivite}" max="100" if={props.selectivite > 25 && props.selectivite < 50}>{props.selectivite}%</progress>
|
||||
<progress class="progress is-danger" value="{100-props.selectivite}" max="100" if={props.selectivite <= 25}>{props.selectivite}%</progress>
|
||||
</div>
|
||||
</div>
|
||||
</progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
export default function todos() {
|
||||
return {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</pourcentageForma>
|
||||
@ -1,30 +1,4 @@
|
||||
<statistiqueFormation>
|
||||
<div class="box p-5 my-5" if={props.statistique} onload={load()} unload={reset()}>
|
||||
|
||||
<div class="recap box has-background-light has-text-weight-normal">
|
||||
<p>Moyenne des admis : <span class="is-pulled-right" if={props.moyenne}>{props.moyenne}</span></p>
|
||||
<p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
|
||||
<p>Capacité : <span class="is-pulled-right"></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={props.getSelectivite} if={props.selectivite}>
|
||||
<div class="columns is-mobile is-vcentered">
|
||||
<div class="column is-narrow pr-1">
|
||||
<p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
|
||||
</div>
|
||||
<div class="column pl-0">
|
||||
<progress class="progress is-info" value="{props.selectivite}" max="100" if={props.selectivite <= 25}>{props.selectivite}%</progress>
|
||||
<progress class="progress is-success" value="{props.selectivite}" max="100" if={props.selectivite > 25 && props.selectivite < 50}>{props.selectivite}%</progress>
|
||||
<progress class="progress is-warning" value="{props.selectivite}" max="100" if={props.selectivite > 50 && props.selectivite < 75}>{props.selectivite}%</progress>
|
||||
<progress class="progress is-danger" value="{props.selectivite}" max="100" if={props.selectivite >= 75}>{props.selectivite}%</progress>
|
||||
</div>
|
||||
</div>
|
||||
</progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<bar-chart label="Répartition par genre" if={props.pct_femme}>
|
||||
<div class="bar-chart block m-5">
|
||||
@ -59,24 +33,24 @@
|
||||
</bar-chart>
|
||||
|
||||
|
||||
<bar-chart label="Répartition par bac">
|
||||
<bar-chart label="Répartition par bac" if={props.repartitionBac}>
|
||||
<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:{}%;background-color:#003f5c;">
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
|
||||
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[0]}%;background-color:#003f5c;" if={props.repartitionBac[0] >0}>
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionBac[0]}%</p>
|
||||
</div>
|
||||
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#2f4b7c;">
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">%</p>
|
||||
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[1]}%;background-color:#2f4b7c;" if={props.repartitionBac[1] >0}>
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionBac[1]}%</p>
|
||||
</div>
|
||||
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#665191;">
|
||||
<p class="has-text-centered m-1 is-unselectable">%</p>
|
||||
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[2]}%;background-color:#665191;" if={props.repartitionBac[2] >0}>
|
||||
<p class="has-text-centered m-1 is-unselectable">{props.repartitionBac[2]}%</p>
|
||||
</div>
|
||||
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{}%;background-color:#a05195;">
|
||||
<p class="has-text-centered m-1 is-unselectable">%</p>
|
||||
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionBac[3]}%;background-color:#a05195;" if={props.repartitionBac[3] >0}>
|
||||
<p class="has-text-centered m-1 is-unselectable">{props.repartitionBac[3]}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-justify-content-center">
|
||||
@ -109,24 +83,24 @@
|
||||
</div>
|
||||
</bar-chart>
|
||||
|
||||
<bar-chart label="Répartition par mention au bac">
|
||||
<bar-chart label="Répartition par mention au bac" if={props.repartitionMention}>
|
||||
<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 class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[0]}%;background-color:#003f5c;"if={props.repartitionMention[0] > 0}>
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[0]}%</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 class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[1]}%;background-color:#2f4b7c;" if={props.repartitionMention[1] > 0}>
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[1]}%</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 class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[2]}%;background-color:#665191;" if={props.repartitionMention[2] > 0}>
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[2]}%</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 class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{props.repartitionMention[3]}%;background-color:#a05195;" if={props.repartitionMention[3] > 0}>
|
||||
<p class="has-text-centered m-1 has-text-white is-unselectable">{props.repartitionMention[3]}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-justify-content-center">
|
||||
@ -164,7 +138,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</bar-chart>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default function todos() {
|
||||
@ -172,16 +145,7 @@ export default function todos() {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
pct_femme: ''
|
||||
};
|
||||
},
|
||||
|
||||
load(){
|
||||
},
|
||||
|
||||
|
||||
|
||||
reset(){
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
103
riot/tableuFormation.riot
Normal file
103
riot/tableuFormation.riot
Normal file
@ -0,0 +1,103 @@
|
||||
<tableuFormation>
|
||||
<div class="scrollable" style="overflow-x: auto">
|
||||
<my-table>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
</div>
|
||||
<table class="table is-fullwidth is-hoverable tableFixHead">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="has-text-link">Nom
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Ville
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Dpt
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Moyenne
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
<th class="has-text-link">Selectivité
|
||||
<span class="is-clickable">
|
||||
<span class="icon">
|
||||
<i class="fas fa-sort"></i>
|
||||
</span>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody each={item in props.records}>
|
||||
<tr class="is-clickable animate" style="transform: translateY(0px); opacity: 1;">
|
||||
<td>{item.fields.lib_comp_voe_ins}</td><td>{item.fields.ville_etab}</td><td>{item.fields.dep}</td><td>{getMoyenne(item)}</td><td><progress-bar select="{getSelectivite(item)}">
|
||||
<div class="columns is-mobile is-vcentered">
|
||||
<div class="column is-narrow pr-1"><p class="has-text-right has-text-weight-bold">{getSelectivite(item)}%</p></div>
|
||||
<div class="column pl-0">
|
||||
<progress class="progress is-info" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 75}> {getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-success" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) >= 50 && getSelectivite(item) < 75}>{getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-warning" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) > 25 && getSelectivite(item) < 50}>{getSelectivite(item)}%</progress>
|
||||
<progress class="progress is-danger" value="{100-getSelectivite(item)}" max="100" if={getSelectivite(item) <= 25}>{getSelectivite(item)}%</progress>
|
||||
</div></div></progress-bar></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</my-table>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
|
||||
export default function todos() {
|
||||
return {
|
||||
onBeforeMount(props, state) {
|
||||
// initial state
|
||||
this.state = {
|
||||
};
|
||||
},
|
||||
|
||||
getMoyenne(item){
|
||||
|
||||
let sans=item.fields.acc_sansmention
|
||||
let assez=item.fields.acc_ab
|
||||
let bien=item.fields.acc_b
|
||||
let tres=item.fields.acc_tb
|
||||
let felicitation=item.fields.acc_tbf
|
||||
|
||||
let total=sans+assez+bien+felicitation;
|
||||
|
||||
sans=sans*10;
|
||||
assez=assez*12
|
||||
bien=bien*14
|
||||
tres=tres*16
|
||||
felicitation=felicitation*18
|
||||
|
||||
console.log(sans+" "+assez+" "+bien+" "+tres+" "+felicitation)
|
||||
|
||||
return Math.round((sans+assez+bien+felicitation)/total*100)/100
|
||||
},
|
||||
|
||||
getSelectivite(item){
|
||||
return item.fields.taux_acces_ens;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</tableuFormation>
|
||||
Loading…
Reference in New Issue
Block a user