Us12 visualize indicators from libraries

agents_indicators/static/css/agents-indicators.css

@@ -0,0 +1,4 @@
+#pie-chart-agents{
+	max-width: 45%;
+	margin: auto
+}

agents_indicators/templates/agents_indicators/agents-indicators.html

@@ -0,0 +1,91 @@
+{% extends 'quero_cultura/base.html' %}
+{% load static %}
+
+	{% block content %}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
+		<!-- Import necessário para seguir o padrão de implementação visual -->
+	  <link rel="stylesheet" href="{% static 'css/indicators/indicators-navbar.css' %}"/>
+    <link rel="stylesheet" href="{% static 'css/indicators/indicators-container.css' %}"/>
+		<link rel="stylesheet" href="{% static 'css/agents-indicators.css' %}"/>
+
+		<!-- Div responsável por imprimir a navbar dos indicadores de agentes -->
+		<div class="container">
+			<div class="segmented-control">
+		    <input type="radio" name="sc-1-1" id="sc-1-1-1" value="#quantitativo-mensal" checked>
+		    <input type="radio" name="sc-1-1" id="sc-1-1-2" value="#agentes-tipo">
+		    <input type="radio" name="sc-1-1" id="sc-1-1-3" value="#agentes-area">
+		    <input type="radio" name="sc-1-1" id="sc-1-1-4" value="#crescimento">
+
+		    <label for="sc-1-1-1" data-value="Quantitativo Mensal">
+					Quantitativo Mensal
+				</label>
+
+				<label for="sc-1-1-2" data-value="Agentes por Tipo">
+					Agentes por Tipo
+				</label>
+
+				<label for="sc-1-1-3" data-value="Agentes por Área">
+					Agentes por Área
+				</label>
+
+				<label for="sc-1-1-4" data-value="Crescimento da Plataforma">
+					Crescimento da Plataforma
+				</label>
+			</div>
+		</div>
+
+		<!-- Área onde os graficos são printados -->
+		<div class="container-indicators">
+			<div id="quantitativo-mensal">
+		    <div class="chart-container">
+		      <canvas id="bar-chart-month"></canvas>
+		    </div>
+
+				<div class="text-chart-init">
+		      <p>Este gráfico refere-se à quantidade de Agentes que se cadastraram por mês na plataforma "Mapas Culturais" ao longo de sua existência.</p>
+		    </div>
+			</div>
+
+			<div id="agentes-tipo">
+		    <div class="chart-container">
+	      		<canvas id="pie-chart-agents"></canvas>
+		    </div>
+
+				<div class="text-chart-init">
+					<p>Este gráfico refere-se à porcentagem de agentes que se declaram "Individuais" ou "Coletivos". Agentes individuais são os perfis que representam apenas uma pessoa, enquanto os coletivos podem representar uma empresa, ong, grupo cultural, entre outras entidades coletivas.</p>
+				</div>
+			</div>
+
+			<div id="agentes-area">
+				<div class="chart-container">
+					<canvas id="bar-chart-area"></canvas>
+				</div>
+
+				<div class="text-chart-init">
+					<p>Este gráfico refere-se à quantidade de agentes cadastrados que declaram ter afinidade ou efetivamente atuar em determinada área de contibuição cultural."</p>
+				</div>
+			</div>
+
+			<div id="crescimento">
+				<div class="chart-container">
+					<canvas id="line-chart-time"></canvas>
+				</div>
+
+				<div class="text-chart-init">
+					<p>Este gráfico ilustra o crescimento da plataforma "Mapas culturais" em relação ao total de registros de agentes ao longo de sua existência.</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Imports necessários para funcionalidade da navbar e gráficos-->
+		<script src="{% static 'js/indicators/indicators-nav-jquery.js' %}"></script>
+		<script src="{% static 'js/color_manager.js' %}" type="text/javascript"></script>
+    <script src="{% static 'js/chart_manager.js' %}" type="text/javascript"></script>
+    <script src="{% static 'js/graphics.js' %}" type="text/javascript"></script>
+		<script type="text/javascript">
+			per_month_bar_graphic('{{ temporal_keys|safe }}','{{ temporal_values|safe }}')
+ 			per_area_bar_graphic('{{ per_area_keys|safe }}','{{ per_area_values|safe }}')
+ 			per_type_pie_graphic('{{ per_type_keys|safe }}','{{ per_type_values|safe }}')
+ 			growth_line_graphic('{{ temporal_keys|safe }}','{{ temporal_growth|safe }}')
+		</script>
+{% endblock %}

agents_indicators/views.py

@@ -73,7 +73,7 @@ def index(request):
     }
 
     # Renderiza pagina e envia dicionario para apresentação dos graficos
-    return render(request, 'agents_indicators/agents_indicators.html', context)
+    return render(request, 'agents_indicators/agents-indicators.html', context)
 
 
 def build_type_indicator(new_data):