expomap/templates/c_admin/stats/section_stat.html

{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block scripts %}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart'], 'language': '{{ LANGUAGE_CODE }}'});
    {% if data %}

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          {% autoescape off %}
            [{type: 'date', label: '{% trans "Дата" %}'}, {{ columns }}],
            {% for item in data %}
              {{ item }},
            {% endfor %}
          {% endautoescape %}
          ]);
        var options = {
          title: 'Статистика разделов',
          legend: { position: 'bottom' },
          vAxis: {
            title: '{% trans "Просмотры" %}'
          },
          width: 900,
          height: 500,
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
      google.charts.setOnLoadCallback(drawChart);
    {% endif %}

    {% if data_summary %}
      function drawSummaryChart() {
        var data = google.visualization.arrayToDataTable([
          {% autoescape off %}
            ['name', '{% trans "Просмотры" %}', { role: 'annotation' }],
            {% for item in data_summary %}
              ['{{ item.name }}', {{ item.val }}, {{ item.val }}],
            {% endfor %}
          {% endautoescape %}
          ]);
        var options = {
          title: '{% trans "Сумарные данные" %}',
          // legend: { position: 'bottom' },
          // xAxis: {
          //   title: '{% trans "Просмотры" %}'
          // },
          legend: { position: "none" },
          width: 900,
          height: 500,
        };

        var rchart = new google.visualization.BarChart(document.getElementById('bar_chart'));

        rchart.draw(data, options);
      }
      google.charts.setOnLoadCallback(drawSummaryChart);
    {% endif %}


    function initStatFilterForm() {
      form = $('form#stat_filter_form');
      ct_form_div = form.find('div#ct_form');

      form.find('input:not(#id_content_type), select:not(#id_ct_objects)').on('change', function() {
        form.find('div.alert').remove();
        form.find('select#id_ct_objects').select2('val', '');

        $.ajax({
          url: form.attr('action'),
          type: 'POST',
          dataType: 'json',
          data: form.serializeArray(),
        })
        .done(function(data) {
          if (data.success) {
            // form.find('select#id_ct_objects').select2('destroy');
            ct_form_div.html(data.html);
            form.find('select#id_ct_objects').select2({width: "element"});

          } else {
            $.each(data.errors, function(i, val) {
              if (i == '__all__') {
                form.find('button').before('<div class="alert alert-error"></div>');
                alert_div = form.find('div.alert');
                for (var error = 0; error < val.length; error++) {
                  alert_div.prepend('<p>' + val[error] + '</p>');
                }
              } else {
                field = form.find('input[name="' + i + '"]')
                field.parents('div.control-group').addClass('error');
                field.siblings('div.help-inline').html(val);
              }
            });
          }
        })
      });
    }

    $(document).ready(function(){
      $('#id_date_begin').datetimepicker({
          todayHighlight: true,
          format : 'dd.mm.yyyy',
          minView: 2,
          language: '{{ LANGUAGE_CODE }}'
      });
      $('#id_date_end').datetimepicker({
          todayHighlight: true,
          format : 'dd.mm.yyyy',
          minView: 2,
          language: '{{ LANGUAGE_CODE }}'
      });

      $('select:not(#id_ct_objects)').select2('destroy');
      // $('#id_ct_objects').select2({width: "element"});

      initStatFilterForm();
    });
  </script>
{% endblock scripts %}

{% block body %}
  <div class="box span8">
    <div class="box-header well">
        <h2><i class="icon-arrow-down"></i>Фильтр</h2>
    </div>
    <div class="box-content">
      <form id="stat_filter_form" action="." method="POST">
        {% csrf_token %}
        
        <div class="span4" style="margin-left: 0px;">
          {# date_begin #}
          <div class="control-group {% if form.date_begin.errors %}error{% endif %}">
              <label class="control-label"><b>{{ form.date_begin.label }}:</b></label>
                  <div class="controls">{{ form.date_begin }}
                      <span class="help-inline">{{  form.date_begin.errors }}</span>
                  </div>
          </div>

          {# section #}
          <div class="control-group {% if form.section.errors %}error{% endif %}">
              <label class="control-label"><b>{{ form.section.label }}:</b></label>
                  <div class="controls">{{ form.section }}
                      <span class="help-inline">{{  form.section.errors }}</span>
                  </div>
          </div>
        </div>
        
        <div class="span4" style="margin-left: 0px;">
          {# date_end #}
          <div class="control-group {% if form.date_end.errors %}error{% endif %}">
              <label class="control-label"><b>{{ form.date_end.label }}:</b></label>
                  <div class="controls">{{ form.date_end }}
                      <span class="help-inline">{{  form.date_end.errors }}</span>
                  </div>
          </div>

          {# kind #}
          <div class="control-group {% if form.kind.errors %}error{% endif %}">
              <label class="control-label"><b>{{ form.kind.label }}:</b></label>
                  <div class="controls">{{ form.kind }}
                      <span class="help-inline">{{  form.kind.errors }}</span>
                  </div>
          </div>

          <div id="ct_form">
              {% include "c_admin/stats/content_type_form.html" %}
          </div>
        </div>

        {% if form.errors %}
          <div class="alert alert-error">
              {% for key, value in form.errors.items %}
                  <p>{{ value }}</p>
              {% endfor %}
          </div>
        {% endif %}
        <button type="submit">{% trans "Применить" %}</button>
      </form>
      {# style="width: 900px; height: 500px" #}
    </div>
  </div>

  <div class="span9">
    {% if not data %}
      {% trans "Нет данных" %}
    {% endif %}
    <div id="curve_chart"></div> 
    <div id="bar_chart"></div> 
  </div>
{% endblock body %}