{% extends "main.html" %}

{% block title %}Statistics{% endblock %}


{% block content %}

<div>
{% for weeks in stats['weeks'] %}
  <h2> Week: {{ weeks['week'] }}</h2>
  <div class="table-responsive">
  <table id="table" class="table" style="width:96%">
    <thead>
    <tr>
      <th>Submissions</th>
      <th>Submissions with redirects</th>
      <th>Redirects</th>
      <th>Uniq urls</th>
      <th>Uniq domains</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td> {{ weeks['analysis'] }} </td>
      <td> {{ weeks['analysis_with_redirects'] }} </td>
      <td> {{ weeks['redirects'] }} </td>
      <td> {{ weeks['uniq_urls'] }} </td>
      <td> {{ weeks['uniq_domains'] }} </td>
    </tr>
    </tbody>
  </table>
  </div>
{% endfor %}
</div>

<div>
{% for name, dict_ in stats['years'].items() %}
  <h2>Year: {{ name }}</h2>
  <ul>
      <li><b>Total analysis</b>: {{ dict_['yearly_analysis'] }}</li>
      <li><b>Total redirects</b>: {{ dict_['yearly_redirects'] }}</li>
  </ul>
  <div>
      {% for monthnumber, month in dict_.items() %}
      {% if monthnumber is number %}
      <h4>{{ month_name(monthnumber) }}</h4>
      <div class="table-responsive">
      <table id="table" class="table" style="width:96%">
        <thead>
        <tr>
          <th>Submissions</th>
          <th>Submissions with redirects</th>
          <th>Redirects</th>
          <th>Uniq urls</th>
          <th>Uniq domains</th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td> {{ month['analysis'] }} </td>
            <td> {{ month['analysis_with_redirects'] }} </td>
            <td> {{ month['redirects'] }} </td>
            <td> {{ month['uniq_urls'] }} </td>
            <td> {{ month['uniq_domains'] }} </td>
          </tr>
        </tbody>
      </table>
      </div>
      {% endif %}
      {% endfor %}
  </div>
{% endfor %}
</div>

<div>
{% for name, dict_ in stats['years'].items() %}
    <h5>Total Submissions {{ name }}</h5>       
    <canvas id="global_submissions{{ name }}" width="800" height="350"></canvas>
    <script type="text/javascript">
        $(document).ready(function() {    
            new Chart(document.getElementById("global_submissions{{ name }}"), {
                type: 'line',
                data: {
                    labels: [
                        {% for monthnumber, month in dict_.items() %}
                            {% if monthnumber is number %}
                                "{{ month_name(monthnumber) }}",
                            {% endif %}
                        {% endfor %}  
                    ],
                    datasets: [{
                        label: "{{ name }}",
                        fill: false,
                        backgroundColor:"#FE9700",
                        borderColor:"#FE9700",
                        data: [
                            {% for monthnumber, month in dict_.items() %}
                                {% if monthnumber is number %}
                                    "{{ month['analysis'] }}",
                                {% endif %}
                            {% endfor %} 
                        ]                    
                    }]
                },
                options: {
                    legend: {
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: "Total Submissions {{ name }}"
                    },                        
                    hover: {
                        animationDuration: 0
                    },
                    animation: {
                        duration: 1,
                        onComplete: function () {
                            var chartInstance = this.chart,
                            ctx = chartInstance.ctx;
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
                            this.data.datasets.forEach(function (dataset, i) {
                                var meta = chartInstance.controller.getDatasetMeta(i);
                                meta.data.forEach(function (bar, index) {
                                    var data = dataset.data[index];
                                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                                });
                            });
                        }
                    },      
                }                  
            }); 
        });             
    </script>
{% endfor %}
</div>

{% endblock %}