diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index a2f4c549..00000000 --- a/.eslintrc +++ /dev/null @@ -1,29 +0,0 @@ -{ - "parserOptions": { - "ecmaVersion": 6 - }, - "rules": { - "keyword-spacing": 1, - "space-before-function-paren": [1, "never"], - "eqeqeq": 1, - "space-infix-ops": 1, - "comma-spacing": 1, - "brace-style": 1, - "no-multiple-empty-lines": 1, - "camelcase": 1, - "func-call-spacing": 1, - "key-spacing": 1, - "semi": 1, - "no-floating-decimal": 1, - "no-multi-spaces": 1, - "object-property-newline": 1, - "padded-blocks": [1, "never"], - "space-before-blocks": 1, - "space-in-parens": 1, - "spaced-comment": 1, - "quotes": [1, "single"], - "id-length": [1, { "exceptions": ["i", "j", "x"] }], - "indent": [1, 2], - "no-array-constructor": 1 - } -} \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index e9b59c4c..00000000 --- a/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# 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//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:. diff --git a/appAlunas.html b/appAlunas.html new file mode 100644 index 00000000..f0aa73d2 --- /dev/null +++ b/appAlunas.html @@ -0,0 +1,45 @@ + + + + + + Page Alunas + + + + + +
+ + +
+ + + + + +
+
+ +
+ +
+ + + + + + + + + + + diff --git a/assets/images/bar-graph.png b/assets/images/bar-graph.png deleted file mode 100644 index f3bfed63..00000000 Binary files a/assets/images/bar-graph.png and /dev/null differ diff --git a/assets/images/circle-graphic.png b/assets/images/circle-graphic.png deleted file mode 100644 index 74ca2e17..00000000 Binary files a/assets/images/circle-graphic.png and /dev/null differ diff --git a/assets/images/graph.png b/assets/images/graph.png deleted file mode 100644 index 2f91d431..00000000 Binary files a/assets/images/graph.png and /dev/null differ diff --git a/assets/images/logo-labo.png b/assets/images/logo-labo.png new file mode 100644 index 00000000..680021d2 Binary files /dev/null and b/assets/images/logo-labo.png differ diff --git a/assets/images/logo-laboratoria.svg b/assets/images/logo-laboratoria.svg deleted file mode 100644 index 9abf8fa2..00000000 --- a/assets/images/logo-laboratoria.svg +++ /dev/null @@ -1,108 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/rectangular-graphic.png b/assets/images/rectangular-graphic.png deleted file mode 100644 index 1c4abbcc..00000000 Binary files a/assets/images/rectangular-graphic.png and /dev/null differ diff --git a/css/appAlunas.css b/css/appAlunas.css new file mode 100644 index 00000000..0438602e --- /dev/null +++ b/css/appAlunas.css @@ -0,0 +1,54 @@ +.topAlunas img{ + height: 100px; + width: 340px; + margin-left: 15px; + padding-top: 10px; +} + +.topAlunas{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + background-color: rgb(71, 182, 144); +} + +#sede{ + height: 30px; + width: auto; + margin-top: 10px; + background-color: rgb(255, 229, 33); + border: none; + border-radius: 10PX; + font-size: 12px; + margin-left: 10px; +} + +#turma{ + height: 30px; + width: auto; + margin-top: 10px; + background-color: rgb(255, 229, 33); + border: none; + border-radius: 10PX; + font-size: 12px; + margin-left: 10px; +} +.topAlunas button{ + height: 30px; + width: auto; + margin-top: 10px; + background-color: rgb(255, 229, 33); + border: none; + border-radius: 10PX; + font-size: 12px; + margin-left: 10px; +} + +.bodyAlunas{ + font-size: 16px; + margin: 0; + padding: 0; + background-color: rgb(233, 232, 232); + font-family: 'Roboto', sans-serif; +} \ No newline at end of file diff --git a/css/card.css b/css/card.css new file mode 100644 index 00000000..0ca0d563 --- /dev/null +++ b/css/card.css @@ -0,0 +1,386 @@ +.container{ + margin-bottom: 100px; +} +.card{ + width: 80%; + background-color: white; + min-height: 100px; + -webkit-box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); + -moz-box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); + box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); +} + +.card:nth-child(n+2){ + margin-top: 30px; +} + +.card .graficoPercentual{ + height: 480px !important; + width: 280px !important; +} + +/* + * card 1 , section qtdAlunas +*/ +#chart{ + margin-top: 30px; +} +.card .ativas h1{ + display: flex; + justify-content: center; + font-size: 30px; + margin-top: 30px; +} +.ativas .totalAtivasTodasSedes{ + display: flex; + justify-content: center; + color:rgb(71, 182, 144); + font-weight: bold; + font-size: 25px; +} + +.ativas p{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 15px; +} + +#myDoughnutChart{ + height: 480px !important; + width: 280px !important; + margin-left: 60px; +} + +.card .totalDesistentes{ + display: flex; + justify-content: center; + margin-top: 20px; + margin-bottom: 20px; + font-size: 30px; + font-weight: bold; + color: rgba(227, 57, 57); +} + +.card .desistentes h1{ + margin-right: 30px; + margin-left: 20px; + font-size: 25px; + margin-top: 30px; +} + + +/* + * card 2 , section metaTotal +*/ + +#myDoughnutCharts{ + margin-left: 40px; + margin-top: 40px; +} + +.card .percentualTotal h1{ + display: flex; + justify-content: center; + margin-top: 30px; + margin-left: 30px; + margin-bottom: 20px; + font-size: 25px; + font-weight: bold; +} + +.card .totalExederam{ + display: flex; + justify-content: center; + margin-top: 20px; + margin-bottom: 20px; + font-size: 30px; + font-weight: bold; + color: rgba(227, 57, 57); +} + +.percentualTotal p{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 12px; +} + +#charts{ + margin-top:70px; +} + +.qtdMetaTotal h1{ + display: flex; + justify-content: center; + font-size: 25px; + margin-top: 30px; +} + +.card .qtdTotal{ + display: flex; + justify-content: center; + font-size: 30px; + font-weight: bold; + color: rgb(71, 182, 144); +} +.qtdMetaTotal p{ + display: flex; + justify-content: center; + font-size: 15px; + font-weight: bold; + margin-bottom: 40px; + margin-top: 30px; +} + +/* + * card 3 , section metaTech +*/ + +#chartTech{ + margin-top: 50px; +} +.card .qtdMetaTech h1{ + display: flex; + justify-content: center; + font-size: 23px; + margin-top: 30px; +} + +.qtdMetaTech .qtdTotalSedeGeracao{ + display: flex; + justify-content: center; + color:rgb(71, 182, 144); + font-weight: bold; + font-size: 25px; + margin-top: 20px; +} + +.qtdMetaTech p{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 15px; + margin-top: 30px; +} + +#myDoughnutTech{ + height: 480px !important; + width: 280px !important; + margin-right: 65px; +} + +.card .totalExederamTech{ + display: flex; + justify-content: center; + margin-top: 20px; + margin-right: 20px; + margin-bottom: 20px; + font-size: 30px; + font-weight: bold; + color: rgba(227, 57, 57); +} + +.card .percentualMetaTech h1{ + margin-right: 40px; + margin-left: 20px; + font-size: 23px; + margin-top: 30px; +} + +.percentualMetaTech p{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 12px; + margin-right: 40px; +} + +/* + * card 4 , section metaHse +*/ + +#myDoughnutHse{ + margin-left: 60px; + margin-top: 40px; +} + +.card .percentualMetaHse h1{ + display: flex; + justify-content: center; + margin-top: 30px; + margin-left: 30px; + margin-bottom: 20px; + font-size: 26px; + font-weight: bold; +} + +.card .totalExederamHse{ + display: flex; + justify-content: center; + margin-top: 20px; + margin-bottom: 20px; + font-size: 30px; + font-weight: bold; + color: rgba(227, 57, 57); +} + +.percentualMetaHse p{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 12px; + margin-left: 30px; +} + +#chartHse{ + margin-top:70px; +} + +.qtdMetaHse h1{ + display: flex; + justify-content: center; + font-size: 25px; + margin-top: 30px; +} + +.card .totalHseSedeGeracao{ + display: flex; + justify-content: center; + font-size: 30px; + font-weight: bold; + color: rgb(71, 182, 144); +} +.qtdMetaHse p{ + display: flex; + justify-content: center; + font-size: 15px; + font-weight: bold; + margin-bottom: 40px; + margin-top: 30px; +} + +/* + * card 5 , pesquisas Laboratória +*/ + +#chartNps{ + margin-top: 100px; +} + +.card .nps h1{ + display: flex; + justify-content: center; + font-size: 25px; + margin-top: 39px; +} + +.card .totalNps{ + display: flex; + justify-content: center; + color: rgb(71, 182, 144); + font-weight: bold; + font-size: 25px; + margin-top: 20px; +} + +#myDoughnutSatisLaboratoria{ + height: 480px !important; + width: 280px !important; + margin-left: 50px; + margin-right: 10px; +} + +.card .totalAtendida{ + display: flex; + justify-content: center; + margin-top: 30px; + margin-right: 20px; + margin-bottom: 20px; + font-size: 30px; + font-weight: bold; + color: rgb(255, 229, 33); +} + +.card .satisfacaoAlunas h1{ + margin-right: 40px; + margin-left: 20px; + font-size: 18.8px; + margin-top: 45px; +} + +.satisfacaoAlunas p{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 12px; + margin-right: 20px; + margin-top: 40px; +} + +.pesquisas{ + display: flex; +} + +.cardProfessores{ + padding: 10px; + margin: 20px; + margin-top: 30px; + width: 80%; + background-color: white; + min-height: 100px; + -webkit-box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); + -moz-box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); + box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); +} + +.mediasProfessores h1{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 20px; +} + +.mediasProfessores .totalProf{ + display: flex; + justify-content: center; + color: rgb(71, 182, 144); + font-weight: bold; + font-size: 25px; + margin-top: 20px; +} + +.cardJedi{ + padding: 10px; + margin: 20px; + margin-top: 30px; + width: 80%; + background-color: white; + min-height: 100px; + -webkit-box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); + -moz-box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); + box-shadow: -1px 4px 6px 0px rgba(140,135,140,1); +} + +.cardJedi h1{ + display: flex; + justify-content: center; + font-weight: bold; + font-size: 20px; +} + +.cardJedi .totalJedis{ + display: flex; + justify-content: center; + color: rgb(71, 182, 144); + font-weight: bold; + font-size: 25px; + margin-top: 20px; +} + +.container i{ + border-radius: 5px; + +.container i{ + margin-left: 5px; +} diff --git a/css/flex.css b/css/flex.css new file mode 100644 index 00000000..3d7a4f18 --- /dev/null +++ b/css/flex.css @@ -0,0 +1,25 @@ +.flex{ + display: flex; +} + +.colunm{ + flex-direction: column; +} + +.row{ + flex-direction: row; +} + +.center{ + justify-content: center; + align-items: center +} + +.start{ + align-items: flex-start; +} + +.aroud{ + justify-content: space-around; +} + diff --git a/css/fonts.css b/css/fonts.css new file mode 100644 index 00000000..8a25dd3e --- /dev/null +++ b/css/fonts.css @@ -0,0 +1,8 @@ +.font-montserrat{ + font-family: 'Montserrat', sans-serif; +} + + +.font-roboto{ + font-family: 'Roboto', sans-serif; +} diff --git a/css/main.css b/css/main.css index 6355c827..c88adfb7 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,12 @@ -/* - * Estilos de tu proyecto - */ +@import url("card.css"); +@import url("flex.css"); +@import url("top.css"); +@import url("fonts.css"); + +body{ + font-size: 16px; + margin: 0; + padding: 0; + background-color: rgb(233, 232, 232); + font-family: 'Roboto', sans-serif; +} diff --git a/css/top.css b/css/top.css new file mode 100644 index 00000000..2f99b7a5 --- /dev/null +++ b/css/top.css @@ -0,0 +1,26 @@ +.top img{ + height: 100px; + width: 340px; + margin-left: 15px; + padding-top: 10px; +} + +.top{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + background-color: rgb(71, 182, 144); +} + +.top button{ + height: 30px; + width: auto; + margin-top: 10px; + background-color: rgb(255, 229, 33); + border: none; + border-radius: 10PX; + font-size: 12px; + margin-left: 10px; +} + diff --git "a/docs/Desenho tela inicial_Gr\303\241ficos.jpeg" "b/docs/Desenho tela inicial_Gr\303\241ficos.jpeg" new file mode 100644 index 00000000..e530b9c6 Binary files /dev/null and "b/docs/Desenho tela inicial_Gr\303\241ficos.jpeg" differ diff --git "a/docs/Planejamento_1\302\272 dia_12.07.PNG" "b/docs/Planejamento_1\302\272 dia_12.07.PNG" new file mode 100644 index 00000000..ba95cc9c Binary files /dev/null and "b/docs/Planejamento_1\302\272 dia_12.07.PNG" differ diff --git "a/docs/Planejamento_4\302\272 dia_16.07.PNG" "b/docs/Planejamento_4\302\272 dia_16.07.PNG" new file mode 100644 index 00000000..71b87f85 Binary files /dev/null and "b/docs/Planejamento_4\302\272 dia_16.07.PNG" differ diff --git "a/docs/Planejamento_4\302\272 dia_16.07_final do dia.PNG" "b/docs/Planejamento_4\302\272 dia_16.07_final do dia.PNG" new file mode 100644 index 00000000..93fff702 Binary files /dev/null and "b/docs/Planejamento_4\302\272 dia_16.07_final do dia.PNG" differ diff --git "a/docs/Planejamento_5\302\272 dia_17.07_final do dia.PNG" "b/docs/Planejamento_5\302\272 dia_17.07_final do dia.PNG" new file mode 100644 index 00000000..01e6b1ff Binary files /dev/null and "b/docs/Planejamento_5\302\272 dia_17.07_final do dia.PNG" differ diff --git "a/docs/Planejamento_5\302\272 dia_18.07.PNG" "b/docs/Planejamento_5\302\272 dia_18.07.PNG" new file mode 100644 index 00000000..a4ad32ab Binary files /dev/null and "b/docs/Planejamento_5\302\272 dia_18.07.PNG" differ diff --git a/favicon.png b/favicon.png new file mode 100644 index 00000000..4a80a0ac Binary files /dev/null and b/favicon.png differ diff --git a/faviconAlu.png b/faviconAlu.png new file mode 100644 index 00000000..ef01502c Binary files /dev/null and b/faviconAlu.png differ diff --git a/index.html b/index.html index 8930fa03..38eeab17 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,176 @@ Data Dashboard + + + + + + +
+ + +
+ + +
+
+ +
+
+ +
+
+
+ + +
+ + +
+
+ +
+ +
+

Números de alunas presentes

+ +

#Total geral ativas

+ +
+ +
+

Percentual de desistentes

+ + +
+ +
+ + + +
+
+ +
+ +
+

Percentual ambas as metas

+ +

#Que exederam em pelo menos um sprint.

+ +
+ +
+

Números de alunas execederam HSE e TECH

+ +

#Total geral em pelo menos 1 sprint.

+ +
+
+ + + +
+
+ +
+ +
+

Número de alunas que execederam a meta TECH

+ +

#Total geral

+ +
+ +
+

Percentual meta TECH

+ +

#Execederam em pelo menos um sprint

+ +
+
+ + + +
+
+ +
+
+

Percentual meta HSE

+ +

#Execederam em pelo menos um sprint

+ +
+ +
+

Número de alunas que execederam a meta HSE

+ +

#Total geral

+ +
+
+ + + +
+
+ +
+ +
+

(NPS)Net Promoter Score por sede e geração

+ + +
+ +
+

Percentual satisfação Laboratória

+ +

#Satisfação das alunas

+ +
+
+ + + +
+ +
+
+ +
+ +
+

Pontuação média dos Professores

+ + +
+
+ +
+
+ +
+
+

Pontuação média dos Jedis

+ + +
+
+
+ +
+
+ + - + - + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 895ae2dd..8c4d5b4e 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,800 @@ -/* - * Funcionalidad de tu producto - */ +///////////// Card 1: section qtdAlunas +// Função do grafico: alunas ativas por sede e geração +graficoAlunasAtivas(); +function graficoAlunasAtivas(){ + let dados = alunasAtivasSedeGeracao(); + let ctx = document.getElementById("chart").getContext("2d"); + let labels = dados.map(item => item.sede + ' (' + item.geracao + ')' ); + let quantidade = dados.map(item => item.quantidade); + let colors = [ + 'rgb(59, 0, 48, 0.9)', + 'rgb(59, 0, 48, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)' + ] + let myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [ + {data: quantidade,label: 'Alunas presentes pela sede e geração. ', borderWidth: 1, backgroundColor: colors} + ] + } + }); +} -// Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); +// Função do grafico: % de desistentes +graficoAlunasInativas(); +function graficoAlunasInativas(){ + let dados = alunasAtivasSedeGeracao(); + let ctx = document.getElementById("myDoughnutChart").getContext("2d"); + let inativas = dados.map(item => item.quantidadeInativas).reduce ( (prev, item)=> prev + item, 0); + let ativas = dados.map(item => item.quantidade).reduce( (prev, item) => prev + item, 0 ); + let totalGeral = inativas + ativas; + let percentualAtivas = Math.round((ativas * 100) / totalGeral); + let percentualInativas = Math.round((inativas * 100) / totalGeral); + document.querySelector(".totalDesistentes").innerHTML = percentualInativas + '%'; + let dataset = [percentualAtivas, percentualInativas]; + let labels = ["Ativas", "Inativas"]; + let myBarChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: labels, + datasets: [ + + {data: dataset, label: labels, borderWidth: 1, backgroundColor: ['rgba(71, 182, 144, 0.9)', 'rgb(227, 57, 57, 0.9)']} + + ] + } + }); +} + +// Função que esta percorrendo o obj, e executando grafico 1 e 2 +function alunasAtivasSedeGeracao(){ + const grafico1 = [ + ]; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = data[sede][geracao].students.filter(alunas=>alunas.active).length; + item['quantidadeInativas']= data[sede][geracao].students.filter(alunas=> !alunas.active).length; + grafico1.push(item); + } + } + return grafico1; +} + +// Função que soma o total de todas as sedes e turmas ativas +document.querySelector(".totalAtivasTodasSedes").innerHTML = totalGeralAtivas() + " Alunas"; +function totalGeralAtivas(){ + let alunas = alunasAtivasSedeGeracao(); + return alunas.reduce(function(prev,element){ + return prev + element.quantidade; + },0); +} + +// Card 2: section metaTotal +// Função do gráfico: do total de alunas que excederam ambas as metas em pelo menos 1 sprint +graficoAlunasExedemMetas(); +function graficoAlunasExedemMetas(){ + let dados = alunasExedemMetas(); + let ctx = document.getElementById("charts").getContext("2d"); + let labels = dados.map(item => item.sede + ' (' + item.geracao + ')' ); + let quantidade = dados.map(item => item.quantidade); + let colors = [ + 'rgb(59, 0, 48, 0.9)', + 'rgb(59, 0, 48, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)' + ] + let myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [ + {data: quantidade, label: 'Quantidade exederam as metas por sede e geração', borderWidth: 1, backgroundColor: colors} + ] + } + }); +} + +// Função que retorna os dados para o gráfico do total de alunas que excederam ambas as metas em pelo menos 1 sprint +function alunasExedemMetas(){ + const grafico3 = []; + var qAlunasExederam = metas(); + var contador = 0; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = qAlunasExederam[contador]; + grafico3.push(item); + contador++; + } + } + return grafico3; +} + +// Função que retorna o total de alunas que excederam ambas as metas em pelo menos 1 sprint +function metas(){ + var qAlunasExederamPontos = []; + var exedeuPontos = false; + var alunasExederam = []; + for (sede in data){ + for (geracao in data[sede]){ + var estudantes = data[sede][geracao].students; + for(estudante in estudantes){ + var sprints = estudantes[estudante].sprints; + for (sprint in sprints){ + var tech = sprints[sprint].score.tech; + var hse = sprints[sprint].score.hse; + if (tech > 1260 && hse > 840){ + exedeuPontos = true; + } + } + if (exedeuPontos){ + qAlunasExederamPontos.push(estudantes[estudante]); + } + exedeuPontos = false; + } + alunasExederam.push(parseInt(qAlunasExederamPontos.length)); + qAlunasExederamPontos = []; + } + } +return alunasExederam; +} + +//total por sede e geração de hse e tech +document.querySelector(".qtdTotal").innerHTML = parseInt(somaArrays(metas())) + " Alunas"; + +// Função que retorna o total de alunas; +function totalDeAlunas(){ + let dados = alunasAtivasSedeGeracao(); + let inativas = dados.map(item => item.quantidadeInativas).reduce ( (prev, item)=> prev + item, 0); + let ativas = dados.map(item => item.quantidade).reduce( (prev, item) => prev + item, 0 ); + let totalGeral = inativas + ativas; + return totalGeral; +} + +// Função que retorna o total de alunas por geração; +function totalAlunaGeracao(){ + var alunasPorGeracao = []; + for (sede in data){ + for (geracao in data[sede]){ + var estudantes = data[sede][geracao].students; + alunasPorGeracao.push(parseInt(estudantes.length)); + } + } + return alunasPorGeracao; +} + +//determinação de vars +var qAlunasExederam = metas(); // QUEM EXEDEU AMBAS AS METAS +var alunasPorGeracao = totalAlunaGeracao(); // total de alunas por gerção +var alunasTotal = totalDeAlunas(); // total por sede e geração retorna 261 +var exederamTech = metasTECH(); //quem exedeu a meta tech +var exederamHse = metasHSE(); // quem exedeu a meta HSE + +// Função do grafico % de alunas que exederam as metas do sprint +graficoPorcentoMetas(); +function graficoPorcentoMetas(){ + let dados = alunasExedemMetas(); + let ctx = document.getElementById("myDoughnutCharts").getContext("2d"); + let totalGeral = totalDeAlunas(); + let totalExederam = somaArrays(qAlunasExederam); + let totalNaoExederam = totalGeral - totalExederam; + let percentualExederam = Math.round((totalExederam * 100) / totalGeral); + let percentualNaoExederam = Math.round((totalNaoExederam * 100) / totalGeral); + document.querySelector(".totalExederam").innerHTML = percentualExederam + "%"; + let dataset = [percentualExederam, percentualNaoExederam]; + let labels = ["Exederam", "Não exederam"]; + + let myBarChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: labels, + datasets: [ + {data: dataset, label: labels, borderWidth: 1, backgroundColor: ['rgb(227, 57, 57, 0.9)','rgba(71, 182, 144, 0.9)']} + ] + } + }); +} + +// Card 3: section metaTech +// Função do gráfico do total de alunas que excederam a meta TECH em pelo menos 1 sprint +graficoExedemTECH(); +function graficoExedemTECH(){ + let dados = alunasExedemTECH(); + let ctx = document.getElementById("chartTech").getContext("2d"); + let labels = dados.map(item => item.sede + ' (' + item.geracao + ')' ); + let quantidade = dados.map(item => item.quantidade); + let colors = [ + 'rgb(59, 0, 48, 0.9)', + 'rgb(59, 0, 48, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)' + ] + let myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [ + {data: quantidade, label: 'Quantidade de alunas que exederam as meta tech por sede e geração', borderWidth: 1, backgroundColor: colors} + ] + } + }); +} + +// Função que retorna os dados para o gráfico do total de alunas que excederam ambas as metas em pelo menos 1 sprint +function alunasExedemTECH(){ + const grafico6 = []; + var qExederamTECH = metasTECH(); + var contador = 0; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = qExederamTECH[contador]; + grafico6.push(item); + contador++; + } + } + return grafico6; +} + +// Função que retorna o total de alunas que excederam a meta de em TECH pelo menos 1 sprint +function metasTECH(){ + var alunasExederamPontos = []; + var exedeuPontos = false; + var qExederamTECH = []; + for (sede in data){ + for (geracao in data[sede]){ + var estudantes = data[sede][geracao].students; + for(estudante in estudantes){ + var sprints = estudantes[estudante].sprints; + for (sprint in sprints){ + var tech = sprints[sprint].score.tech; + if (tech > 1260){ + exedeuPontos = true; + } + } + if (exedeuPontos){ + alunasExederamPontos.push(estudantes[estudante]); + } + exedeuPontos = false; + } + qExederamTECH.push(parseInt(alunasExederamPontos.length)); + alunasExederamPontos = []; + } + } +return qExederamTECH; +} + +// total por sede e geração de tech +document.querySelector(".qtdTotalSedeGeracao").innerHTML = parseInt(somaArrays(metasTECH())) + " Alunas"; + +// Função do grafico % de alunas que exederam a meta TECH do sprint +graficoPorcentoMetaTech(); +function graficoPorcentoMetaTech(){ + let dados = alunasExedemTECH(); + let ctx = document.getElementById("myDoughnutTech").getContext("2d"); + let totalGeral = totalDeAlunas(); + let totalExederam = somaArrays(exederamTech); + let totalNaoExederam = totalGeral - totalExederam; + let percentualExederam = Math.round((totalExederam * 100) / totalGeral); + let percentualNaoExederam = Math.round((totalNaoExederam * 100) / totalGeral); + document.querySelector(".totalExederamTech").innerHTML = percentualExederam + "%"; + let dataset = [percentualExederam, percentualNaoExederam]; + let labels = ["Não exederam","Exederam"]; + + let myBarChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: labels, + datasets: [ + {data: dataset, label: labels, borderWidth: 1, backgroundColor: ['rgb(227, 57, 57, 0.9)','rgba(71, 182, 144, 0.9)']} + ] + } + }); +} + +// Card 4: section metaHse +// Função do gráfico do total de alunas que excederam a meta HSE em pelo menos 1 sprint +graficoExedemHSE(); +function graficoExedemHSE(){ + let dados = alunasExedemHSE(); + let ctx = document.getElementById("chartHse").getContext("2d"); + let labels = dados.map(item => item.sede + ' (' + item.geracao + ')' ); + let quantidade = dados.map(item => item.quantidade); + let colors = [ + 'rgb(59, 0, 48, 0.9)', + 'rgb(59, 0, 48, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)' + ] + let myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [ + {data: quantidade, label: 'Quantidade de alunas que exederam as meta H por sede e geração', borderWidth: 1, backgroundColor: colors} + ] + } + }); +} + +// Função que retorna os dados para o gráfico do total de alunas que excederam ambas as metas em pelo menos 1 sprint +function alunasExedemHSE(){ + const grafico7 = []; + var qExederamHSE = metasHSE(); + var contador = 0; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = qExederamHSE[contador]; + grafico7.push(item); + contador++; + } + } + return grafico7; +} + +// Função que retorna o total de alunas que excederam a meta de HSE em pelo menos 1 sprint +function metasHSE(){ + var alunasExederamPontos = []; + var exedeuPontos = false; + var qExederamHSE = []; + for (sede in data){ + for (geracao in data[sede]){ + var estudantes = data[sede][geracao].students; + for(estudante in estudantes){ + var sprints = estudantes[estudante].sprints; + for (sprint in sprints){ + var hse = sprints[sprint].score.hse; + if (hse > 840){ + exedeuPontos = true; + } + } + if (exedeuPontos){ + alunasExederamPontos.push(estudantes[estudante]); + } + exedeuPontos = false; + } + qExederamHSE.push(parseInt(alunasExederamPontos.length)); + alunasExederamPontos = []; + } + } +return qExederamHSE; +} + +// total por sede e geração de hse +document.querySelector(".totalHseSedeGeracao").innerHTML = parseInt(somaArrays(metasHSE())) + " Alunas"; + +// Função do grafico % de alunas que exederam a meta HSE do sprint +graficoPorcentoMetaHse(); +function graficoPorcentoMetaHse(){ + let dados = alunasExedemHSE(); + let ctx = document.getElementById("myDoughnutHse").getContext("2d"); + let totalGeral = totalDeAlunas(); + let totalExederam = somaArrays(exederamHse); + let totalNaoExederam = totalGeral - totalExederam; + let percentualExederam = Math.round((totalExederam * 100) / totalGeral); + let percentualNaoExederam = Math.round((totalNaoExederam * 100) / totalGeral); + document.querySelector(".totalExederamHse").innerHTML = percentualExederam + "%"; + let dataset = [percentualExederam, percentualNaoExederam]; + let labels = ["Exederam", "Não exederam"]; + + let myBarChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: labels, + datasets: [ + {data: dataset, label: labels, borderWidth: 1, backgroundColor: ['rgb(227, 57, 57, 0.9)','rgba(71, 182, 144, 0.9)']} + ] + } + }); +} + +// Card 5: section pesquisas Laboratória +// AAA função +function alunasAtivasSedeGeracao(){ + const graficos = [ + ]; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = data[sede][geracao].students.filter(alunas=>alunas.active).length; + item['quantidadeInativas']= data[sede][geracao].students.filter(alunas=> !alunas.tech).length; + item['excedeTech']= data[sede][geracao].students.filter(alunas => { + if (alunas.sprints) + return alunas.sprints.filter(media => media.score.tech > 1260); + }).length; + graficos.push(item); + } + } + return graficos; +} + +// Função do grafico NPS - Os números representam porcentagens - Item 5 +graficoNps(); +function graficoNps(){ + let dados = dadosNps(); + let ctx = document.getElementById("chartNps").getContext("2d"); + let labels = dados.map(item => item.sede + ' (' + item.geracao + ')' ); + let quantidade = dados.map(item => item.quantidade); + let colors = [ + 'rgb(59, 0, 48, 0.9)', + 'rgb(59, 0, 48, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)' + ] + let myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [ + {data: quantidade, label: 'NPS em porcentagem', borderWidth: 1, backgroundColor: colors} + ] + } + }); +} + +// Função que retorna os dados para o gráfico do NPS +function dadosNps(){ + const grafico5 = []; + var valoresNps = calculoNps(); + var contador = 0; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = valoresNps[contador]; + grafico5.push(item); + contador++ + } + } + return grafico5; + +} + +// Função que calcula o NPS por geração +function calculoNps(){ + var arrayNps = []; + var promotersArray = mediaPromoters(); + var detractorsArray = mediaDetractors(); + for (i = 0; i < promotersArray.length; i++){ + var nps = promotersArray[i] - detractorsArray[i]; + arrayNps.push(nps); + } + return arrayNps; +} + +// total do NPS da Laboratória +document.querySelector(".totalNps").innerHTML = "O NPS da Laboratória é " + parseInt(mediaNps()) + "%"; + +// Função que calcula a média de Promoters por geração +function mediaPromoters(){ + var mPromoters = []; + for (sede in data){ + for (geracao in data[sede]){ + var arrayPromoters = data[sede][geracao].ratings.map(nPromoters=>nPromoters.nps.promoters); + for (i = 0; i< arrayPromoters.length; i++ ){ + var mediaP = Math.round(somaArrays(arrayPromoters)/arrayPromoters.length); + mPromoters.push(mediaP); + } + } + } + return mPromoters; +} + +// Função que calcula a média de Detractors por geração +function mediaDetractors(){ + var mDetractors = []; + for (sede in data){ + for (geracao in data[sede]){ + var arrayDetractors = data[sede][geracao].ratings.map(nDetractors=>nDetractors.nps.detractors); + for (i = 0; i< arrayDetractors.length; i++ ){ + var mediaD = Math.round(somaArrays(arrayDetractors)/arrayDetractors.length); + mDetractors.push(mediaD); + } + } + } + return mDetractors; +} + +// Função que calcula a média do NPS da Laboratória +function mediaNps(){ + var arrNps = calculoNps(); + var mediaN = Math.round(somaArrays(arrNps)/arrNps.length); + return mediaN; +} + +// Função do grafico % de satisfação das alunas da Laboratória - Item 8 +graficoSatisLaboratoria(); +function graficoSatisLaboratoria(){ + let ctx = document.getElementById("myDoughnutSatisLaboratoria").getContext("2d"); + let superada = mediaSuperada(); + let atendida = mediaAtendida(); + let NaoAtendida = mediaNaoAtendida(); + document.querySelector(".totalAtendida").innerHTML = atendida + "%"; + let dataset = [superada, NaoAtendida, atendida]; + let labels = ["Expectativa superada","Expectativa não atendida", "Expectativa atendida"]; + let myBarChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: labels, + datasets: [ + {data: dataset, label: labels, borderWidth: 1, backgroundColor: ['rgba(71, 182, 144, 0.9)', 'rgb(227, 57, 57, 0.9)','rgb(255, 229, 33)']} + + ] + } + }); +} + +// Função que calcula a média de Expectativa Superada +function mediaSuperada(){ + var mSupera = []; + for (sede in data){ + for (geracao in data[sede]){ + var arraySupera = data[sede][geracao].ratings.map(porGeracao=>porGeracao.student.supera); + for (i = 0; i< arraySupera.length; i++ ){ + var mediaPorGeracao = Math.round(somaArrays(arraySupera)/arraySupera.length); + mSupera.push(mediaPorGeracao); + } + } + } + var mediaSupera = Math.round(somaArrays(mSupera)/mSupera.length); + // mSupera.length representa a quantidade de gerações + return mediaSupera; +} + +// Função que calcula a média de Expectativa Atendida +function mediaAtendida(){ + var mAtendida = []; + for (sede in data){ + for (geracao in data[sede]){ + var arrayAtendida = data[sede][geracao].ratings.map(porGeracao=>porGeracao.student.cumple); + for (i = 0; i< arrayAtendida.length; i++ ){ + var mediaPorGeracao = Math.round(somaArrays(arrayAtendida)/arrayAtendida.length); + mAtendida.push(mediaPorGeracao); + } + } + } + var mediaCumple = Math.round(somaArrays(mAtendida)/mAtendida.length); + // mAtendida.length representa a quantidade de gerações + return mediaCumple; +} + +// Função que calcula a média de Expectativa Não Atendida +function mediaNaoAtendida(){ + var mNaoAtendida = []; + for (sede in data){ + for (geracao in data[sede]){ + var arrayNaoAtendida = data[sede][geracao].ratings.map(porGeracao=>porGeracao.student["no-cumple"]); + for (i = 0; i< arrayNaoAtendida.length; i++ ){ + var mediaPorGeracao = Math.round(somaArrays(arrayNaoAtendida)/arrayNaoAtendida.length); + mNaoAtendida.push(mediaPorGeracao); + } + } + } + var mediaNoCumple = Math.round(somaArrays(mNaoAtendida)/mNaoAtendida.length); + // mAtendida.length representa a quantidade de gerações + return mediaNoCumple; +} + +// Card 6: section pesquisas mentores +// Função do grafico da pontuação média das Professoras - Item 9 +graficoProfessoras(); +function graficoProfessoras(){ + let dados = dadosGraficoProf(); + let ctx = document.getElementById("chartProf").getContext("2d"); + let labels = dados.map(item => item.sede + ' (' + item.geracao + ')' ); + let quantidade = dados.map(item => item.quantidade); + let geracao = dados.map(item => item.geracao); + let colors = [ + 'rgb(59, 0, 48, 0.9)', + 'rgb(59, 0, 48, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)' + ] + let myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [ + {data: quantidade, label: 'Por sede e geração', borderWidth: 1, backgroundColor: colors} + ] + } + }); +} + +// Função que retorna os dados para o gráfico da pontuação média das Professoras +function dadosGraficoProf(){ + const grafico9 = []; + var profMedia = mediaProfessores(); + var contador = 0; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = profMedia[contador]; + grafico9.push(item); + contador++ + } + } + return grafico9; + +} + +// Função que calcula a média das notas dos Professores por geração +function mediaProfessores(){ + var mProfessores = []; + for (sede in data){ + for (geracao in data[sede]){ + var arrayProfessores = data[sede][geracao].ratings.map(nProfessores=>nProfessores.teacher); + for (i = 0; i< arrayProfessores.length; i++ ){ + var mediaP = Number((somaArrays(arrayProfessores)/arrayProfessores.length).toFixed(1)); + mProfessores.push(mediaP); + } + } + } + return mProfessores; +} + + // Função que calcula a média dos Professores no geral da Laboratória + function mediaProfLaboratoria(){ + var arrProf = mediaProfessores(); + var mediaP = (somaArrays(arrProf)/arrProf.length).toFixed(2); + return mediaP; + } + + // Nota média dos professores da Laboratória + document.querySelector(".totalProf").innerHTML = "A nota média é " + parseInt(mediaProfLaboratoria()); + +// Função do grafico da pontuação média dos Jedis - Item 10 +graficoJedis(); +function graficoJedis(){ + let dados = dadosGraficoJedis(); + let ctx = document.getElementById("chartJedis").getContext("2d"); + let labels = dados.map(item => item.sede + ' (' + item.geracao + ')' ); + let quantidade = dados.map(item => item.quantidade); + let geracao = dados.map(item => item.geracao); + let colors = [ + 'rgb(59, 0, 48, 0.9)', + 'rgb(59, 0, 48, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(245, 58, 51, 0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(255, 145, 48,0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)', + 'rgb(204, 108, 187, 0.9)' + ] + let mediaTotal = parseInt(somaArrays(mediaJedis())); + document.getElementsByClassName(".mediaJedis").innerHTML = mediaTotal; + let myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: labels, + datasets: [ + {data: quantidade, label: 'Por sede e geração', borderWidth: 1, backgroundColor: colors} + ] + } + }); +} + +// Função que retorna os dados para o gráfico da pontuação média das Jedis +function dadosGraficoJedis(){ + const grafico10 = []; + var contador = 0; + for (sede in data){ + for (geracao in data[sede]){ + let item = {}; + item['sede'] = sede; + item['geracao'] = geracao; + item['quantidade'] = mediaJedis()[contador]; + grafico10.push(item); + contador++ + } + } + return grafico10; + +} + +// Função que calcula a média das notas dos Jedis por geração +function mediaJedis(){ + var mJedis = []; + for (sede in data){ + for (geracao in data[sede]){ + var arrayJedis = data[sede][geracao].ratings.map(nJedis=>nJedis.jedi); + for (i = 0; i< arrayJedis.length; i++ ){ + var mediaJ = Number((somaArrays(arrayJedis)/arrayJedis.length).toFixed(1)); + mJedis.push(mediaJ); + } + } + } + return mJedis; +} + +// Função que calcula a média dos Jedis no geral da Laboratória +function mediaJedisLaboratoria(){ + var arrJedis = mediaJedis(); + var mediaJ = (somaArrays(arrJedis)/arrJedis.length).toFixed(2); + return mediaJ; +} + +// Nota média dos professores da Laboratória +document.querySelector(".totalJedis").innerHTML = "A nota média é " + parseInt(mediaJedisLaboratoria()); + +// soma array +function somaArrays(arr) { + var sumArray = 0; + for (i = 0; i < arr.length; i++){ + sumArray += arr[i]; + } + return sumArray; + } + + var cardsDisable = []; + + //função habilita os cards + function enableAllCards() { + event.preventDefault(); + cardsDisable.map((card) =>{ + document.querySelector('#'+card).setAttribute('style', "display:flex"); + }); + } + + //função desabilita os cards + function disableCard(idCard) { + event.preventDefault(); + cardsDisable.push(idCard); + document.querySelector('#'+idCard).setAttribute('style', "display:none"); + } \ No newline at end of file diff --git a/js/app2.js b/js/app2.js new file mode 100644 index 00000000..070ffea9 --- /dev/null +++ b/js/app2.js @@ -0,0 +1,21 @@ +//Variaveis +var sedeFiltrada = {} +var selectSedeElement = document.getElementById("sede"); +var selectTurmaElement = document.getElementById("turma"); + + + // seleciona a sede que irá apresentar os dados na tela + function onSelectSede(){ + let sedeSelecionada = selectSedeElement.value; + turmas = data[sedeSelecionada]; + createSelectTurmaOptions(turmas); + }; + +//seliociona a gerção qu irá apresentar os dados na tela + function createSelectTurmaOptions(turmas){ + let options = []; + for (turma in turmas){ + options.push(``); + } + selectTurmaElement.innerHTML = options; + }