diff --git a/README.md b/README.md index e9b59c4c..af2b4220 100644 --- a/README.md +++ b/README.md @@ -3,23 +3,42 @@ * **Track:** _Common Core_ * **Curso:** _Creando tu primer sitio web interactivo_ * **Unidad:** _Producto final_ +* **Colaboradores del Proyecto:** _Thalia Diaz y Aylin Espichan_ *** ## Flujo de trabajo -1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) - de este repositorio. +1. Es importante para nuestro cliente poder optimizar el tiempo de procesamiento de data, sobre todo si maneja importante data para esta. Hemos desarrollado un MVP: Data Dashboard para las TMs de Laboratoria, quienes tienen la ardua labor de monitorear la información de las alumnas y egresadas, ademas de los porcentajes de crecimiento de cada una y entre sedes. -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í: +**Estos fueron nuestros requerimientos:** ++ 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. - ```bash - git clone https://github.com//freelancer.git - ``` ++ 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: -3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio - (puedes solicitar apoyo de tus profes para este paso). + ~~~ + [Promoters] = [Respuestas 9 o 10] / [Total respuestas] * 100 -> 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:. +[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. + +Así deberia quedar nuestro MVP: + +![referencia](assets/images/reference.png) \ No newline at end of file diff --git a/assets/fonts/fonts/icomoon.eot b/assets/fonts/fonts/icomoon.eot new file mode 100644 index 00000000..5836416c Binary files /dev/null and b/assets/fonts/fonts/icomoon.eot differ diff --git a/assets/fonts/fonts/icomoon.svg b/assets/fonts/fonts/icomoon.svg new file mode 100644 index 00000000..dacff8da --- /dev/null +++ b/assets/fonts/fonts/icomoon.svg @@ -0,0 +1,12 @@ + + + +Generated by IcoMoon + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/fonts/icomoon.ttf b/assets/fonts/fonts/icomoon.ttf new file mode 100644 index 00000000..52f5bf39 Binary files /dev/null and b/assets/fonts/fonts/icomoon.ttf differ diff --git a/assets/fonts/fonts/icomoon.woff b/assets/fonts/fonts/icomoon.woff new file mode 100644 index 00000000..a6ad05fb Binary files /dev/null and b/assets/fonts/fonts/icomoon.woff differ diff --git a/assets/fonts/style.css b/assets/fonts/style.css new file mode 100644 index 00000000..abf4c898 --- /dev/null +++ b/assets/fonts/style.css @@ -0,0 +1,38 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?mxjnt6'); + src: url('fonts/icomoon.eot?mxjnt6#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?mxjnt6') format('truetype'), + url('fonts/icomoon.woff?mxjnt6') format('woff'), + url('fonts/icomoon.svg?mxjnt6#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-bars:before { + content: "\f0c9"; +} +.icon-navicon:before { + content: "\f0c9"; +} +.icon-reorder:before { + content: "\f0c9"; +} +.icon-caret-down:before { + content: "\f0d7"; +} diff --git a/assets/images/reference.png b/assets/images/reference.png new file mode 100644 index 00000000..5b7a9b70 Binary files /dev/null and b/assets/images/reference.png differ diff --git a/css/main.css b/css/main.css index 6355c827..7820fe99 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,247 @@ /* * Estilos de tu proyecto */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +body { + font-family: 'Roboto', sans-serif; + line-height: 26px; + background-color: #f7f7f7; +} +header { + height: 201px; +} +nav { + background: #ffffff; + display: inline-block; + position: relative; + width: 100%; + height: 76px; +} +.logo { + width: 169px; + height: 70px; + margin-left: 550px; + margin-top: 1px; +} +.icon-bars { + font-size: 28px; + padding-top: 21px; + padding-bottom: 27px; + float: right; + margin-right: 86px; +} +.selecting { + background-color: #e1e1e1; + height: 122px; +} +.sedes { + width: 445px; +} +.select { + border: 0; + background-color: transparent; + height: 40px; + font-size: 26px; + font-family: 'Roboto', sans-serif; + line-height: 20px; + margin-left: 81px; + margin-top: 20px; + overflow: hidden; + padding: 5px; + text-transform: uppercase; + width: 445px; +} +.wrap { + background: #e1e1e1; + width: 395px; + height: 49px; + margin-left: 75px; + margin-top: 12px; +} +.tabs { + display: inline-flex; + list-style: none; + position: relative; + margin: 10px; + padding: 0; +} +.tabBtn { + text-decoration: none; + background-color: transparent; + border: none; + color: black; + float: left; + font-size: 22px; + font-weight: 500; + padding: 4px; +} +.overview-tab { + display: none; + background-color: #f7f7f7; +} +.students-tab { + display: none; + background-color: #f7f7f7; +} +.container1 { + display: inline-flex; + width: 100%; + height: 433px; + margin-left: 85px; +} +.square { + background-color: #ffffff; + height: 335px; + width: 342px; + position: relative; +} +.data1 { + background-color: #f7f7f7; + display: inline-block; + font-size: 10.5px; + font-weight: 500; + line-height: 1.8; + text-align: center; + margin-left: 14px; + margin-top: 31px; + width: 146px; + height: 60px; +} +.first-position { + margin-top: 50px; + margin-right: 30.5px; +} +.container2 { + display: block; + margin-bottom: 24px; +} +.rectangle { + background: #ffffff; + margin-left: 87px; + width: 1084px; + height: 520px; + position: relative; +} +.data2 { + background-color: #f7f7f7; + display: inline-block; + font-size: 10.5px; + font-weight: 500; + line-height: 2.5; + text-align: center; + margin: 1.5px; + width: 197px; + height: 60px; + margin-left: 26px; + margin-top: 26px; +} +.initial { + margin-left: 20px; +} +.last-position { + margin-bottom: 123px; + margin-top: 27px; + margin-right: 30.5px; +} +.graphic { + display: block; + position: relative; + top: 35px; + left: 40px; +} +.graphic2 { + display: inline-flex; + position: relative; + height: 316px; + width: 611px; + top: 20px; + left: 26px; +} +.graphic3 { + display: inline-flex; + position: relative; + height: 329px; + width: 403px; + left: 26px; + top: 20px; +} +h2 { + text-align: left; + margin-left: 22px; + margin-top: 20px; +} +.rectangle h2 { + text-align: left; + width: 300px; + bottom: 30px; +} +.info-container { + background-color: #e1e1e1; + width: 100%; +} +.specialization { + background-color: white; + display: block; + height: 190px; + width: 358px; + padding: 2px 25px 2px 45px; + font-size: 20px; + line-height: 1.5; + margin-top: 30px; + margin-right: 10px; + margin-left: 80px; + margin-bottom: 15px; +} +.form1 { + padding-bottom: 15px; +} +.students-profile { + background-color: white; + position: relative; + float: left; + left: 400px; + bottom: 154px; + height: 39px; + width: 735px; +} +.search{ + width: 735px; + height: 39px; + float: right; +} +.students-info { + background-color: #ffffff; + height: 189px; + width: 737px; + position: relative; + float: left; + margin: 12px; + left: 400px; + bottom: 124px; +} +.photo { + background-color: #e1e1e1; + display: inline-flex; + position: relative; + height: 150px; + width: 150px; + left: 20px; + top: 20px; +} +.average { + background-color: #e1e1e1; + display: inline-flex; + position: relative; + left: 300px; + bottom: 73px; + height: 58px; + width: 74px; + margin: 5px; + margin-top: 17px; +} + diff --git a/index.html b/index.html index 8930fa03..0727d265 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,118 @@ + + + Data Dashboard - +
+ +
+
+ +
+
+
    +
    • +
    • +
    • +
+
+
+
+
+
+
+

ENROLLEMENT

+
grafico
+

ACHIVEMENT

grafico
+

NET PROMOTER SCORE

grafico
+
+
+

TECH SKILLS

graficografico
+
+
+

LIFE SKILLS

graficografico
+
+
+

STUDENT SATISFACTION

grafico
+

TEACHER RATING

grafico
+

JEDI MASTER RATING

grafico
+
+
+
+
+

SPECIALIZATION

+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
- + - + - + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 895ae2dd..25f66161 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,369 @@ -/* - * Funcionalidad de tu producto - */ - -// Puedes hacer uso de la base de datos a través de la variable `data` console.log(data); + +// evento para el selector de Sedes +var LIM = document.getElementById('LIM'); +var AQP = document.getElementById('AQP'); +var SCL = document.getElementById('SCL'); +var CDMX = document.getElementById('CDMX'); +var dataContainer = document.getElementById('overview-tab'); + +LIM.addEventListener('click', function() { + if (LIM.value === '2016-II') { + for (var i = 0; i <= dataContainer.length; i++) { + console.log(dataContainer[i]); + } + } +}); + +// Evento para las tabs: overview, students y teacher +var showHide = function(e) { + var tabs = e.target.dataset.selecttab; + var div1 = document.getElementById('overview-tab'); + var div2 = document.getElementById('students-tab'); + if (tabs === 'overview') { + div2.style.display = 'none'; + div1.style.display = 'block'; + } else if (tabs === 'students') { + div2.style.display = 'block'; + div1.style.display = 'none'; + } +}; + +var chargePage = function() { + var tabElements = document.getElementsByClassName('tabBtn'); + for (var i = 0; i < tabElements.length; i++) { + tabElements[i].addEventListener('click', showHide); + } +}; +chargePage(); + + +/** **************DATOS QUE MUESTRA EL ENROLLMENT ***********/ +function desercion(sede, generacion) { + var students = data[sede][generacion]['students']; + var studentsActive = []; + var studentsDeserte = []; + + for (var i = 0; i <= students.length - 1; i++) { + if (students[i].active === true) { + studentsActive.push(students[i].active); + } else { + studentsDeserte.push(students[i].active); + } + } + + var porcentajeDesercion = ((studentsDeserte.length * 100 / students.length)); + var studentsCurrent = studentsActive.length; + console.log('STUDENTS DROPOUT' + '\t' + studentsDeserte.length); + var desercion = Math.round(porcentajeDesercion) + '%'; + + var studentsCurrentEnrollment = document.getElementById('studentsCurrent'); + studentsCurrentEnrollment.innerHTML = studentsCurrent + '
' + ' # STUDENTS CURRENTLY ENROLLMENT' ; + + var dropout = document.getElementById('dropout'); + dropout.innerHTML = desercion + '
' + ' % DROPOUT'; +} + +console.log(desercion('LIM', '2016-2')); + +/** ************* DATOS ACHIEVEMENT********************/ + +function logroMetas(sede, generacion) { + var students = data[sede][generacion]['students']; + var studentsOverTarget = []; + var studentsDownTarget = []; + for (var i = 0; i < students.length; i++) { + if (students[i].active === true) { + var cantidadSprint = students[i].sprints.length; + for (var j = 0; j < students[i].sprints.length; j++) { + if ((students[i].sprints[j].score.tech >= 1260) && (students[i].sprints[j].score.hse >= 840)) { + studentsOverTarget.push(students[i].sprints[j]); + } else { + studentsDownTarget.push(students[i].sprints[j]); + } + } + } else { + + } + } + + var porcentajeLogroMetas = (studentsOverTarget.length * 100) / (studentsOverTarget.length + studentsDownTarget.length); + + var studentsTarget = studentsOverTarget.length; + console.log('no llegaron a la meta: ' + '\t' + studentsDownTarget.length); + var porcentajeAchievement = Math.round(porcentajeLogroMetas) + '%'; + var totalStudents = '% OF TOTAL (' + (studentsOverTarget.length + studentsDownTarget.length) / cantidadSprint + ')'; + + var studentsMeetTarget = document.getElementById('studentTarget'); + studentsMeetTarget.innerHTML = studentsTarget + '
' + '# STUDENTS THE MEET THE TARGET'; + + var porcentajeAchievementShow = document.getElementById('porcentajeAchievement'); + porcentajeAchievementShow.innerHTML = porcentajeAchievement + '
' + totalStudents; +} + +console.log(logroMetas('LIM', '2017-2')); + +/** ************** NET PROMOTER SCORE ****************/ + +function puntajePromotor(sede, generacion) { + var rating = data[sede][generacion]['ratings']; + var promoters = []; + var passive = []; + var detractors = []; + var totalNps = []; + var acumulativeNps = 0; + var porcentajeAcumulativeNps; + var porcentajePromotors = 0; + var porcentajePassive = 0; + var porcentajeDetractors = 0; + var totalPromoters = 0; + var totalPassive = 0; + var totalDetractors = 0; + + for (var i = 0; i < rating.length; i++) { + var nps = rating[i].nps.promoters - rating[i].nps.detractors; + totalNps.push(nps); + + promoters.push(rating[i].nps.promoters); + passive.push(rating[i].nps.passive); + detractors.push(rating[i].nps.detractors); + + totalPromoters = totalPromoters + promoters[i]; + totalPassive = totalPassive + passive[i]; + totalDetractors = totalDetractors + detractors[i]; + } + + porcentajePromotors = totalPromoters * 100 / (totalPromoters + totalDetractors + totalPassive); + porcentajeDetractors = totalDetractors * 100 / (totalPromoters + totalDetractors + totalPassive); + porcentajePassive = totalPassive * 100 / (totalPromoters + totalDetractors + totalPassive); + + var promoters = (Math.round(porcentajePromotors) + '%' + '\t' + 'PROMOTER'); + var detractors = (Math.round(porcentajeDetractors) + '%' + '\t' + 'DETRACTORS'); + var passive = (Math.round(porcentajePassive) + '%' + '\t' + 'PASSIVE'); + + var porcentajeIndividual = document.getElementById('porcentajeVarios'); + porcentajeIndividual.innerHTML = promoters + '
' + passive + '
' + detractors; + console.log(totalNps.length); + + for (var i = 0; i < totalNps.length; i++) { + acumulativeNps = acumulativeNps + totalNps[i]; + } + + porcentajeAcumulativeNps = acumulativeNps / totalNps.length; + + var cumulativeNps = Math.round(porcentajeAcumulativeNps) + '%'; + + var cumulativeNpsShow = document.getElementById('cumulativeNps'); + cumulativeNpsShow.innerHTML = cumulativeNps + '
' + '% CUMULATIVE NPS'; +} + +console.log(puntajePromotor('CDMX', '2017-1')); + +/** ********** TECH SKILLS *******************/ + +function logroMetasTech(sede, generacion, sprint) { + var students = data[sede][generacion]['students']; + var studentsOverTarget = []; + var studentsDownTarget = []; + var puntajesTech = []; + var totalPuntajeTech = 0; + var promedioNotaTech = 0; + for (var i = 0; i < students.length; i++) { + if (students[i].active === true) { + if (students[i].sprints[sprint].score['tech'] >= 1260) { + studentsOverTarget.push(students[i].sprints[sprint].score['tech']); + } else { + studentsDownTarget.push(students[i].sprints[sprint].score['tech']); + } + } + } + + for (var i = 0; i < students.length; i++) { + if (students[i].active === true) { + puntajesTech.push(students[i].sprints[sprint].score['tech']); + } + } + + for (var i = 0; i < puntajesTech.length; i++) { + totalPuntajeTech = totalPuntajeTech + puntajesTech[i]; + } + + promedioNotaTech = totalPuntajeTech / puntajesTech.length; + + var promedioTech = document.getElementById('promedioTech'); + promedioTech.innerHTML = Math.round(promedioNotaTech) + '
' + 'AVERAGE SCORE'; + + var porcentajeLogroMetasTech = (studentsOverTarget.length * 100) / (studentsOverTarget.length + studentsDownTarget.length); + + var studentsTargetTech = studentsOverTarget.length; + var studentsTargetTechShow = document.getElementById('targetTech'); + studentsTargetTechShow.innerHTML = studentsTargetTech + '
' + '# STUDENT THE MEET THE TARGET'; + + console.log('no llegaron a la meta Tech: ' + '\t' + studentsDownTarget.length); + + var porcentajeTargetTech = porcentajeLogroMetasTech + '%'; + var totalTech = '% OF TOTAL (' + (studentsOverTarget.length + studentsDownTarget.length) + ')'; + + var porcentajeTargetTechShow = document.getElementById('porcentajeTargetTech'); + porcentajeTargetTechShow.innerHTML = porcentajeTargetTech + '
' + totalTech; +} + +console.log(logroMetasTech('LIM', '2016-2', '0')); + +/** ****** LIFE SKILLS *****************/ + +function logroMetasLife(sede, generacion, sprint) { + var students = data[sede][generacion]['students']; + var studentsOverTarget = []; + var studentsDownTarget = []; + var puntajesHse = []; + var totalPuntajeHse = 0; + var promedioNotaHse = 0; + + for (var i = 0; i < students.length; i++) { + if (students[i].active === true) { + if (students[i].sprints[sprint].score['hse'] >= 840) { + studentsOverTarget.push(students[i].sprints[sprint].score['hse']); + } else { + studentsDownTarget.push(students[i].sprints[sprint].score['hse']); + } + } + } + + for (var i = 0; i < students.length; i++) { + if (students[i].active === true) { + puntajesHse.push(students[i].sprints[sprint].score['hse']); + } + } + + for (var i = 0; i < puntajesHse.length; i++) { + totalPuntajeHse = totalPuntajeHse + puntajesHse[i]; + } + + promedioNotaHse = totalPuntajeHse / puntajesHse.length; + + var promedioHse = document.getElementById('promedioHse'); + promedioHse.innerHTML = Math.round(promedioNotaHse) + '
' + 'AVERAGE SCORE'; + + var porcentajeLogroMetasLife = (studentsOverTarget.length * 100) / (studentsOverTarget.length + studentsDownTarget.length); + + var targetHse = studentsOverTarget.length; + var targetHseShow = document.getElementById('targetHse'); + targetHseShow.innerHTML = targetHse + '
' + 'STUDENT THE MEET THE TARGET'; + console.log('NO LLEGARON A LA META HSE: ' + '\t' + studentsDownTarget.length); + + var porcentajeTargetHse = Math.round(porcentajeLogroMetasLife) + '%'; + var totalHse = '% OF TOTAL (' + (studentsOverTarget.length + studentsDownTarget.length) + ')'; + + var porcentajeTargetHseShow = document.getElementById('porcentajeTargetHse'); + porcentajeTargetHseShow.innerHTML = porcentajeTargetHse + '
' + totalHse; +} + +console.log(logroMetasLife('LIM', '2016-2', '0')); + +/** ****************** STUDENT SATISFACTION ****************/ +function satisfaccionEstudiantes(sede, generacion) { + var rating = data[sede][generacion]['ratings']; + var supera = []; + var cumple = []; + var noCumple = []; + var totalExcede = 0; + + for (var i = 0; i < rating.length; i++) { + if (rating[i].student.supera) { + supera.push(rating[i].student.supera); + } + if (rating[i].student.cumple) { + cumple.push(rating[i].student.cumple); + } + if (rating[i].student['no-cumple']) { + noCumple.push(rating[i].student.noCumple); + } + } + + for (var i = 0; i < supera.length; i++) { + totalExcede = totalExcede + supera[i] + cumple[i]; + } + + var porcentajeSupera = totalExcede / supera.length; + + var studentSatisfaction = document.getElementById('studentSatisfaction'); + studentSatisfaction.innerHTML = Math.round(porcentajeSupera) + '
' + '% MEETING OR EXCEEDING EXPECTATIONS(CUMULATIVE)'; +} + +console.log(satisfaccionEstudiantes('LIM', '2016-2')); + +/** ************* TEACHER RATING ************ */ + +function calificacionMaestros(sede, generacion) { + var rating = data[sede][generacion]['ratings']; + var calificacion = []; + var sumCalificacion = 0; + + for (var i = 0; i < rating.length; i++) { + calificacion.push(rating[i].teacher); + } + + for (var i = 0; i < calificacion.length; i++) { + sumCalificacion = sumCalificacion + calificacion[i]; + } + + var calificacionGeneralTeacher = sumCalificacion / calificacion.length; + + var overallTeacher = document.getElementById('calificactionGeneral'); + overallTeacher.innerHTML = calificacionGeneralTeacher + '
' + 'OVERALL TEACHER RATING(CUMULATIVE)'; +} + +console.log(calificacionMaestros('LIM', '2016-2')); + + +/** ************* JEDI RATING ************ */ + +function calificacionJedi(sede, generacion) { + var rating = data[sede][generacion]['ratings']; + var calificacion = []; + var sumCalificacion = 0; + + for (var i = 0; i < rating.length; i++) { + calificacion.push(rating[i].jedi); + } + + for (var i = 0; i < calificacion.length; i++) { + sumCalificacion = sumCalificacion + calificacion[i]; + } + + var calificacionGeneralJedi = sumCalificacion / calificacion.length; + + var overallJedi = document.getElementById('calificactionGeneralJedi'); + overallJedi.innerHTML = calificacionGeneralJedi.toFixed(1) + '
' + 'OVERALL JEDI RATING(CUMULATIVE)'; +} + +console.log(calificacionJedi('LIM', '2016-2')); + +/** ******* STUDENTS DATA ******/ + +function studentsData(sede, generacion) { + var students = data[sede][generacion]['students']; + var studentNotaTech = []; + var studentNotaHse = []; + var sumaNotasTech = 0; + var sumaNotasHse = 0; + // debugger; + for (var i = 0; i < students.length; i++) { + for (var j = 0; j < students[i].sprints.length; j++) { + if (students[i].active === true) { + if (students[i].sprints[j].score.tech) { + studentNotaTech.push(students[i].sprints[j].score.tech); + } + if (students[i].sprints[j].score.hse) { + studentNotaHse.push(students[i].sprints[j].score.hse); + } + } + + console.log(students[i].name + '\t' + students[i].sprints[j].score.hse + '\t' + students[i].sprints[j].score.tech); + } + } +} + +console.log(studentsData('LIM', '2016-2')); +