diff --git a/README.md b/README.md index e9b59c4c..30f7f194 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:. +## Autoras: Mariela Cerna- Melissa Yauri +## Objetivo + +Realizar una herramienta web denominada **Dashboard** que permita que los Training Managers revisen el desempeño de los estudiantes,de modo que ellos visualizen los datos de manera fácil y rápidamente.Los items que se debe de tomar en cuenta son: +* 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: + * [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 las profesores. +* La puntuación promedio de las jedi masters. + +La heramienta debe de ser de la siguiente forma presente: +[Dashboard](https://marvelapp.com/104ejifg/screen/33742285) + +# Adicional +* Tener un botón que permita indicar que una estudiante ha salido del Bootcamp y alterar los totales afectados por este cambio. +* Utilizar Google Charts para desarrollar estos gráficos, pero no es la única que se puede usar + +## Herramientas Utilizadas +* Css +* HTML +* Javascript diff --git a/assets/images/logoLab.png b/assets/images/logoLab.png new file mode 100644 index 00000000..c9c06f7a Binary files /dev/null and b/assets/images/logoLab.png differ diff --git a/css/main.css b/css/main.css index 6355c827..62f795df 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,121 @@ -/* - * Estilos de tu proyecto - */ + +*{ + + margin:0; +} + header{ + height: 100px; + width: 90%; + } + header img{ + width: 20%; + margin: auto; + display: block; + } +.bars{ +float: right; +font-size: 40px; +/*outline: 1px solid red;*/ +position: relative; +top:-80px; + + } +ul{ + list-style: none; +} + +.disabled-menu{ +display: none; + +} + + +.selectors{ + background-color: #e1e1e1; + height: 70px; +} + + + +.enabled-menu{ +display: block; +} + +.section-gray{ +/*outline:1px solid red;*/ +height: 80px; +background-color: #e2e4e6; +} +/*selectores sede-generaciones*/ +.selections{ + border: none; + background-color: #e2e4e6; + margin-left: 100px; + margin-top: 10px; + font-size: 20px; +} +.container-subtitle{ + overflow: auto; + margin-left: 80px; + margin-top: 20px; +} +.subtitle{ + float: left; + margin-left: 20px; +} +.results{ + background-color: #f7f7f7; + /*outline:1px solid red;*/ + height: 900px; +} +.container{ +margin-left: 80px; +} +.container .box{ + /*outline:1px solid red;*/ + border: 1px solid black; + border-radius: 7px; + height: 300px; + width: 300px; + background-color: #ffffff; + float: left; + margin-left: 30px; + margin-top: 30px; +} +/*estilo a la caja total de estudiantes*/ +.total-students{ + height: 70px; + width: 120px; + background-color: #e2e4e6; + float: left; +} + +/*estilo a las cajas de la seccion nps*/ +.total-nps, .seccion-nps, .satisfaction-nps { + height: 70px; + width: 120px; + background-color: #e2e4e6; + float: left; + margin-left: 20px; + } +#section2 { + display: inline-block; + background-color: rgb(203, 203, 238); + width: 100%; + height: 200px; +} +/*pase a hoja de melli*/ + +.filter2 { + height: 70px; + width: 120px; + background-color: #e2e4e6; + float: left; + margin-left: 20px; + + text-align: center; +} + +.filtertxt { + font-size: 12px; +} diff --git a/index.html b/index.html index 8930fa03..7b41d10b 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,94 @@ Data Dashboard + + - - - - - + +
+ +
+ + +
+
+ +
+ +
+

OVERVIEW

+

OVERVIEW

+

OVERVIEW

+
+
+ +
+
+
+

Enrollement

+ +
+

# de estudiantes inscritos

+
+ +
+ + +
+
+ +
+
+

Achievemet

+
+ + +
+

NPS

+ +
+

% NPS

+
+ +
+

% Individual

+
+ +
+ +
+

Student Satisfaction

+
+

% de estudiantes satisfechos

+
+ +
+ +
+ + + + diff --git a/js/app.js b/js/app.js index 895ae2dd..8ee788b2 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,134 @@ -/* - * Funcionalidad de tu producto - */ +window.addEventListener('load', function() { + /* funcion para mostrar las alumas por sede-generacion*/ + var selection = document.getElementById('selection'); + var containerStudents = document.getElementById('total-students'); + var totalNps = document.getElementById('total-nps'); + var satisfaction = document.getElementById('satisfaction'); + selection.addEventListener('change', showGenerations); + function showGenerations(event) { + /* seleccionando cada option de lista despegable*/ + var options = selection.value; + /* se convierte a un array para obtener la data de sede y generaciones*/ + var array = options.split('-');/* [lima,2017,2]*/ + /* console.log(array);*/ + /* obteniendo la generacion*/ + var array1 = array.splice(1, 2); + console.log(array1); + /* uniendo los dos elementos de la generacion*/ + var generation = array1[0] + '-' + array1[1]; + /* obteniendo la sede*/ + var site = array.splice(0, 1); + /* console.log(site);*/ + /* obteniendo datos por sede-generacion*/ + var siteGeneration = data[site][generation]; + /* console.log(siteGeneration);*/ + /* analizando el total de estudiantes*/ + var totalStudents = siteGeneration.students.length; + containerStudents.innerHTML = '# de studiantes inscritos' + '
' + totalStudents; + /* analizando el NPS*/ + var nps = 0; + /* recorriendo el elemento ratings para obtner el nps*/ + for (i = 0; i < siteGeneration.ratings.length;i++) { + var promoters = siteGeneration.ratings[i].nps.promoters; + var percentagePromotrs = (promoters / siteGeneration.ratings.length) * 100 / 100; + var passive = siteGeneration.ratings[i].nps.passive; + var percentagePassive = (passive / siteGeneration.ratings.length) * 100 / 100; + var detractors = siteGeneration.ratings[i].nps.detractors; + var percentageDetractors = (detractors / siteGeneration.ratings.length) * 100 / 100; + nps = nps + (promoters - detractors); + /* console.log(result)*/ + /* resultado del porcentaje del nps*/ + var percentageNps = Math.round(((nps / siteGeneration.ratings.length) * 100) / 100) + ' \n' + '%'; + } + /* incorporando el porcentaje del nps*/ + totalNps.innerHTML = '% NPS' + '
' + percentageNps ; + /* analizando el nivel de satifaccion de la estudiantes*/ + /* resultado de satisgacción*/ + var satisfactionResult = 0; + /* recorriendo el elemento ratings*/ + for (var j = 0; j < siteGeneration.ratings.length; j++) { + /* analizando el elemento ratings-student-cumple*/ + var satisfactionCumple = siteGeneration.ratings[j]['student']['cumple']; + /* console.log(satisfactionCumple);*/ + /* analizando el elemento ratings-student-supera*/ + var satisfactionSupera = siteGeneration.ratings[j]['student']['supera']; + satisfactionResult = satisfactionResult + (satisfactionCumple + satisfactionSupera); + } + /* porcentaje de satisfaciión*/ + var percentageSatisfaction = Math.round(satisfactionResult / siteGeneration.ratings.length) * 100 / 100 + '%'; + /* percentageSatisfaction.toFixed(1);*/ + /* console.log(percentageSatisfaction);*/ + satisfaction.innerHTML = ' % de estudiantes satisfechos' + '
' + percentageSatisfaction; + } -// Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); + /* menu derecho en el icono barras*/ + var bars = document.getElementById('bars'); + bars.addEventListener('click', showMenu); + function showMenu(event) { + var options = document.getElementById('options-menu'); + if (options.classList.contains('disabled-menu')) { + options.classList.remove('disabled-menu'); + options.classList.add('enabled-menu'); + } else { + options.classList.remove('enabled-menu'); + options.classList.add('disabled-menu'); + } + } + /* Añadiendo 2da pregunta*/ + var containerFilter2 = document.getElementById('containerFilter2'); + var containerFilter3 = document.getElementById('containerFilter3'); + function showPercent(event) { + var contpercent = document.createElement('div'); + contpercent.classList = 'filter2'; + var percentxt = document.createElement('p'); + percentxt.textContent = 'DROPOUT'; + var percent = document.createElement('a'); + var countPerct = 0; + var active1 = data.AQP['2016-2']['students']; + if (selection.value === 'AQP-2016-2') { + for (var i = 0; i < active1.length; i++) { + if (active1[i]['active'] === false) { + countPerct++; + percent.textContent = ((countPerct * 100) / (active1.length)).toFixed(2) + '% '; + contpercent.appendChild(percent); + contpercent.appendChild(percentxt); + containerFilter2.appendChild(contpercent); + countPerct = ''; + } + } + } + var active2 = data.AQP['2017-1']['students']; + if (selection.value === 'AQP-2017-1') { + for (var i = 0; i < active2.length; i++) { + if (active2[i]['active'] === false) { + countPerct++; + percent.textContent = ((countPerct * 100) / (active1.length)).toFixed(2) + '% '; + contpercent.appendChild(percent); + contpercent.appendChild(percentxt); + containerFilter2.appendChild(contpercent); + countPerct = ''; + } + } + } + var countSprints = 0; + var contPoint = document.createElement('div'); + contPoint.classList = 'filter2'; + var contPoints = document.createElement('a'); + var contPointTxt = document.createElement('p'); + contPointTxt.textContent = 'STUDENTS THAT MEER THE TARGET'; + contPointTxt.classList = 'filtertxt'; + if (selection.value === 'AQP-2016-2') { + for (var i = 0; i < active1.length; i++) { + for (var j = 0; j < active1[i]['sprints'].length; j++) { + if (active1[i]['sprints'][j]['score']['tech'] >= 1260 && active1[i]['sprints'][j]['score']['hse'] >= 840) { + countSprints++; + contPoints.textContent = countSprints; + contPoint.appendChild(contPointTxt); + contPoint.appendChild(contPoints); + containerFilter3.appendChild(contPoint); + } + } + } + } + } +});