$
This commit is contained in:
pro.boooooo
parent
c1ddbd9205
commit
a9ea7148d3
@ -3,7 +3,8 @@
|
||||
### Probleme connu
|
||||
```text
|
||||
Probleme 1 : Ingenieur, Ecole de commerce, Tout ce qui commence par "Formation"
|
||||
Raison : Le model d'envoie de donnees ne prends pas en charge plus de 3 sections (changer les fonctions getModelDataN())
|
||||
Raison : Le model d'envoie de donnees ne prends pas en charge le cas ou une formation = 2 sous sections
|
||||
(Faire des tests: donneesProchaineSection == null)
|
||||
|
||||
Probleme 2 : Spammer peut faire bugger l'affichage du chemin
|
||||
Raison : Pas de timer ni de bloqueur (En rajouter ducoup lol)
|
||||
@ -16,7 +17,8 @@ depuis l'inspecteur, ca ne chargera plus jamais les categories
|
||||
### IMPORTANT
|
||||
```text
|
||||
Si ca ne s'affiche pas dans la milli seconde, pas besoin de forcer le boutton,
|
||||
faut juste attendre que le MVC receptionne les donnees.
|
||||
faut juste attendre que le MVC receptionne les donnees. Si ca persiste, supprimer le local storage
|
||||
inspecter l'element -> Application (ou stockage) -> Local Storage
|
||||
```
|
||||
|
||||
### Documentation de riot :
|
||||
|
||||
@ -37,7 +37,7 @@ export default class Controller {
|
||||
log("Selector->Controller", "Action inconnue au bataillon (updateModel)")
|
||||
}
|
||||
|
||||
if(this.model.getTCat() != null) {
|
||||
if(this.model.getTCat() !== null) {
|
||||
this.getData(3).then()
|
||||
this.getData(this.model.getCurIndex()).then()
|
||||
} else {
|
||||
@ -45,6 +45,7 @@ export default class Controller {
|
||||
}
|
||||
}
|
||||
|
||||
this.model.setSCat(null)
|
||||
log("Selector", "Controller 3/3")
|
||||
}
|
||||
|
||||
@ -71,6 +72,7 @@ export default class Controller {
|
||||
} else if(n === 3) {
|
||||
log("Selector->Controller", "Requete de la liste des etablissements")
|
||||
this.model.getModelData3().then((res) => {
|
||||
this.view.renderStat(res)
|
||||
this.view.renderEtab(res)
|
||||
})
|
||||
} else {
|
||||
|
||||
@ -50,6 +50,7 @@ export default class Model {
|
||||
* */
|
||||
previousPage() {
|
||||
if(this.state.page.curIndex-1 >= 0) {
|
||||
document.getElementById("generalytics").innerHTML = ""
|
||||
this.state.page.curIndex--
|
||||
}
|
||||
}
|
||||
@ -93,7 +94,7 @@ export default class Model {
|
||||
|
||||
/**
|
||||
* Retourne le chemin filiaires - formations - formations detaillees
|
||||
* @return { array[] } Le chemin.
|
||||
* @return { array[string] } Le chemin.
|
||||
* */
|
||||
getPath() {
|
||||
return this.state.page.path
|
||||
@ -110,7 +111,7 @@ export default class Model {
|
||||
|
||||
/**
|
||||
* Retourne la section 0 + l'enregistre dans le local storage
|
||||
* @return { json } Le resultat.
|
||||
* @return { array[json] | Promise } Le resultat.
|
||||
* */
|
||||
getModelData0() {
|
||||
if(!localStorage.getItem(`sec0`)) {
|
||||
@ -136,7 +137,7 @@ export default class Model {
|
||||
|
||||
/**
|
||||
* Retourne la section 1 + l'enregistre dans le local storage
|
||||
* @return { json } les donnees demandees en JSON
|
||||
* @return { array[json] | Promise } les donnees demandees en JSON
|
||||
* */
|
||||
getModelData1() {
|
||||
if(!localStorage.getItem(`sec1-${this.state.page.cat}`)) {
|
||||
@ -166,7 +167,7 @@ export default class Model {
|
||||
/**
|
||||
* Retourne la section 2 + l'enregistre dans le local storage
|
||||
* PS: Generalement c'est ici que il y a possibilite de ne pas avoir de 3eme section
|
||||
* @return { json } les donnees demandees en JSON
|
||||
* @return { array[json] | Promise } les donnees demandees en JSON
|
||||
* */
|
||||
getModelData2() {
|
||||
if(!localStorage.getItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`)) {
|
||||
@ -196,7 +197,7 @@ export default class Model {
|
||||
|
||||
/**
|
||||
* Retourne la liste d'etablissement
|
||||
* @return { json } les donnees demandees en JSON
|
||||
* @return { array[json] | Promise } les donnees demandees en JSON
|
||||
* */
|
||||
getModelData3() {
|
||||
if(!localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`)) {
|
||||
@ -207,7 +208,6 @@ export default class Model {
|
||||
`&refine.${this.state.api.facet.filiaire}=${this.state.page.cat}` +
|
||||
`&refine.${this.state.api.facet.formation}=${this.state.page.scat}` +
|
||||
`&refine.${this.state.api.facet.spec}=${this.state.page.tcat}`
|
||||
|
||||
console.log(link)
|
||||
|
||||
return fetch(link)
|
||||
|
||||
@ -6,6 +6,7 @@ export default class View {
|
||||
this.title = document.getElementById("selector-top-title")
|
||||
this.zone = document.getElementById("selector-list-zone")
|
||||
this.path = document.getElementById("loc")
|
||||
this.stat = document.getElementById("generalytics")
|
||||
this.etab = document.getElementById("etablanalytics-list")
|
||||
this.btn = document.getElementById("selector-top-btn")
|
||||
this.btn.onclick = () => {
|
||||
@ -21,8 +22,8 @@ export default class View {
|
||||
* <a>Tous les noms des formations par section</a>
|
||||
* <span>Combien de formations dispo ?</span>
|
||||
* </li>
|
||||
* @param data Donnees a afficher.
|
||||
* @param title Titre de la section d'un menu.
|
||||
* @param { array[json] } data Donnees a afficher.
|
||||
* @param { string } title Titre de la section d'un menu.
|
||||
* */
|
||||
renderMenu(title, data) {
|
||||
this.title.innerText = title
|
||||
@ -50,7 +51,7 @@ export default class View {
|
||||
|
||||
/**
|
||||
* Pour afficher en haut a gauche le chemin courant.
|
||||
* @param { string[] } path Chemin courant.
|
||||
* @param { array[string] } path Chemin courant.
|
||||
* */
|
||||
renderPath(path) {
|
||||
this.path.innerHTML = ""
|
||||
@ -67,7 +68,7 @@ export default class View {
|
||||
|
||||
/**
|
||||
* Pour afficher en bas a gauche la liste.
|
||||
* @param { json } data La liste des etablissements.
|
||||
* @param { array[json] } data La liste des etablissements.
|
||||
* */
|
||||
renderEtab(data) {
|
||||
this.etab.innerHTML =
|
||||
@ -86,6 +87,9 @@ export default class View {
|
||||
let moy = "null"
|
||||
let selection = "null"
|
||||
|
||||
/**
|
||||
* TODO: Transformer ca en composant riot (GALERE MAX)
|
||||
* */
|
||||
let tr = document.createElement("tr")
|
||||
|
||||
let td1 = document.createElement("td")
|
||||
@ -113,6 +117,188 @@ export default class View {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Envoyer dans l'encadrer avec les stats les graphiques
|
||||
* @param { array[json] } data Les donnees pour calcule
|
||||
* */
|
||||
renderStat(data) {
|
||||
this.stat.innerHTML = ""
|
||||
let elem = document.createElement("generalysticsfragment")
|
||||
|
||||
/**
|
||||
* Pour calculer le pourcentage en fonction du genre
|
||||
* @param { array[json] } data
|
||||
* @return {{ capacitycount: int, nformcount: int, selectivitycount: int }}
|
||||
* */
|
||||
const genStat = (data) => {
|
||||
let nbformation = data.length
|
||||
|
||||
let totcapacity = 0
|
||||
let capacity = 0
|
||||
|
||||
|
||||
let totselectivity = 0
|
||||
let selectivity = 0
|
||||
|
||||
data.forEach((e) => {
|
||||
console.log(e.fields.select_form)
|
||||
if(e.fields.select_form === "formation sélective") {
|
||||
totselectivity++
|
||||
selectivity++
|
||||
} else {
|
||||
totselectivity++
|
||||
}
|
||||
|
||||
totcapacity++
|
||||
capacity += e.fields.capa_fin
|
||||
})
|
||||
|
||||
let moyform = nbformation
|
||||
let moycap = Math.round(capacity / totcapacity)
|
||||
let moyselectivity = Math.round(selectivity / totselectivity)
|
||||
|
||||
console.log(capacity + " " + totcapacity +"\n" + selectivity + " " + totselectivity)
|
||||
console.log(moyform + "\n" + moycap + "\n" + moyselectivity)
|
||||
|
||||
return {
|
||||
capacitycount: moycap,
|
||||
nformcount: moyform,
|
||||
selectivitycount: moyselectivity
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pour calculer le pourcentage en fonction du genre
|
||||
* @param { array[json] } data
|
||||
* @return {{ man: string, woman: string }}
|
||||
* */
|
||||
const genderStat = (data) => {
|
||||
let tot = 0
|
||||
let woman = 0
|
||||
|
||||
data.forEach((e) => {
|
||||
woman += e.fields.acc_tot_f
|
||||
tot += e.fields.acc_tot
|
||||
})
|
||||
|
||||
let man = tot - woman
|
||||
let moywomen = Math.round(100 * woman / tot)
|
||||
let moyman = Math.round(100 * man / tot)
|
||||
|
||||
return {
|
||||
man: `${moyman}%`,
|
||||
woman: `${moywomen}%`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pour calculer le pourcentage en fonction du type de bac obtenu
|
||||
* @param { array[json] } data
|
||||
* @return {{ gen: string, tech: string, pro: string, autre: string}}
|
||||
* */
|
||||
const bacStat = (data) => {
|
||||
let gen = 0
|
||||
let pro = 0
|
||||
let tech = 0
|
||||
let autre = 0
|
||||
|
||||
data.forEach((e) => {
|
||||
gen += e.fields.acc_bg
|
||||
pro += e.fields.acc_bp
|
||||
tech += e.fields.acc_bt
|
||||
autre += e.fields.acc_at
|
||||
})
|
||||
|
||||
let tot = gen + pro + tech + autre
|
||||
let moygen = Math.round(100 * gen / tot)
|
||||
let moytech = Math.round(100 * tech / tot)
|
||||
let moypro = Math.round(100 * pro / tot)
|
||||
let moyautre = Math.round(100 * autre / tot)
|
||||
|
||||
return {
|
||||
gen: `${moygen}%`,
|
||||
tech: `${moytech}%`,
|
||||
pro: `${moypro}%`,
|
||||
autre: `${moyautre}%`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pour calculer le pourcentage en fonction de la mention au bac
|
||||
* @param { array[json] } data
|
||||
* @return {{ gen: string, tech: string, pro: string, autre: string}}
|
||||
* */
|
||||
const mentionStat = (data) => {
|
||||
let p = 0
|
||||
let ab = 0
|
||||
let b = 0
|
||||
let tb = 0
|
||||
let tbf = 0
|
||||
|
||||
data.forEach((e) => {
|
||||
p += e.fields.acc_sansmention
|
||||
ab += e.fields.acc_ab
|
||||
b += e.fields.acc_b
|
||||
tb += e.fields.acc_tb
|
||||
tbf += e.fields.acc_tbf
|
||||
})
|
||||
|
||||
let tot = p + ab + b + tb + tbf
|
||||
let moyp = Math.round(100 * p / tot)
|
||||
let moyab = Math.round(100 * ab / tot)
|
||||
let moyb = Math.round(100 * b / tot)
|
||||
let moytb = Math.round(100 * tb / tot)
|
||||
let moytbf = Math.round(100 * tbf / tot)
|
||||
|
||||
return {
|
||||
p: `${moyp}%`,
|
||||
b: `${moyb}%`,
|
||||
ab: `${moyab}%`,
|
||||
tb: `${moytb}%`,
|
||||
tbf: `${moytbf}%`
|
||||
}
|
||||
}
|
||||
|
||||
let gender = genderStat(data)
|
||||
let bac = bacStat(data)
|
||||
let mention = mentionStat(data)
|
||||
let gen = genStat(data)
|
||||
|
||||
if(data.length > 0) {
|
||||
riot.mount(elem, {
|
||||
capacitycount: gen.capacitycount,
|
||||
nformcount: gen.nformcount,
|
||||
selectivitycount: gen.selectivitycount,
|
||||
manPercent: gender.man,
|
||||
hstyle: `width: ${parseInt(gender.man.split("%")[0]) > 10 ? gender.man : `23%`};`,
|
||||
womenPercent: gender.woman,
|
||||
fstyle: `width: ${parseInt(gender.woman.split("%")[0]) > 10 ? gender.woman : `23%`};`,
|
||||
nbacgen: bac.gen,
|
||||
genstyle: `width: ${parseInt(bac.gen.split("%")[0]) > 10 ? bac.gen : `23%` };`,
|
||||
nbacpro: bac.pro,
|
||||
prostyle: `width: ${parseInt(bac.pro.split("%")[0]) > 10 ? bac.pro : `23%` };`,
|
||||
nbactech: bac.tech,
|
||||
techstyle: `width: ${parseInt(bac.tech.split("%")[0]) > 10 ? bac.tech : `23%` };`,
|
||||
nbacautre: bac.autre,
|
||||
autrestyle: `width: ${parseInt(bac.autre.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
||||
nmentionp: mention.p,
|
||||
pstyle: `width: ${parseInt(mention.p.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
||||
nmentionb: mention.b,
|
||||
bstyle: `width: ${parseInt(mention.b.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
||||
nmentionab: mention.ab,
|
||||
abstyle: `width: ${parseInt(mention.ab.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
||||
nmentiontb: mention.tb,
|
||||
tbstyle: `width: ${parseInt(mention.tb.split("%")[0]) > 10 ? bac.autre : `23%` };`,
|
||||
nmentiontbf: mention.tbf,
|
||||
tbfstyle: `width: ${parseInt(mention.tbf.split("%")[0]) > 10 ? bac.autre : `23%` };`
|
||||
|
||||
}, "generalysticsfragment")
|
||||
|
||||
this.stat.appendChild(elem)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Envoyer dans le controlleur tous les events fait.
|
||||
* @param { string } selection Ce qu'on va utiliser pour le &refine.
|
||||
@ -122,7 +308,7 @@ export default class View {
|
||||
if(direction) {
|
||||
window.updateModel(selection, direction)
|
||||
} else {
|
||||
log("Selector->View", "Mince, le menu ne veut pas s'ouvrir :(")
|
||||
log("Selector->View", "Mince, le menu ne veut pas se remplir :(")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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,40 +66,231 @@
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
</style>
|
||||
|
||||
#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">
|
||||
<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>
|
||||
|
||||
<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 style={ this.props.hstyle } id="man">
|
||||
{ this.props.manPercent } (H)
|
||||
</span>
|
||||
@ -101,28 +300,146 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="generalysticsfragment-legend">
|
||||
<div id="generalysticsfragment-legend-container-h">
|
||||
<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 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>
|
||||
|
||||
@ -14,24 +14,4 @@
|
||||
<div id="generalytics">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import * as riot from "riot";
|
||||
|
||||
export default {
|
||||
onMounted() {
|
||||
const path = document.getElementById("generalytics")
|
||||
|
||||
let ga = document.createElement("generalysticsfragment")
|
||||
riot.mount(ga, {
|
||||
manPercent: "98%",
|
||||
womenPercent: "2%",
|
||||
hstyle: "width: 90%;",
|
||||
fstyle: "width: 8%;"
|
||||
}, "generalysticsfragment")
|
||||
|
||||
path.appendChild(ga)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</generalytics>
|
||||
Loading…
Reference in New Issue
Block a user