S4WEB/riot/statistiqueFormation.riot

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