From 41f5e2eba93a777b82320e1c27a96fe628473476 Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Tue, 28 Nov 2017 17:45:10 -0500 Subject: [PATCH 01/10] estructurando data dashboard --- css/main.css | 112 ++++++++++++++++++++++++++++++++++- index.html | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++- js/app.js | 48 +++++++++++++-- 3 files changed, 314 insertions(+), 10 deletions(-) diff --git a/css/main.css b/css/main.css index 6355c827..22574c7f 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,109 @@ -/* - * Estilos de tu proyecto - */ +/* Seteo general */ +/*Estilos generales*/ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} +body { + text-align:center; + width: 100%; + font-family: 'Work Sans', 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%; +} +/*Estilos del Header */ +header { + width: 100%; + height: 75px; + outline: 1px solid black; +} +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: 1500px; + padding: 5px; +} +/*Estilos del Nav*/ + +nav { + width: 12%; +} + +nav .nav-sedes { + padding:18px 0px; + background: #e4e726; + height: 50px; +} + +/*Estilos del main*/ +main { + display: inline-block; + width:90%; + background-color: #c3c3c3; +} +.selected-box { + padding:10px; + background-color: #c0c0c0; +} +.tab { + padding: 10px 20px; + border-style: none; + background-color: #e4eb1ee0; +} +#container-overview { + margin-top:2%; + margin-bottom: 5%; +} +.chart { + width:30%; + overflow:hidden; + vertical-align:top; +} +.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; +} +.second-graph { + width: 80%; + margin: auto; +} \ No newline at end of file diff --git a/index.html b/index.html index 8930fa03..f46c0a4c 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,172 @@ - + + Data Dashboard + + + - +
+ +
+
+ +
+
+
+

Arequipa 2017-II

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

ENROLLMENT

+
120

# STUDENTS CURRENTLY
ENROLLED
+
20%

%DROPOUT
+
+
+ bar-graphic +
+
+
+
+

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

+
120

# STUDENTS CURRENTLY
ENROLLED
+
20%

%DROPOUT
+
+
+ bar-graphic +
+
+
+
+

TEACHER RATING

+
120

# STUDENTS CURRENTLY
ENROLLED
+
20%

%DROPOUT
+
+
+ graphic +
+
+
+
+

JEDI MASTER RATING

+
120

# STUDENTS CURRENTLY
ENROLLED
+
20%

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

Enrollment

+ 120
# STUDENTS CURRENTLY
ENROLLED + 20%
%DROPOUT +
+
+ circle-graphic +
+
+
+
+
+
+

Enrollment

+ 120
# STUDENTS CURRENTLY
ENROLLED + 20%
%DROPOUT +
+
+ rectangular-graphic +
+
+
+
+
+
+
+
- + diff --git a/js/app.js b/js/app.js index 895ae2dd..faf746ac 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,46 @@ -/* - * Funcionalidad de tu producto - */ +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); From 6ad2a24132ec6ff08444b01918478dbc9a920cbc Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Tue, 28 Nov 2017 18:26:52 -0500 Subject: [PATCH 02/10] =?UTF-8?q?a=C3=B1ade=20students=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 8 ++++++++ index.html | 24 ++++++++++++++---------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/css/main.css b/css/main.css index 22574c7f..def30477 100644 --- a/css/main.css +++ b/css/main.css @@ -106,4 +106,12 @@ main { .second-graph { width: 80%; margin: auto; +} +/*Estilos Students Section */ +.specialization { + text-align: left; +} +.students { + width:60%; + background-color:black; } \ No newline at end of file diff --git a/index.html b/index.html index f46c0a4c..03f6bb91 100644 --- a/index.html +++ b/index.html @@ -136,16 +136,20 @@

JEDI MASTER RATING

-
-
-

Enrollment

- 120
# STUDENTS CURRENTLY
ENROLLED - 20%
%DROPOUT -
-
- circle-graphic -
-
+
+
+

SPECIALIZATION

+
    +
  • Javascript
    • +
  • UX Design
    • +
  • Front-End
    • +
+
+
+
+
+
+
From 6dff760dc090366543e5315bbced3045bec78d84 Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Wed, 29 Nov 2017 11:30:49 -0500 Subject: [PATCH 03/10] define maquetado --- css/main.css | 35 +++++++++++++++++++++++++++++++---- index.html | 10 ++++++---- 2 files changed, 37 insertions(+), 8 deletions(-) diff --git a/css/main.css b/css/main.css index def30477..28e692bf 100644 --- a/css/main.css +++ b/css/main.css @@ -27,6 +27,9 @@ body { margin:0; height:50%; } +h3 { + padding: 12px 0px; +} /*Estilos del Header */ header { width: 100%; @@ -50,8 +53,7 @@ header #icon-menu { #wrapper { width: 100%; display: flex; - height: 1500px; - padding: 5px; + height: 1750px; } /*Estilos del Nav*/ @@ -69,7 +71,7 @@ nav .nav-sedes { main { display: inline-block; width:90%; - background-color: #c3c3c3; + background-color: #f1eeeeee; } .selected-box { padding:10px; @@ -86,8 +88,11 @@ main { } .chart { width:30%; + height: 300px; overflow:hidden; vertical-align:top; + padding:30px 10px; + border-radius: 8px; } .data-boxes { overflow: hidden; @@ -102,16 +107,38 @@ main { } .graphic { background-color: #fff; + border-radius:8px; + padding:20px 0px; } .second-graph { width: 80%; margin: auto; } /*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%; - background-color:black; + background-color:rgb(197, 196, 196); + vertical-align: top; + padding:15px; + border-radius: 8px; + +} +.search-students { + display:inline-block; + width:600px; + height:40px; +} +form .fa-search { + padding: 10px; + } \ No newline at end of file diff --git a/index.html b/index.html index 03f6bb91..28b11c38 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@
-

Arequipa 2017-II

+

Arequipa 2016-II

@@ -136,10 +136,10 @@

JEDI MASTER RATING

-
+

SPECIALIZATION

-
    +
    • Javascript
    • UX Design
    • Front-End
      • @@ -147,7 +147,9 @@

      SPECIALIZATION

-
+
+ +
From d4f08db478cc3630e46718ab784257fb62c03af4 Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Wed, 29 Nov 2017 18:30:07 -0500 Subject: [PATCH 04/10] =?UTF-8?q?a=C3=B1ade-students-data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 16 ++++- index.html | 187 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 198 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index 28e692bf..bb10837f 100644 --- a/css/main.css +++ b/css/main.css @@ -127,11 +127,14 @@ main { .students { text-align: left; width:60%; - background-color:rgb(197, 196, 196); 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; @@ -140,5 +143,12 @@ main { } form .fa-search { padding: 10px; - +} +.arequipa-2017-2 { + margin-top: 12px; +} +.student-data { + padiing:10px; + background-color: #e3f0fb; + border-radius:10px; } \ No newline at end of file diff --git a/index.html b/index.html index 28b11c38..8240021b 100644 --- a/index.html +++ b/index.html @@ -147,10 +147,193 @@

SPECIALIZATION

-
+
-
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
+
+

DIANA NAVARRO

+

Front-End Developer

+
+
96%
+
80%
+
40%
+
+
+
+
+
From 88fc9ee5693ae53908e9933294dbb60b00deb70e Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Thu, 30 Nov 2017 09:53:21 -0500 Subject: [PATCH 05/10] =?UTF-8?q?a=C3=B1ade=20grafico=20students-satisfied?= =?UTF-8?q?,=20google=20charts=20function?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 7 ++++--- js/app.js | 22 ++++++++++++++++++++++ 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8240021b..2ac41c58 100644 --- a/index.html +++ b/index.html @@ -106,10 +106,9 @@

LIFE SKILLS

STUDENTS SATISFACTION

-
120

# STUDENTS CURRENTLY
ENROLLED
-
20%

%DROPOUT
+
140

% MEETING OR EXCEEDING EXPECTATIONS
-
+
bar-graphic
@@ -353,6 +352,8 @@

Enrollment

+ + diff --git a/js/app.js b/js/app.js index faf746ac..8176343c 100644 --- a/js/app.js +++ b/js/app.js @@ -1,4 +1,26 @@ +// Load google charts-satisfied-students +google.charts.load('current', {'packages':['corechart']}); +google.charts.setOnLoadCallback(drawChart); +// Draw the chart and set the chart values +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'); From c5c81cc52e8a54046d88facabb0f67d87c42432d Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Thu, 30 Nov 2017 17:23:26 -0500 Subject: [PATCH 06/10] students-data,total-data --- css/main.css | 74 ++++++++++++++++++++++++++--- index.html | 131 +++++++++++++++++++++++++++++++-------------------- js/app.js | 23 +++++++-- 3 files changed, 167 insertions(+), 61 deletions(-) diff --git a/css/main.css b/css/main.css index bb10837f..5e5f1a04 100644 --- a/css/main.css +++ b/css/main.css @@ -8,7 +8,7 @@ body { text-align:center; width: 100%; - font-family: 'Work Sans', sans-serif; + font-family: 'Montserrat', sans-serif; } .remove-underlined { text-decoration: none; @@ -34,7 +34,6 @@ h3 { header { width: 100%; height: 75px; - outline: 1px solid black; } header ul { display: flex; @@ -62,8 +61,10 @@ nav { } nav .nav-sedes { + font-family: 'Montserrat', sans-serif; + font-weight: bold; padding:18px 0px; - background: #e4e726; + background: #ffb100; height: 50px; } @@ -77,10 +78,23 @@ main { 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: #e4eb1ee0; + 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%; @@ -114,6 +128,21 @@ main { 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%; @@ -148,7 +177,40 @@ form .fa-search { margin-top: 12px; } .student-data { - padiing:10px; - background-color: #e3f0fb; + 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:hover { + padding: 18px; + cursor: pointer; } \ No newline at end of file diff --git a/index.html b/index.html index 2ac41c58..4fb23e4f 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Data Dashboard - + @@ -24,6 +24,9 @@
  • Ciudad de México
    • +
    + +
    @@ -31,7 +34,7 @@

    Arequipa 2016-II

    -
      +
        • @@ -65,8 +68,7 @@

        NET PROMOTER SCORE

        120

        # STUDENTS CURRENTLY
        ENROLLED
        20%

        %DROPOUT
    -
    - graphic +
    @@ -74,7 +76,12 @@

    NET PROMOTER SCORE

    TECH SKILLS

    - +
    120

    # STUDENTS CURRENTLY
    ENROLLED
    @@ -90,7 +97,13 @@

    TECH SKILLS

    LIFE SKILLS

    - +
    120

    # STUDENTS CURRENTLY
    ENROLLED
    @@ -109,7 +122,6 @@

    STUDENTS SATISFACTION

    140

    % MEETING OR EXCEEDING EXPECTATIONS
    - bar-graphic
    @@ -157,10 +169,11 @@

    SPECIALIZATION

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -169,10 +182,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -181,10 +195,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -193,10 +208,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -205,10 +221,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -217,10 +234,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -229,10 +247,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -241,10 +260,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -253,10 +273,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -265,10 +286,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -277,10 +299,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -289,10 +312,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -301,10 +325,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -313,10 +338,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    @@ -325,10 +351,11 @@

    Front-End Developer

    DIANA NAVARRO

    Front-End Developer

    -
    96%
    -
    80%
    -
    40%
    +
    96%
    +
    80%
    +
    40%
    +
    Ver Perfil
    diff --git a/js/app.js b/js/app.js index 8176343c..e8960145 100644 --- a/js/app.js +++ b/js/app.js @@ -1,8 +1,8 @@ -// Load google charts-satisfied-students +// Cargar gráfico desde google charts google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); - -// Draw the chart and set the chart values +// google.charts.setOnLoadCallback(drawNpsChart); +// Draw the chart and set the chart values, satisfied-students-chart function drawChart() { var data = google.visualization.arrayToDataTable([ ['Sprint', 'Satisfied',], @@ -20,6 +20,23 @@ function drawChart() { var chart = new google.visualization.LineChart(document.getElementById('satisfied-chart')); chart.draw(data, options); } +// nps-chart +// var aqp20172 = data.AQP['2016-2']['students']; +// var aqp20172Ratings = data.AQP['2016-2']['ratings']; +// aqp20172Ratings + +// function drawNpsChart() { +// var dataNps = google.visualization.arrayToDataTable([ +// ['Sprint','promoters','passive','detractors'], +// ['S1 ', 70, 15, 15 ], +// ['S2', 74, 16, 10], +// ['S3', 78, 13, 9], +// ['S4', 78,15,7], +// ]); +// var optionsNps = { 'width':325, 'height':170}; +// var chartNps = new google.visualization.LineChart(document.getElementById('nps-chart')); +// chartNps.draw(dataNps, optionsNps); + //funcion de los tabs de main section var showHide = function(e) { var tabSelected = e.target.dataset.tabSelected; From 085c27773d820427a2c5d290b5888fc307d0126e Mon Sep 17 00:00:00 2001 From: Esthefany HV <32306586+SteffAhv@users.noreply.github.com> Date: Thu, 30 Nov 2017 18:08:23 -0500 Subject: [PATCH 07/10] editando README --- README.md | 80 +++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 63 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index e9b59c4c..bbde5902 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 : +
      +
    • html
      • +
    • css
      • +
    • javascript
      • +
    • assets
      • +
    • .eslintrc
      • +
    -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:. +
      + +1. Trello + +![trello](assets/images/trello.png) + +2. Slack + +![slack](assets/images/slack.png) + +3. WhatsApp + + +
    + +## 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) From 07e8d7352dccdb198f955f9d4edc73c720e49b86 Mon Sep 17 00:00:00 2001 From: Esthefany HV <32306586+SteffAhv@users.noreply.github.com> Date: Thu, 30 Nov 2017 18:11:41 -0500 Subject: [PATCH 08/10] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bbde5902..c5bb8e1d 100644 --- a/README.md +++ b/README.md @@ -35,11 +35,11 @@ 1. Trello -![trello](assets/images/trello.png) +![trello](https://github.com/SteffAhv/data-dashboard/blob/menu-usuario/assets/images/trello.png?raw=true) 2. Slack -![slack](assets/images/slack.png) +![slack](https://github.com/SteffAhv/data-dashboard/blob/menu-usuario/assets/images/slack.png?raw=true) 3. WhatsApp From 5182f7d8c2571b483da2e8a3300143a0f2f37cff Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Thu, 30 Nov 2017 18:20:02 -0500 Subject: [PATCH 09/10] updating changes --- css/main.css | 7 +++- css/menu-user.css | 39 ++++++++++++++++++ index.html | 39 ++++++++---------- js/app.js | 103 ++++++++++++++++++++++++++++++++++++---------- menu-user.html | 30 ++++++++++++++ 5 files changed, 173 insertions(+), 45 deletions(-) create mode 100644 css/menu-user.css create mode 100644 menu-user.html diff --git a/css/main.css b/css/main.css index 5e5f1a04..38a5c249 100644 --- a/css/main.css +++ b/css/main.css @@ -53,6 +53,9 @@ header #icon-menu { width: 100%; display: flex; height: 1750px; + border-radius:15px; + padding:1px; + background-color:#e2e4e6; } /*Estilos del Nav*/ @@ -210,7 +213,7 @@ form .fa-search { border-radius: 3px; background-color:rgb(255, 241, 88); } -.total-data:hover { - padding: 18px; +.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 4fb23e4f..6782528f 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
      • -
      • +
    @@ -45,11 +45,10 @@

    Arequipa 2016-II

    ENROLLMENT

    -
    120

    # STUDENTS CURRENTLY
    ENROLLED
    -
    20%

    %DROPOUT
    +
    122

    # STUDENTS CURRENTLY
    ENROLLED
    +
    53%

    %DROPOUT
    -
    - bar-graphic +
    @@ -69,6 +68,7 @@

    NET PROMOTER SCORE

    20%

    %DROPOUT
    + graphic
    @@ -119,7 +119,7 @@

    LIFE SKILLS

    STUDENTS SATISFACTION

    -
    140

    % MEETING OR EXCEEDING EXPECTATIONS
    +
    89%

    % MEETING OR EXCEEDING EXPECTATIONS
    @@ -127,21 +127,18 @@

    STUDENTS SATISFACTION

    TEACHER RATING

    -
    120

    # STUDENTS CURRENTLY
    ENROLLED
    -
    20%

    %DROPOUT
    +
    3.9%

    OVERALL TEACHER RATING
    -
    - graphic +

    JEDI MASTER RATING

    -
    120

    # STUDENTS CURRENTLY
    ENROLLED
    -
    20%

    %DROPOUT
    +
    4.2%

    OVERALL JEDI RATING
    -
    - graphic +
    +
    @@ -363,14 +360,14 @@

    Front-End Developer

    -
    -
    -

    Enrollment

    - 120
    # STUDENTS CURRENTLY
    ENROLLED     - 20%
    %DROPOUT     +
    +
    +

    TOTAL ALUMNAS

    + SEDE + GENERACIÓN
    -
    - rectangular-graphic +
    +
    diff --git a/js/app.js b/js/app.js index e8960145..b09fe5cb 100644 --- a/js/app.js +++ b/js/app.js @@ -1,8 +1,82 @@ -// Cargar gráfico desde google charts +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); -// google.charts.setOnLoadCallback(drawNpsChart); -// Draw the chart and set the chart values, satisfied-students-chart +//Draw the chart and set the chart values, satisfied-students-chart function drawChart() { var data = google.visualization.arrayToDataTable([ ['Sprint', 'Satisfied',], @@ -13,29 +87,14 @@ function drawChart() { ['S5', 70] ]); - // Optional; add a title and set the width and height of the chart +// // 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" +// // Display the chart inside the
    element with id="piechart" var chart = new google.visualization.LineChart(document.getElementById('satisfied-chart')); - chart.draw(data, options); -} -// nps-chart -// var aqp20172 = data.AQP['2016-2']['students']; -// var aqp20172Ratings = data.AQP['2016-2']['ratings']; -// aqp20172Ratings + chart.draw(data, options); + } -// function drawNpsChart() { -// var dataNps = google.visualization.arrayToDataTable([ -// ['Sprint','promoters','passive','detractors'], -// ['S1 ', 70, 15, 15 ], -// ['S2', 74, 16, 10], -// ['S3', 78, 13, 9], -// ['S4', 78,15,7], -// ]); -// var optionsNps = { 'width':325, 'height':170}; -// var chartNps = new google.visualization.LineChart(document.getElementById('nps-chart')); -// chartNps.draw(dataNps, optionsNps); //funcion de los tabs de main section var showHide = function(e) { diff --git a/menu-user.html b/menu-user.html new file mode 100644 index 00000000..2fd219a6 --- /dev/null +++ b/menu-user.html @@ -0,0 +1,30 @@ + + + + + + + parte2 + + + + + + + + + + \ No newline at end of file From fafe5521558feadaf8f5b0394dbe2db779aa17d7 Mon Sep 17 00:00:00 2001 From: SteffAhv Date: Thu, 30 Nov 2017 18:24:37 -0500 Subject: [PATCH 10/10] updating --- README.md | 80 +++++++++++++++++++++++++++++++++++++++----------- menu-user.html | 2 +- 2 files changed, 64 insertions(+), 18 deletions(-) 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 : +
      +
    • html
      • +
    • css
      • +
    • javascript
      • +
    • assets
      • +
    • .eslintrc
      • +
    -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:. +
      + +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 + + +
    + +## 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/menu-user.html b/menu-user.html index 2fd219a6..bff8499a 100644 --- a/menu-user.html +++ b/menu-user.html @@ -10,7 +10,7 @@