Commit e4f535e4 authored by Luis Floriano's avatar Luis Floriano 🍍

Merge branch '219-fazer-heatmap-para-grade' into 'development'

Resolve "Fazer heatmap para grade"

Closes #219

See merge request !114
parents 35e144b2 83816d27
Pipeline #22337 passed with stage
in 4 minutes and 58 seconds
......@@ -198,6 +198,7 @@ python manage.py graph_models -a -o diagrama.png
* [Django](https://www.djangoproject.com/) - Framework base. Trata a requisição dos clientes e chama as devidas rotinas.
* [Bootstrap](http://getbootstrap.com/) - Framework css. Usamos os seus componentes para deixar as telas bonitas
* [Charts.js](http://www.chartjs.org/) - Biblioteca javascript para desenhar gráficos.
* [chroma.js](https://gka.github.io/chroma.js/#color-scales) - Biblioteca javascript para escala de cores do heatmap.
* [Pandas](http://pandas.pydata.org/) - usada para importação dos dados
* [django-extensions](https://django-extensions.readthedocs.io/en/latest/) - Várias extensões para o django. Estamos usando para gerar o diagrama do projeto.
......
......@@ -290,18 +290,18 @@ span.data {
.materia_selected {
outline-style:solid;
outline-color:rgb(138, 64, 207);
outline-width:1px;
outline-color:#c657e9;
outline-width:3px;
}
.materia_prerequisite {
outline-style:solid;
outline-color:#FFD700;
outline-width:1px;
outline-color:#0867b8;
outline-width:2px;
}
.materia_posrequisite {
outline-style:solid;
outline-color:#6B8E23;
outline-width:1px;
outline-color:#f11de0;
outline-width:2px;
}
/* ============================================== MATERIA */
......@@ -390,6 +390,59 @@ span.data {
align-content: flex-start;
align-items: stretch; }
/* ======================================= TOGGLE HEATMAP */
.switch {
position: relative;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 17px;
margin-right: 7px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.toggleheat:checked + .slider {
background-color: #18bc9c;
}
.toggleheat:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
/* ============================================== HISTORICO */
#desenvolvimento {
overflow-x: auto;
......
This diff is collapsed.
......@@ -91,6 +91,7 @@
<script src="{% static 'adega/js/plotly-latest.min.js' %}"></script>
<script src="{% static 'adega/js/chroma.min.js' %}"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
......
......@@ -120,10 +120,14 @@
<h3>Grade curricular
<a tabindex="0" class="fa fa-info-circle" data-toggler="popover" data-html="true"
data-content="Informações gerais sobres as disciplinas do curso de graduação.<br>
Passe o mouse sobre os códigos para verificar os nomes completos
<b>Passe o mouse</b> sobre os códigos para verificar os nomes completos
e os pré-requisitos associados.<br>
Também é possível verificar o desvio padrão das notas médias
passando o mouse sobre o valor da nota."></a>
passando o mouse sobre o valor da nota.<br>
<b>Heatmap:</b>
Ao lado pode ser ativado o mapa de calor,
quanto maior a taxa de aprovação mais verde,
quanto menor a taxa de aprovação mais vermelho. "></a>
</h3>
<div class="row" id="grid">
<br>
......@@ -132,8 +136,13 @@
<div class="semestre">
<div class="grade-head">{{forloop.counter}}º</div>
{% for course in semester %}
<div id="grid_course_course_{{course.code}}" code={{course.code}}
data-toggle="tooltip" data-placement="top" title="{{course.name}}" class="materia {{ course.situation }}">
<div id="grid_course_course_{{course.code}}"
code={{course.code}}
data-toggle="tooltip"
data-placement="top"
title="{{course.name}}"
class="materia {{ course.situation }}"
>
<div class="info">
{% if course.is_real_code %}
<span class="name">
......@@ -151,7 +160,10 @@
<span class="detail-value">{{course.detail.taxa_aprovacao|fix_2digit}}</span>
</div>
<div class="detail"
data-toggle="tooltip" data-placement="top" title="Desvio Padrão: &#177 {{course.detail.nota.1|fix_2digit}}">
data-toggle="tooltip"
data-placement="top"
title="Desvio Padrão: &#177 {{course.detail.nota.1|fix_2digit}}"
>
<span class="detail-name">Nota média</span>
<span class="detail-value">{{course.detail.nota.0|fix_2digit}}
</span>
......@@ -164,6 +176,13 @@
{% endfor %}
</div>
<div class="col-md-2">
<div class="my-4">
<label class="p-0 switch mt-1">
<input type="checkbox" class="toggleheat invisible" onchange="toggleHeatmap(this)">
<span class="slider round"></span>
</label>
<span id="statusHM">Heatmap off</span>
</div>
<div class="text-center materia_prerequisite">Disciplina Pré-Requisitada</div><br>
<div class="text-center materia_posrequisite">Disciplina que possui a matéria como Pré-Requisito</div><br>
<div class="text-center materia_selected">Disciplina selecionada</div>
......@@ -251,6 +270,37 @@
var prerequisites = {{prerequisites|safe_js}};
var prerequisites_rev = {{prerequisites_rev|safe_js}};
// ------------------------------- CALCULA gradiente do HEATMAP
var taxas = [];
for (s in grid_info)
for (c in grid_info[s])
if (grid_info[s][c].detail)
taxas.push( grid_info[s][c].detail.taxa_aprovacao );
gradiente = chroma
.scale(['#FF6666', '#FFFF99', '#CCFF99']) // red, yellow, green
.domain([Math.min(...taxas), Math.max(...taxas)]);
function toggleHeatmap(fecho) {
for (s in grid_info)
for (c in grid_info[s]) {
course = grid_info[s][c];
if (course.detail) {
if($(fecho).is(":checked")) {
$('#statusHM').text("Heatmap on");
$("#grid_course_course_"+course.code)
.css("backgroundColor", gradiente(course.detail.taxa_aprovacao));
}
else {
$('#statusHM').text("Heatmap off");
$("#grid_course_course_"+course.code).css("backgroundColor", "white");
}
}
}
}
// Add mouseenter and mouseleave events to grid cells
// The style are defined in the static styles.css file
// OBS: The grid cells must have the id name started with grid_course_course_
......@@ -286,6 +336,7 @@
// TODO: Refactor the analyzes to avoid this pretreatment
// Assure that the keys is in order and convert the data
// to a format that AdegaChart will accept
......@@ -368,6 +419,5 @@
size: 13
},
});
</script>
{% endblock js-foot %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment