diff --git a/README.md b/README.md index e9b59c4c..c5bb8e1d 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,71 @@ -# Data Dashboard +# Dashboard de Laboratoria -* **Track:** _Common Core_ -* **Curso:** _Creando tu primer sitio web interactivo_ -* **Unidad:** _Producto final_ +

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.

-*** +**Funcionalidades Requeridas** + +
  • 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
    • -## Flujo de trabajo +**Formula utilizada** -1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) - de este repositorio. +[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 -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í: +[NPS] = [Promoters] - [Detractors] - ```bash - git clone https://github.com//freelancer.git - ``` +## Herramientas utilizadas : + -3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio - (puedes solicitar apoyo de tus profes para este paso). +## Avances -> 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:. + + +## Librerias +[Google Charts](https://developers.google.com/chart/interactive/docs/quick_start) + + +## Bibliografia + +https://www.youtube.com/watch?v=QRN91T8rqW4 + +https://www.w3schools.com/howto/howto_google_charts.asp + +http://jsonviewer.stack.hu/ + +https://youtu.be/nEKbaKIat1g + +https://www.youtube.com/watch?v=Oh8bHJZn-q4 + +https://es.stackoverflow.com/questions/2795/c%C3%B3mo-insertar-varias-gr%C3%A1ficas-de-google-charts-en-la-misma-p%C3%A1gina + +## Guia utilizada + +[Dasboard laboratoria](https://marvelapp.com/104ejifg/screen/33742285) + +[Base de datos](https://github.com/Laboratoria-learning/data-dashboard/blob/master/js/data.js) diff --git a/css/main.css b/css/main.css index 6355c827..38a5c249 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,219 @@ -/* - * Estilos de tu proyecto - */ +/* Seteo general */ +/*Estilos generales*/ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} +body { + text-align:center; + width: 100%; + font-family: 'Montserrat', sans-serif; +} +.remove-underlined { + text-decoration: none; + color: black; +} +.inline-elements { + display: inline-block; +} +.remove-style { + list-style: none +} +.small-font { + font-size: 11px; + font-weight: bold; + color:#515151; + margin:0; + height:50%; +} +h3 { + padding: 12px 0px; +} +/*Estilos del Header */ +header { + width: 100%; + height: 75px; +} +header ul { + display: flex; + justify-content:space-around; +} +header .logo { + width: 500px; + height: 65px; + transform: translateX(45%); + display: inline-block; +} +header #icon-menu { + transform: translateY(50%); +} + +#wrapper { + width: 100%; + display: flex; + height: 1750px; + border-radius:15px; + padding:1px; + background-color:#e2e4e6; +} +/*Estilos del Nav*/ + +nav { + width: 12%; +} + +nav .nav-sedes { + font-family: 'Montserrat', sans-serif; + font-weight: bold; + padding:18px 0px; + background: #ffb100; + height: 50px; +} + +/*Estilos del main*/ +main { + display: inline-block; + width:90%; + background-color: #f1eeeeee; +} +.selected-box { + padding:10px; + background-color: #c0c0c0; +} +.tabs { + margin-top:10px; +} +.tab { + font-family: 'Montserrat', sans-serif; + font-weight: bold; + padding: 10px 20px; + border-style: none; + background-color: #ffae00d5; + border-radius: 10px; + border-style: none; + outline:none; +} +.tab:hover { + background-color: #515151; + color: #ffae00d5; + transition: 0.5s; +} +#container-overview { + margin-top:2%; + margin-bottom: 5%; +} +.chart { + width:30%; + height: 300px; + overflow:hidden; + vertical-align:top; + padding:30px 10px; + border-radius: 8px; +} +.data-boxes { + overflow: hidden; + width: 160px; + height: 60px; + background-color: #e4e3e3; + font-weight: bold; + font-size:18px; +} +.sections { + margin-bottom: 3%; +} +.graphic { + background-color: #fff; + border-radius:8px; + padding:20px 0px; +} +.second-graph { + width: 80%; + margin: auto; +} +.select { + font: sans-serif; + border: 1px solid rgb(255, 239, 21); + line-height: 1; + outline: 0; + color:inherit; + border-color:rgb(255, 239, 21); + padding: 5px 8px 5px 3px; + border-radius: 3px; + background: linear-gradient(rgb(255, 233, 105), rgb(255, 233, 105)) no-repeat, + linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat, + linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat, + linear-gradient(rgb(255, 233, 105),rgb(255, 233, 105)) no-repeat; + background-color:rgb(255, 241, 88); +} +/*Estilos Students Section */ +#container-students { + margin-top:2%; +} +.specialization { + text-align: left; + width: 30%; + vertical-align: middle; + padding:10px; +} +.students { + text-align: left; + width:60%; + vertical-align: top; + padding:15px; + border-radius: 8px; +} +.students-form { + background-color:rgb(197, 196, 196); + padding:5px; + border-radius:5px; +} +.search-students { + display:inline-block; + width:600px; + height:40px; +} +form .fa-search { + padding: 10px; +} +.arequipa-2017-2 { + margin-top: 12px; +} +.student-data { + padding:5px; + background-color: rgba(255, 223, 40, 0.795); + border-radius:10px; + margin-bottom:5px; +} +.box-student { + padding:12px; + background-color: #e4e3e3; +} +.view{ + padding:15px 0px; + text-align:right; + transform:translateX(70%) +} + +/* Estilos total-data*/ + +.total-data { + position:absolute; +} +.total-data-button { + position: relative; + transform: translateY(800%); + font: sans-serif; + border: 1px solid rgb(255, 239, 21); + line-height: 1; + outline: 0; + color:inherit; + border-color:rgb(255, 239, 21); + padding: 15px; + border-radius: 3px; + background-color:rgb(255, 241, 88); +} +.total-data-button:hover { + background-color: #ffae00d5; + cursor: pointer; +} \ No newline at end of file diff --git a/css/menu-user.css b/css/menu-user.css new file mode 100644 index 00000000..c00163a5 --- /dev/null +++ b/css/menu-user.css @@ -0,0 +1,39 @@ +/*G-ingresando el menu usario*/ +a{ + color: white; + text-decoration: none; + } + .fotoUsuario{ + width: 120px; + margin-right: 15px; + + } + + .nav-usuario{ + opacity: .7; + /*background-color: red;*/ + width: 20%; + margin: auto; + } + + .box-black1{ + font-family: sans-serif; + color: white; + background-color: black; + padding: 30px; + margin: 3px; + width: 110%; + } + .box-black3{ + font-family: sans-serif; + background-color: black; + padding: 30px; + color: white; + margin: 3px; + width: 110%; + } + + figure .texto { + display: inline-block; + } + /*G terminando el menu usario*/ \ No newline at end of file diff --git a/index.html b/index.html index 8930fa03..6782528f 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,386 @@ - + + Data Dashboard + + + - +
    +
      +
      • +
      • +
    +
    +
    + +
    + +
    +
    +
    +
    +

    Arequipa 2016-II

    + +
    +
    +
      +
      • +
      • +
      • +
    +
    +
    +
    +
    +
    +

    ENROLLMENT

    +
    122

    # STUDENTS CURRENTLY
    ENROLLED
    +
    53%

    %DROPOUT
    +
    +
    +
    +
    +
    +
    +

    ACHIEVEMENT

    +
    120

    # STUDENTS CURRENTLY
    ENROLLED
    +
    20%

    %DROPOUT
    +
    +
    + graphic +
    +
    +
    +
    +

    NET PROMOTER SCORE

    +
    120

    # STUDENTS CURRENTLY
    ENROLLED
    +
    20%

    %DROPOUT
    +
    +
    + graphic +
    +
    +
    +
    +
    +
    +

    TECH SKILLS

    + +
    +
    +
    120

    # STUDENTS CURRENTLY
    ENROLLED
    +
    20%

    %DROPOUT
    +
    +
    + graphic + graphic +
    +
    +
    +
    +
    +
    +

    LIFE SKILLS

    + +
    +
    +
    120

    # STUDENTS CURRENTLY
    ENROLLED
    +
    20%

    %DROPOUT
    +
    +
    + graphic + graphic +
    +
    +
    +
    +
    +
    +

    STUDENTS SATISFACTION

    +
    89%

    % MEETING OR EXCEEDING EXPECTATIONS
    +
    +
    +
    +
    +
    +
    +

    TEACHER RATING

    +
    3.9%

    OVERALL TEACHER RATING
    +
    +
    +
    +
    +
    +
    +

    JEDI MASTER RATING

    +
    4.2%

    OVERALL JEDI RATING
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    SPECIALIZATION

    +
      +
    • Javascript
      • +
    • UX Design
      • +
    • Front-End
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +

    DIANA NAVARRO

    +

    Front-End Developer

    +
    +
    96%
    +
    80%
    +
    40%
    +
    +
    Ver Perfil
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    TOTAL ALUMNAS

    + SEDE + GENERACIÓN +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + - + diff --git a/js/app.js b/js/app.js index 895ae2dd..b09fe5cb 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,144 @@ -/* - * Funcionalidad de tu producto - */ +google.charts.load('current', {packages: ['corechart']}); +google.charts.setOnLoadCallback(drawChartEnrollment); +google.charts.setOnLoadCallback(drawPromJedi); +google.charts.setOnLoadCallback(drawPromTeacher); +function drawChartEnrollment() { + var data = new google.visualization.DataTable(); + // llamando el dato desde la funcion + // var divText = document.getElementById('student'); + // var divPor = document.getElementById('student-dropout'); + // divPor.innerHTML = studentsDesert() + '% '; + + data.addColumn('string', 'alumnas'); + data.addColumn('number', 'count'); + data.addRows( + [ + ['Alumn Desert', 139], + ['Alumn Active', 122] + ] + ); + var opciones = {'width': 300, + 'height': 150 + }; + var graphic = new google.visualization.ColumnChart(document.getElementById('column-enrollment')); + graphic.draw(data, opciones); + } + + function drawPromJedi() { + var data = new google.visualization.DataTable(); + // llamando el dato desde la funcion + // var divText = document.getElementById('student'); + // var divPor = document.getElementById('jedi-dropout'); + // divPor.innerHTML = promJedi() + '% '; + + data.addColumn('string', 'jedi'); + data.addColumn('number', 'prom'); + data.addRows( + [ + ['S1', 1.2], + ['S2', 2.3], + ['S3', 2.4], + ['S4', 3.5] + ] + ); + var opciones = {'width': 300, + 'height': 150 + }; + var graphic = new google.visualization.LineChart(document.getElementById('graphic-jedi')); + graphic.draw(data, opciones); + } + + function drawPromTeacher() { + var data = new google.visualization.DataTable(); + // llamando el dato desde la funcion + // var divText = document.getElementById('student'); + // var divPor = document.getElementById('student-dropout'); + // divPor.innerHTML = promTeacher() + '% '; + + data.addColumn('string', 'teacher'); + data.addColumn('number', 'prom'); + data.addRows( + [ + ['S1', 1.2], + ['S2', 2.3], + ['S3', 2.4], + ['S4', 3.5] + ] + ); + var opciones = {'width': 300, + 'height': 150 + }; + var graphic = new google.visualization.LineChart(document.getElementById('graphic-teacher')); + graphic.draw(data, opciones); + } + +//GRAFICOS TEMP +google.charts.load('current', {'packages':['corechart']}); +google.charts.setOnLoadCallback(drawChart); +//Draw the chart and set the chart values, satisfied-students-chart +function drawChart() { + var data = google.visualization.arrayToDataTable([ + ['Sprint', 'Satisfied',], + ['S1 ',30], + ['S2', 20], + ['S3', 50], + ['S4', 60], + ['S5', 70] +]); + +// // Optional; add a title and set the width and height of the chart + var options = { 'width':325, 'height':170}; + +// // Display the chart inside the
    element with id="piechart" + var chart = new google.visualization.LineChart(document.getElementById('satisfied-chart')); + chart.draw(data, options); + } + + +//funcion de los tabs de main section +var showHide = function(e) { + var tabSelected = e.target.dataset.tabSelected; + var overview = document.getElementById('container-overview'); + var students = document.getElementById('container-students'); + var teachers = document.getElementById('container-teachers'); + + if(tabSelected === 'tabOverview') { + console.log('This is overview section'); + //ocultar students, teachers + students.style.display ='none'; + teachers.style.display ='none'; + // mostrar solo overview + overview.style.display = 'block'; + }else if(tabSelected === 'tabStudents') { + console.log('This is students section'); + //ocultar overview, teachers + overview.style.display ='none'; + teachers.style.display ='none'; + // mostrar solo students + students.style.display ='block'; + }else if(tabSelected === 'tabTeachers') { + console.log('This is teachers section'); + //ocultar overview, students + overview.style.display ='none'; + students.style.display ='none'; + // mostrar solo teachers + teachers.style.display = 'block'; + } +} + +var loadPage = function(){ + var overview = document.getElementById('container-overview'); + var students = document.getElementById('container-students'); + var teachers = document.getElementById('container-teachers'); + overview.style.display ='none'; + students.style.display ='none'; + teachers.style.display ='none'; + var tabElements = document.getElementsByClassName('tab'); + for(var i = 0;i < tabElements.length; i++) { + tabElements[i].addEventListener('click', showHide) + } +} +loadPage(); // Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); +// console.log(data); diff --git a/menu-user.html b/menu-user.html new file mode 100644 index 00000000..bff8499a --- /dev/null +++ b/menu-user.html @@ -0,0 +1,30 @@ + + + + + + + parte2 + + + + + + + + + + \ No newline at end of file