Criando templates de estatisticas para webpage

Jailson Dias
1 parent da0c6bf2
Showing 2 changed files with 110 additions and 0 deletions Show diff stats
webpage/templates/webpages/estatisticas.html
webpage/templates/webpages/view.html
@@ -0,0 +1,104 @@
+{% extends "webpages/view.html" %}
+
+{% load static i18n pagination permissions_tags subject_counter %}
+{% load django_bootstrap_breadcrumbs %}
+
+{% block javascript%}
+    {{ block.super }}
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script type="text/javascript">
+      google.charts.load('current', {'packages':['corechart',"table"]});
+      google.charts.setOnLoadCallback(drawChart);
+      google.charts.setOnLoadCallback(drawTable);
+
+      function drawChart() {
+        var data = google.visualization.arrayToDataTable({{db_data|safe}});
+
+        var options = {
+          title: '{{title_chart}}',
+          vAxis: {
+              title: '{{title_vAxis}}',
+              ticks: [0, .20, .40, .60, .80, 1],
+              viewWindow: {
+                  min: 0,
+                  max: 1
+              }
+          },
+          isStacked: "percent",
+        };
+
+        function selectHandler() {
+           var selectedItem = chart.getSelection()[0];
+           if (selectedItem) {
+               var col = data.getColumnLabel(selectedItem.column);
+               window.location.href = '{% url "webpages:get_chart" webpage.slug %}?col='+col + ''
+           }
+         }
+
+        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
+        google.visualization.events.addListener(chart, 'select', selectHandler);
+        chart.draw(data, options);
+      }
+
+        function drawTable() {
+          var data = new google.visualization.DataTable();
+          data.addColumn('string', 'Student');
+          data.addColumn('string', 'Email');
+          data.addColumn('string', 'Action');
+          data.addColumn('date', 'Date/Hour');
+          data.addRows(getData());
+
+          function getData(){
+              var array = [];
+              {%for a in history%}
+                array.push(['{{a.0}}','{{a.1}}',{% if a.2 is not None %}'{{a.2}}'{% else%}null{% endif %},{% if a.3 is not None %}new Date('{{a.3|date:"D, d M Y H:i:s"}}'){% else%}null{% endif %}]);
+              {% endfor%}
+              return array;
+          }
+          var formate_date = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
+          formate_date.format(data, 3);
+
+
+          var table = new google.visualization.Table(document.getElementById('table_div'));
+
+          table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
+        }
+    </script>
+{% endblock%}
+
+{% block breadcrumbs %}
+    {{ block.super }}
+    {% trans 'Estatisticas' as bread %}
+	{% breadcrumb bread webpage%}
+{% endblock %}
+
+{% block content %}
+    {% if messages %}
+        {% for message in messages %}
+            <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <p>{{ message }}</p>
+            </div>
+        {% endfor %}
+    {% endif %}
+    <div class="row">
+        <div class="col-md-10">
+            <div id="chart_div" style="height: 500px"></div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-10">
+            <div class="text-center">
+
+                <h3>{{title_table}}</h3>
+            </div>
+            <div id="table_div"></div>
+        </div>
+    </div>
+    <div class="row">
+        <br><br>
+    </div>
+{% endblock %}
@@ -54,5 +54,11 @@
             	   {{ webpage.content }}
                 {% endautoescape %}
             </div>
+
+            <div class="row">
+              <div class="text-center">
+                <a href="{% url 'webpages:get_chart' webpage.slug %}" class="btn btn-raised btn-success">{% trans "Statistics" %}</a>
+              </div>
+            </div>
         </div>
 {% endblock %}
@@ -0,0 +1,104 @@		@@ -0,0 +1,104 @@
	1	+{% extends "webpages/view.html" %}
	2	+
	3	+{% load static i18n pagination permissions_tags subject_counter %}
	4	+{% load django_bootstrap_breadcrumbs %}
	5	+
	6	+{% block javascript%}
	7	+ {{ block.super }}
	8	+ <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	9	+ <script type="text/javascript">
	10	+ google.charts.load('current', {'packages':['corechart',"table"]});
	11	+ google.charts.setOnLoadCallback(drawChart);
	12	+ google.charts.setOnLoadCallback(drawTable);
	13	+
	14	+ function drawChart() {
	15	+ var data = google.visualization.arrayToDataTable({{db_data\|safe}});
	16	+
	17	+ var options = {
	18	+ title: '{{title_chart}}',
	19	+ vAxis: {
	20	+ title: '{{title_vAxis}}',
	21	+ ticks: [0, .20, .40, .60, .80, 1],
	22	+ viewWindow: {
	23	+ min: 0,
	24	+ max: 1
	25	+ }
	26	+ },
	27	+ isStacked: "percent",
	28	+ };
	29	+
	30	+ function selectHandler() {
	31	+ var selectedItem = chart.getSelection()[0];
	32	+ if (selectedItem) {
	33	+ var col = data.getColumnLabel(selectedItem.column);
	34	+ window.location.href = '{% url "webpages:get_chart" webpage.slug %}?col='+col + ''
	35	+ }
	36	+ }
	37	+
	38	+ var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
	39	+ google.visualization.events.addListener(chart, 'select', selectHandler);
	40	+ chart.draw(data, options);
	41	+ }
	42	+
	43	+ function drawTable() {
	44	+ var data = new google.visualization.DataTable();
	45	+ data.addColumn('string', 'Student');
	46	+ data.addColumn('string', 'Email');
	47	+ data.addColumn('string', 'Action');
	48	+ data.addColumn('date', 'Date/Hour');
	49	+ data.addRows(getData());
	50	+
	51	+ function getData(){
	52	+ var array = [];
	53	+ {%for a in history%}
	54	+ array.push(['{{a.0}}','{{a.1}}',{% if a.2 is not None %}'{{a.2}}'{% else%}null{% endif %},{% if a.3 is not None %}new Date('{{a.3\|date:"D, d M Y H:i:s"}}'){% else%}null{% endif %}]);
	55	+ {% endfor%}
	56	+ return array;
	57	+ }
	58	+ var formate_date = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
	59	+ formate_date.format(data, 3);
	60	+
	61	+
	62	+ var table = new google.visualization.Table(document.getElementById('table_div'));
	63	+
	64	+ table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
	65	+ }
	66	+ </script>
	67	+{% endblock%}
	68	+
	69	+{% block breadcrumbs %}
	70	+ {{ block.super }}
	71	+ {% trans 'Estatisticas' as bread %}
	72	+ {% breadcrumb bread webpage%}
	73	+{% endblock %}
	74	+
	75	+{% block content %}
	76	+ {% if messages %}
	77	+ {% for message in messages %}
	78	+ <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
	79	+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	80	+ <span aria-hidden="true">×</span>
	81	+ </button>
	82	+ <p>{{ message }}</p>
	83	+ </div>
	84	+ {% endfor %}
	85	+ {% endif %}
	86	+ <div class="row">
	87	+ <div class="col-md-10">
	88	+ <div id="chart_div" style="height: 500px"></div>
	89	+ </div>
	90	+ </div>
	91	+
	92	+ <div class="row">
	93	+ <div class="col-md-10">
	94	+ <div class="text-center">
	95	+
	96	+ <h3>{{title_table}}</h3>
	97	+ </div>
	98	+ <div id="table_div"></div>
	99	+ </div>
	100	+ </div>
	101	+ <div class="row">
	102	+ <br><br>
	103	+ </div>
	104	+{% endblock %}
	@@ -54,5 +54,11 @@		@@ -54,5 +54,11 @@
54	{{ webpage.content }}	54	{{ webpage.content }}
55	{% endautoescape %}	55	{% endautoescape %}
56	</div>	56	</div>
		57	+
		58	+ <div class="row">
		59	+ <div class="text-center">
		60	+ <a href="{% url 'webpages:get_chart' webpage.slug %}" class="btn btn-raised btn-success">{% trans "Statistics" %}</a>
		61	+ </div>
		62	+ </div>
57	</div>	63	</div>
58	{% endblock %}	64	{% endblock %}