Data dashboard-Pamela Rojas y María Cristina

README.md

@@ -1,25 +1,77 @@
 # Data Dashboard
 
-* **Track:** _Common Core_
-* **Curso:** _Creando tu primer sitio web interactivo_
 * **Unidad:** _Producto final_
 
 ***
+## Squad AukaCoders 
+* Victoria Lung
+* Isabelle Chávez
+* Edith Jurado
+* Nathaly Otero Celis
+* Ada Yajahuanca
+* Annie Gutierrez 
+* Vanessa Colqui 
+* Maria Cristina Ortiz 
+* Pamela Rojas 
+***
+
+## Descripción General
+Es una representación gráfica de los indicadores clave (KPI) que intervienen en la consecución de los objetivos de negocio(Laboratoria), y que está orientada a la toma de decisiones para optimizar la estrategia de la empresa. Un dashboard debe transformar los datos en información y que estos estén en conocimiento para el negocio(Laboratoria).
+
+## Objetivo
+
+Construir una herramienta web donde las **TMs** de Laboratoria puedan ver los datos de manera fácil y rápida con respecto al desempeño de las estudiantes,  para poder analizarlos,  posteriormente emitir conclusiones, y así poder apoyar a las alumnas en su aprendizaje. Estos son los datos(indicadores Kpi) que revisan normalmente, los cuales debemos mostrarlos con una representación gráfica adecuada (ordenado y limpio) para que se pueda visualizar, contextualizar y comparar datos:
+
+* 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.
+* 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.
+
+## Desarrollo
+
+ETAPAS DEL DESARROLLO DEL PRODUCTO:
+
+* **ETAPA UNO: DISEÑO DE LA EXPERIENCIA (UX UI)**
+
+A partir de la necesidad de las TMs de Laboratoria de analizar datos de una manera más sencilla y práctica, nació como alternativa a esta problemática, la idea de desarrollar un **Dashboard** que simplifique dicha tarea mediante la presentacion de gráficos y datos(indicadores KPI) concisos y precisos. Para ello se hizo el siguiente esquema:
+
+ - Elaboración de Sketch (prototipo sencillo) sobre de la herramienta web(**dashboard**).
+
+
+  ![sketch](assets/images/sketch.png)
+
+
+ - Testeo del prototipo para modificar o agregar cambios según la necesidad de las TMs: 
+
+
+   ![sketch](assets/images/email.png)
+
+
+  **Feedback de TMs Lulú Vilchez:**
+
+  * Enfocarnos en la obtención de datos de la sede Lima y las tres generaciones que la componen.
+
+
+ **ETAPA DOS: DESARROLLO (Frond end y Back End)**
+
+  Etapa de elaboración del producto en código. Se realizó lo siguientes:
 
-## Flujo de trabajo
+   -  Se creó un Archivo HTML donde figura: **header** (logo de laboratoria), **nav** ( barra de navegación: sedes y generaciones (contenida en una etiqueta **selection. my-select** a quien se le aplicará el EVENTO UNO: CHANGE), students y teachers),  **section. dispplay-none** (Se encuentra toda la información concerniente a los indicadores solicitados a mostrar. Dicha sección se encuentra con la propiedad ** display: none** para que cuando apliquemos en el evento **change** a la etiqueta selection ** SEDE Y GENERACIONES**,  aparezca la section. También se encuentra los filtros para TECH SKILLS y LIFE SKILLS a quien se les aplicara el EVENTO DOS:CHANGE ).
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+   - Se creó un archivo **main.css** donde se encuentran todos los estilos aplicados a todas la partes del body del documento HTML. No hubo la necesidad de crear estilos para los eventos ya que no se creo ningun elemento en el DOM.
 
-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í:
+   - Se creó dos archivo **javascript** : **"app.js"** donde se encuentran todos los eventos aplicados ( _change_ ) a la etiqueta **select. my-select** que se encuentra en la etiqueta **nav**, a las etiquetas **select.select-sprint-life** y **select.select-sprint-tech**  que se encuentran en la etiqueta **section. display-none**; y el archivo  **graphic.js** donde se encuentran las funciones generales(globales) de las gráficas ingresadas utilizando la herramienta **"Google Charts"**, las cuales son llamadas en los eventos aplicados en **app.js**.
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
-   ```
+  **ETAPA TRES: CRECIMIENTO**
 
-3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
+  En esta etapa se probará el producto desarrollado y terminado para recibir un nuevo feed back, y seguir mejorándolo según las necesidades del cliente.
 
-> 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:.
+  ![sketch](assets/images/dashboard.jpg)
+
+   ***

css/main.css

@@ -1,3 +1,109 @@
-/*
- * Estilos de tu proyecto
- */
+/*SETEAR NUESTROS ARCHIVOS: SEA IGUAL PARA TODOS LOS NAVEGADORES*/
+* {
+  box-sizing: border-box;
+  font-family: 'Montserrat', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+/* CLASES REUTILIZABLES*/
+/* nuevo*/
+.select-sprint {/* Etiqueta select(filtros para tech skills y life skills)*/
+  font-size: 14px;
+  margin-left: 5px;
+  margin-bottom: 10px;
+  border-bottom: 3px solid rgb(255, 165, 0);
+}
+.tech-skills, .life-skills {/* div de los contenedores TECH SKILLS Y LIFE SKILLS*/
+  display: inline-block;
+  vertical-align: middle;
+  margin:5px;
+  margin-left: 20px;
+  width: 45%;
+  position: relative;
+  bottom: 50px;
+}
+.filter-skills {/* div del contenedor de los filtros de TECH SKILLS Y LIFE SKILLS*/
+  display: inline-block;
+  position:relative;
+  bottom:70px;
+  left:110px;
+}
+.value-skills {/* div que contienen los valores de TECH Y LIFE SKILLS*/
+  position: relative;
+  bottom: 130px;
+}
+/* ESTILOS AL BODY*/
+body {
+  width: 100%;
+  background: #A4A4A4 ;
+}
+/* ESTILOS AL HEADER*/
+header{
+ width: 20%;
+ margin: 15px auto;
+}
+/* Estilos a la barra de menu**/
+#navbar{
+ margin-top: 15px;
+ padding: 20px;
+ background-color: white;
+}
+/* Estilos al filtro de la barra de menu*/
+select{
+  outline: none;
+  border: none;
+  font-size: 20px;
+  margin-left: 10px;
+}
+/* ESTILOS A SECTION DE CLASE "DISPLAY NONE"*/
+section.display-none {
+ display: none;
+}
+section.container {
+  width: 85%;
+  height: 100;
+  margin: 100px 0  0 108px;
+  padding: 100px 45px;/* nuevo*/
+  background-color: rgb(220, 220, 220);
+}
+section.container div.container {
+  margin:10px 60px;
+  text-align: center;
+  /*float: left;*/
+}
+section.container div.container  div.indicators-container {
+  width: 31.3%;
+  display: inline-block;
+  margin: 10px;
+  background-color: #fff;
+}
+section.container div div div.text, section.container div.skills div.text {
+  margin: 20px;
+  font-weight: 700;
+  font-size: 20px;
+}
+section.container div div div.value, section.container div.skills div.value {
+ margin: 10px;
+ display: inline-block;
+ width: 43%;
+ padding: 10px;
+ background-color: rgb(220, 220, 220);
+ font-size: 15px;
+ border-radius: 10px;
+}
+section.container div.skills {
+ margin:30px 67px;
+ background-color: #fff;
+ padding: 10px;
+ padding-bottom: 0;
+ width: 88,5%;
+}
+section.container div.skills div.text {
+  width: 15%;
+  margin-bottom: 5px;
+  margin-left: 20px;
+}
+section.container div.skills div.value {
+  width: 25%;
+  margin: 10px 21px;
+}

index.html

@@ -1,14 +1,116 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Dashboard</title>
-  </head>
-  <body>
-
-		<!-- Base de datos -->
-		<script src="./js/data.js"></script>
-		<!-- Aquí va tus archivos JS -->
-    <script src="./js/app.js"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Data Dashboard Laboratoria</title>
+  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:100i,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
+  <link rel="stylesheet" href="css/main.css">
+  <body>
+    <header>
+     <img src="assets/images/logo-laboratoria.svg">
+    </header>
+    <nav>
+      <form id="navbar">
+        <select id="mySelect">
+          <option value="Seleccione">SEDES Y GENERACIONES
+          <option value="lima2016II">Lima 2016-II
+          <option value="lima2017I">Lima 2017-I
+          <option value="lima2017II">Lima 2017-II
+          <option value="aqp2016II">Arequipa 2016-II
+          <option value="aqp2017I">Arequipa 2017-I
+          <option value="scl2016II">Santiago de Chile 2016-II
+          <option value="scl2017I">Santiago de Chile 2017-I
+          <option value="scl2017II">Santiago de Chile 2017-II
+          <option value="cdm2017I">Ciudad de México 2017-I
+          <option value="cdm2017II">Ciudad de México 2017-II
+        </select>
+        <select id="mySelect">
+          <option value="Teachers">STUDENTS
+        </select>
+        <select id="mySelect">
+          <option value="Jedi Masters">TEACHERS
+        </select>
+     </form>
+    </nav>
+    <section class="display-none container" id="section-display-none" >
+      <div class="container">
+        <div class="indicators-container" id="enrollment">
+          <div class="text">ENROLLMENT</div>
+          <div class="value" id="enrolled">###</div>
+          <div class="value" id="dropout">##</div>
+          <div class="" id="graphic-enrollment"></div>
+        </div>
+        <div class="indicators-container">
+          <div class="text">ACHIEVEMENT</div>
+          <div class="value" id="achievement">###</div>
+          <div class="value" id="achievement-percent">###</div>
+          <div class="" id="graphic-achievement"></div>
+        </div>
+        <div class="indicators-container">
+          <div class="text">NET PROMOTER SCORE</div>
+          <div class="value" id="cumulative-nps">###</div>
+          <div class="value"id="promoters-passive-detractors">###</div>
+          <div class="" id="graphic-net-promoter-score"></div>
+        </div>
+      </div>
+      <div class="skills">
+        <div class="text">TECH SKILLS
+          <select class="select-sprint"id="select-sprint-tech">
+            <option value="">Overall(cumulative)</option>
+            <option value="sprint1">Sprint 1</option>
+            <option value="sprint2">Sprint 2</option>
+            <option value="sprint3">Sprint 3</option>
+            <option value="sprint4">Sprint 4</option>
+          </select>
+        </div>
+        <div class="value value-skills" id="tech-skills">###</div>
+        <div class="value value-skills" id="tech-skills-percent">###</div>
+        <div class="filter-skills" id="graphic-tech-skills-sprint"></div>
+        <div class="tech-skills" id="graphic-tech-skills-sprints"></div>
+        <div class="tech-skills" id="graphic-tech-skills"></div>
+      </div>
+      <div class="skills">
+        <div class="text">LIFE SKILLS
+          <select class="select-sprint" id="select-sprint-life">
+            <option value="">Overall(cumulative)</option>
+            <option value="sprint1">Sprint 1</option>
+            <option value="sprint2">Sprint 2</option>
+            <option value="sprint3">Sprint 3</option>
+            <option value="sprint4">Sprint 4</option>
+          </select>
+        </div>
+        <div class="value value-skills"id="life-skills">###</div>
+        <div class="value value-skills"id="life-skills-percent">###</div>
+        <div class="filter-skills" id="graphic-life-skills-sprint"></div>
+        <div class="life-skills" id="graphic-lifes-Skills-sprints"></div>
+        <div class="life-skills" id="graphic-lifes-skills"></div>
+      </div>
+      <div class="container">
+        <div class="indicators-container">
+          <div class="text">STUDENT SATISFACTION</div>
+          <div class="value"id="student-satisfaction">###</div>
+          <div class="" id="graphic-student-satisfaction"></div>
+        </div>
+        <div class="indicators-container">
+          <div class="text">TEACHER RATING</div>
+          <div class="value"id="teacher-rating">##</div>
+          <div class="" id="graphic-teacher-rating"></div>
+        </div>
+        <div class="indicators-container">
+          <div class="text">JEDI MASTER RATING</div>
+          <div class="value"id="jedi-master-rating">###</div>
+          <div class="" id="graphic-jedi-master-rating"></div>
+        </div>
+      </div>
+    </section>
+    <!-- Base de datos -->
+    <script src="./js/graphics.js"></script>
+		<!-- Base de datos -->
+		<script src="./js/data.js"></script>
+		<!-- Aquí va tus archivos JS -->
+    <script src="./js/app.js"></script>
+  </body>
+</html>