diff --git a/assets/images/Jonh-Parra-imagen-profile.jfif b/assets/images/Jonh-Parra-imagen-profile.jfif new file mode 100644 index 00000000..5bd0103b Binary files /dev/null and b/assets/images/Jonh-Parra-imagen-profile.jfif differ diff --git a/assets/images/logo-lab.png b/assets/images/logo-lab.png new file mode 100644 index 00000000..f376c336 Binary files /dev/null and b/assets/images/logo-lab.png differ diff --git a/assets/images/logolab2.png b/assets/images/logolab2.png new file mode 100644 index 00000000..459cbf89 Binary files /dev/null and b/assets/images/logolab2.png differ diff --git a/css/main.css b/css/main.css index 6355c827..ff123dfc 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,352 @@ /* * Estilos de tu proyecto */ + +* { + box-sizing: border-box; + /*justas un elemento con box-sizing: border-box*/ + margin: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; +} + +header { + text-align: center; +} + +header div img { + width: 300px; +} + +.imagen-profile { + width: 40%; + margin-top: 5px; + border-radius: 50%; +} + +.imagen-lab { + width: 90%; + height: background-color: #2B2B2B; + margin-top: 5px; +} + +#barra-lateral { + position: fixed; + /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/ + left: 0; + /* Establecemos la barra en la izquierda */ + /*z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */ + background-color: #2B2B2B; + width: 250px; + height: 100%; +} + +/* boton de seleccion*/ + +#filtro-sedes { + text-align: center; + width: 150px; + float: left; + margin-top: 100px; + margin-left: 80px; + border: 2px solid #F7B617; + font-weight: 700; + font-family: 'Montserrat', sans-serif; +} + +/*Tabuladores*/ + +/* Menu Over student teachers*/ + +#contenido-tab { + margin: 0px; + padding: 0px; + font-weight: 500; + font-family: 'Montserrat', sans-serif; + cursor: pointer; +} + +.cont-tabs { + margin-top: 150px; + list-style: none; + display: block; +} + +.cont-tabs li { + width: 100%; + height: 50px; + border-bottom: 1px solid #323232; + overflow: hidden; +} + +.cont-tabs a { + position: relative; + padding: 16px; + padding-right: 25px; + float: right; + color: white; + opacity: .5; + font-size: 18px; +} + +.fa-home, .fa-graduation-cap, .fa-pie-chart, .fa-code { + color: #F7B617; +} + +.fa-home { + margin-left: -8%; + margin-top: 4%; +} + +.fa-graduation-cap { + margin-left: -15%; + margin-top: 4%; +} + +.fa-pie-chart { + margin-left: 2%; + margin-top: 4%; +} + +.fa-code { + margin-left: -18%; + margin-top: 4%; +} + +.barra { + position: absolute; + /*se pone para que los p no se encimen*/ + height: 50px; + width: 0px; + background-color: #aaa; + opacity: .1; +} + +li:hover div.barra { + width: 250px; +} + +/*--------------------CONTENIDOSS---------------*/ + +/*--SECCION OVERVIEW (ESTILOS DE GRAFICA)*/ + +#overviewTab, #studentsTab, #teachersTab { + overflow: auto; + margin-left: 270px; +} + +.graficasTotal { + background-color: #fff; + float: left; + height: 500px; + margin: 40px 100px; + vertical-align: top; + width: 600px; + box-shadow: 4px 4px 4px #c4c4c4; + margin-right: 1%; + overflow: hidden; + font-family: 'Montserrat', sans-serif; +} + +.graficasTotal span { + font-size: 1.5em; + font-family: 'Montserrat', sans-serif; + font-weight: 700; + padding: 20px; +} + +.graficasTotal .texTbox { + font-size: .8em; + font-family: 'Montserrat', sans-serif; + font-weight: 700; + padding: 20px; +} + +.contenedor-cajas { + padding: 1em; +} + +.contenedor-grafica { + background-color:#FFFFFF; + float: left; + text-align: center; + vertical-align: top; + width: 35%; + height: 150px; + padding: 0.8em; + border-radius: 3px; + box-shadow: 2px 2px 2px #aaa8a8; + margin-right: 1em; +} + +.grafica { + margin-top: 150px; + margin-left: 50px; +} + +.grafica img { + padding-left: 1em; + padding-bottom: 0.8em; +} + +.datoText { + font-size: 3em; + font-weight: 300; + border-bottom: 2px solid #ffff; + width: 2.7em; + height: 1.2em; +} + +#saludo{ + color: white; + font-size: 16px; + font-weight: 500px; +} + +#dropout-porcentaje { + color: green; +} + +#achievement-porcentaje { + color: green; +} + +#acumulativo-nps { + color: green; +} + +#promoters, #passive, #detractor { + color: green; + line-height: 1.5; + margin-top: 15px; + font-size: 1em; + font-weight: 300; +} + +.cajaTexto { + font-size: .8em; + font-family: 'Montserrat', sans-serif; + font-weight: 700; + padding: 20px; + /* font-size: .8em; + padding-top: 1em;*/ +} + +.number-boxes { + font-size: 3.5em; + font-weight: 300; + border-bottom: 1px solid #ffffff; +} + +/* SECCION ALUMNAS */ + +#studentsTab { + overflow: inherit; +} + +.contenedor-coders { + float: right; + width: 850px; + margin-right: 150px; +} + +.coders { + width: 690px; + margin: 15px 10px 15px 15px; +} + +.skillList li { + float: right; + list-style: none; + width: 85px; + font-size: 12px; + color: white; + text-align: center; + border: solid 2px #999999; + background-color: #999999; +} + +.status{ + float: left; + font-weight: 500px; +} +.info-coders { + float: right; + font-family: 'Montserrat', sans-serif; + width: 500px; +} + +.info-coders p { + text-align: right; +} + +.foto { + width: 150px; + height: 150px; +} + +.nombre { + font-size: 30px; + margin-left: 200px; + text-align: justify; +} + +.tech { + font-size: 20px; + margin-top: 20px; +} + +/* SECCION TEACHERS */ + +/*#teachersTab { + overflow: auto; + }*/ + +.contenedor-teacher { + width: 900px; + margin-left: 100px; + margin-top: 100px; + font-family: 'Montserrat', sans-serif; +} + +.contenedor-teacher h2 { + margin-left: 200px; +} + +.contenedor-teacher div { + display: inline-block; + margin: 20px 20px; +} + +.contenedor-teacher div img { + width: 200px; + height: 200px; +} + +.info { + float: right; + margin-bottom: 20px; +} + +#teachersTab h4 { + font-size: 2em; + font-family: 'Montserrat', sans-serif; + font-weight: 700; + padding: 20px; +} + +#teachersTab hr { + width: 800px; + text-align: center; + margin-top: 40px; + margin: 0 auto; +} + +#teachersTab h4 { + text-align: center; + margin-top: 50px; +} + +.cajas-graficas-teacher { + margin-top: 80px; +} diff --git a/index.html b/index.html index 8930fa03..b293404c 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,268 @@ + + + + Data Dashboard + + + +
+
+ logo-laboratoria-transparente + foto de perfil +

¡Bienvenido, John!

+
+ +
+ +
+ +
+ + + +
+
+ +
+ +
+ + +
+ + +
+ + +
+ PORCENTAJE DE DESERCION +
+
+

-

+

# ALUMNAS MATRICULADAS

+
+
+

-

+

% DESERCION

+
+
+
+
+ + +
+ META (ALUMNAS) +
+
+

-

+

# ALUMNAS (Cumple Meta)

+
+
+

-

+

% TOTAL(Cumple Meta)

+
+
+
+
+ + +
+ NET PROMOTER SCORE (NPS) +
+
+

-

+

% ACUMULATIVO NPS

+
+
+

+

+

+
+
+
+
+ +
+ + + +
+ + + + +
+ +
+ +
+
+ +
+
Jonathan "John"
+

Teacher & Jedi Master

+

jonathan@laboratoria.la

+
+
+ +
+ +
+
Emmanuel "Manu"
+

Lead Teacher

+

emmanuel@laboratoria.la

+
+
+ +
+ +
+
Ameli "Meme"
+

Teacher

+

ameli@laboratoria.la

+
+
+ +
+ +
+
Amalia
+

Teacher

+

amalia@laboratoria.la

+
+
+ +
+ +
+
Yesenia "Inti"
+

Teacher

+

yesenia@laboratoria.la

+
+
+
+ +
+
Karla "Karlis"
+

Teacher

+

karla.n@laboratoria.la

+
+
+
+
+

GRAFICAS DE CALIFICACION (TEACHER & JEDI MASTER)

+ + +
+ +
+ CALIFICACION TEACHER +
+
+

-

+

CALIFICACION GENERAL TEACHER

+
+
+
+
+ + +
+ CALIFICACION "JEDI MASTER" +
+
+

-

+

CALIFICACION GENERAL JEDI MASTER

+
+
+
+
+ +
+
+ - - - - - - +
+ + + + + + + diff --git a/js/app.js b/js/app.js index 895ae2dd..b00fae81 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,454 @@ -/* - * Funcionalidad de tu producto - */ -// Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); +/*---- Función para seleccionar sede y promoción, y generar datos------*/ +var select = document.getElementById("filtro-sedes"); +select.addEventListener("change", seleccionarOpcion); +function seleccionarOpcion() { + var sede = select.value; + var generacion = select.options[select.selectedIndex].dataset.generacion; + var generacionEstudiantes = data[sede][generacion]["students"].length; + var arrayEstudiantes = data[sede][generacion]["students"]; + var calificacionesNps = data[sede][generacion]["ratings"]; //arrayRartings + + + console.log(generacionEstudiantes); + console.log(arrayEstudiantes); + console.log(calificacionesNps); + + + +/*----------------------- CODIGO PARA LA SECCION DEL OVERVIEW ------------------------*/ + + +//Código para acceder a las alumnas activas por sede y generacióne specificas + +var counterActivo = 0; +var counterInactivo = 0; + +for (var i = 0; i< generacionEstudiantes; i++){ + console.log(generacionEstudiantes.length); + console.log (data[sede][generacion].students[i].active); + var activeStudents = data[sede][generacion].students[i].active; + console.log(activeStudents); + if(activeStudents === true){ + counterActivo ++; //contador Activo + } else { + counterInactivo ++; //contador Inactivo + } +} + +console.log("El valor es de activas: "+ counterActivo); +console.log("El valor es de inactivas: "+ counterInactivo); + +/*---- Estudiantes que desertaron (Porcentaje)------*/ + +var inactivoPorcentaje = ((counterInactivo / generacionEstudiantes) * 100).toFixed(1) + '%'; +console.log(inactivoPorcentaje); + +// Total de estudiantes en su contenedor + var enrollmentStudents = document.getElementById("caja-enrollment"); + enrollmentStudents.textContent = generacionEstudiantes; + + console.log(enrollmentStudents); + + // Porcentaje de estudiantes que desertaron en su contenedor + var dropoutPorcentaje = document.getElementById("dropout-porcentaje"); + dropoutPorcentaje.textContent = inactivoPorcentaje; + + +/*------- ACHIEVEMENT (Meta de Estudiantes Tectico y HSE)----------------*/ +var metaStudent= 0; + +var totalActTech =0; +var totalActHSE =0; + +for (var i = 0; i < generacionEstudiantes; i++) { + var scoreTech = 0; + var scoreHSE = 0; + var activeStudents = data[sede][generacion].students[i].active; + if(activeStudents === true){ + console.log(activeStudents); + + for (var j = 0; j < arrayEstudiantes[i]["sprints"].length; j++) { + scoreTech += arrayEstudiantes[i]["sprints"][j]["score"]["tech"]; + scoreHSE += arrayEstudiantes[i]["sprints"][j]["score"]["hse"]; + console.log("puntaje HSE " + scoreHSE); + console.log("puntaje TE " + scoreTech); + } + + var promedioTech = scoreTech / arrayEstudiantes[i]["sprints"].length; + var promedioHSE = scoreHSE / arrayEstudiantes[i]["sprints"].length; + console.log("promT " +promedioTech); + console.log("promHSE "+ promedioHSE); + + if (promedioTech >= 1260 && promedioHSE >= 840) { + metaStudent++; + } + } +} + console.log("El valor es de Tech: "+ totalActTech); + console.log("El valor es de HSE: "+ totalActHSE); + + var cajaAchievement = document.getElementById("caja-achievement"); + cajaAchievement.textContent = metaStudent; + + var percentajeTotal = document.getElementById("achievement-porcentaje"); + percentajeTotal.textContent = ((metaStudent / generacionEstudiantes) * 100).toFixed(1); + + + + /*------- El Net Promoter Score (NPS) promedio de los sprints cursados----------------*/ + + var promptersNps = document.getElementById("promoters"); + var passiveNps = document.getElementById("passive"); + var detractorNps = document.getElementById("detractor"); + var nps = document.getElementById("acumulativo-nps"); + console.log(nps); + + + var promoters = 0 / generacionEstudiantes * 100; + var passives = 0 / generacionEstudiantes * 100; + var detractors = 0 / generacionEstudiantes * 100; + for (i = 0; i < calificacionesNps.length; i++) { + promoters += (calificacionesNps[i]["nps"]["promoters"]) / calificacionesNps.length; + passives += (calificacionesNps[i]["nps"]["passive"]) / calificacionesNps.length; + detractors += (calificacionesNps[i]["nps"]["detractors"]) / calificacionesNps.length; + + promptersNps.textContent = promoters.toFixed(1) + "% Promoters"; + passiveNps.textContent = passives.toFixed(1) + "% Passives"; + detractorNps.textContent = detractors.toFixed(1) + "% Detractors"; + + nps.textContent = (promoters - detractors).toFixed(1); + } + + + + + + +/*----------------------- CODIGO PARA LA SECCION DE ESTUDIANTES ------------------------*/ + + +/* Agregar funcion para que aparezcan lista de estudiantes*/ +/*Funcion para que aparezcan lista de estudiantes*/ +document.getElementById("studentsTab").innerHTML = ""; +var scoreTech = 0; +var scoreHSE = 0; + +for (var l = 0; l 5) { + jediCalif.style.color = 'green'; + } else { + jediCalif.style.color = 'black'; + } + } + + +/*----------------------- SECCION DE GRAFICAS (Google Charts) -----------------*/ + +function drawChart() { + + +/*---- Graficas de Overview ---*/ + +//DESERCION (Grafica) +var data1 = new google.visualization.DataTable(); + data1.addColumn('string', 'name'); + data1.addColumn('number', 'students'); + data1.addRows([ + ['Desertoras', counterInactivo], + ['Asisten a clases', generacionEstudiantes - counterInactivo], + ]); + + var options1 = {'title': 'Alumnas (Activas) vs Alumnas que han desertado', + 'width': 500, + 'height': 300, + 'colors':['#000000','#F7B617'], + 'is3D': true}; + + var chart1 = new google.visualization.PieChart(document.getElementById("enrollment-draw")); + chart1.draw(data1, options1); + + +//CUMPLIO META (Grafica) +var data2 = new google.visualization.DataTable(); + data2.addColumn('string', 'name'); + data2.addColumn('number', 'students'); + data2.addRows([ + ['No Cumple meta', generacionEstudiantes - metaStudent], + ['Cumple meta', metaStudent], + ]); + + var options2 = {'title': 'Estudiantes la meta de puntaje establecido (Sprint)', + 'width': 500, + 'height': 300, + 'colors':['#000000','#F7B617'], + 'is3D': true}; + + var chart2 = new google.visualization.PieChart(document.getElementById("achieven-draw")); + chart2.draw(data2, options2); + +//El Net Promoter Score (NPS) +var data3 = new google.visualization.DataTable(); + data3.addColumn('string', 'logro'); + data3.addColumn('number', 'puntaje'); + data3.addRows([ + ['Detractors', detractors / 100 * generacionEstudiantes], + ['Passives', passives / 100 * generacionEstudiantes], + ['Promoters', promoters / 100 * generacionEstudiantes] + ]); + + var options3 = {'title': 'Recomendarias LABORATORIA a otras personas', + 'width': 500, + 'height': 300, + 'colors':['#000000','#2B2B2B','#F7B617'], + 'is3D': true}; + + var chart3 = new google.visualization.PieChart(document.getElementById("nps-draw")); + chart3.draw(data3, options3); + + + +/*--- Graficas de Teachers y Jedis ----*/ +var dataTeacher = new google.visualization.DataTable(); + dataTeacher.addColumn('string', 'logro'); + dataTeacher.addColumn('number', 'puntaje'); + dataTeacher.addRows([ + ['Puntaje No Otorgado', 5 - ratingsGeneralTeacher], + ['Puntaje Otorgado (Promedio)', ratingsGeneralTeacher], + ]); + + var optionsTeacher = {'title': 'Rating otorgado por las alumnas a sus junior y master teachers', + 'width': 500, + 'height': 300, + 'colors':['#000000','#F7B617'], + 'is3D': true}; + + var chartTeacher = new google.visualization.PieChart(document.getElementById("teacher-draw")); + chartTeacher.draw(dataTeacher, optionsTeacher); + +//JEDI MASTER + +var dataJedi = new google.visualization.DataTable(); + dataJedi.addColumn('string', 'logro'); + dataJedi.addColumn('number', 'puntaje'); + dataJedi.addRows([ + ['Puntaje No Otorgado', 5 - jediMaster], + ['Puntaje Otorgado Promedio', jediMaster], + ]); + + var optionsJedi = {'title': 'Rating otorgado por las alumnas a sus Jedi Master', + 'width': 500, + 'height': 300, + 'colors':['#000000','#F7B617'], + 'is3D': true}; + + var chartJedi = new google.visualization.PieChart(document.getElementById("jedi-draw")); + chartJedi.draw(dataJedi, optionsJedi); + + + + } + google.charts.setOnLoadCallback(drawChart); +} + + + + + + + +/* ------------------Funcion de Tabuladores-------------------*/ + function mostrarOcultar(event) { + var tabSeleccionado = event.target.dataset.tabSeleccionado; + var overflow = document.getElementById("overviewTab"); + var students = document.getElementById("studentsTab"); + var teachers = document.getElementById("teachersTab"); + if(tabSeleccionado === "tabOverview"){ + console.log("overflow"); + students.style.display = "none"; + teachers.style.display = "none"; + //muestra el tab + overflow.style.display = "block"; + + }else if (tabSeleccionado === "tabStudents") { + console.log("studen"); + teachers.style.display = "none"; + overflow.style.display = "none"; + //muestra la tab + students.style.display = "block"; + + }else if (tabSeleccionado === "tabTeachers") { + console.log("tecaher"); + students.style.display = "none"; + overflow.style.display = "none"; + //muestra la tab + teachers.style.display = "block"; + } + + } + var cargarPagina = function() { + var overflow = document.getElementById("overviewTab"); + var students = document.getElementById("studentsTab"); + var teachers = document.getElementById("teachersTab"); + overflow.style.display = "none"; + students.style.display = "none"; + teachers.style.display = "none"; + + var elementosTab = document.getElementsByClassName("tab"); + for (var i = 0; i < elementosTab.length; i++) { + elementosTab[i].addEventListener("click",mostrarOcultar); + } + } + + cargarPagina();