S4WEB/riot/pourcentageForma.riot

38 lines
2.0 KiB
Plaintext

<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>