diff --git a/README.md b/README.md index e9b59c4c..99e2240f 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,213 @@ +![logo](https://cdn-images-1.medium.com/max/945/1*3ebT5azEfTrKxANOE3BwyA.jpeg) # Data Dashboard +#### Problemática actual. +##### Definición, delimitación y planeación. -* **Track:** _Common Core_ -* **Curso:** _Creando tu primer sitio web interactivo_ -* **Unidad:** _Producto final_ +Las Training Managers y el equipo de formacion de Laboratoria dedican mucho de su tiempo en encontrar la data que necesitan para elaborar sus actividades, debido a la forma en que dicha data se encuentra organizada o quizá por la falta de organización de la misma. +En el siguiente documento se analizará la forma en que se manipula, almacena y accede a la data dentro de Laboratoria, y a su vez se planteará una solución más efectiva. + _En esta primera versión nos enfocaremos en encontrar y diseñar una herramienta para organizar la información relacionada con las necesidades de nuestras TM´s_ + +**Lluvia de ideas** +Los integrantes de este team (Navi, Lillys y Henie)por medio de una lluvia de ideas llegamos a la conclución de que la problemática que enfrentamos se puede resolver si implementamos un módulo que sea parte del sitio de Laboratoria el cual nos permita manipular la data de manera sencilla, clara y fácil de usar. + +### Hipótesis +Si creamos un módulo que sea parte del sitio web de Laboratoria, que permita acceder a la data y a su vez la organice y permita nutrirla, se maximizará el tiempo que se dedique a las actividades administrativas y a su vez permitirá claridad en los resultados. + +### Propuesta de valor +En nuestra Laboratoria Data Dashboard incluiremos un proceso que permita acceder a la data de acuerdo a su perfil en la instutucion(Estudiante,Coach,Personal Developer Coordinator y Training Manager). +Ademas de mostrar la información que cada miembro del equipo de formación necesita incluiremos un apartado para que las estudiantes podamos acceder a nuestros resultados. + +### Objetivos +###### En este proyecto se engloban dos objetivos principales: +###### Primer Objetivo +> A nivel curricular el objetivo básico es poner en práctica lo aprendido en la unidad ** _"Creando un sitio web interactivo"_** _donde debemos incluir los conocimientos adquiridos sobre:_ + +* **Maquetado web** (_Con CSS y HTML_) +* **Creando funcionalidad** (_Con Java Script_) +* **User experience desing** (_Aplicando técnicas de UX y UI_) + + +###### Segundo Objetivo +>De acuerdo al proyecto, el objetivo principal de data-Dashboard es realizar un sitio web en el cual se pueda encontrar y accesar de manera facil, agil y organizada la data de Laboratoria para de esta forma poder optimizar el tiempo de las TMs y miembros del equipo de formación en cada sede. +En esta primera entrega dedicada a las TM´s encontramos que los datos que normalmente se requiere analizar son: + +1. Cantidad de estudiantes activas. +2. Porcentaje de estudiantes no activas (las que desertaron) por sede y por generación (y quienes son) +3. Cantidad y porcentaje de estudiantes exitosas (superan la meta del 70% y siguen activas), solo por generación. +Lo mismo para HSE y para Técnico +4. El % de estudiantes satisfechas (cumple + supera) +5. La puntuació n promedio de l@s profesores. +6. La puntuación promedio de l@s jedi masters. + + +*** +### Investigación, análisis y empatía +>Con la finalidad de obtener la mayor cantidad de información sobre las espectativas del Data Dashboard y poder generar con nuestro nuevo sitio web la experiencia de usuario deseada, nos dimos a la tarea de entrevistar directamente a los usuarios. Dentro de estos encontramos: +* TMs : + * _Karla Rejas, GDL_ + * _Lucile Baratier, CDMX_ + * _Alejandra Ramirez, Lima_ + * _Valentina Smith, Santiago_ +* Coachs: + * _Yessenia Sanchez (Inti), GDL_ + * _Ameli Castillo (Meme), GDL_ + * _Levhita, GDL_ +* Personal Developer Coordinator: + * _Samantha Penilla, GDL_ +* Alumnas GDL + * Miriam Pérez + * Lillys Hernández + * Nadia Salazar + + +#### Fuentes de información +* [entrevista Sam](https://www.youtube.com/watch?v=j8vlV6c8IWg) +* [entrevista Meme](https://www.youtube.com/watch?v=vkNDiGRlch8&t=37s) +* [entrevista Karla]() +* [Entrevista Inti]() +* [Entrevistas TMs foraneas]() + +Después de analizar la información recabada de estas entrevistas, encontramos que en la actualidad el método utilizado para accesar a la data que cada miembro del eqipo de formación necesita se obtiene básicamente mediante encuestas y hojas excel que en su mayoría son generadas por ellos mismos o bien provienen de la base de datos de Laboratoria pero estas últimas sólo las recibe la TM de cada sede quien debe procesarla y unificarla para después compartir los datos que los coachs necesitan; este proceso es largo y tedioso debido a que todo viene en archivos separados y se debe empatar la información de cada alumna una por una. + +**"Dedico mucho tiempo solo a organizar la data recibida en las hojas excel y además se recibe en archivos pesados y separados que requieren un equipo de cómputo más potente para trabajar; además se debe organizar todo antes de compartir con los Coachs en nuevos excel y eso a su vez nos consume mucho tiempo..." +(Karla Rejas,TM GDL)** + +Los resultados de las alumnas sólo se reflejan hasta el final de cada sprint, lo cual complica el trabajo al hacer las retrospectivas y feedback. +Además, las alumnas no tienen acceso directo a sus resultados por lo cual deben solicitarlos a su coach quien debe realizar un proceso manual y largo para acceder a su data. + +**Accedemos a la data por encuestas o excel y esta se filtra solo por generación, sede, código y spring pero a mi me gustaría que estuviera presentada por unidad para poder ver como van evolucionando a través del bootcamp y poder dar el feedback adecuado y detectar si necesitan ayuda a tiempo...(Meme, Coach GDL)** + +**Nuestra Base de Datos actual solo incluye datos duros y no nos permite identificar de manera inmediata si alguna requiere asesoría mas personal o apoyo extra...(Inti, Coach GDL)** + +Actualmente no existe un sistema centralizador que permita conectar y actualizar de manera automatizada la información, esto además de complicar el proceso de análisis nos permite plasmar resultados de manera oportuna e inmediata y hace necesario que se repita un proceso de análisis manual cada vez que se debe acceder a cierta información. +Algo que debemos destacar es el hecho de que a pesar que los resultados de cada estudiante se obtienen de la suma de los resultados técnicos y los resultados de HSE, actualmenteno existe un formato que permita empatar los resultados de ambos: + +**Me gustaría un espacio que me permita agregar a la Base de Datos las interacciones que tengo con las alumnas y poder medir si detrás de alguna mala nota existe alguna situación en su vida que esté afectando su desempeño... (Sam, GDL)** + +Si la organización y análisis manual de la información se automatizara mediante un proceso, el tiempo que los miembros del staff emplean en esta actividad se reduciría considerablemente y permitiría aumentar el desempeño y satisfacción laboral. + +*Actualmente no se miden parámetros importantes en la Base de Datos actual por ejemplo:* + +1. Desempeño por tema y/o unidad por alumna, generacion y sede. +2. Nivel de aprovechamiento de los recursos y apoyos extracurriculares tales como cursos y charlas. +3. Compromiso y desempeño vs Problemáticas personales. *** +Los usuarios entrevistados mencionaron los siguientes puntos importantes a desarrollar: + + **Cubriendo necesidades** + +En la actualidad | Data Dashboard deseado +-----------------|----------------------- +Se accede a la data por medio multiples archivos de hojas de exel|Accede a la data organizada en un solo lugar +El tiempo de búsqueda y acceso a la data es largo|Un menú ágil y específico permite acceder rápidamente a la data +La TM es quien en primer instancia recibe la data , la organiza y distribuye en cada sede|Todos pueden ingresar a la Base de Datos y recopilar y/o analizar la data necesaria y/o solicitada de acuerdo a su perfil(TMs,HSE, Coach,Alumna) +Cada proceso para organizar la data recabada se hace de forma manual|La nueva web de Data Dashboard automatizará el análisis y organización de la data +Si alguna alumna/estudiante requiere saber sobre su desempeño debe recurrir a su jedi o profesor para obtener sus resultados|Cada alumna/estudiante tendrá acceso a sus resultados en todo momento accediendo con su código +Todo lo relacionado con HSE se procesa en una Base de Datos distinta y dificulta su análisis con la parte técnica|Dentro de cada perfil encontraremos un apartado de HSE que estará enlazado con los resultados técnicos para facilitar el proceso de análisis y calificaciones finales. +No se cuenta con un medidor de aprovechamiento detallado|De manera clara y de fácil acceso podemos acceder a gráficas de aprovechamiento por sede, generacion ,alumna, unidad y tema. +El proceso para las deserciones es complicado y externo, el proceso es confuso y no queda en cierta forma archivado con el resto de la data y sus causas|Cada perfil contará con un apartado que incluye un proceso claro para generar una baja en caso necesario y esta información quedará registrada en nuestro data Dashboard + +## Propuesta +### Pseudocódigo +* Generar una página de inicio principal con imágen de fondo, datos básicos de Laboratoria asi como su mision y Visión. +* incluir en la parte superior de la pagina un menu que incluya los siguientes enlaces: + * Inicio + * Sobre Nosotros + * Empresas + * Postula + * Data Dashboard +(Cada opcióndel menu enlaza a una nueva pagína) + +* En el menu, la opción Data Dashboard enlazara al log in. +En la pagina log in se podra ingresar con 4 distintos usuarios: + * Training Manager + * Coach + * Personal Developer Coordinator + * Estudiante + +* Al ingresar se despliega un menú de opciones (sede, generación y especificaciones por tipo de usuario ya que dependiendo del perfil se definirá a que data necesita tener acceso). -## Flujo de trabajo +* Caso "1" Usuario TMs: -1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) - de este repositorio. + * Menú: + * Overview (Página Principal) + * Sede + * Generación + * Jedi + * Profesores + * Estudiantes + 1. Cantidad de estudiantes activas. + 2. Porcentaje de estudiantes no activas (las que desertaron) por sede y por generación (y quienes son) + 3. Cantidad y porcentaje de estudiantes exitosas (superan la meta del 70% y siguen activas), solo por generación. + Lo mismo para HSE y para Técnico + * NPS(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: -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í: +[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 - ```bash - git clone https://github.com//freelancer.git - ``` +[NPS] = [Promoters] - [Detractors]) + * Aprovechamiento(individual y generacional tanto por unidad , tema y sprints). + * Individual(tema a tema con imputs para comentarios). + * Generacional. + * Deserción -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:. +* Caso "2" Coachs +* Menu: Sede - Generación. + * Ingresar Data(comentarios-resultados-datos sobresalientes...). + * Obtener Data. + * Trabajos entregados. + * Asistencias. + * Resultados de: + * Spring. + * Unidad. + * Tema. + * Extracurriculares. + +5. Caso "3" Personal Developer Coordinator: + * Menú (Sede-Generación). + * Asistencias. + * Interacciones(Con opción de review y de ingresar data). + * Aprovechamiento(Por tema-unidad-sprints). + * Deserción(form). + +6. Caso "4" Estudiantes: + * Menú: + * Perfil (overview). + * Skills. + * Desempeño. + * Contacto. + +*App y versión web **Se inicia con la versión caso 1 y posteriormente se implementarán las versiones necesarias para cubrir el total de los casos** +*** +## Sketching y Prototyping +![Sketch](assets/images/1.jpg) +*** +![Sketch](assets/images/2.jpg) +*** +![Sketch](assets/images/3.jpg) +*** +![Sketch](assets/images/4.jpg) +*** +![Sketch](assets/images/5.jpg) +*** +![Sketch](assets/images/6.jpg) +*** +![Sketch](assets/images/7.jpg) +*** +![Sketch](assets/images/1.jpg) + +### Flujo +![digrama de flujo](https://i.pinimg.com/originals/bb/48/50/bb48502996b4f8ecee052a4064cf9a6d.gif) +### Primer Sketcher para determinar secuencia de interacciones: +![mockup1](assets/images/flujo1.png) +*** +![mockup2](assets/images/flujo2.png) +*** +![mockup3](assets/images/flujo3.png) +*** +![mockup4](assets/images/flujo4.png) +*** +![mockup5](assets/images/flujo5.png) diff --git a/assets/images/1.jpg b/assets/images/1.jpg new file mode 100644 index 00000000..2c7548fd Binary files /dev/null and b/assets/images/1.jpg differ diff --git a/assets/images/2.jpg b/assets/images/2.jpg new file mode 100644 index 00000000..7d7670a4 Binary files /dev/null and b/assets/images/2.jpg differ diff --git a/assets/images/3.jpg b/assets/images/3.jpg new file mode 100644 index 00000000..f03ab9d7 Binary files /dev/null and b/assets/images/3.jpg differ diff --git a/assets/images/4.jpg b/assets/images/4.jpg new file mode 100644 index 00000000..d6957cdd Binary files /dev/null and b/assets/images/4.jpg differ diff --git a/assets/images/5.jpg b/assets/images/5.jpg new file mode 100644 index 00000000..0d1ef431 Binary files /dev/null and b/assets/images/5.jpg differ diff --git a/assets/images/6.jpg b/assets/images/6.jpg new file mode 100644 index 00000000..bf911bc3 Binary files /dev/null and b/assets/images/6.jpg differ diff --git a/assets/images/7.jpg b/assets/images/7.jpg new file mode 100644 index 00000000..cfa7bf79 Binary files /dev/null and b/assets/images/7.jpg differ diff --git a/assets/images/8.jpg b/assets/images/8.jpg new file mode 100644 index 00000000..f8dab2f1 Binary files /dev/null and b/assets/images/8.jpg differ diff --git a/assets/images/9.jpg b/assets/images/9.jpg new file mode 100644 index 00000000..b9da329b Binary files /dev/null and b/assets/images/9.jpg differ diff --git a/assets/images/flujo1.png b/assets/images/flujo1.png new file mode 100644 index 00000000..d33e28bd Binary files /dev/null and b/assets/images/flujo1.png differ diff --git a/assets/images/flujo2.png b/assets/images/flujo2.png new file mode 100644 index 00000000..38b4455b Binary files /dev/null and b/assets/images/flujo2.png differ diff --git a/assets/images/flujo3.png b/assets/images/flujo3.png new file mode 100644 index 00000000..698c34e6 Binary files /dev/null and b/assets/images/flujo3.png differ diff --git a/assets/images/flujo4.png b/assets/images/flujo4.png new file mode 100644 index 00000000..9c308591 Binary files /dev/null and b/assets/images/flujo4.png differ diff --git a/assets/images/flujo5.png b/assets/images/flujo5.png new file mode 100644 index 00000000..344cb9a1 Binary files /dev/null and b/assets/images/flujo5.png differ diff --git a/assets/images/fondo4.jpg b/assets/images/fondo4.jpg new file mode 100644 index 00000000..58978c72 Binary files /dev/null and b/assets/images/fondo4.jpg differ diff --git a/assets/images/funders.jpg b/assets/images/funders.jpg new file mode 100644 index 00000000..7fa13d8a Binary files /dev/null and b/assets/images/funders.jpg differ diff --git a/assets/images/inicio.bmpr b/assets/images/inicio.bmpr new file mode 100644 index 00000000..19d5ab4d Binary files /dev/null and b/assets/images/inicio.bmpr differ diff --git a/assets/images/logo2.png b/assets/images/logo2.png new file mode 100644 index 00000000..37547b4e Binary files /dev/null and b/assets/images/logo2.png differ diff --git a/css/hacker.css b/css/hacker.css new file mode 100644 index 00000000..09fa0f97 --- /dev/null +++ b/css/hacker.css @@ -0,0 +1,49 @@ +#filter{ + background: rgb(241,218,54); + display: inline-block; +/* position: fixed;*/ + width: 15%; + text-align: center; + padding: 17px; + + +} + +label{ + display: flex; + +} +span{ + border: 1px solid black; + width: 2em; + +} + +#logolab{ + display: inline-block; + width: 20%; + height: 15%; + right: 0; +} +#laboratorians{ + display: inline-block; + margin-left: 300px; + width: 100% + +} + +#picture{ + height: 30%; + width: 30%; + background-color:rgb(241,218,54); + text-align: center; +} +#student-resolts{ + background-color: rgb(241,218,54); + position: relative; + width: 30%; + height: 30%; + text-align: justify; + margin: 5px; + +} diff --git a/css/main.css b/css/main.css index 6355c827..37a7e587 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,277 @@ -/* - * Estilos de tu proyecto - */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Didact Gothic', sans-serif; +} +/*SECCION HEADER*/ +header { + height: 100px; + width: 100%; +} + +ul { + list-style: none; + padding: 0; + margin: 0; + line-height: 40px; + overflow: auto; + position: relative; + bottom: 30px; +} + +li { + width: 125px; + display: inline-block; + text-align: center; +} + +a { + text-decoration: none; + color: black; + display: block; + margin-left: 660%; + position: relative; + padding: 5px; + width: 100%; + background: #FFE521; +} + +a:hover { + color: #ffffff; +} + +a:active { + transform: scale(0.95); +} + +#inicio { + color: #ffffff; +} + +.logo { + position: relative; + top: 20px; + left: 180px; + width: 20%; +} + +.container-back img { + width: 100%; + height: 88%; + position: absolute; +} + +.container-back h1 { + position: absolute; + top: 150px; + left: 11%; + font-size: 30px; + color: rgba(0,0,0,0.7); +} + +.container-back p { + position: absolute; + top: 400px; + left: 11.7%; + color: rgba(0,0,0,0.7); +} + +h1 { + top:100px; +} + +#important-values { + position: relative; + display: flex; + top: 100px; + margin-left: 7px; + text-align justify; +} +#values-titles { + position: relative; + display: flex; + top: 125px; + margin-left: 250px; + +} + +/*ESTILOS PARA LA SEGUNDA PAGINA (FORMULARIO)*/ +.menu { +left: 100%; +} + +#here { + color: #ffffff; +} + +.container{ + display: flex; +} + +#logo2 { + position: relative; + top: 30px; + left: 310px; + width: 20%; +} + +.formulario { + margin-left: 8%; + width: 100%; + max-width: 500px; + background:#DEDEDE; + padding: 20px; + /*outline: 1px solid rgba(0,0,0,0.3);*/ + height: 100%; + margin-top: 2%; + border-radius: 9px; + display: block; +} + + +.container img { + margin-left: 5%; + width: 50%; + margin-top: 2%; + height: 30%; +} + +h2 { + text-align: center; + margin-bottom: 20px; + color: rgba(0,0,0,0.5); +} + +input { + display: block; + padding: 10px; + width: 100%; + margin: 30px 0 ; + font-size: 20px; + outline: 1px solid rgba(0,0,0,0.3); +} + +#button { + background: #FFE521; + border: none; + opacity: 0.8; + cursor: pointer; + border-radius: 20px; + margin-bottom: 0; + outline: none; +} + +#button:hover { + opacity: 1; +} + +#button:active { + transform: scale(0.95); +} + +/*ESTILOS SECCION GRAFICAS*/ + +.filter { + display: none; + margin-top: 1%; + position: relative; +} + +.icons { + position: relative; + left: 3%; + font-size: 80px; + color: rgba(0,0,0,0.3); + width: 25%; + display: inline-block; + bottom: 20px; +} + +.icons i { + margin: 4px; + width: 27%; +} + +.title { + position: relative; + width: 30%; + top: 50px; + left: 30%; +} + +.title h3 { + font-size: 40px; + color: rgba(0,0,0,0.3); + text-align: center; +} + +.title-two{ + left: 68%; + position: relative; + width: 25%; + bottom: 90px; +} + +.title-two h3 { + font-size: 25px; + text-align: center; +} + +.select { + left: 68%; + position: relative; + width: 25%; + bottom: 70px; + height: 40px; + border-style: none; + background:#DEDEDE; + outline: 0px; + +} + +/*#container-Total { + width: 25%; + height: 300px; + left: 3%; + position: relative; + background:#DEDEDE; + border-radius: 20px; + border: 1px solid rgba(0,0,0,0.3); + text-align: center; +}*/ + +#container-students { +/* outline: 1px solid black;*/ + width: 60%; + margin: 25px; + font-size: 22px; + font-style: oblique; + text-align: center; + left: 25%; +} +.studen-información{ + margin: 15px; + width: 80%; + text-align: center; +} + +hr{ + border: 4px solid white; + display: none; +} + +#values { + display: inline-flex; + border: none; + text-align: left; + margin-right: 10px; + color: black; + font-size: 20px; +} + +.pie{ + display: inline-block; + width: 50%; + +} diff --git a/data/data.html b/data/data.html new file mode 100644 index 00000000..b07063b6 --- /dev/null +++ b/data/data.html @@ -0,0 +1,104 @@ + + + + + + + + + + + +
+ + +
+
+ fundadores Laboratoria +
+

Data Dashboard

+ + + +
+
+
+
+

DATA DASHBOARD

+
+
+ + + +
+
+

SEDES

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+
+ + + + + + + + + + + diff --git a/data/hacker.html b/data/hacker.html new file mode 100644 index 00000000..15cc5420 --- /dev/null +++ b/data/hacker.html @@ -0,0 +1,68 @@ + + + + + + Job Plaicement + + +
+

Job Placement

+ Logo +
+
+
+
+ +

Filtros

+

Selecciona tus preferencias

+ + +
+ + +
+ +
+
+
+ + + +
+
+ + +
+ +
+
+
+ + + + + + diff --git a/index.html b/index.html index 8930fa03..9b50069f 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,36 @@ Data Dashboard + + +
+ + +
+
+ Laptop Codigo +

Talento que transforma

+

La mejor fuente de talento femenino tech
de Latinoamerica para el mundo. +

Misión:

+

Formamos el talento diverso que América
Latina necesita para avanzar en la era digital.

+

Visión:

+

Convertirnos en la principal fuente de talento
femenino tech de América Latina para el mundo

+
+ - + - + diff --git a/js/app.js b/js/app.js index 895ae2dd..6751f94f 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,271 @@ /* * Funcionalidad de tu producto */ + // Puedes hacer uso de la base de datos a través de la variable `data` +// console.log(data); -// Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); + +//----SE MANDAR LLAMAR LOS ELEMENTOS QUE SE VAN A UTILIZAR----// +var button = document.getElementById('button'); +var filter = document.getElementById('filter'); +var sectionGrafics = document.getElementById('filter'); +var select = document.getElementById('select'); +var containerStudents = document.getElementById('container-students'); +var containerForm = document.getElementById('container-form'); +var input = document.getElementById('formulario-input'); +var passw = document.getElementById('formulario-password'); +var containerActive = document.getElementById('container-actives'); +var containerJedis = document.getElementById('promedio-jedis'); +var containerTeachers = document.getElementById('promedio-teachers'); +var containerActivas = document.getElementById('activas'); +var containerInactivas = document.getElementById('inactivas'); +var containerTotalStudents = document.getElementById('total-students'); +var nameTotalInactivas = document.getElementById('name-inactivas'); +var cumplenMeta = document.getElementById('cumplen-meta'); +var superanMeta = document.getElementById('superan-meta'); +var satisfechas = document.getElementById('satisfechas'); + + + +//----SE LE DA FUNCIONALIDAD AL INGRESAR----Y VALIDACION AL FORMULARIO------// + +button.addEventListener("click", function(){ + + if (passw.value =='LABORATORIA' && input.value =='student'){ + containerForm.style.display = "none"; + sectionGrafics.style.display = "block"; +}else if (passw.value =='LABORATORIA' && input.value =='coach'){ + containerForm.style.display = "none"; + sectionGrafics.style.display = "block"; +}else if (passw.value =='LABORATORIA' && input.value =='coordinator'){ + containerForm.style.display = "none"; + sectionGrafics.style.display = "block"; +}else if (passw.value =='LABORATORIA' && input.value =='TM'){ + containerForm.style.display = "none"; + sectionGrafics.style.display = "block"; +}else{ + alert("Introduce tu usuario y contraseña correctos"); + } +}); + +//---SE AGREGA FUNCION AL SELECT PARA QUE AL SELECCIONAR TE TRAIGA LA INFORMACION DEL DATA---// + +select.addEventListener("change", optionSelect); + +function optionSelect(e) { + var select = e.target + var sede = select.value; + var sedeName = select.options[select.selectedIndex].dataset.sede; + //console.log(sedeName); + var generation = select.options[select.selectedIndex].dataset.generation; + //console.log(generation); + var students = data[sede][generation]["students"]; + // console.log(students); + + +//----FOR QUE ITERA EN LAS ESTUDIANTES Y CUENTA LAS ACTIVAS Y NOS DA EL NOMBRE DE LAS INACTIVAS, SE UTILIZA CONTADOR---// + contActivas = 0; + contInactivas = 0; + nameInactivas = []; + for (var i = 0; i < students.length; i++) { + + if(students[i]["active"] == true){ + contActivas ++; + var activas = contActivas; + + + +//----- FOR PARA QUE NOS DE EL PUNTAJE DE CADA UNA DE LAS ESTUDIANTES TANTO EN TECH COMO EL HSE---// + scoreHSE=0; + scoreTech = 0; + + +for (var j = 0; j < students[i]["sprints"].length; j++) { + scoreTech += students[i]["sprints"][j]["score"]["tech"]; + scoreHSE += students[i]["sprints"][j]["score"]["hse"]; + console.log("puntaje HSE " + scoreHSE); + console.log("puntaje TECH " + scoreTech); + + var totalScore = scoreHSE + scoreTech; + console.log(totalScore); + + } + + + }else{ + contInactivas ++; + var inactivas = contInactivas; + + nameInactivas.push(students[i]["name"]); + //console.log(nameInactivas); + } + +} + + var totalStudents = contInactivas + contActivas; + + var porcentajeActivas = contActivas *100/ totalStudents; + var totalActivas = porcentajeActivas.toFixed() + "%" ; + + var porcentajeInactivas = contInactivas * 100/ totalStudents; + var totalInactivas = porcentajeInactivas.toFixed() + "%"; + + containerTotalStudents.textContent ="*"+" "+ sede + " " + generation + " " + " Total de estudiantes : " + totalStudents; + + + + containerActivas.textContent = "* El porcentaje de estudiantes activas es del : " + totalActivas + " " + " total : " + activas; + containerInactivas.textContent = "* El porcentaje de estudiantes inactivas es del : " + totalInactivas + " " + " total : " + inactivas; + nameTotalInactivas.textContent = "* Estudiantes que desertaron : " + nameInactivas; + + +//-----PROMEDIO JEDIS Y TEACHERS----> + +var ratings = data[sede][generation]["ratings"]; + +promJedi = 0; +promTeacher = 0; +jedi=[]; +teacher = []; + +for (var i = 0; i < ratings.length; i++) { + promJedi += (ratings[i]["jedi"])/ratings.length; + var totalJedi = promJedi.toFixed(1); + + jedi.push(totalJedi); + console.log(jedi); + + promTeacher += (ratings[i]["teacher"])/ratings.length; + var totalTeachers = promTeacher.toFixed(1); + + teacher.push(totalTeachers); + console.log(teacher); + + +containerJedis.textContent = "* El promedio de los Jedis es de : " + totalJedi; +containerTeachers.textContent = "* El promedio de los teachers es de : " + totalTeachers; + + +} + +//-------ESTUDIANTES QUE CUMPLEN Y SUPERAN LA META----> + +cumpleTotal= 0; +superaTotal =0; + + + for (var i = 0; i < ratings.length; i++){ + var student = ratings[i]["student"]; + // console.log(student); + var totalCumple = cumpleTotal/ratings.length; + cumpleTotal += student["cumple"]; + var totalMeta= superaTotal/ratings.length; + superaTotal += student["supera"]; + + var satisfechasTotal = totalCumple + totalMeta ; + +cumplenMeta.textContent = "* El porcentaje de estudiantes que cumplen la meta es del: " + totalCumple.toFixed() + "%"; +superanMeta.textContent = "* El porcentaje de estudiantes que superan la meta es del: " + totalMeta.toFixed() + "%"; +satisfechas.textContent = "* El porcentaje de estudiantes satisfechas es del: " + satisfechasTotal.toFixed() + "%"; +cumplenMeta.style= "text-align:center font-size:18px"; +} + +//-------ESTUDIANTES QUE CUMPLEN Y SUPERAN LA META----> + +/*google.charts.load('current', {'packages':['bar']}); + google.charts.setOnLoadCallback(drawChart); + + // Create the data table. + function drawChart() { + var data = google.visualization.arrayToDataTable([ + data.addColumn('string', 'promediotyj')//nombre d la tabla + data.addColumn('number', 'promedio')// el promedio d teachers y jedis + data.addRows([ + ['jedis', promJedi], + ['teacher', promTeacher] + ]); + ]); + + + + var options = { + chart: { + title: 'Promedio t y j', + subtitle: 'Teachers, Jedis, y Sede: 2014-2017', + }, + bars: 'horizontal' // Required for Material Bar Charts. + }; + + var chart = new google.charts.Bar(document.getElementById('chart_div')); + + chart.draw(data, google.charts.Bar.convertOptions(options)); + }*/ + //-------SECCION DE GRAFICAS----> + google.charts.load('current', {'packages':['corechart']}); + + //Set a callback to run when the Google Visualization API is loaded. + google.charts.setOnLoadCallback(drawChart); + + // Callback that creates and populates a data table, + // instantiates the pie chart, passes in the data and + // draws it. + function drawChart() { + + // Create the data table. + var data = new google.visualization.DataTable(); + data.addColumn('string', 'Promedio'); + data.addColumn('number', 'Slices'); + data.addRows([ + ['Activas', contActivas], + ['Inactivas', contInactivas], + ]); + + var options = { + title: 'Promedio de activas e inactivas', + is3D:true, + + + }; + + var chart = new google.visualization.PieChart(document.getElementById('piechart')); + + + chart.draw(data, options); + } + + + //-------PROMEDIO DE TEACHERS Y JEDIS ----> + google.charts.load('current', {'packages':['corechart']}); + + //Set a callback to run when the Google Visualization API is loaded. + google.charts.setOnLoadCallback(draw); + + // Callback that creates and populates a data table, + // instantiates the pie chart, passes in the data and + // draws it. + function draw() { + + // Create the data table. + var data = new google.visualization.DataTable() + + + data.addColumn('string', 'Promedio'); + data.addColumn('number', 'Promedio'); + data.addRows([ + ['Teachers', promTeacher], + ['Jedis', promJedi], + ]); + + var options = { + title: 'Promedio de teachers y jedis', + is3D:true, + }; + + + var chart = new google.visualization.ColumnChart(document.getElementById('piechart1')); + + chart.draw(data, options); + } + + + }; diff --git a/js/apps.js b/js/apps.js new file mode 100644 index 00000000..786a06d3 --- /dev/null +++ b/js/apps.js @@ -0,0 +1,12 @@ +var talent = document.getElementById('find-students') +var containerStudents = document.getElementById('laboratorians'); +var containerForm = document.getElementById('student-resolts'); +var studentPicture = document.getElementById('picture'); + + containerStudents.style.display = "none"; + containerForm.style.display = "none"; + studentPicture.style.display ="none"; + +talent.addEventListener('click',function(){ + +})