Data Dashboard-betsyL-esthefany-geraldine

README.md

@@ -1,25 +1,71 @@
-# Data Dashboard
+# Dashboard de Laboratoria
 
-* **Track:** _Common Core_
-* **Curso:** _Creando tu primer sitio web interactivo_
-* **Unidad:** _Producto final_
+<p>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.</p>
 
-***
+**Funcionalidades Requeridas**
+<lu>
+<li>El total de estudiantes presentes por sede y generación.</li>
+<li>El porcentaje de deserción de estudiantes.</li>
+<li>La cantidad de estudiantes que superan la meta de puntos en promedio de todos los sprints cursados.</li>
+<li> La meta de puntos es 70% del total de puntos en HSE y en tech.</li>
+<li>El porcentaje que representa el dato anterior en relación al total de estudiantes.</li>
+<li>El Net Promoter Score (NPS) promedio de los sprints cursados.</li>
+<li>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</li>
 
-## 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/<nombre-de-usuario>/freelancer.git
-   ```
+## Herramientas utilizadas :
+<ul>
+<li>html</li>
+<li>css</li>
+<li>javascript</li>
+<li>assets</li>
+<li>.eslintrc</li>
+</ul>
 
-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:.
+<ul>
+
+1. Trello
+
+![trello](https://github.com/SteffAhv/data-dashboard/blob/menu-usuario/assets/images/trello.png?raw=true)
+
+2. Slack
+
+![slack](https://github.com/SteffAhv/data-dashboard/blob/menu-usuario/assets/images/slack.png?raw=true)
+
+3. WhatsApp
+
+
+</ul>
+
+## 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)

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;
+}

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*/