diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..e462ee80 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index e9b59c4c..4ae636e2 100644 --- a/README.md +++ b/README.md @@ -23,3 +23,71 @@ > 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:. + +*** + +### SOBRE EL PRODUCTO +En Laboratoria, las Training Managers (TMs) hacen un gran trabajo al analizar la mayor cantidad de datos posibles respecto al desempeño de las estudiantes para apoyarlas en su aprendizaje. Para revisar esta data, las TMs, normalmente, tienen que revisar muchos documentos de excel (Google Spreadsheets) que están localizados en distintas carpetas y ubicaciones. Muchas veces pierden tiempo localizando estos documentos y ejecutando fórmulas para obtener los datos que necesitan. + +Para poder optimizar su tiempo, las TMs han solicitado que construyamos una herramienta web donde puedan ver estos datos fácil y rápidamente. Y nos comentaron que estos son los datos que revisan normalmente: + +- El total de estudiantes presentes por sede y generación. +- El porcentaje de deserción de estudiantes. +- La cantidad de estudiantes que superan la meta de puntos en promedio de todos los sprints cursados. La meta de puntos es 70% del total de puntos en HSE y en tech. +- El porcentaje que representa el dato anterior en relación al total de estudiantes. +- El Net Promoter Score (NPS) promedio de los sprints cursados. El NPS se calcula en base a la encuesta que las estudiantes responden al respecto de la recomendación que darían de Laboratoria, bajo la siguiente fórmula: + +```bash + [Promoters] = [Respuestas 9 o 10] / [Total respuestas] * 100 + [Passive] = [Respuestas 7 u 8] / [Total respuestas] * 100 + [Detractors] = [Respuestas entre 1 y 6] / [Total respuestas] * 100 + + [NPS] = [Promoters] - [Detractors] +``` + +- La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos técnicos en promedio y por sprint. +- La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos de HSE en promedio y por sprint. +- El porcentaje de estudiantes satisfechas con la experiencia de Laboratoria. +- La puntuación promedio de l@s profesores. +- La puntuación promedio de l@s jedi masters. + + +*** + +# Data Dashboard + +## Propuesta de diseño inicial + +La estructura general para la primera pantalla del sitio puede ser pública o privada, conforme lo que tu decidas, si es pública tendría al principio un video o fotografía relacionado con el programa para que así el visitante pueda saber mas sobre el y tener una idea (si es empresa) del perfil que busca, pero si al contrario es privado cada usuario que tu nos digas podrá acceder con su e-mail y una contraseña generada automáticamente. + +**Respuesta del cliente:** _Mi principal necesidad es ver la data que les pasamos de manera especificada como en los requerimientos_. + +Para la segunda pantalla seria un overview que contendrá todo lo relacionado con los promedios generales del programa como el taller de HSE, el porcentaje de alumnas inscritas, así como de deserción de estudiantes, las evaluaciones de los jedi masters y profesores, el NPS de los sprints cursados, etc. + +La tercera pantalla del sitio sería el acceso a las sedes por su ubicación y con acceso a cada generación y dentro de cada generación sus estudiantes, para acceder a cada una mediante su perfil donde se podrá ver su especialidad y sus promedios graficados. + +En la última pantalla tener enlaces a blog, medios sociales, la visión de laboratoria (en caso de ser público). + +### Sketch inicial + + 1.- Primera pantalla + + ![Primera pantalla](assets/images/primera-pantalla.png) + + 2.- Segunda pantalla + + ![Segunda pantalla](assets/images/Sketch-uno.png) + + 3.- Tercera pantalla + + ![Tercera pnatalla](assets/images/Sketch-dos.png) + + 4.- Cuarta pantalla + + ![Cuarta Pantalla](assets/images/Sketch-tres.png) + +### Aclaraciones del cliente + +1.- Gráficas generales para el overview. + +2.- Agregar sección de teachers, con un perfil igual al de las alumnas. diff --git a/assets/images/Jonh(Cliente).jpeg b/assets/images/Jonh(Cliente).jpeg new file mode 100644 index 00000000..5bd0103b Binary files /dev/null and b/assets/images/Jonh(Cliente).jpeg differ diff --git a/assets/images/Sketch-dos.png b/assets/images/Sketch-dos.png new file mode 100644 index 00000000..bf97280c Binary files /dev/null and b/assets/images/Sketch-dos.png differ diff --git a/assets/images/Sketch-tres.png b/assets/images/Sketch-tres.png new file mode 100644 index 00000000..d0d51cb9 Binary files /dev/null and b/assets/images/Sketch-tres.png differ diff --git a/assets/images/Sketch-uno.png b/assets/images/Sketch-uno.png new file mode 100644 index 00000000..4d25e314 Binary files /dev/null and b/assets/images/Sketch-uno.png differ diff --git a/assets/images/primera-pantalla.png b/assets/images/primera-pantalla.png new file mode 100644 index 00000000..21a21c49 Binary files /dev/null and b/assets/images/primera-pantalla.png differ diff --git a/css/main.css b/css/main.css index 6355c827..8ef42faa 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,363 @@ /* * Estilos de tu proyecto - */ + */ + +* { + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; + margin: 0; + padding: 0; +} + +body { + background-color: #f7f7f7; +} + +header { + background: white; + color: black; + text-align: center; +} + +#promo_filter { + background-color: #FFF497; + border: 2px solid #f7b617; + border-radius: 3px; + color: black; + font-size: 1.2em; + font-weight: 300; + padding: 0.25em; +} + +#promo_filter:hover { + background-color: #f7b617; + color: #4C4743; + font-weight: 400; +} + +#dropout_percent { + color: red; +} + +#user_information { + font-size: 0.8em; + line-height: 2em; + vertical-align: top; +} + +#user_information > p:last-child { + color: #f7b617; +} + + +#promo_filter > option { + background-color: #4C4743; + color: black; + font-weight: 300; +} + +.logo-header { + width: 300px; +} + +.box-nav { + left: 25px; + position: absolute; + top: 40px; +} + +.fa { + cursor: pointer; +} + +.fa-bars:hover { + color: #f7b617; +} + +.fa-bell-o:hover { + color: #f7b617; +} + +.box-filter { + background-color: #FFF497; + color: white; +} + +.select-filter { + margin-left: 100px; + padding: 20px 0; +} + +.tabs { + font-weight: 300; + margin-left: 100px; + padding-bottom: 15px; +} + +.container-graphics { + overflow: auto; +} + +.big-graphic { + background-color: #fff; + box-shadow: 4px 4px 4px #c4c4c4; + margin: 30px auto; + width: 1000px; +} + +.select-skills { + border: none; + border-bottom: 1px solid #f7b617; + border-radius: 3px; + display: inline-block; + font-size: 1.1em; + font-weight: 300; + padding: 0.4em; +} + +.select-skills:hover { + background-color: #4C4743; + color: #fff; +} + +.small-graphic { + background-color: #fff; + box-shadow: 4px 4px 4px #c4c4c4; + float: left; + height: 540px; + margin: 15px auto; + margin-right: 1%; + overflow: hidden; + vertical-align: top; + width: 32%; +} + +.graphic { + margin-top: 150px; +} + +.container-small-boxes { + padding: 1em; +} + +.small-graphic-boxes { + background-color: #f7b617; + border-radius: 3px; + box-shadow: 2px 2px 2px #aaa8a8; + float: left; + height: 150px; + margin-right: 1em; + padding: 0.8em; + text-align: center; + vertical-align: top; + width: 40%; +} + +.texTbox { + font-size: .8em; + padding-top: 1em; +} + +.number-boxes { + font-size: 3.5em; + font-weight: 300; + border-bottom: 1px solid #ffffff; +} + +.menu { + background-color: rgba(255, 244, 151, 0.98); + color: black; + height: 100%; + left: 0; + overflow-x: hidden; + padding-top: 60px; + position: fixed; + top: 0; + transition: 0.5s; + width: 0; + z-index: 1; +} + +.box-nav > ul, li { + display: inline; + list-style: none; + margin: 0 10px; +} + +.tabs > li { + border-right: 2px solid #f7b617; + color: black; + cursor: pointer; + display: inline-block; + font-size: 1.3em; + padding-right: 1em; +} + +.tabs > li:hover { + color: #f7b617; +} + +.big-graphic > span { + display: inline-block; + font-size: 1.5em; + font-weight: 600; + padding: 20px; +} + +.small-graphic > span { + font-size: 1.5em; + font-weight: bold; + padding: 20px; +} + +.menu > .user { + padding-left: 1em; +} + +.user > .welcome { + font-weight: 300; + font-size: 1em; + margin-left: 35px; + padding: 0.5em 0 0.5em 0; +} + +.menu > .user > hr { + border: 0.7px solid #f7b617; + margin-left: 18px; + width: 70%; +} + +.menu > .user > img { + border: 5px solid #f7b617; + border-radius: 100px; + margin-left: 23px; +} + +.closebtn { + position: absolute; + top: 0; + right: 25px; + font-size: 36px; + margin-left: 50px; + text-decoration: none; + color: black; +} + +.closebtn:hover { + color: #f7b617; +} + +.setting { + border-bottom: 0.3px solid #f7b617; + border-top: 0.3px solid #f7b617; + padding: 20px; +} + +.setting:hover { + background-color: #f7b617; +} + +.container-students { + background: #f5eded; + margin: 0 auto; + overflow: auto; + padding: 1em; + width: 90%; +} + +.specialization { + background-color: #ffffff; + box-shadow: 2px 2px 2px #aaa8a8; + float: left; + padding: 1em; + vertical-align: top; + width: 30%; +} + +.student-hide { + float: right; + width: 69%; +} + +.img-student { + float: left; + height: 8em; + width: 25%; +} + +.name-student { + color: #4C4743; + float: left; + font-size: 1.2em; + font-weight: 700; + text-align: center; + vertical-align: top; + width: 35%; +} + +.profile-student { + background-color: #fff; + border-radius: 4px; + box-shadow: 2px 2px 2px #aaa8a8; + margin-bottom: 2em; + padding: 1em; + overflow: auto; +} + +.box-tech { + background-color: #FFB230; + border-radius: 4px; + box-shadow: 1px 2px 1px #949292; + box-sizing: border-box; + color: #fff; + float: left; + font-weight: 500; + height: 5em; + margin-right: 2%; + text-align: center; + vertical-align: top; + width: 19%; +} + +.box-life { + background-color: #ED6C44; + border-radius: 4px; + box-shadow: 1px 2px 1px #949292; + color: #fff; + float: left; + font-weight: 500; + height: 5em; + text-align: center; + vertical-align: top; + width: 19%; +} + +.user > div { + display: inline-block; + margin: 20px 10px; +} + +.user > div > i { + color: #f7b617; +} + +.setting > a { + color: black; + text-decoration: none; +} + +.specialization > h4 { + color: #4C4743; + font-size: 1.2em; + font-weight: 700; + margin-bottom: 1em; +} + +/* Clases reutulizables*/ +.show { + display:block; +} + +.hide { + display: none; +} diff --git a/index.html b/index.html index 8930fa03..07152722 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,232 @@ + + + Data Dashboard + + + +
+ + + + +
+
+
+
+ +
+ +
+
+ +
+
+ TECH SKILLS + +
+
+
+

-

+

# STUDENTS THAT MEET THE TARGET

+
+
+

-

+

% OF TOTAL

+
+
+
+
+
+ +
+
+ LIFE SKILLS + +
+
+
+

-

+

# STUDENTS THAT MEET THE TARGET

+
+
+

-

+

% OF TOTAL

+
+
+
+
+
+ +
+ ENROLLMENT +
+
+

-

+

# STUDENTS CURRENTLY ENROLLED

+
+
+

-

+

% DROPOUT

+
+
+
+
+ +
+ ACHIEVEMENT +
+
+

-

+

# STUDENTS THAT MEET THE TARGET

+
+
+

-

+

% OF TOTAL ()

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

-

+

% CUMULATIVE NPS

+
+
+

+

+

+
+
+
+
+ +
+ STUDENT SATISFACTION +
+
+

-

+

% MEETING OR EXCEEDING EXPETATIONS (CUMULATIVE)

+
+
+
+
+ +
+ TEACHER RATING +
+
+

-

+

OVERALL TEACHER RATING (CUMULATIVE)

+
+
+
+
+ +
+ JEDI MASTER RATING +
+
+

-

+

OVERALL JEDI RATING (CUMULATIVE)

+
+
+
+
+
+ + + + +
+ +
+
- + - + diff --git a/js/app.js b/js/app.js index 895ae2dd..a69c913a 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,478 @@ /* * Funcionalidad de tu producto */ +//Login de Dashboard +/*function validate(){ + var email = document.getElementById("e_mail").value; + var password = document.getElementById("password").value; -// Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); + if (email == "jonathan@laboratoria.la" && password == "Laboratoria"){ + window.location = "index.html"; + } else { + alert("Ingresa e-mail y contraseña correctos") + } + return false; +}*/ + +window.addEventListener('load', function() { + // Funcionalidad Menú + var openAnimatedMenu = document.getElementById('open_animated_menu'); + var closeAnimatedMenu = document.getElementById('close_animated_menu'); + + openAnimatedMenu.addEventListener('click', openMenu); + function openMenu() { + document.getElementById('animated_menu').style.width = '250px'; + } + + closeAnimatedMenu.addEventListener('click', closeMenu); + function closeMenu() { + document.getElementById('animated_menu').style.width = '0'; + } + + // Función para seleccionar sede y promoción, y generar datos + var select = document.getElementById('promo_filter'); + select.addEventListener('change', promFilter); + + function promFilter() { + var city = select.value; + var prom = select.options[select.selectedIndex].dataset.year; + var totalStudents = data[city][prom]['students'].length; + var dataRatings = data[city][prom]['ratings']; + var arrayStudents = data[city][prom]['students']; + + // ENROLLMENT + // Recorremos el array de estudiantes y contamos a las que desertaron + var dropout = 0; + for (var i = 0; i < arrayStudents.length; i++) { + if (arrayStudents[i].active === false) { + dropout++; + } + } + // Sacamos el porcentaje de estudiantes que desertaron + var dropoutPercent = ((dropout / totalStudents) * 100).toFixed(1) + '%'; + + // Total de estudiantes en su contenedor + var enrollmentStudents = document.getElementById('box_enrollment'); + enrollmentStudents.textContent = totalStudents; + + // Porcentaje de estudiantes que desertaron en su contenedor + var dropoutPorcentaje = document.getElementById('dropout_percent'); + dropoutPorcentaje.textContent = dropoutPercent; + + // ACHIEVEMENT + var studentMeetTarget = 0; + + for (var i = 0; i < totalStudents; i++) { + var scoreTech = 0; + var scoreHSE = 0; + + for (var j = 0; j < arrayStudents[i]['sprints'].length; j++) { + scoreTech += arrayStudents[i]['sprints'][j]['score']['tech']; + scoreHSE += arrayStudents[i]['sprints'][j]['score']['hse']; + } + + var averageTech = scoreTech / arrayStudents[i]['sprints'].length; + var averageHSE = scoreHSE / arrayStudents[i]['sprints'].length; + + if (averageTech >= 1260 && averageHSE >= 840) { + studentMeetTarget++; + } + } + + var boxAchievement = document.getElementById('box_achievement'); + boxAchievement.textContent = studentMeetTarget; + + var percentOfTotal = document.getElementById('percent_achievement'); + percentOfTotal.textContent = ((studentMeetTarget / totalStudents) * 100).toFixed(1); + // Semáforo de colores basado en el porcentaje de estudiantes que cumplen la meta + if (((studentMeetTarget / totalStudents) * 100).toFixed(1) < 70) { + percentOfTotal.style.color = 'red'; + } else if (((studentMeetTarget / totalStudents) * 100).toFixed(1) <= 80) { + percentOfTotal.style.color = 'yellow'; + } else if (((studentMeetTarget / totalStudents) * 100).toFixed(1) > 80) { + percentOfTotal.style.color = 'green'; + } + + var changeInfoTotal = document.getElementById('total_achievement'); + changeInfoTotal.textContent = '% OF TOTAL (' + totalStudents + ')'; + + // TEACHER RATING + var sumTeacherRating = 0; + + for (var i = 0; i < dataRatings.length; i++) { + sumTeacherRating += dataRatings[i]['teacher']; + } + + var overallTeacherRating = sumTeacherRating / dataRatings.length; + var teacherRating = document.getElementById('teacher_rating'); + teacherRating.textContent = overallTeacherRating.toFixed(1); + + // NPS + // Creando variables + var npsProm = document.getElementById('promoters'); + var npsPass = document.getElementById('passive'); + var npsDetr = document.getElementById('detractor'); + var nps = document.getElementById('cumulative_nps'); + + // Iterando para conseguir la suma + var promoters = 0 / totalStudents * 100; + var passives = 0 / totalStudents * 100; + var detractors = 0 / totalStudents * 100; + for (i = 0; i < dataRatings.length; i++) { + promoters += (dataRatings[i]['nps']['promoters']) / dataRatings.length; + passives += (dataRatings[i]['nps']['passive']) / dataRatings.length; + detractors += (dataRatings[i]['nps']['detractors']) / dataRatings.length; + + npsProm.textContent = promoters.toFixed(1) + '% Promoters'; + npsPass.textContent = passives.toFixed(1) + '% Passives'; + npsDetr.textContent = detractors.toFixed(1) + '% Detractors'; + + nps.textContent = (promoters - detractors).toFixed(1); + } + + // JEDI MASTER RATING + var jediRating = document.getElementById('jedi_rating'); + var jediMaster = 0; + + for (i = 0; i < dataRatings.length; i++) { + jediMaster += (dataRatings[i]['jedi']) / dataRatings.length; + jediRating.textContent = jediMaster.toFixed(1); + if (jediMaster > 4.5) { + jediRating.style.color = 'green'; + } else { + jediRating.style.color = 'black'; + } + } + + // STUDENT SATISFACTION + var studentSatisf = document.getElementById('student_satisf'); + var cumple = 0; + var supera = 0; + + for (i = 0; i < dataRatings.length;i++) { + cumple += (dataRatings[i]['student']['cumple']) / dataRatings.length; + supera += (dataRatings[i]['student']['supera']) / dataRatings.length; + + studentSatisf.textContent = (cumple + supera).toFixed(1); + } + + // TECH SKILLS + var studentTechSkills = 0; + + for (var i = 0; i < totalStudents; i++) { + var scoreTech = 0; + + for (var j = 0; j < arrayStudents[i]['sprints'].length; j++) { + scoreTech += arrayStudents[i]['sprints'][j]['score']['tech']; + } + + var averageTech = scoreTech / arrayStudents[i]['sprints'].length; + + if (averageTech >= 1260) { + studentTechSkills++; + } + } + + var studentsTech = document.getElementById('students_tech'); + studentsTech.textContent = studentTechSkills; + + var percentTech = document.getElementById('percent_tech'); + percentTech.textContent = ((studentTechSkills / totalStudents) * 100).toFixed(2); + // Semáforo de colores basado en el porcentaje de estudiantes que cumplen la meta en Tech + if (((studentTechSkills / totalStudents) * 100).toFixed(2) < 70) { + percentTech.style.color = 'red'; + } else if (((studentTechSkills / totalStudents) * 100).toFixed(2) <= 80) { + percentTech.style.color = 'yellow'; + } else if (((studentTechSkills / totalStudents) * 100).toFixed(2) > 80) { + percentTech.style.color = 'green'; + } + var changeInfoTech = document.getElementById('change_info_tech'); + changeInfoTech.textContent = '% OF TOTAL (' + totalStudents + ')'; + + // TECH SKILLS POR SPRINT + var selectTech = document.getElementById('overall_tech'); + selectTech.addEventListener('change', techFilter); + + function techFilter() { + var techSprintNumber = selectTech.value; // 0, 1, 2, 3 + + var studentsTechSprint = 0; + for (var i = 0; i < totalStudents; i++) { + if (arrayStudents[i].sprints[techSprintNumber].score.tech >= 1260) { + studentsTechSprint++; + } + } + + studentsTech.textContent = studentsTechSprint; + percentTech.textContent = ((studentsTechSprint / totalStudents) * 100).toFixed(2); + // Semáforo de colores basado en el porcentaje de estudiantes que cumplen la meta en Tech por Sprint + if (((studentsTechSprint / totalStudents) * 100).toFixed(2) < 70) { + percentTech.style.color = 'red'; + } else if (((studentsTechSprint / totalStudents) * 100).toFixed(2) <= 80) { + percentTech.style.color = 'yellow'; + } else if (((studentsTechSprint / totalStudents) * 100).toFixed(2) > 80) { + percentTech.style.color = 'green'; + } + changeInfoTech.textContent = '% OF TOTAL (' + totalStudents + ')'; + } + selectTech.value = ''; + + // LIFE SKILLS + var studentLifeSkills = 0; + + for (var i = 0; i < totalStudents; i++) { + var scoreLife = 0; + + for (var j = 0; j < arrayStudents[i]['sprints'].length; j++) { + scoreLife += arrayStudents[i]['sprints'][j]['score']['hse']; + } + + var averageLife = scoreLife / arrayStudents[i]['sprints'].length; + + if (averageLife >= 840) { + studentLifeSkills++; + } + } + + var studentsLife = document.getElementById('students_life'); + studentsLife.textContent = studentLifeSkills; + + var percentLife = document.getElementById('percent_life'); + percentLife.textContent = ((studentLifeSkills / totalStudents) * 100).toFixed(2); + // Semáforo de colores basado en el porcentaje de estudiantes que cumplen la meta en life Skills + if (((studentLifeSkills / totalStudents) * 100).toFixed(2) < 70) { + percentLife.style.color = 'red'; + } else if (((studentLifeSkills / totalStudents) * 100).toFixed(2) <= 80) { + percentLife.style.color = 'yellow'; + } else if (((studentLifeSkills / totalStudents) * 100).toFixed(2) > 80) { + percentLife.style.color = 'green'; + } + + var changeInfoLife = document.getElementById('change_info_life'); + changeInfoLife.textContent = '% OF TOTAL (' + totalStudents + ')'; + + // LIFE SKILLS POR SPRINT + var selectLife = document.getElementById('overall_life'); + selectLife.addEventListener('change', lifeFilter); + + function lifeFilter() { + var lifeSprintNumber = selectLife.value; // 0, 1, 2, 3 + + var studentsLifeSprint = 0; + for (var i = 0; i < totalStudents; i++) { + if (arrayStudents[i].sprints[lifeSprintNumber].score.hse >= 840) { + studentsLifeSprint++; + } + } + + studentsLife.textContent = studentsLifeSprint; + percentLife.textContent = ((studentsLifeSprint / totalStudents) * 100).toFixed(2); + // Semáforo de colores basado en el porcentaje de estudiantes que cumplen la meta en Life Skills por Sprint + if (((studentsLifeSprint / totalStudents) * 100).toFixed(2) < 70) { + percentLife.style.color = 'red'; + } else if (((studentsLifeSprint / totalStudents) * 100).toFixed(2) <= 80) { + percentLife.style.color = 'yellow'; + } else if (((studentsLifeSprint / totalStudents) * 100).toFixed(2) > 80) { + percentLife.style.color = 'green'; + } + changeInfoLife.textContent = '% OF TOTAL (' + totalStudents + ')'; + } + selectLife.value = ''; + + // CHARTS + // Jedi Chart + function drawChart() { + var data = new google.visualization.DataTable(); + data.addColumn('string', 'logro'); + data.addColumn('number', 'puntaje'); + data.addRows([ + ['Puntaje No Otorgado', 5 - jediMaster], + ['Puntaje Otorgado Promedio', jediMaster], + ]); + + var options = {'title': 'Rating otorgado por las alumnas a sus Jedi Master', + 'width': 500, + 'height': 300, + 'is3D': true}; + + var chart = new google.visualization.PieChart(document.getElementById('jedi_chart')); + chart.draw(data, options); + + // Teacher Chart + var data2 = new google.visualization.DataTable(); + data2.addColumn('string', 'logro'); + data2.addColumn('number', 'puntaje'); + data2.addRows([ + ['Puntaje No Otorgado', 5 - overallTeacherRating], + ['Puntaje Otorgado Promedio', overallTeacherRating], + ]); + + var options2 = {'title': 'Rating otorgado por las alumnas a sus junior y master teachers', + 'width': 500, + 'height': 300, + 'is3D': true + }; + + var chart2 = new google.visualization.PieChart(document.getElementById('teacher_chart')); + chart2.draw(data2, options2); + + // Student Satisfaction Chart + var data3 = new google.visualization.DataTable(); + data3.addColumn('string', 'logro'); + data3.addColumn('number', 'puntaje'); + data3.addRows([ + ['No cumple expectativa', 100 - (cumple + supera)], + ['Supera y Cumple Expectativa', cumple + supera], + ]); + + var options3 = {'title': 'Supera, Cumple o No Cumple LABORATORIA las expectativas de las alumnas', + 'width': 500, + 'height': 300, + 'is3D': true}; + + var chart3 = new google.visualization.PieChart(document.getElementById('satisfaction_chart')); + chart3.draw(data3, options3); + + // NPS Chart + var data4 = new google.visualization.DataTable(); + data4.addColumn('string', 'logro'); + data4.addColumn('number', 'puntaje'); + data4.addRows([ + ['Detractors', detractors / 100 * totalStudents], + ['Passives', passives / 100 * totalStudents], + ['Promoters', promoters / 100 * totalStudents] + ]); + + var options4 = {'title': 'Recomendarias LABORATORIA a otras personas', + 'width': 500, + 'height': 300, + 'is3D': true}; + + var chart4 = new google.visualization.PieChart(document.getElementById('nps_chart')); + chart4.draw(data4, options4); + + // Enrollment Chart + var data5 = new google.visualization.DataTable(); + data5.addColumn('string', 'name'); + data5.addColumn('number', 'students'); + data5.addRows([ + ['Desertoras', dropout], + ['Asistiendo a clases', totalStudents - dropout], + ]); + + var options5 = {'title': 'Alumnas que asisten a clases vs alumnas que han desertado', + 'width': 500, + 'height': 300, + 'is3D': true}; + + var chart5 = new google.visualization.PieChart(document.getElementById('enrollment_chart')); + chart5.draw(data5, options5); + + // Achievement Chart + var data6 = new google.visualization.DataTable(); + data6.addColumn('string', 'name'); + data6.addColumn('number', 'students'); + data6.addRows([ + ['No pasa la meta', totalStudents - studentMeetTarget], + ['Pasa la meta', studentMeetTarget], + ]); + + var options6 = {'title': 'Estudiantes que pasan la meta de puntaje establecido por sprint', + 'width': 500, + 'height': 300, + 'is3D': true}; + + var chart6 = new google.visualization.PieChart(document.getElementById('achiv_chart')); + chart6.draw(data6, options6); + } + // Set a callback to run when the Google Visualization API is loaded + google.charts.setOnLoadCallback(drawChart); + /* Agregar funcion para que aparezcan lista de estudiantes*/ + + var containerOfStudents = document.getElementById('listOfStudents'); + function studentsByGenerations() { + containerOfStudents.innerHTML = ''; + for (var i = 0; i < arrayStudents.length; i++) { + arrayStudents[i]; + // Creando un div para almacenar el perfil de la estudiante + var profileStudent = document.createElement('div'); + profileStudent.classList.add('profile-student'); + containerOfStudents.appendChild(profileStudent); + // Creando la imagen para la foto de perfil de la estudiante + var imgProfile = document.createElement('img'); + imgProfile.setAttribute('src', arrayStudents[i].photo); + imgProfile.classList.add('img-student'); + profileStudent.appendChild(imgProfile); + // Creando contenedor y agregando nombre para estudiante + var studentName = document.createElement('p'); + studentName.textContent = arrayStudents[i].name.toUpperCase(); + studentName.classList.add('name-student'); + profileStudent.appendChild(studentName); + // Creando y agregando box-tech-skill student + var boxTech = document.createElement('div'); + var percentTech = document.createElement('p'); + var techSkill = document.createElement('p'); + techSkill.textContent = 'TECH SKILLS'; + boxTech.classList.add('box-tech'); + boxTech.appendChild(percentTech); + boxTech.appendChild(techSkill); + profileStudent.appendChild(boxTech); + // Creando Y agregando box-life-skill student + var boxLife = document.createElement('div'); + var percentLife = document.createElement('p'); + var lifeSkill = document.createElement('p'); + lifeSkill.textContent = 'LIFE SKILLS'; + boxLife.classList.add('box-life'); + boxLife.appendChild(percentLife); + boxLife.appendChild(lifeSkill); + profileStudent.appendChild(boxLife); + /* Creamos una condicional para obtener los scores de los sprints*/ + if (arrayStudents[i]['sprints'].length > 0) { + var totalTech = 0; + var totalHse = 0; + for (var j = 0; j < arrayStudents[i]['sprints'].length; j++) { + totalTech += arrayStudents[i]['sprints'][j]['score']['tech']; + totalHse += arrayStudents[i]['sprints'][j]['score']['hse']; + } + percentTech.textContent = (totalTech / arrayStudents[i]['sprints'].length).toFixed(1); + percentLife.textContent = (totalHse / arrayStudents[i]['sprints'].length).toFixed(1); + } else { + percentTech.textContent = 'No hay datos suficientes'; + percentLife.textContent = 'No hay datos suficientes'; + } + } + } + studentsByGenerations(); + } + + /* Mediante esta función se cambia el contenido segun sección elegida*/ + var addAndHide = function(event) { + var tabSeleccionado = event.target.dataset.tabSelect; + var overview = document.getElementById('section_overview'); + var students = document.getElementById('section_students'); + var teachers = document.getElementById('section_teachers'); + + if (tabSeleccionado === 'tabOverview') {/* Desaparecen las secciones, excepto la de overview*/ + students.style.display = 'none'; + teachers.style.display = 'none'; + overview.style.display = 'block'; + } else if (tabSeleccionado === 'tabStudents') {/* Desaparecen las secciones, excepto la de students*/ + students.style.display = 'block'; + teachers.style.display = 'none'; + overview.style.display = 'none'; + } else if (tabSeleccionado === 'tabTeachers') {/* Desaparecenrece las secciones, excepto la de teachers*/ + students.style.display = 'none'; + teachers.style.display = 'block'; + overview.style.display = 'none'; + } + }; + + /* En esta función obtenemos los botones y le agregamos un evento a cada uno mediante un for, el evento se desencadena mediante un click y permitira que aparezca el contenido solicitado*/ + var changeSection = function() { + var lis = document.getElementsByClassName('tab'); + for (var i = 0; i < lis.length; i++) { + lis[i].addEventListener('click', addAndHide); + } + }; + changeSection(); +});