$
This commit is contained in:
pro.boooooo
parent
753cf67823
commit
4a52de6a3f
@ -1,3 +1,13 @@
|
|||||||
<etablanalytics>
|
<etablanalytics>
|
||||||
|
<style>
|
||||||
|
etablanalytics {
|
||||||
|
width: 65vw;
|
||||||
|
height: 33vh;
|
||||||
|
max-height: 35vh;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<p>eta</p>
|
<p>eta</p>
|
||||||
</etablanalytics>
|
</etablanalytics>
|
||||||
@ -1,16 +1,16 @@
|
|||||||
<generalytics>
|
<generalytics>
|
||||||
<style>
|
<style>
|
||||||
#generalytics {
|
#generalytics {
|
||||||
width: 60vw;
|
width: 65vw;
|
||||||
height: auto;
|
height: 57vh;
|
||||||
overflow: auto;
|
max-height: 57vh;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#generalytics
|
#generalytics
|
||||||
#generalytics-stat-container
|
#generalytics-stat-container
|
||||||
#generalytics-stat-glob {
|
#generalytics-stat-glob {
|
||||||
padding: 20px;
|
|
||||||
background: red;
|
|
||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -35,32 +35,237 @@
|
|||||||
|
|
||||||
#generalytics
|
#generalytics
|
||||||
#generalytics-stat-container
|
#generalytics-stat-container
|
||||||
#generalytics-stat-gender {
|
#generalytics-stat-gender, #generalytics-stat-bac, #generalytics-stat-mention {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: blue;
|
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#generalytics
|
#generalytics
|
||||||
#generalytics-stat-container
|
#generalytics-stat-container
|
||||||
#generalytics-stat-gender
|
#generalytics-stat-gender-progressbar-container, #generalytics-stat-bac-progressbar-container, #generalytics-stat-mention-progressbar-container {
|
||||||
.generalytics-gender-progress {
|
padding: 10px;
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#generalytics
|
|
||||||
#generalytics-stat-container
|
|
||||||
#generalytics-stat-gender-m, #generalytics-stat-gender-f {
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-gender-legend, #generalytics-stat-bac-legend, #generalytics-stat-mention-legend {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 3%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* A PARTIR DE LA FAUT AUTOMATISER (C'est juste pour chopper le model)
|
||||||
|
*/
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-gender
|
||||||
|
#generalytics-stat-gender-progressbar-container
|
||||||
|
.generalytics-stat-gender-progressbar-h {
|
||||||
|
border-top-right-radius: 1vw;
|
||||||
|
border-bottom-right-radius: 1vw;
|
||||||
|
background: royalblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
#generalytics
|
#generalytics
|
||||||
#generalytics-stat-container
|
#generalytics-stat-container
|
||||||
#generalytics-stat-gender
|
#generalytics-stat-gender
|
||||||
.generalytics-gender-progress {
|
#generalytics-stat-gender-progressbar-container
|
||||||
background-color: #000;
|
.generalytics-stat-gender-progressbar-f {
|
||||||
|
border-top-left-radius: 1vw;
|
||||||
|
border-bottom-left-radius: 1vw;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-progressbar-container
|
||||||
|
.generalytics-stat-bac-progressbar-gen {
|
||||||
|
border-top-left-radius: 1vw;
|
||||||
|
border-bottom-left-radius: 1vw;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-progressbar-container
|
||||||
|
.generalytics-stat-bac-progressbar-tech {
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-progressbar-container
|
||||||
|
.generalytics-stat-bac-progressbar-pro {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-progressbar-container
|
||||||
|
.generalytics-stat-bac-progressbar-aut {
|
||||||
|
border-top-right-radius: 1vw;
|
||||||
|
border-bottom-right-radius: 1vw;
|
||||||
|
background: saddlebrown;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-progressbar-container
|
||||||
|
.generalytics-stat-mention-progressbar-r {
|
||||||
|
border-top-left-radius: 1vw;
|
||||||
|
border-bottom-left-radius: 1vw;
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-progressbar-container
|
||||||
|
.generalytics-stat-mention-progressbar-ab {
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-progressbar-container
|
||||||
|
.generalytics-stat-mention-progressbar-b {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-progressbar-container
|
||||||
|
.generalytics-stat-mention-progressbar-tb {
|
||||||
|
background: saddlebrown;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-progressbar-container
|
||||||
|
.generalytics-stat-mention-progressbar-tbf {
|
||||||
|
border-top-right-radius: 1vw;
|
||||||
|
border-bottom-right-radius: 1vw;
|
||||||
|
background: darkred;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
width: 2vw;
|
||||||
|
height: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-gender
|
||||||
|
#generalytics-stat-gender-legend
|
||||||
|
#generalytics-stat-gender-legend-h
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-gender
|
||||||
|
#generalytics-stat-gender-legend
|
||||||
|
#generalytics-stat-gender-legend-f
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-legend
|
||||||
|
#generalytics-stat-bac-legend-gen
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-legend
|
||||||
|
#generalytics-stat-bac-legend-tech
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-legend
|
||||||
|
#generalytics-stat-bac-legend-pro
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-bac
|
||||||
|
#generalytics-stat-bac-legend
|
||||||
|
#generalytics-stat-bac-legend-autre
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: saddlebrown;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-legend
|
||||||
|
#generalytics-stat-mention-legend-r
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-legend
|
||||||
|
#generalytics-stat-mention-legend-ab
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-legend
|
||||||
|
#generalytics-stat-mention-legend-b
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-legend
|
||||||
|
#generalytics-stat-mention-legend-tb
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: saddlebrown;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalytics
|
||||||
|
#generalytics-stat-container
|
||||||
|
#generalytics-stat-mention
|
||||||
|
#generalytics-stat-mention-legend
|
||||||
|
#generalytics-stat-mention-legend-tbf
|
||||||
|
.generalytics-stat-legend-square {
|
||||||
|
background: darkred;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -91,14 +296,93 @@
|
|||||||
<div id="generalytics-stat-gender">
|
<div id="generalytics-stat-gender">
|
||||||
<span>Repartition par genre</span>
|
<span>Repartition par genre</span>
|
||||||
|
|
||||||
<div id="generalytics-stat-gender-m">
|
<div id="generalytics-stat-gender-progressbar-container">
|
||||||
<span>Homme</span>
|
<span class="generalytics-stat-gender-progressbar-f" style="width: 15%;">15% (F)</span>
|
||||||
<progress class="generalytics-gender-progress" max="100" min="40" value="80"/>
|
<span class="generalytics-stat-gender-progressbar-h" style="width: 85%;">85% (H)</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="generalytics-stat-gender-f">
|
<div id="generalytics-stat-gender-legend">
|
||||||
<span>Femme</span>
|
<div id="generalytics-stat-gender-legend-f">
|
||||||
<progress class="generalytics-gender-progress" max="100" min="40" value="20"/>
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>F</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-gender-legend-h">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>H</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-bac">
|
||||||
|
<span>Repartition par bac</span>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-bac-progressbar-container">
|
||||||
|
<span class="generalytics-stat-bac-progressbar-gen" style="width: 20%;">20% (Gen.)</span>
|
||||||
|
<span class="generalytics-stat-bac-progressbar-tech" style="width: 30%;">30% (Tech.)</span>
|
||||||
|
<span class="generalytics-stat-bac-progressbar-pro" style="width: 25%;">25% (Pro.)</span>
|
||||||
|
<span class="generalytics-stat-bac-progressbar-aut" style="width: 25%;">25% (Aut.)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-bac-legend">
|
||||||
|
<div id="generalytics-stat-bac-legend-gen">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>Gen</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-bac-legend-tech">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>Techno</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-bac-legend-pro">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>Pro</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-bac-legend-autre">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>Aut</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-mention">
|
||||||
|
<span>Repartition par mention au bac</span>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-mention-progressbar-container">
|
||||||
|
<span class="generalytics-stat-mention-progressbar-r" style="width: 10%;">10% (R)</span>
|
||||||
|
<span class="generalytics-stat-mention-progressbar-ab" style="width: 10%;">10% (AB)</span>
|
||||||
|
<span class="generalytics-stat-mention-progressbar-b" style="width: 40%;">40% (B)</span>
|
||||||
|
<span class="generalytics-stat-mention-progressbar-tb" style="width: 29%;">29% (TB)</span>
|
||||||
|
<span class="generalytics-stat-mention-progressbar-tbf" style="width: 10%;">10% (TBF)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-mention-legend">
|
||||||
|
<div id="generalytics-stat-mention-legend-r">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>R</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-mention-legend-ab">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>AB</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-mention-legend-b">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>B</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-mention-legend-tb">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>TB</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="generalytics-stat-mention-legend-tbf">
|
||||||
|
<div class="generalytics-stat-legend-square"></div>
|
||||||
|
<span>TBF</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<selector>
|
<selector>
|
||||||
<style>
|
<style>
|
||||||
#selector {
|
#selector {
|
||||||
width: 20vw;
|
width: 26vw;
|
||||||
height: auto;
|
height: 93.5vh;
|
||||||
max-height: 700px;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
padding: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#selector
|
#selector
|
||||||
@ -47,6 +47,12 @@
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#selector
|
||||||
|
#selector-list-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
#selector
|
#selector
|
||||||
#selector-list-container
|
#selector-list-container
|
||||||
.selector-list
|
.selector-list
|
||||||
|
|||||||
@ -9,15 +9,14 @@
|
|||||||
|
|
||||||
#main-container
|
#main-container
|
||||||
#right, #left generalytics, #left etablanalytics {
|
#right, #left generalytics, #left etablanalytics {
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0px 0px 9px 1px black;
|
box-shadow: 0px 0px 9px 1px black;
|
||||||
background: #7A90A4;
|
background: #7A90A4;
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-container
|
#main-container
|
||||||
#right {
|
#right {
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
|
margin-right: 3vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-container
|
#main-container
|
||||||
@ -28,8 +27,21 @@
|
|||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#main-container
|
||||||
|
#left
|
||||||
|
generalytics {
|
||||||
|
margin-bottom: 1.5vw;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as riot from "riot";
|
||||||
|
|
||||||
|
riot.mount("selector", document.getElementById("right"))
|
||||||
|
riot.mount("generalytics", document.getElementById("left"))
|
||||||
|
riot.mount("etablanalytics", document.getElementById("left"))
|
||||||
|
</script>
|
||||||
|
|
||||||
<div id="main-container">
|
<div id="main-container">
|
||||||
<div id="right">
|
<div id="right">
|
||||||
<selector />
|
<selector />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user