Data Dashboard- Mariela Cerna-Melissa Yauri

README.md

@@ -1,25 +1,34 @@
 # Data Dashboard
 
-* **Track:** _Common Core_
-* **Curso:** _Creando tu primer sitio web interactivo_
-* **Unidad:** _Producto final_
-
 ***
-
-## Flujo de trabajo
-
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
-
-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í:
-
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
-   ```
-
-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:.
+## Autoras: Mariela Cerna- Melissa Yauri
+## Objetivo
+
+Realizar una herramienta web denominada **Dashboard** que permita que los Training Managers revisen el desempeño de los estudiantes,de modo que ellos visualizen los datos de manera  fácil y rápidamente.Los items que se debe de tomar en cuenta son:
+* 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:
+  * [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
+  * [NPS] = [Promoters] - [Detractors]
+
+* 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.
+
+La heramienta debe de ser de la siguiente forma presente:
+[Dashboard](https://marvelapp.com/104ejifg/screen/33742285)
+
+# Adicional
+* Tener un botón que permita indicar que una estudiante ha salido del Bootcamp y alterar los totales afectados por este cambio.
+* Utilizar Google Charts  para desarrollar estos gráficos, pero no es la única que se puede usar
+
+## Herramientas Utilizadas
+* Css
+* HTML
+* Javascript

css/main.css

@@ -1,3 +1,121 @@
-/*
- * Estilos de tu proyecto
- */
+
+*{
+
+  margin:0;
+}
+ header{
+   height: 100px;
+   width: 90%;
+ }
+ header img{
+   width: 20%;
+   margin: auto;
+   display: block;
+ }
+.bars{
+float: right;
+font-size: 40px;
+/*outline: 1px solid red;*/
+position: relative;
+top:-80px;
+
+ }
+ul{
+  list-style: none;
+}
+
+.disabled-menu{
+display: none;
+
+}
+
+
+.selectors{
+  background-color: #e1e1e1;
+  height: 70px;
+}
+
+
+
+.enabled-menu{
+display: block;
+}
+
+.section-gray{
+/*outline:1px solid red;*/
+height: 80px;
+background-color: #e2e4e6;
+}
+/*selectores sede-generaciones*/
+.selections{
+  border: none;
+  background-color: #e2e4e6;
+  margin-left: 100px;
+  margin-top: 10px;
+  font-size: 20px;
+}
+.container-subtitle{
+  overflow: auto;
+  margin-left: 80px;
+  margin-top: 20px;
+}
+.subtitle{
+  float: left;
+  margin-left: 20px;
+}
+.results{
+  background-color: #f7f7f7;
+  /*outline:1px solid red;*/
+  height: 900px;
+}
+.container{
+margin-left: 80px;
+}
+.container .box{
+  /*outline:1px solid red;*/
+  border: 1px solid black;
+  border-radius: 7px;
+  height: 300px;
+  width: 300px;
+  background-color: #ffffff;
+  float: left;
+  margin-left: 30px;
+  margin-top: 30px;
+}
+/*estilo a la caja total de estudiantes*/
+.total-students{
+  height: 70px;
+  width: 120px;
+  background-color: #e2e4e6;
+  float: left;
+}
+
+/*estilo a las cajas de la seccion nps*/
+.total-nps, .seccion-nps, .satisfaction-nps {
+  height: 70px;
+    width: 120px;
+    background-color: #e2e4e6;
+    float: left;
+    margin-left: 20px;
+  }
+#section2 {
+    display: inline-block;
+    background-color: rgb(203, 203, 238);
+    width: 100%;
+    height: 200px;
+}
+/*pase a hoja de melli*/
+
+.filter2 {
+  height: 70px;
+  width: 120px;
+  background-color: #e2e4e6;
+  float: left;
+  margin-left: 20px;
+
+  text-align: center;
+}
+
+.filtertxt {
+  font-size: 12px;
+}

index.html

@@ -3,12 +3,94 @@
   <head>
     <meta charset="utf-8">
     <title>Data Dashboard</title>
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+      <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
-
-		<!-- Base de datos -->
-		<script src="./js/data.js"></script>
-		<!-- Aquí va tus archivos JS -->
-    <script src="./js/app.js"></script>
+    <!--encabezado-->
+    <header>
+    <img src="assets/images/logo-laboratoria.svg" alt="">
+    <div id="bars"class="bars">
+      <i class="fa fa-bars" aria-hidden="true"></i>
+      <nav id ="options-menu"class="disabled-menu">
+        <ul>
+          <li>Add student</li>
+          <li>Remove student</li>
+          <li>Add sprint</li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  <!--seccion de selecctores para sede-generacion-->
+  <section class = 'section-gray'>
+    <select id="selection" name="" class="selections">
+      <option value="">Identifica la sede-generacion</option>
+      <option value="AQP-2016-2">AQP-2016-2</option>
+      <option value="AQP-2017-1">AQP-2017-1</option>
+      <option value="CDMX-2017-1">CDMX-2017-1</option>
+      <option value="CDMX-2017-2">CDMX-2017-2</option>
+      <!--sede Lima-->
+      <option value="LIM-2016-2">LIM-2016-2</option>
+      <option value="LIM-2017-1">LIM-2017-1</option>
+      <option value="LIM-2017-2">LIM-2017-2</option>
+      <!--sede chile-->
+      <option value="SCL-2016-2">SCL-2016-2</option>
+      <option value="SCL-2017-1">SCL-2017-1</option>
+      <option value="SCL-2017-2">SCL-2017-2</option>
+    </select>
+    <div class="container-subtitle">
+        <p class="subtitle">OVERVIEW</p>
+        <p class="subtitle">OVERVIEW</p>
+        <p class="subtitle">OVERVIEW</p>
+    </div>
+  </section>
+  <!--seccion de total de estudiantes y desertores-->
+  <section class= "results">
+    <div class="container">
+      <div class="box">
+        <h1>Enrollement</h1>
+        <!--seccion de total de estudiantes -->
+        <div id="total-students" class='total-students'>
+          <p># de estudiantes inscritos</p>
+        </div>
+        <img src="assets/images/bar-graph.png" alt="">
+      </div>
+      <!--seccion de total Achievement-->
+
+      <div class="desertores" id="containerFilter2">
+      </div>
+        <img src="assets/images/bar-graph.png" alt="">
+      </div>  
+      <div class="box" id="containerFilter3">
+        <h1>Achievemet</h1>
+      </div>
+      </div>
+      <!--seccion del NPS-->
+      <div class="box">
+        <h1>NPS</h1>
+        <!--total de nps-->
+        <div id="total-nps" class="total-nps">
+          <p>% NPS</p>
+        </div>
+        <!--partes nps-->
+        <div id="seccion-nps" class="seccion-nps">
+          <p>% Individual</p>
+        </div>
+        <img src="assets/images/graph.png" alt="">
+      </div>
+      <!--seccion del nivel de satisfaccion de los estudiantes-->
+      <div class="box">
+        <h1>Student Satisfaction</h1>
+        <div id="satisfaction" class="satisfaction-nps">
+          <p> % de estudiantes satisfechos</p>
+        </div>
+        <img src="assets/images/graph.png" alt="">
+      </div>
+    </div>
+  </section>
+  <!-- Base de datos -->
+  <script src="js/data.js"></script>
+  <!-- Aquí va tus archivos JS -->
+  <script src="js/app.js"></script>
   </body>
 </html>