adega#114: Add charts analysis to degree page

src/degree/templates/degree/index.html

@@ -48,7 +48,7 @@
 				{% endcomment %}
 		</table>
 
-				{% comment %}
+		{% comment %}
 		<div>
 			<div class="panel-container">
 				<div class="data-panel">
@@ -71,17 +71,16 @@
 				</div>
 			</div>
 		</div>
-	{% endcomment %}
-		{% comment %}
+		{% endcomment %}
 		<div id="graficos">
 			<div class="row">
                 <div class="col-md-6">
-                    <h3>Quantidade alunos/IRA</h3>
-                    <canvas id="ira_semestral" data-data='{{ degree_data.ira_medio_grafico|safe }}'></canvas>
+                    <!-- <h3>Quantidade alunos/IRA</h3> -->
+                    <div id="ira_semestral"></div>
                 </div>
                 <div class="col-md-6">
-                    <h3>Quantidade evasão/período</h3>
-                    <canvas id="evasao_semestre" data-data='{{ degree_data.evasao_grafico|safe }}'></canvas>
+                    <!-- <h3>Quantidade evasão/período</h3> -->
+                    <div id="evasao_semestre"></div>
                 </div>
 				<!--
 				<div class="col-md-6">
@@ -91,6 +90,7 @@
 				</div> essa analise foi feita de uma maneira ruim no adega
 				antigo -->
 				<!-- analises sa02 -->
+				{% comment %}
 				<div class="col-md-6">
 					<h3>Alunos/Periodo</h3>
 					<canvas id="aluno_periodo"
@@ -109,10 +109,68 @@
 					<canvas id="taxa_aprovacao_periodo"
 							data-data='{{ degree_data.taxa_aprovacao_periodo|safe }}'></canvas>
 				</div>
+				{% endcomment %}
 				<!-- fim analise sa02 -->
         	</div>
 		</div>
-	{% endcomment %}
 	</div>
 </div>
 {% endblock content %}
+
+{% block js-foot %}
+  <script>
+	
+	// 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
+	function convert_degree_chart_data(data){
+		var new_data = {};
+		var dict_order_keys = Object.keys(data[0][1]);
+
+		data.map(function(x){
+			var elements_tick = [];
+			for(var i in dict_order_keys) elements_tick.push(0);
+			for(var y in x[1]){
+				var index = dict_order_keys.indexOf(y);
+				elements_tick[index] = x[1][y];
+			}
+			
+			var index = x[0];
+			new_data[index] = elements_tick;
+		});
+		return new_data;
+	}
+	
+	
+	var ira_semestral = {{degree_data.ira_medio_grafico|safe}};
+	var ira_semestral_data = convert_degree_chart_data(ira_semestral);
+
+	var evasao_semestre = {{degree_data.evasao_grafico|safe}};
+	var evasao_semestre_data = convert_degree_chart_data(evasao_semestre);
+	// ira_semestral_data will be in format of:
+	// {"00-4.9": [10,20,30], "05-9.9": [11,21,31], ...}
+	console.log(evasao_semestre_data);
+
+    var chart1 = new AdegaChart({
+      data: ira_semestral_data,
+      div_target: "ira_semestral",
+      title: "Quantidade alunos/IRA",
+      fill: "none",
+      legend: ["Ira médio", "Alunos sem evasão", "Formados"]
+    });
+    var chart2 = new AdegaChart({
+      data: evasao_semestre_data,
+      div_target: "evasao_semestre",
+      title: "Quantidade evasão/período",
+      fill: "none",
+      legend: ["Taxa", "Quantidade"]
+    }); 
+
+
+
+    
+    
+  </script>
+{% endblock js-foot %}
\ No newline at end of file