parcoursup/src/components/global/generalytics/generalytics.riot

<generalytics>
    <style>
        #generalytics {
            width: 60vw;
            height: auto;
            overflow: auto;
        }

        #generalytics
        #generalytics-stat-container
        #generalytics-stat-glob {
            padding: 20px;
            background: red;
            color: white;
            display: flex;
            flex-direction: column;
        }

        #generalytics
        #generalytics-stat-container
        #generalytics-stat-glob
        .generalytics-stat-atom {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #generalytics
        #generalytics-stat-container
        #generalytics-stat-glob
        .generalytics-stat-atom
        #generalytics-stat-progress {
            width: 40vw;
        }

        #generalytics
        #generalytics-stat-container
        #generalytics-stat-gender {
            text-align: center;
            background: blue;
            color: white;
        }

        #generalytics
        #generalytics-stat-container
        #generalytics-stat-gender
        .generalytics-gender-progress {

        }

        #generalytics
        #generalytics-stat-container
        #generalytics-stat-gender-m, #generalytics-stat-gender-f {
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }

        #generalytics
        #generalytics-stat-container
        #generalytics-stat-gender
        .generalytics-gender-progress {
            background-color: #000;
        }
    </style>

    <div id="generalytics">
        <div id="generalytics-stat-container">
            <div id="generalytics-stat-glob" >
                <div class="generalytics-stat-atom">
                    <span>Moyenne</span>
                    <span>342</span>
                </div>

                <div class="generalytics-stat-atom">
                    <span>Nb formations</span>
                    <span>49</span>
                </div>

                <div class="generalytics-stat-atom">
                    <span>Capacite</span>
                    <span>38</span>
                </div>

                <div class="generalytics-stat-atom">
                    <span>Selectivite (50%)</span>
                    <progress id="generalytics-stat-progress" max="100" min="40" value="50"/>
                </div>
            </div>

            <div id="generalytics-stat-gender">
                <span>Repartition par genre</span>

                <div id="generalytics-stat-gender-m">
                    <span>Homme</span>
                    <progress class="generalytics-gender-progress" max="100" min="40" value="80"/>
                </div>

                <div id="generalytics-stat-gender-f">
                    <span>Femme</span>
                    <progress class="generalytics-gender-progress" max="100" min="40" value="20"/>
                </div>
            </div>
        </div>
    </div>

</generalytics>