155 lines
8.4 KiB
Plaintext
155 lines
8.4 KiB
Plaintext
<statistiqueFormation>
|
|
|
|
<bar-chart label="Répartition par genre" if={props.pct_femme}>
|
|
<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:{props.pct_femme}%;background-color:#003f5c;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">{props.pct_femme}%</p>
|
|
</div>
|
|
<div class="column is-narrow ml-1 mr-1 p-0 is-flex-shrink-1" style="width:{100-props.pct_femme}%;background-color:#f95d6a;">
|
|
<p class="has-text-centered m-1 has-text-white is-unselectable">{100-props.pct_femme}%</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" 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:{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:{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:{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:{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">
|
|
<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" 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:{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:{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:{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:{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">
|
|
<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>
|
|
|
|
<script>
|
|
export default function todos() {
|
|
return {
|
|
onBeforeMount(props, state) {
|
|
// initial state
|
|
this.state = {
|
|
};
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
</statistiqueFormation> |