$
This commit is contained in:
Bilal
parent
4d63922b23
commit
c1ddbd9205
@ -35,13 +35,13 @@ export default class View {
|
|||||||
this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
|
this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
|
||||||
}
|
}
|
||||||
|
|
||||||
this.zone.appendChild(elem)
|
|
||||||
|
|
||||||
riot.mount(elem, {
|
riot.mount(elem, {
|
||||||
name: e.name,
|
name: e.name,
|
||||||
count: e.count,
|
count: e.count,
|
||||||
idd: `menu0-${e.name}`
|
idd: `menu0-${e.name}`
|
||||||
}, "selectorfragment")
|
}, "selectorfragment")
|
||||||
|
|
||||||
|
this.zone.appendChild(elem)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -55,12 +55,13 @@ export default class View {
|
|||||||
renderPath(path) {
|
renderPath(path) {
|
||||||
this.path.innerHTML = ""
|
this.path.innerHTML = ""
|
||||||
let elem = document.createElement("locfragment")
|
let elem = document.createElement("locfragment")
|
||||||
this.path.appendChild(elem)
|
|
||||||
|
|
||||||
riot.mount(elem, {
|
riot.mount(elem, {
|
||||||
msg: path.filter(Boolean).join(" ► ")
|
msg: path.filter(Boolean).join(" ► ")
|
||||||
}, "locfragment")
|
}, "locfragment")
|
||||||
|
|
||||||
|
this.path.appendChild(elem)
|
||||||
|
|
||||||
log("Loc->View", `Chemin change ${path}`)
|
log("Loc->View", `Chemin change ${path}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
129
src/components/global/generalytics/generalysticsfragment.riot
Normal file
129
src/components/global/generalytics/generalysticsfragment.riot
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<!--
|
||||||
|
Composant servant a faire les progressbar dans #left
|
||||||
|
-->
|
||||||
|
|
||||||
|
<generalysticsfragment>
|
||||||
|
<style>
|
||||||
|
#generalysticsfragment {
|
||||||
|
display: flex;
|
||||||
|
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;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalysticsfragment
|
||||||
|
#generalysticsfragment-percent
|
||||||
|
#woman, #man {
|
||||||
|
padding: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalysticsfragment
|
||||||
|
#generalysticsfragment-percent
|
||||||
|
#woman {
|
||||||
|
border-top-left-radius: 14px;
|
||||||
|
border-bottom-left-radius: 14px;
|
||||||
|
background: mediumpurple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalysticsfragment
|
||||||
|
#generalysticsfragment-percent
|
||||||
|
#man {
|
||||||
|
border-top-right-radius: 14px;
|
||||||
|
border-bottom-right-radius: 14px;
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalysticsfragment
|
||||||
|
#generalysticsfragment-legend {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2vw;
|
||||||
|
margin-top: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalysticsfragment
|
||||||
|
#generalysticsfragment-legend
|
||||||
|
#generalysticsfragment-legend-container-h, #generalysticsfragment-legend-container-f {
|
||||||
|
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-legend-h {
|
||||||
|
background: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#generalysticsfragment
|
||||||
|
#generalysticsfragment-legend
|
||||||
|
#generalysticsfragment-legend-container-f
|
||||||
|
#generalysticsfragment-legend-f {
|
||||||
|
background: mediumpurple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="generalysticsfragment">
|
||||||
|
<div id="generalysticsfragment-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-legend">
|
||||||
|
<div id="generalysticsfragment-legend-container-h">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: [
|
||||||
|
"manPercent",
|
||||||
|
"womanPercent",
|
||||||
|
"hstyle",
|
||||||
|
"fstyle"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</generalysticsfragment>
|
||||||
@ -9,385 +9,29 @@
|
|||||||
padding: 1vw;
|
padding: 1vw;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#generalytics
|
|
||||||
#generalytics-stat-container
|
|
||||||
#generalytics-stat-glob {
|
|
||||||
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, #generalytics-stat-bac, #generalytics-stat-mention {
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#generalytics
|
|
||||||
#generalytics-stat-container
|
|
||||||
#generalytics-stat-gender-progressbar-container, #generalytics-stat-bac-progressbar-container, #generalytics-stat-mention-progressbar-container {
|
|
||||||
padding: 10px;
|
|
||||||
display: flex;
|
|
||||||
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-stat-container
|
|
||||||
#generalytics-stat-gender
|
|
||||||
#generalytics-stat-gender-progressbar-container
|
|
||||||
.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>
|
||||||
|
|
||||||
<div id="generalytics">
|
<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-progressbar-container">
|
|
||||||
<span class="generalytics-stat-gender-progressbar-f" style="width: 15%;">15% (F)</span>
|
|
||||||
<span class="generalytics-stat-gender-progressbar-h" style="width: 85%;">85% (H)</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="generalytics-stat-gender-legend">
|
|
||||||
<div id="generalytics-stat-gender-legend-f">
|
|
||||||
<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%;">0% (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>
|
||||||
|
|
||||||
|
<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>
|
</generalytics>
|
||||||
@ -4,7 +4,10 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
margin-top: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#home
|
#home
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user