$
This commit is contained in:
pro.boooooo
@@ -9,29 +9,36 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 15vw;
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-percent {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-percent
|
||||
#woman, #man {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
#generalysticsfragment-gender, #generalysticsfragment-bac, #generalysticsfragment-mention {
|
||||
margin-top: 2%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-percent
|
||||
#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
|
||||
#woman, #man, #bacgen, #bacpro, #bactechno, #bacautre, #p, #ab, #b, #tb, #tbf {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-gender
|
||||
#generalysticsfragment-gender-percent
|
||||
#woman {
|
||||
border-top-left-radius: 14px;
|
||||
border-bottom-left-radius: 14px;
|
||||
@@ -39,7 +46,8 @@
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-percent
|
||||
#generalysticsfragment-gender
|
||||
#generalysticsfragment-gender-percent
|
||||
#man {
|
||||
border-top-right-radius: 14px;
|
||||
border-bottom-right-radius: 14px;
|
||||
@@ -47,7 +55,7 @@
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-legend {
|
||||
#generalysticsfragment-gender-legend, #generalysticsfragment-bac-legend, #generalysticsfragment-mention-legend {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@@ -58,71 +66,380 @@
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-legend
|
||||
#generalysticsfragment-legend-container-h, #generalysticsfragment-legend-container-f {
|
||||
.generalysticsfragment-legend-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-legend
|
||||
.generalysticsfragment-legend-square {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-legend
|
||||
#generalysticsfragment-legend-container-h
|
||||
#generalysticsfragment-gender
|
||||
#generalysticsfragment-gender-legend
|
||||
.generalysticsfragment-legend-container
|
||||
#generalysticsfragment-legend-h {
|
||||
background: royalblue;
|
||||
}
|
||||
|
||||
#generalysticsfragment
|
||||
#generalysticsfragment-legend
|
||||
#generalysticsfragment-legend-container-f
|
||||
#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-percent">
|
||||
<span style={ this.props.hstyle } id="man">
|
||||
{ this.props.manPercent } (H)
|
||||
</span>
|
||||
<div id="generalysticsfragment-gen">
|
||||
<div class="generalysticsfragment-gen-component">
|
||||
<span class="generalysticsfragment-gen-text">Nb formations</span>
|
||||
<span class="generalysticsfragment-gen-text">{ this.props.nformcount }</span>
|
||||
</div>
|
||||
|
||||
<span style={ this.props.fstyle } id="woman">
|
||||
{ this.props.womenPercent } (F)
|
||||
</span>
|
||||
<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-legend">
|
||||
<div id="generalysticsfragment-legend-container-h">
|
||||
<div id="generalysticsfragment-legend-h" class="generalysticsfragment-legend-square"></div>
|
||||
<span>H</span>
|
||||
<div id="generalysticsfragment-gender">
|
||||
<span>Repartition par genre</span>
|
||||
<div id="generalysticsfragment-gender-percent">
|
||||
<span style={ this.props.hstyle } id="man">
|
||||
{ this.props.manPercent } (H)
|
||||
</span>
|
||||
|
||||
<span style={ this.props.fstyle } id="woman">
|
||||
{ this.props.womenPercent } (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 id="generalysticsfragment-legend-container-f">
|
||||
<div id="generalysticsfragment-legend-f" class="generalysticsfragment-legend-square"></div>
|
||||
<span>F</span>
|
||||
<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 style={ this.props.autrestyle } id="bacautre">
|
||||
{ this.props.nbacautre } (Aut)
|
||||
</span>
|
||||
|
||||
<span style={ this.props.techstyle } id="bactechno">
|
||||
{ this.props.nbactech } (Tech)
|
||||
</span>
|
||||
|
||||
<span style={ this.props.prostyle } id="bacpro">
|
||||
{ this.props.nbacpro } (Pro)
|
||||
</span>
|
||||
|
||||
<span 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 style={ this.props.tbfstyle } id="tbf">
|
||||
{ this.props.nmentiontbf } (TFB)
|
||||
</span>
|
||||
|
||||
<span style={ this.props.tbstyle } id="tb">
|
||||
{ this.props.nmentiontb } (TB)
|
||||
</span>
|
||||
|
||||
<span style={ this.props.bstyle } id="b">
|
||||
{ this.props.nmentionb } (B)
|
||||
</span>
|
||||
|
||||
<span style={ this.props.abstyle } id="ab">
|
||||
{ this.props.nmentionab } (AB)
|
||||
</span>
|
||||
|
||||
<span 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"
|
||||
"fstyle",
|
||||
|
||||
"nbacgen",
|
||||
"genstyle",
|
||||
"nbacpro",
|
||||
"prostyle",
|
||||
"nbactech",
|
||||
"techstyle",
|
||||
"nbacautre",
|
||||
"autrestyle",
|
||||
|
||||
"nmentionp",
|
||||
"pstyle",
|
||||
"nmentionab",
|
||||
"abstyle",
|
||||
"nmentionb",
|
||||
"bstyle",
|
||||
"nmentiontb",
|
||||
"tbstyle",
|
||||
"nmentiontbf",
|
||||
"tbfstyle",
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user