diff --git a/assets/images/Cristina-Canchola.JPG b/assets/images/Cristina-Canchola.JPG new file mode 100644 index 00000000..29dea459 Binary files /dev/null and b/assets/images/Cristina-Canchola.JPG differ diff --git a/assets/images/grafica-muestra.png b/assets/images/grafica-muestra.png new file mode 100644 index 00000000..fced0d28 Binary files /dev/null and b/assets/images/grafica-muestra.png differ diff --git a/assets/images/logo-2.png b/assets/images/logo-2.png new file mode 100644 index 00000000..a88304d5 Binary files /dev/null and b/assets/images/logo-2.png differ diff --git a/css/main.css b/css/main.css index 6355c827..b67aa3af 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,353 @@ -/* - * Estilos de tu proyecto - */ +body { + font-family: 'Montserrat', sans-serif; + margin: 0; + padding: 0; + width: 100%; +} + +button { + width: 40px; + background-color: inherit; + border-color: inherit; +} + +span { /*estilo para el título del proyecto*/ + font-size: 1.9em; + margin: auto; +} + +nav { + width: 15%; + text-align: center; + background: #333333; + right: 45px; + color: #F7B617; +} + +ul { + list-style: none; + padding: 0; +} + +li:hover { + background-color: #F7B617; +} + +a { + text-decoration: none; + color: white; +} + +a:hover{ + color: #fff; +} + +div { + display: inline-block; + margin: 0 0.75em; +} + +h2 { /* estilos para el título de la primera fila de botones */ + color: #fff; + margin-top: 0.625em; + padding-left: 5%; + font-size: 1.25em; +} + +p { /* estilos para los párrafos de la primera fila de botones */ + display: inline-block; + color: #fff; + font-size: 1.25em; + margin: 0; +} + +#barra-sedes { + height: 100px; + background-color: #F7B617; +} + +#sedes { + border-radius: 8px; + font-size: 20px; + margin-left: 50px; + margin-top: 25px; + width: 220px; +} + +#generation { + border-radius: 8px; + font-size: 20px; + width: 150px; +} + +#headboard{ + width: 85%; + margin: 0 auto; + text-align: center; +} + +#container { /* estilos para el contenedor de la sección principal */ + width: 85%; + margin: 0 auto; +} + +.numTotal { /* estilos para los datos dinámicos de la primera hilera de botones */ + font-size: 4.25em; + margin: 0; + font-weight: bolder; +} + +.percent { + font-size: 3em; + margin: 0; + font-weight: bolder; + margin-top: 3%; +} + +.totalStudents, /* estilos para los contenedores de datos dinámicos de la primera hilera de botones */ +.totalPercent { + display: block; +} + +.enabled-menu { /* clase para no mostrar menú dinámico */ + display: block; + position: absolute; +} + +.disabled-menu { /* clase para mostrar menú dinámico*/ + display: none; +} + +.logo { /* estilos para el logo del nav */ + height: 100px; + margin: auto; + margin: 0 25%; +} + +.alumnas { /* estilos para el botón que muestra el total de alumnas activas*/ + background-color: #4643BB; + border-radius: 5px; + height:23.75em; + width: 20%; + margin-top: 4%; +} + +.prom-general { /* estilos para el botón que muestra el total de alumnas que alcazaron la meta general */ + border-radius: 5px; + width: 25%; + height: 23.75em; + background-color: #52E000; + margin-top: 4%; +} + +.meta-ht { /* estilos para el botón que muestra el total de alumnas que alcazaron la meta tech */ + border-radius: 5px; + width: 25%; + height: 23.75em; + background-color: #FC331C; + margin-top: 4%; +} + +.meta-HSE{ /* estilos para el botón que muestra el total de alumnas que alcazaron la meta HSE */ + border-radius: 5px; + width: 20%; + height: 23.75em; + background-color:#00C4DA; + margin-top: 4%; +} + +.nps { /*estilos para el botón que muestra los datos dinámicos correspondientes al NPS*/ + border-radius: 5px; + width: 47%; + height: 23.75em; + background-color: #0EACBD; + margin-top: 4%; +} + +.nsa { /* estilos para el botón que muestra los datos dinámicos correspondientes al nivel de satisfacción por alumna */ + border-radius: 5px; + width: 47%; + height: 23.75em; + background-color: #00B22C; + margin-top: 4%; +} + +#staff { + width: 47%; + display: inline-block; + padding: auto; +} + +#profileStudents { + width: 47%; + height: 28em; + float: right; + margin-top: 2em; + margin-right:2em; +} + +.prom-teachs { /* estilos para el botón que muestra el promedio de calificación por teacher */ + background-color:#1A9391; + border-radius: 5px; + height: 14em; + width: 100%; + margin-top: 4%; +} + +.prom-jedi { /* estilos para el botón que muestra el promedio de calificación por jedi master */ + background-color: #C7E000; + border-radius: 5px; + height: 14em; + width: 100%; + margin-top: 4%; +} + +.displayAverage { + display: block; +} + +.staffAverage { + width: 50%; + text-align: center; +} + +.icons { /* estilos para los iconos de la primera hilera de botones */ + text-align: center; + color: #fff; + font-size: 7.8em; + display: block; + margin-bottom: 0.01em; +} + +.icons-teachs, +.icons-jedi { + font-size: 7.8em; + color: white; + margin-left: 10%; +} + +.graph { /* estilos para la gráfica muesta del NPS y nivel de satisfacción por alumna*/ + width: 53%; +} + +.detailGraph { /* estilos para el contenedor de datos de la gráfica de NPS y nivel de satisfacción por alumna */ + width: 35%; + height: 10em; + display: inline-block; + vertical-align: 700%; +} + +.detailGraph > div > p { /* estilos para el detalle de datos de la gráfica de NPS y nivel de satisfacción por alumna */ + font-size: 1.25em; +} + +.itemGraph { /* estilos para el detalle de datos de la gráfica de NPS y nivel de satisfacción por alumna */ + display: block; +} + +.accumulated { /* estilos para el acumulado de NPS y nivel de satisfacción por alumna */ + display: block; + margin: 0; + text-align: center; + width: 100%; +} + +#profileStudents > div { + width: 40%; + height: 4em; + background: #333333; + border-radius: 5px; + padding: auto; + text-align: center; + margin-top: 5em; + margin-left: 30%; + display: block; + padding-top: 5%; +} + +#profileStudents > div > a { + color: whitesmoke; +} + +.logo-2 { + width: 90%; + margin-top: 5em; +} + +/*Estilos profile.html */ +/*estilosprefil de las Alumnas */ +body{ + margin: 0; + padding: 0; + width: 100%; +} + +h1{ + text-align: left; +} + +h3 { + font-size: 40px; + margin: 0; +} + +h4 { + margin: 0; +} + +.image1{ + width: 200px; + height: 200px; + border-radius: 5%; + padding: 10px; +} + +.image{ + background-color:#F7F7F7; + display: inline-block; + width:60%; + height: 400px; +} + +.especialization { + background-color: #F7F7F7; + display: inline-block; + width:30%; + height: 400px; +} + +.especialization > ul { + text-align: left; + font-weight: bolder; + color: #605a5a; +} + +.code { + width: 100%; + height: 100px; + background-color: #F7B617; +} + + .tech, + .life, + .english { + background-color:#F7B617 ; + color: #000; + display: inline-block; + margin: 5px; + height: 65px; + width: 120px; + } + + .code-name, + .code-tech, + .code-life, + .code-english { + color: #424040; + font-size: 20px; + } + + .code-profail { + font-weight: bolder; + color: #424040; +} diff --git a/index.html b/index.html index 8930fa03..d73eba1a 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,178 @@ + + + + Data Dashboard - - - - +
+ Data Dashboard + + + +
+ +
+ + + +
+ +
+
+

Alumnas

+ +
+

0

+

Alumnas
inscritas

+
+
+

0

+

%

+

Deserción

+
+
+ +
+

Meta promedio general

+ +
+

0

+

Alumnas que
superan meta

+
+
+

0

+

%

+

del total

+
+
+ +
+

Meta habilidades técnicas

+ +
+

0

+

Alumnas que
superan meta

+
+
+

0

+

%

+

del total

+
+
+ +
+

Meta HSE

+ +
+

0

+

Alumnas que
superan meta

+
+
+

0

+

%

+

del total

+
+
+ +
+

Net Prometer Score (NPS)

+ gráfica +
+
+

Promoter

+

50%

+
+
+

Passive

+

25%

+
+
+

Detractors

+

25%

+
+
+
+

NPS

+

25%

+
+
+ +
+

Nivel de satisfacción de las alumnas

+ gráfica +
+
+

Superar

+

50%

+
+
+

Cumple

+

25%

+
+
+

No-Cumple

+

25%

+
+
+
+

Acumulado

+

75%

+
+
+ +
+
+

Promedio teachers

+
+

8.2

+

Calificación

+
+ +
+ +
+

Promedio Jedi Masters

+
+

7.6

+

Calificación

+
+ +
+
+ +
+
+ Detalle de estudiantes + logo +
+
+ +
+ + + diff --git a/js/app.js b/js/app.js index 895ae2dd..6d313d8f 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,144 @@ -/* - * 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 boton = document.getElementById("btn"); + +boton.addEventListener("click", showMenu); + + function showMenu() { + var menu = document.getElementById("opcs-menu"); + + if(menu.classList.contains("disabled-menu")){ + menu.classList.remove("disabled-menu"); + menu.classList.add("enabled-menu"); + } + else{ + menu.classList.remove("enabled-menu"); + menu.classList.add("disabled-menu"); + } + } + +var selectSedes = document.getElementById('sedes'); +var selectGeneration = document.getElementById('generation'); + +selectSedes.addEventListener('change', getGeneration); //llamada al evento de select de Sedes para hacer dinámico el select de Generaciones +selectSedes.addEventListener('change', studentsEnrollment); +selectGeneration.addEventListener('change', studentsEnrollment); + +selectSedes.addEventListener('change', percentage); +selectGeneration.addEventListener('change', percentage); + +function getGeneration() { + if(selectSedes.value != 0){ + var generation = Object.keys(data[selectSedes.value]); + var numGeneration = generation.length; + selectGeneration.length = numGeneration; + + for(var i = 0; i < numGeneration; i++){ + selectGeneration.options[i].value = generation[i]; + selectGeneration.options[i].text = generation[i]; + } + } else { + selectGeneration.length = -1; + selectGeneration.options[0].value ='---'; + selectGeneration.options[0].text = '---'; + } + selectGeneration.options[0].selected = true; +} + +var displayTotalStudents = document.getElementsByClassName('numTotal')[0]; +var displayTotalStudentsEnrolled = document.getElementsByClassName('numTotal')[1]; +var displayTotalStudentsEnrolledTech = document.getElementsByClassName('numTotal')[2]; +var displayTotalStudentsEnrolledHse = document.getElementsByClassName('numTotal')[3]; + +function studentsReachedGoal(students, scoreType, goal) { + + var studentsScoresAverages = students.map(function (student) { + + var sumOfSprintsScores = student.sprints.reduce( function(sum, sprint) { + + return sum + sprint.score[scoreType]; + + }, 0) + + return sumOfSprintsScores / student.sprints.length + }) + + return studentsScoresAverages.filter( function(average) { + return average >= goal; + }).length +} + +function studentsReachedGeneralGoal(students, goal) { + var studentsScoresAverages = students.map(function (student) { + + var sumOfSprintsScores = student.sprints.reduce( function(sum, sprint) { + + return sum + sprint.score.tech + sprint.score.hse; + + }, 0) + + return sumOfSprintsScores / student.sprints.length + }) + + return studentsScoresAverages.filter(function (average) { + return average >= goal; + }).length +} + +function studentsEnrollment(){ + var sedeAccessor = selectSedes.value; + var generationBySede = data[sedeAccessor][selectGeneration.value] + var students = generationBySede.students; + var studentsActive = students.filter(function (student) { + return student.active; + }) + + var numberOfStudents = studentsActive.length; + + displayTotalStudents.innerText = numberOfStudents; + displayTotalStudentsEnrolled.innerText = studentsReachedGeneralGoal(studentsActive, 2100); + displayTotalStudentsEnrolledTech.innerText = studentsReachedGoal(studentsActive, 'tech', 1260); + displayTotalStudentsEnrolledHse.innerText = studentsReachedGoal(studentsActive, 'hse', 840); +} + +function percentage(){ + + var sedeAccessor = selectSedes.value; + var generationBySede = data[sedeAccessor][selectGeneration.value] + var students = generationBySede.students; + var totalEnrollment = students.length; + + var studentsActive = document.getElementsByClassName('numTotal')[0].textContent; + var generalGoal = document.getElementsByClassName('numTotal')[1].textContent; + var techGoal = document.getElementsByClassName('numTotal')[2].textContent; + var hseGoal = document.getElementsByClassName('numTotal')[3].textContent; + + var dropoutPercentage = document.getElementsByClassName('percent')[0]; + var generalGoalPercentage = document.getElementsByClassName('percent')[2]; + var techGoalPercentage = document.getElementsByClassName('percent')[4]; + var hseGoalPercentage = document.getElementsByClassName('percent')[6]; + + dropoutPercentage.innerText = Math.round((studentsActive*100)/totalEnrollment); + generalGoalPercentage.innerText = Math.round((generalGoal*100)/totalEnrollment); + techGoalPercentage.innerText = Math.round((techGoal*100)/totalEnrollment); + hseGoalPercentage.innerText = Math.round((hseGoal*100)/totalEnrollment); + +} + +// +// // Creando garficas +// +// google.charts.load('current', {packages: ['corechart']}); +// google.charts.setOnLoadCallback(drawChart); +// +// function drawChart() { +// var data = new google.visualization.DataTable(); +// data.addColumn('number', 'Sprint'); +// data.addColumn('number', 'Total de Alumnas'); +// addRows ( +// [ +// ["Sprint 1",] // aqui va la funcion o variable que contiene la dta de nuemero de alumnas +// ] +// ) +// +// } diff --git a/js/data.js b/js/data.js index afa0bb63..4707546b 100644 --- a/js/data.js +++ b/js/data.js @@ -4747,7 +4747,7 @@ var data = { 'active': false, 'sprints': [] }, - { }, + /*{ },*/ { 'name': 'Jada Curgenuer', 'photo': 'http://dummyimage.com/133x195.png/cc0000/ffffff', @@ -5006,7 +5006,7 @@ var data = { } ] }, - { }, + /*{ },*/ { 'name': 'Julieta Readhead', 'photo': 'http://dummyimage.com/119x227.png/ff4444/ffffff', diff --git a/profile.html b/profile.html new file mode 100644 index 00000000..157ba7c4 --- /dev/null +++ b/profile.html @@ -0,0 +1,76 @@ + + + + + + + + Profail + + +
+ Data Dashboard + +
+
+ Nuestro Talento +
+
+ +
+

SEDE:

+ + +

ORDENAR POR:

+ + +

SKILLS:

+ + + +
+ +
+ foto +

Cristina Canchola

+

Frontend Developer

+ + + +
+ Tech Skills
89.6% +
+ +
+ Life Skills
90.2% +
+ +
+ English Skills
Interm +
+
+ +
+ +
+ + + + +