diff --git a/README.md b/README.md index e9b59c4c..45642779 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,34 @@ # Data Dashboard -* **Track:** _Common Core_ -* **Curso:** _Creando tu primer sitio web interactivo_ -* **Unidad:** _Producto final_ - -*** - -## Flujo de trabajo - -1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) - de este repositorio. - -2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar - es `git clone` y su estructura normalmente se ve así: - - ```bash - git clone https://github.com//freelancer.git - ``` - -3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio - (puedes solicitar apoyo de tus profes para este paso). - -> Nota: No olvides que es una buena práctica describir tu proyecto en este -> archivo `README.md` y también desplegar tu web a Github Pages :smiley:. +* **OBJETIVO** +Construir una herramienta Web, donde se pueda analizar la mayor cantidad de datos posibles respecto al desempeño de las estudiantes de Laboratoria. + +* **PROBLEMATICA** +Las TMs de Laboratoria no cuentan con una herramienta para revisar los documentos de excel (Google Spreadsheets) que están localizados en diferentes carpetas y ubicaciones. +Esto ocasiona algunos problemas como: +-Pérdida de tiempo en localizar la información. +-Ejecutar fórmulas para obtener datos importantes. + +* **REQUERIMIENTOS DEL USUARIO** +- Total de estudiantes presentes por sede y generación. +- Porcentaje de deserción de estudiantes. +- Cantidad de estudiantes que superan la meta de puntos en promedio de todos los sprints. +- Porcentaje que representa el dato anterior en relación al total de estudiantes. +- El Net Promoter Score (NPS) promedio de los sprints cursados. +- Cantidad/Porcentaje que representa el total de estudiantes que superan la meta de puntos técnicos y por sprint. +- Cantidad/Porcentaje que representa el total de estudiantes que superan la meta de puntos de HSE y por sprint. +- Puntuación promedio de l@s profesores. +- Puntuación promedio de l@s jedi masters. +- Representación gráfica de los datos. + +* **ALCANCE** +- Se desarrolló una herramienta Web, que facilitará el manejo de la información de las estudiantes y egresadas de Laboratoria. +- La herramienta cuenta con los puntos siguientes: +- Amigable +- De fácil manejo + +* **A continuación se muestra la navegación de la página** + +![dashboard Laboratoria](./assets/images/navegacion-1.gif) + +![dashboard Laboratoria](./assets/images/navegacion-2.gif) diff --git a/assets/images/amalia.jpg b/assets/images/amalia.jpg new file mode 100644 index 00000000..a62033c0 Binary files /dev/null and b/assets/images/amalia.jpg differ diff --git a/assets/images/chile.png b/assets/images/chile.png new file mode 100644 index 00000000..f6043610 Binary files /dev/null and b/assets/images/chile.png differ diff --git a/assets/images/dummy-1.JPG b/assets/images/dummy-1.JPG new file mode 100644 index 00000000..ec23ea77 Binary files /dev/null and b/assets/images/dummy-1.JPG differ diff --git a/assets/images/dummy-2.JPG b/assets/images/dummy-2.JPG new file mode 100644 index 00000000..f50efc26 Binary files /dev/null and b/assets/images/dummy-2.JPG differ diff --git a/assets/images/dummy-3.JPG b/assets/images/dummy-3.JPG new file mode 100644 index 00000000..ea1708dc Binary files /dev/null and b/assets/images/dummy-3.JPG differ diff --git a/assets/images/dummy-4.JPG b/assets/images/dummy-4.JPG new file mode 100644 index 00000000..d4486dde Binary files /dev/null and b/assets/images/dummy-4.JPG differ diff --git a/assets/images/dummy-5.JPG b/assets/images/dummy-5.JPG new file mode 100644 index 00000000..c48f496e Binary files /dev/null and b/assets/images/dummy-5.JPG differ diff --git a/assets/images/dummy-6.JPG b/assets/images/dummy-6.JPG new file mode 100644 index 00000000..de19554f Binary files /dev/null and b/assets/images/dummy-6.JPG differ diff --git a/assets/images/dummy-7.JPG b/assets/images/dummy-7.JPG new file mode 100644 index 00000000..c9ed2eb2 Binary files /dev/null and b/assets/images/dummy-7.JPG differ diff --git a/assets/images/dummy.JPG b/assets/images/dummy.JPG new file mode 100644 index 00000000..44276ebd Binary files /dev/null and b/assets/images/dummy.JPG differ diff --git a/assets/images/inti.jpg b/assets/images/inti.jpg new file mode 100644 index 00000000..3a3933da Binary files /dev/null and b/assets/images/inti.jpg differ diff --git a/assets/images/jon.jpg b/assets/images/jon.jpg new file mode 100644 index 00000000..5bd0103b Binary files /dev/null and b/assets/images/jon.jpg differ diff --git a/assets/images/karla.jpg b/assets/images/karla.jpg new file mode 100644 index 00000000..d0490553 Binary files /dev/null and b/assets/images/karla.jpg differ diff --git a/assets/images/logo-laboratoria.png b/assets/images/logo-laboratoria.png new file mode 100644 index 00000000..77e532aa Binary files /dev/null and b/assets/images/logo-laboratoria.png differ diff --git a/assets/images/manu.jpg b/assets/images/manu.jpg new file mode 100644 index 00000000..504376c5 Binary files /dev/null and b/assets/images/manu.jpg differ diff --git a/assets/images/meme.jpg b/assets/images/meme.jpg new file mode 100644 index 00000000..8b77f0f9 Binary files /dev/null and b/assets/images/meme.jpg differ diff --git a/assets/images/mexico.png b/assets/images/mexico.png new file mode 100644 index 00000000..66f4fc5d Binary files /dev/null and b/assets/images/mexico.png differ diff --git a/assets/images/navegacion-1.gif b/assets/images/navegacion-1.gif new file mode 100644 index 00000000..33247ad2 Binary files /dev/null and b/assets/images/navegacion-1.gif differ diff --git a/assets/images/navegacion-2.gif b/assets/images/navegacion-2.gif new file mode 100644 index 00000000..1c969378 Binary files /dev/null and b/assets/images/navegacion-2.gif differ diff --git a/assets/images/pau.jpg b/assets/images/pau.jpg new file mode 100644 index 00000000..68d498e9 Binary files /dev/null and b/assets/images/pau.jpg differ diff --git a/assets/images/peru.png b/assets/images/peru.png new file mode 100644 index 00000000..65617360 Binary files /dev/null and b/assets/images/peru.png differ diff --git a/css/main.css b/css/main.css index 6355c827..903fa4a6 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,381 @@ /* - * Estilos de tu proyecto + * Estilos deL proyecto */ + + * { + box-sizing: border-box; /*justas un elemento con box-sizing: border-box*/ + margin: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; + font-size: 16px; +} + + header{ + background-color: #2A3845; + height: 80px; + width: 100%; + color: white; + } + + .logo { + margin-top: 7px; + margin-left: 20px; + width: 15%; + float: left; + } + + #titulo > h1 { + color: #f7ad14; + padding-top: 20px; + text-align: center; + font-size: 65px; + font-family: 'Didact Gothic', sans-serif; + } + + .jon { + margin-top: 10px; + float: right; + height: 70%; + weight: 15px; + border-radius: 100%; + margin-right: 20px; + } + + .fa-bell { + color: white; + float: right; + margin-right: 30px; + margin-top: 20px; +} +.fa-bars { + color: white; + float: right; + margin-right: 155px; + margin-top: 20px; +} + + /* Boton Menu*/ + .caja-menu{ + float: right; + margin: 50px -190px; +} + + .caja-menu ul{ + width: 180px; + list-style: none; + margin-right: 20px; + height: 250px; + font-size: 20px; + border-radius: 20px; + transition: 0.8s; + } + + .caja-menu ul hr{ + width: 80px; + margin-top: 8px; + margin-left: 40px; + } + .caja-menu ul li{ + text-align: center; + margin-top: 10px; + color: #fcfcfc; + } + + .caja-menu ul li:hover{ + background-color: #f7ad14; + } + + .perfil-jon{ + width: 60px; + height: 60px; + margin-left: 45px; + margin-top: 10px; + border-radius: 100%; + } + + .mostrar-menu{ + display: block; + background: #1c2f40; + padding: 10px; + } + + + .ocultar-menu{ + display: none; + } + + .clearfix{ + overflow: auto; + } + + .fa-wrench { + color: white; + float: left; +} + + .fa-line-chart { + text-align: center; + color: #2A3845; + margin-left: 640px; + } + +/* Menu (overview,stident y teacher)*/ + #menu { + margin-top: 20px; + width: 400px; + font-weight: 700; + float: left; + margin-left: 480px; +} + + #menu ul a { + color: #5D5D5D ; + text-decoration: none; + font-size: 18px; + font-weight: 700; + padding: 10px; + background-color: #fff; + border-bottom: 6px solid #FFC107 ; + transition: border-bottom .7s; + font-family: 'Montserrat', sans-serif; + } + + #menu ul a:hover { + border-bottom: 9px solid #2A3845 ; + } + +/* boton de seleccion*/ + + #filtro { + margin-top: 20px; + text-align: center; + } + + #filtro-sedes{ + + margin-left: 200px; + text-align: center; + width: 400px; + height: 30px; + margin: 20px 350px; + font-size: 16px; + } + +#arequipa { + background-image: url("assets/images/peru.png"); + background-repeat: no-repeat; + padding-left: 25px; + line-height: 50px; + margin-bottom: 2px; + } + +/*--------------------CONTENIDOSS---------------*/ + +/*--SECCION OVERVIEW (ESTILOS DE GRAFICA)*/ +#overviewTab { + overflow: auto; + width: 100%; +} + +.graficasTotal { + background-color: #2A3845; + padding: 35px; + text-align: center; + color: white; + float: left; + height: 480px; + margin: 50px 20px 50px 250px; + vertical-align: top; + width: 880px; + box-shadow: 4px 4px 4px #c4c4c4; + border-radius: 8px; + overflow: hidden; + +} + +.graficasTotal span { + font-size: 1.5em; + font-weight: bold; + padding: 20px; +} + + +.contenedor-cajas { + height: 100px; + margin-top: 80px; +} + +.contenedor-grafica { + background-color: #4c5a66; + color: white; + display: block; + text-align: center; + width: 180px; + height: 140px; + padding: 0.8em; + border-radius: 6px; + margin: 20px 20px; + font-family: 'Barlow', sans-serif; + font-size: 18px; + +} + +.grafica { + margin-top: -100px; + margin-left: 200px; + /*background-color: black;*/ +} + +.contenedor-grafica p{ + width: 150px; +} + +.grafica img { + padding-left: 10px; + padding-bottom: 10px; +} + +.datoText { + font-size: 3.4em; + font-weight: 300; + border-bottom: 1px solid #ffff; + width: 2.7em; + height: 1.2em; +} + +#dropout-porcentaje { + font-size: 40px; +color: #db345b; + font-weight: 700; + font-family: 'Barlow', sans-serif; + text-align: center; + margin-right: 30px; +} + +.cajaTexto { + font-size: .8em; + padding-top: 1em; +} + +/* SECCION ALUMNAS */ +#studentsTab { + overflow: inherit; +} + +.contenedor-coders{ + float: right; + width: 810px; + margin-top: 70px; + margin-right: 220px; + background-color: #404d59; + border-radius: 20px; +} + +.coders{ + width: 690px; + margin: 15px 10px 15px 15px; + +} + +.info-coders{ +float: right; +width: 500px; +} + +.foto { + width: 180px; + height: 180px; + background-size:cover; + border-radius: 20px; +} + +.nombre{ + font-size: 30px; + margin-left: 200px; + text-align:justify; + color: #bbbd58; +} + +.tech { + font-size: 18px; + margin-top: 40px; + margin-left: 50px; + color: #dbd3d6; +} + +.hse { + font-size: 18px; + margin-top: 5px; + color: #dbd3d6; + margin-left: 50px; +} + +.active { + font-size: 18px; + margin-top: 20px; + color: #dbd3d6; + margin-left: 50px; +} + +/*.especializacion { + position: relative; + background-color: #b51d1d; + width: 200px; + height: 100px; + padding: 1em; + box-shadow: 2px 2px 2px #aaa8a8; +} + +.especializacion h4 { + font-weight: 700; + margin-bottom: 1em; + font-size: 1.2em; + color: #4C4743; +}*/ + +/* SECCION TEACHERS */ + +#teachersTab { + overflow: auto; + margin-top: 100px; +} + +.contenedor-teacher{ + width: 900px; + margin-left: 400px; +} +.contenedor-teacher div{ + display:inline-block; + margin: 20px 20px; +} + +.contenedor-teacher div img{ + width: 200px; + height: 200px; + border-radius: 100%; +} + +.info{ + float: right; + margin-bottom: 20px; + font-size: 30px; +} + +#teachersTab hr{ + width: 800px; + margin-top: 100px; + margin-left: 300px; + box-shadow: -2px 3px 11px 2px #a8a7a2; +} + +#teachersTab h4{ + text-align: center; + margin-top: 80px; + font-size: 35px; + color: #f7ad14; + +} + +.cajas-graficas-teacher{ + margin-top: 30px; +} diff --git a/index.html b/index.html index 8930fa03..d2bda9e6 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,232 @@ - - - Data Dashboard - - + + + + + + + + + + + Data Dashboard + + + +
+ + +
+ +
+ + +
+
+

Dashboard

+ +
+
+ + + +
+ +
+ +
+ +
+ PORCENTAJE DE DESERCIÓN +
+
+

-

+

# ALUMNAS MATRICULADAS

+
+
+

-

+

% DESERCIÓN

+
+
+
+
+ +
+ META (Alumnas Activas) +
+
+

-

+

# ALUMNAS (Cumple Meta)

+
+
+

-

+

% TOTAL (Cumple Meta)

+
+
+
+
+ +
+ NET PROMOTER SCORE (Promedio de los sprints cursados) +
+
+

-

+

% ACUMULATIVO NPS

+
+
+

+

+

+
+
+
+
+
+ +
+
+

ESPECIALIZACION

+
+ UX Design + Front end developer +
+
+ + +
+ +
+
+
+ +
+
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

+
+
+
+
+

GRÁFICAS DE CALIFICACIÓN (TEACHER & JEDI MASTER)

+ +
+ +
+ CALIFICACION "TEACHER" +
+
+

-

+

CALIFICACIÓN GENERAL TEACHER

+
+
+
+
+ + +
+ CALIFICACIÓN "JEDI MASTER" +
+
+

-

+

CALIFICACIÓN GENERAL JEDI

+
+
+
+
+
+
+
+ + diff --git a/js/app.js b/js/app.js index 895ae2dd..a1b7da2f 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,465 @@ /* * Funcionalidad de tu producto */ - // Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); +//console.log(data); + +/*var arraySede = Object.keys(data); +var numSede = arraySede.length; +var nombreSede = 0; + + +console.log(numSede); + + +for (var i = 0; i <= numSede; i++) { + var numeroGeneraciones = Object.keys(data[arraySede[i]]); + console.log(numeroGeneraciones); + for (var j = 0; j <= numeroGeneraciones.length; j++) { + var totalAlumnas = data[numSede[i]][numeroGeneraciones[j]]["students"].length; + + } + }*/ + + + + + + + + + +/*---- 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