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

<generalysticsfragment>
    <style>
        #generalysticsfragment {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            font-weight: bold;
        }

        #generalysticsfragment
        #generalysticsfragment-gender, #generalysticsfragment-bac, #generalysticsfragment-mention {
            margin-top: 2%;
            width: 100%;
        }

        #generalysticsfragment
        #generalysticsfragment-gender-percent, #generalysticsfragment-bac-percent, #generalysticsfragment-mention-percent  {
            display: flex;
            gap: 0.2vw;
            justify-content: center;
            align-items: center;
            flex-direction: row-reverse;
            width: 100%;
            max-width: 100%;
        }

        #generalysticsfragment
        #generalysticsfragment-gender
        #generalysticsfragment-gender-percent
        #woman {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
            background: mediumpurple;
        }

        #generalysticsfragment
        #generalysticsfragment-gender
        #generalysticsfragment-gender-percent
        #man {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
            background: royalblue;
        }

        #generalysticsfragment
        #generalysticsfragment-gender-legend, #generalysticsfragment-bac-legend, #generalysticsfragment-mention-legend {
            width: 100%;
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            align-items: center;
            gap: 2vw;
            margin-top: 1vw;
        }

        #generalysticsfragment
        .generalysticsfragment-legend-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 0.7vw;
        }

        #generalysticsfragment
        .generalysticsfragment-legend-square {
            width: 35px;
            height: 35px;
            border: 0.102vw solid #344D59;
        }

        #generalysticsfragment
        .generalysticsfragment-percent {
            border: 0.102vw solid #344D59;
            padding: 0.15vw;
        }

        #generalysticsfragment
        #generalysticsfragment-gender
        #generalysticsfragment-gender-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-h {
            background: royalblue;
        }

        #generalysticsfragment
        #generalysticsfragment-gender
        #generalysticsfragment-gender-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-f {
            background: mediumpurple;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-percent
        #bacgen {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
            background: mediumpurple;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-percent
        #bacpro {
            background: royalblue;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-percent
        #bactechno {
            background: saddlebrown;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-percent
        #bacautre {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
            background: olive;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-gen {
            background: mediumpurple;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-pro {
            background: royalblue;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-tech {
            background: saddlebrown;
        }

        #generalysticsfragment
        #generalysticsfragment-bac
        #generalysticsfragment-bac-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-autre {
            background: olive;
        }


        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-percent
        #p {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
            background: mediumpurple;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-percent
        #ab {
            background: royalblue;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-percent
        #b {
            background: saddlebrown;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-percent
        #b {
            background: saddlebrown;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-percent
        #tb {
            background: olive;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-percent
        #tbf {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
            background: darkred;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-p {
            background: mediumpurple;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-ab {
            background: royalblue;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-b {
            background: saddlebrown;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-tb {
            background: olive;
        }

        #generalysticsfragment
        #generalysticsfragment-mention
        #generalysticsfragment-mention-legend
        .generalysticsfragment-legend-container
        #generalysticsfragment-legend-tbf {
            background: darkred;
        }

        #generalysticsfragment
        #generalysticsfragment-gen {
            background: #344D59;
            padding: 1.1vw;
            border-top-right-radius: 15px;
            border-bottom-left-radius: 15px;
            width:  25vw;
        }

        #generalysticsfragment
        #generalysticsfragment-gen
        .generalysticsfragment-gen-component {
            display: flex;
            justify-content: space-between;
        }

        #generalysticsfragment
        #generalysticsfragment-gen
        .generalysticsfragment-gen-component
        #generalysticsfragment-gen-progress {
            width: 15vw;
        }
    </style>

    <div id="generalysticsfragment">
        <div id="generalysticsfragment-gen">
            <div class="generalysticsfragment-gen-component">
                <span class="generalysticsfragment-gen-text">Moyenne des admis</span>
                <span class="generalysticsfragment-gen-text">{ this.props.moyad }</span>
            </div>

            <div class="generalysticsfragment-gen-component">
                <span class="generalysticsfragment-gen-text">Nb formations</span>
                <span class="generalysticsfragment-gen-text">{ this.props.nformcount }</span>
            </div>

            <div class="generalysticsfragment-gen-component">
                <span class="generalysticsfragment-gen-text">Capacite</span>
                <span class="generalysticsfragment-gen-text">{ this.props.capacitycount }</span>
            </div>

            <div class="generalysticsfragment-gen-component">
                <span class="generalysticsfragment-gen-text">{ `Selectivite (${this.props.selectivitycount}%)`}</span>
                <progress id="generalysticsfragment-gen-progress" max="100" value={ this.props.selectivitycount } />
            </div>
        </div>

        <div id="generalysticsfragment-gender">
            <span>Repartition par genre</span>
            <div id="generalysticsfragment-gender-percent">
                <span class="generalysticsfragment-percent" style={ this.props.hstyle } id="man">
                    { this.props.manPercent } (H)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.fstyle } id="woman">
                    { this.props.womanPercent } (F)
                </span>
            </div>

            <div id="generalysticsfragment-gender-legend">
                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-h" class="generalysticsfragment-legend-square"></div>
                    <span>H</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-f" class="generalysticsfragment-legend-square"></div>
                    <span>F</span>
                </div>
            </div>
        </div>

        <div id="generalysticsfragment-bac">
            <span>Repartition par bac</span>
            <div id="generalysticsfragment-bac-percent">
                <span class="generalysticsfragment-percent" style={ this.props.autrestyle } id="bacautre">
                    { this.props.nbacautre } (Aut)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.techstyle } id="bactechno">
                    { this.props.nbactech } (Tech)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.prostyle } id="bacpro">
                    { this.props.nbacpro } (Pro)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.genstyle } id="bacgen">
                    { this.props.nbacgen } (Gen)
                </span>
            </div>

            <div id="generalysticsfragment-bac-legend">
                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-autre" class="generalysticsfragment-legend-square"></div>
                    <span>Aut</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-tech" class="generalysticsfragment-legend-square"></div>
                    <span>Tech</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-pro" class="generalysticsfragment-legend-square"></div>
                    <span>Pro</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-gen" class="generalysticsfragment-legend-square"></div>
                    <span>Gen</span>
                </div>
            </div>
        </div>

        <div id="generalysticsfragment-mention">
            <span>Repartition par mention</span>
            <div id="generalysticsfragment-mention-percent">
                <span class="generalysticsfragment-percent" style={ this.props.tbfstyle } id="tbf">
                    { this.props.nmentiontbf } (TFB)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.tbstyle } id="tb">
                    { this.props.nmentiontb } (TB)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.bstyle } id="b">
                    { this.props.nmentionb } (B)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.abstyle } id="ab">
                    { this.props.nmentionab } (AB)
                </span>

                <span class="generalysticsfragment-percent" style={ this.props.pstyle } id="p">
                    { this.props.nmentionp } (P)
                </span>
            </div>

            <div id="generalysticsfragment-mention-legend">
                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-tbf" class="generalysticsfragment-legend-square"></div>
                    <span>TBF</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-tb" class="generalysticsfragment-legend-square"></div>
                    <span>TB</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-b" class="generalysticsfragment-legend-square"></div>
                    <span>B</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-ab" class="generalysticsfragment-legend-square"></div>
                    <span>AB</span>
                </div>

                <div class="generalysticsfragment-legend-container">
                    <div id="generalysticsfragment-legend-p" class="generalysticsfragment-legend-square"></div>
                    <span>P</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        export default {
            props: [
                "nformcount",
                "capacitycount",
                "selectivitycount",

                "manPercent",
                "womanPercent",
                "hstyle",
                "fstyle",

                "nbacgen",
                "genstyle",
                "nbacpro",
                "prostyle",
                "nbactech",
                "techstyle",
                "nbacautre",
                "autrestyle",

                "nmentionp",
                "pstyle",
                "nmentionab",
                "abstyle",
                "nmentionb",
                "bstyle",
                "nmentiontb",
                "tbstyle",
                "nmentiontbf",
                "tbfstyle",
            ]
        }
    </script>
</generalysticsfragment>