S4WEB/riot/statistiqueFormation.riot

<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">
            <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">
        <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>
                    <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>
                    <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>
                    <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>
                </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 = {
            pct_femme: ''
        };
      },

      load(){
      },

      

      reset(){
      }
      
    }

  }
</script>
</statistiqueFormation>