S4WEB/riot/tableuFormation.riot

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