diff --git a/assets/images/Laboratoria-logo.jpg b/assets/images/Laboratoria-logo.jpg new file mode 100644 index 00000000..c46a7bb2 Binary files /dev/null and b/assets/images/Laboratoria-logo.jpg differ diff --git a/assets/images/ale.png b/assets/images/ale.png new file mode 100644 index 00000000..0ba1429f Binary files /dev/null and b/assets/images/ale.png differ diff --git a/assets/images/chile.png b/assets/images/chile.png new file mode 100644 index 00000000..2f1e952d Binary files /dev/null and b/assets/images/chile.png differ diff --git a/assets/images/logo-laboratoria.svg b/assets/images/logo-laboratoria.svg deleted file mode 100644 index 9abf8fa2..00000000 --- a/assets/images/logo-laboratoria.svg +++ /dev/null @@ -1,108 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 00000000..235f6072 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/mexico.png b/assets/images/mexico.png new file mode 100644 index 00000000..1eb4bf52 Binary files /dev/null and b/assets/images/mexico.png differ diff --git a/assets/images/peru.png b/assets/images/peru.png new file mode 100644 index 00000000..53e24688 Binary files /dev/null and b/assets/images/peru.png differ diff --git a/css/main.css b/css/main.css index 6355c827..a1d48fd0 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,264 @@ -/* - * Estilos de tu proyecto - */ +/*Resetando*/ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} +/*Clases reutilizables*/ +.text-align{ + text-align: center; +} +.inline-block{ + display: inline-block; +} +.block{ + display: block; +} +.list-style{ + list-style: none; +} +.yellow{ + background-color: rgb(255,193,7); +} +.hidden { + display: none; +} +.border-bottom{ + border-bottom: 4px solid rgb(255,193,7); +} +.number-box-int{ + color : green; + font-size: 20px; + font-weight: 700; + } + .number-box-black{ + color : #000; + font-size: 20px; + font-weight: 700; + } + .text-font-size{ + font-size: 10px; + } + +.number-box-red{ + color : red; + font-size: 20px; + font-weight: 700; +} +/*Modificando header*/ +header{ + margin-top: 0; + width: 100%; + height: 9.2%; + position: fixed; + z-index: 1000; + background-color: rgb(236,235,235); + box-shadow: 0 0 3px #000; + top: 0; +} +.nav-header{ + width: 81.2%; + height: 100%; + position: fixed; +} +img{ + width: 150px; + margin: 2px 51px; +} +figure{ + background-color: #fff; + box-shadow: 0 0 2px #000; +} +/*Modificando tabs*/ +.tab{ + color: #000; + padding: 10px; + width: 220px; + text-align: center; + outline: none; + border: none; + transform: translateY(17%); + margin-left: 25px; + background-color: inherit; + font-size: 18px; + } +.tab:active { + transform: translateY(40%); + border-bottom: 4px solid rgb(255,193,7); +} +/*Modificando nav*/ +nav{ + width: 252px; + height: 100%; + position: fixed; + z-index: 1000; + box-shadow: 0 0 2px #000; +} +.info-user{ + width: 100%; + height: 30%; + padding: 40px 20px; + background-image: url(../assets/images/ale.png); + background-size: cover; +} +.div-user{ + width: 100%; + transform: translateY(300%); + margin-left: 30px; +} +.text-info-user{ + text-align: center; + color: #fff; + font-weight: 600; +} +.font-size{ + font-size: 12px; +} +.border{ + color: #000; + text-shadow: + -1px -1px 0 #fff, + 1px -1px 0 #fff, + -1px 1px 0 #fff, + 1px 1px 0 #fff; +} +.region{ + height: 45px; + text-align: justify; + padding-left: 10px; + font-size: 17px; +} +.list-region{ + height: 45px; + text-align: justify; + font-size: 15px; +} +a{ + display: block; + text-decoration: none; + color: #000; + width: 100%; + height: 100%; +} +.flags{ + width: 30px; + height: 18px; + margin: 0 10px; + transform: translateY(30%); +} +.region:hover, .list-region:hover, .list-lim:hover, .list-aqp:hover, .list-scl:hover, .list-cdmx:hover{ + background-color: rgb(236,235,235); +} +.fa-sort-desc{ + margin-left: 10px; + color: rgba(43,43,43,0.8); +} +.margin-list{ + margin-top: 2px; +} +.list-lim, .list-aqp, .list-scl, .list-cdmx{ + font-size: 15px; + padding: 7px 0; + padding-left: 50px; +} +/*Modificando Main*/ +.margin{ + margin-top: 60.89px; + margin-left: 252px; +} +.sprint-box{ + width: 100%; + position: fixed; + background-color: #FFF; + z-index: 1000; +} +.sprints{ +text-align: justify; +padding: 5px 10px; +width: 220px; +height: 100%; +cursor: pointer; +} +.sprints:hover{ + outline-color: #grey; +height: 100%; +} +a:hover { + outline-color: grey; + cursor: pointer; +} +.sprints:active{ + background-color: rgb(236,235,235); +} +/*Modificando article Overview*/ +.background-color-main{ + background-color: rgb(247,247,247); +} +.padding-article{ + padding-top: 40px; +} +.sections-overview{ + margin-top: 20px; + width: 100%; + height: 270px; + display: flex; +} +/*Modificacndo contenedores div*/ +.box-big{ + height: 100%; + background-color: #fff; + box-shadow: 0 0 5px #000; + width: 30%; + margin:10px 18px 10px 18px; +} +.box-big-skills{ + height: 100%; + background-color: #fff; + box-shadow: 0 0 5px #000; + width: 40%; + margin:10px 52px 10px 52px; +} +.box-little{ + width: 120px; + padding: 2px; + background-color: rgb(247,247,247); + font-size: 12px; + margin-left: 2px; +} +.number-box{ + font-size: 15px; + font-weight: 700; +} +.sections-overview{ + margin-top: 20px; + width: 100%; + height: 270px; + display: flex; +} +/*Modificacndo contenedores div*/ +.box-big{ + height: 100%; + background-color: #fff; + box-shadow: 0 0 5px #000; + width: 30%; + /* float: left; */ + margin:10px 18px 10px 18px; +} +.box-big-skills{ + height: 100%; + background-color: #fff; + box-shadow: 0 0 5px #000; + width: 40%; + margin:10px 52px 10px 52px; +} +.box-little{ + width: 160px; + padding: 10px; + background-color: rgb(247,247,247); + font-size: 12px; +} +.number-box{ + font-size: 15px; + font-weight: 700; +} diff --git a/index.html b/index.html index 8930fa03..52a31f44 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,144 @@ - Data Dashboard + Dashboard Laboratoria + + + + +
+
+ Logo laboratoria +
+ +
+ +
+ +
+
+
+

ENROLLMENT

+
52#STUDENTS CURRENTLY ENROLLED
+
20%% DROPOUT
+
+
+
+

ACHIEVEMENT

+
105#STUDENTS THAT MEETTHE TARGET
+
78%% OF TOTAL (135)
+
+ +
+
+
+

NET PROMOTER SCORE

+
78%% CUMULATIVE NPS +
+
+ 60% Promoters
+ 30% Passive
+ 10% Detractors
+
+
+
+
- - - - +
+
+

STUDENT SATISFATION

+
% MEETING OR EXCEEDINGEXPECTATIONS (CUMULATIVE)
+
+
+
+

TEACHER RATING

+
4.2OVERALL TEACHER RATING(CUMULATIVE)
+
+
+
+

JEDI MASTER RATING

+
OVERALL JEDI RATING(CUMULATIVE)
+
+
+
+
+
+

TECH SKILLS

+
90#STUDENTS THAT MEETTHE TARGET
+
62%% OF TOTAL (135)
+
+ +
+
+ #STUDENTS THAT MEET THE TARGET + #STUDENTS THAT DON'T MEET THE TARGET +
+
+
+

LIFE SKILLS

+
#OVERALL CLASS AVERAGE
+
#STUDENTS THAT MEETTHE TARGET
+
+ +
+
+ #STUDENTS THAT MEET THE TARGET + #STUDENTS THAT DON'T MEET THE TARGET +
+
+
+
+
+
+
+ + + diff --git a/js/app.js b/js/app.js index 895ae2dd..5cbdaaa1 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,480 @@ -/* - * Funcionalidad de tu producto - */ +var ulRegion = document.getElementById('ul-region'); +var ulLim = document.getElementById('ul-lim'); +var divRegion = document.getElementById('divRegion'); +var lima = document.getElementById('lim'); +var ulLim = document.getElementById('ul-lim'); +var lim172 = document.getElementById('lim172'); +var lim171 = document.getElementById('lim171'); +var lim162 = document.getElementById('lim162'); +var arequipa = document.getElementById('aqp'); +var ulAqp = document.getElementById('ul-aqp'); +var aqp171 = document.getElementById('aqp171'); +var aqp162 = document.getElementById('aqp162'); +var chile = document.getElementById('scl'); +var ulScl = document.getElementById('ul-scl'); +var scl172 = document.getElementById('scl172'); +var scl171 = document.getElementById('scl171'); +var scl162 = document.getElementById('scl162'); +var mexico = document.getElementById('cdmx'); +var ulCdmx = document.getElementById('ul-cdmx'); +var cdmx172 = document.getElementById('cdmx172'); +var cdmx171 = document.getElementById('cdmx171'); +var previous = divRegion; +var numberBoxStudents = document.getElementById('number-box-students'); +var studentsDropout = document.getElementById('students-dropout'); +var cumulativeNpsBox = document.getElementById('cumulative-nps-box'); +var promotersBox = document.getElementById('promoters-box'); +var passiveBox = document.getElementById('passive-box'); +var detractorsBox = document.getElementById('detractors-box'); +var satisfationBox = document.getElementById('satisfation-box'); +var teacherRatingBox = document.getElementById('teacher-rating-box'); +var jediRatingBox = document.getElementById('jedi-rating-box'); +var region; +var promotion; +var POINTMAX = 2100; -// Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); +window.addEventListener('load', function() { + divRegion.addEventListener('click', showAllRegions); + lima.addEventListener('click', optionsLima); + lim172.addEventListener('click', optionslim172); + lim171.addEventListener('click', optionslim171); + lim162.addEventListener('click', optionslim162); + arequipa.addEventListener('click', optionsArequipa); + // aqp171.addEventListener('click', optionsaqp171); + chile.addEventListener('click', optionsChile); + mexico.addEventListener('click', optionsMexico); + region = lim172.dataset.region; + promotion = lim172.dataset.promotion; + showMain(region, promotion); + cumulativeNps(region,promotion); + studentsSatisfation(region, promotion); + jediRating(region, promotion); + teacherRating(region, promotion); +}); + +function showAllRegions() { + // ulRegion.classList.toggle('hidden'); + ulRegion.classList.toggle('hidden'); + paintOptions(lim172, previous); + // paintOptions(divRegion, previous); + ulAqp.classList.toggle('hidden'); + ulScl.classList.toggle('hidden'); + ulCdmx.classList.toggle('hidden'); +}; +function paintOptions(option, previous) { + option.classList.add('yellow'); + if (option !== previous) + previous.classList.remove('yellow'); +} +function showMain(region, promotion) { + showTotalStudents(region, promotion); +} +function optionsLima() { + paintOptions(lima, previous); + previous = lima; + ulLim.classList.toggle('hidden'); +} + +function optionslim172() { + region = lim172.dataset.region; + promotion = lim172.dataset.promotion; + paintOptions(lim172, previous); + previous = lim172; + showMain(region, promotion); + showTotalStudents(region, promotion); + cumulativeNps(region, promotion); + studentsSatisfation(region, promotion); + teacherRating(region, promotion); + jediRating(region, promotion); + showOverGoal(region, promotion); +} + +function optionslim171() { + region = lim171.dataset.region; + promotion = lim171.dataset.promotion; + paintOptions(lim171, previous); + previous = lim171; + showMain(region, promotion); + showTotalStudents(region, promotion); + cumulativeNps(region, promotion); + studentsSatisfation(region, promotion); + teacherRating(region, promotion); + jediRating(region, promotion); + // showOverGoal(region, promotion); +} +function optionslim162() { + region = lim162.dataset.region; + promotion = lim162.dataset.promotion; + paintOptions(lim162, previous); + previous = lim162; + showMain(region, promotion); + showTotalStudents(region, promotion); + cumulativeNps(region, promotion); + studentsSatisfation(region, promotion); + teacherRating(region, promotion); + jediRating(region, promotion); +} +function optionsArequipa() { + paintOptions(arequipa, previous); + previous = arequipa; + ulAqp.classList.toggle('hidden'); +} +function optionsChile() { + paintOptions(chile, previous); + previous = chile; + ulScl.classList.toggle('hidden'); +} +function optionsMexico() { + paintOptions(mexico, previous); + previous = mexico; + ulCdmx.classList.toggle('hidden'); +} +/* Funnción para determinar estudiantes actuales y que desertaron*/ +function showTotalStudents(region, promotion) { + var current = 0; + var deserted = 0; + + for (var students in data [region][promotion]) { + if (students === 'students') { + for (var eachStudent in data [region][promotion][students]) { + var active = data[region][promotion][students][eachStudent]['active']; + (active) ? current++ : deserted++; + } + } + } + drawTotalStudents(current, deserted); + numberBoxStudents.textContent = current; + numberBoxStudents.classList.toggle('number-box-int'); + studentsDropout.textContent = parseFloat(deserted / (current + deserted) * 100).toFixed(0) + '%'; +} + +// Calculando el Net Promoter Score (NPS) promedio de los sprints cursados +function cumulativeNps(region, promotion) { + var promoters = 0; + var detractors = 0; + var arrayNps = []; + var arrayPromoters = []; + var arrayDetractors = []; + var arrayPassive = []; + var totalNps = 0; + var totalPromoters = 0; + var totalDetractors = 0; + var totalPassive = 0; + var s1 = 0; + var s2 = 0; + var s3 = 0; + var s4 = 0; + var ratings = data[region][promotion]['ratings']; + for (var i = 0; i < ratings.length; i++) { + arrayPromoters[i] = ratings[i]['nps']['promoters']; + arrayDetractors[i] = ratings[i]['nps']['detractors']; + arrayPassive[i] = ratings[i]['nps']['passive']; + arrayNps[i] = ratings[i]['nps']['promoters'] + ratings[i]['nps']['detractors']; + } + for (var i = 0; i < arrayNps.length; i++) { + totalPromoters = totalPromoters + arrayPromoters[i]; + totalDetractors = totalPromoters + arrayDetractors[i]; + totalPassive = totalPromoters + arrayPassive[i]; + totalNps = totalNps + arrayNps[i]; + } + + totalNps = parseInt(totalNps / arrayNps.length) + '%'; + totalPromoters = parseInt(totalPromoters / arrayPromoters.length) + '%'; + totalDetractors = parseInt(totalDetractors / arrayDetractors.length) + '%'; + totalPassive = parseInt(totalPassive / arrayPassive.length) + '%'; + + cumulativeNpsBox.textContent = totalNps; + cumulativeNpsBox.classList.add('number-box-int'); + promotersBox.textContent = totalPromoters; + detractorsBox.textContent = totalDetractors; + passiveBox.textContent = totalPassive; + + + if (arrayNps.length === 2) { + s1 = arrayNps[0]; + s2 = arrayNps[1]; + } else if (arrayNps.length === 4) { + s1 = arrayNps[0]; + s2 = arrayNps[1]; + s3 = arrayNps[2]; + s4 = arrayNps[3]; + } + + drawNetPromoter(s1, s2, s3, s4); +} + +function showOverGoal(region, promotion) { + var students = data[region][promotion]['students']; + var nsprint; + var hse; + var tech; + var count = 0; + var scoresTotal; + var countS1 = 0; + var countS2 = 0; + var countS3 = 0; + var countS4 = 0; + + for (var i = 0; i < students.length; i++) { + if (students[i]['active']) { + var sprint = students[i]['sprints']; + for (var j = 0; j < sprint.length;j++) { + nsprint = sprint[j]['number']; + + hse = sprint[j]['score']['hse']; + tech = sprint[j]['score']['tech']; + scoresTotal = hse + tech; + if (scoresTotal >= 2100) { + console.log('nsprint' + nsprint); + console.log(scoresTotal); + } + } + } + } + console.log(count); +} + +/* Función para el porcentaje de estudiantes satisfechas con la experiencia de Laboratoria.*/ +function studentsSatisfation(region, promotion) { + var ratings = data[region][promotion]['ratings']; + var cumple = []; + var total = 0; + var s1 = 0; + var s2 = 0; + var s3 = 0; + var s4 = 0; + for (var i = 0; i < ratings.length; i++) { + cumple[i] = ratings[i]['student']['cumple']; + } + for (var i = 0; i < cumple.length; i++) { + total = total + cumple[i]; + } + total = parseInt(total / cumple.length); + satisfationBox.textContent = total; + + if (cumple.length === 2) { + s1 = cumple[0]; + s2 = cumple[1]; + } else if (cumple.length === 4) { + s1 = cumple[0]; + s2 = cumple[1]; + s3 = cumple[2]; + s4 = cumple[3]; + } + drawStudentSatisfation(s1, s2, s3, s4); +} + +/* Funcion de la puntuación promedio de l@s profesores. */ +function teacherRating(region, promotion) { + var s1 = 0; + var s2 = 0; + var s3 = 0; + var s4 = 0; + var arrayteacherRating = []; + var ratings = data[region][promotion]['ratings']; + var totalTeacherRating = 0; + + for (var i = 0; i < ratings.length; i++) { + arrayteacherRating[i] = ratings[i]['teacher']; + } + for (var i = 0; i < arrayteacherRating.length; i++) { + totalTeacherRating = totalTeacherRating + arrayteacherRating[i]; + } + totalTeacherRating = totalTeacherRating / arrayteacherRating.length; + teacherRatingBox.textContent = totalTeacherRating; + + if (arrayteacherRating.length === 2) { + s1 = arrayteacherRating[0]; + s2 = arrayteacherRating[1]; + } else if (arrayteacherRating.length === 4) { + s1 = arrayteacherRating[0]; + s2 = arrayteacherRating[1]; + s3 = arrayteacherRating[2]; + s4 = arrayteacherRating[3]; + } + + drawTeacherRating(s1, s2, s3, s4); +} +/* Funcion de la puntuación promedio de l@s jedi masters. */ +function jediRating(region, promotion) { + var s1 = 0; + var s2 = 0; + var s3 = 0; + var s4 = 0; + var ratings = data[region][promotion]['ratings']; + var arrayJedi = []; + var total = 0; + for (var i = 0; i < ratings.length; i++) { + arrayJedi[i] = ratings[i]['jedi']; + } + for (var i = 0; i < arrayJedi.length; i++) { + total = total + arrayJedi[i]; + } + total = (total / arrayJedi.length); + total = total.toFixed(1); + jediRatingBox.textContent = total; + + if (arrayJedi.length === 2) { + s1 = arrayJedi[0]; + s2 = arrayJedi[1]; + } else if (arrayJedi.length === 4) { + s1 = arrayJedi[0]; + s2 = arrayJedi[1]; + s3 = arrayJedi[2]; + s4 = arrayJedi[3]; + } + drawJediRatings(s1, s2, s3, s4); +} + +/* Funcion de la puntuación promedio de l@s jedi masters. */ +function jediRating(region, promotion) { + var ratings = data[region][promotion]['ratings']; + var array = []; + var total = 0; + for (var i = 0; i < ratings.length; i++) { + array[i] = ratings[i]['jedi']; + } + for (var i = 0; i < array.length; i++) { + total = total + array[i]; + } + total = (total / array.length); + total = total.toFixed(1); + jediRatingBox.textContent = total; +} +/*************************GRAFICOS************/ + +function drawTotalStudents(current, deserted) { + google.charts.load('current', {'packages':['corechart']}); + google.charts.setOnLoadCallback(drawChart); + function drawChart() { + var dataTest = new google.visualization.DataTable(); + dataTest.addColumn('string', 'Topping'); + dataTest.addColumn('number', 'Slices'); + dataTest.addRows([ + ['Inscritas', current], + ['Desertaron', deserted], + ]); + var options = { + 'colors': ['#109618', '#dc3912'], + 'width': 320, + 'height': 150 }; + var chart = new google.visualization.PieChart(document.getElementById('chart_div_enrollment')); + chart.draw(dataTest, options); + } +} + + +function drawNetPromoter(s1, s2, s3, s4) { + google.charts.load('current', {packages: ['corechart', 'line']}); + google.charts.setOnLoadCallback(drawBasic); + console.log(s1); + console.log(s2); + function drawBasic() { + var data = new google.visualization.DataTable(); + data.addColumn('number', 'X'); + data.addColumn('number', 'NPS'); + data.addRows([ + [0, 0], [1, s1], [2, s2], [3, s3], [4, s4] + ]); + var options = { + hAxis: { + title: 'SPRINT' + }, + }; + var chart = new google.visualization.LineChart(document.getElementById('chart_div_nps')); + chart.draw(data, options); + } +} + +function drawStudentSatisfation(s1, s2, s3, s4) { + google.charts.load('current', {packages: ['corechart']}); + google.charts.setOnLoadCallback(drawChart); + function drawChart() { + var data = google.visualization.arrayToDataTable([ + ['Sprint', 'Porcentaje', { role: 'style' } ], + ['S1', s1, '#b87333'], + ['S2', s2, 'silver'], + ['S3', s3, 'gold'], + ['S4', s4, 'color: #e5e4e2'] + ]); + + var view = new google.visualization.DataView(data); + view.setColumns([0, 1, + { calc: 'stringify', + sourceColumn: 1, + type: 'string', + role: 'annotation' }, + 2]); + + var options = { + width: 300, + height: 200, + bar: {groupWidth: '75%'}, + legend: { position: 'none' }, + }; + var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_student_satisfation')); + chart.draw(view, options); + } +} + +function drawTeacherRating(s1, s2, s3, s4) { + google.charts.load('current', {packages: ['corechart']}); + google.charts.setOnLoadCallback(drawChart); + function drawChart() { + var data = google.visualization.arrayToDataTable([ + ['Sprint', 'Porcentaje', { role: 'style' } ], + ['S1', s1, '#b87333'], + ['S2', s2, 'silver'], + ['S3', s3, 'gold'], + ['S4', s4, 'color: #e5e4e2'] + ]); + + var view = new google.visualization.DataView(data); + view.setColumns([0, 1, + { calc: 'stringify', + sourceColumn: 1, + type: 'string', + role: 'annotation' }, + 2]); + + var options = { + width: 300, + height: 200, + bar: {groupWidth: '75%'}, + legend: { position: 'none' }, + }; + var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_teacher_rating')); + chart.draw(view, options); + } +} + +function drawJediRatings(s1, s2, s3, s4) { + google.charts.load('current', {packages: ['corechart']}); + google.charts.setOnLoadCallback(drawChart); + function drawChart() { + var data = google.visualization.arrayToDataTable([ + ['Sprint', 'Porcentaje', { role: 'style' } ], + ['S1', s1, '#b87333'], + ['S2', s2, 'silver'], + ['S3', s3, 'gold'], + ['S4', s4, 'color: #e5e4e2'] + ]); + + var view = new google.visualization.DataView(data); + view.setColumns([0, 1, + { calc: 'stringify', + sourceColumn: 1, + type: 'string', + role: 'annotation' }, + 2]); + + var options = { + width: 300, + height: 200, + bar: {groupWidth: '75%'}, + legend: { position: 'none' }, + }; + var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_jedi_rating')); + chart.draw(view, options); + } +}