Commit f530725ea3d8a136fc40516fa9b4241056decd1e

Authored by Jailson Dias
1 parent da0c6bf2

Criando templates de estatisticas para webpage

webpage/templates/webpages/estatisticas.html 0 → 100644
... ... @@ -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">&times;</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 %}
... ...
webpage/templates/webpages/view.html
... ... @@ -54,5 +54,11 @@
54 54 {{ webpage.content }}
55 55 {% endautoescape %}
56 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 63 </div>
58 64 {% endblock %}
... ...