{% extends "base.html" %}
{% block title %} User traffic {% endblock %}
{% load static %}
{% block content %}
<h3>Activity</h3>
<script src="{% static 'js/vendor/Chart.min.js' %}"></script>
<!-- <canvas id="myChart" ></canvas>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [{% for day in last_activity_days %}'{{day}} days ago',{%endfor%}],
            datasets: [{
                label: 'Number of users',
                backgroundColor: 'rgba(52, 152, 219, 0.4)',
                data: [{% for data in last_activity_count %}{{data}},{%endfor%}],
            },
        ]
        },
        options: {
            legend: {
                display: true
            },
            title: {
                display: true,
                text: 'Last user activity'
            }
        }
    });
</script> -->
<canvas id="pageviews" width="500" height="400"></canvas>
<script type="text/javascript">
  $.get('{% url "admin_traffic_json" %}?days={{ days }}', function(data) {
    var ctx = $("#pageviews").get(0).getContext("2d");
    new Chart(ctx, {
      type: 'line', data: data
    });
  });
</script>
<h3>Usage by time of day (last {{ days }} days)</h3>
<canvas id="time_of_day" width="500" height="400"></canvas>
<script type="text/javascript">
  $.get('{% url "admin_traffic_time_of_day_json" %}?days={{ days }}', function(data) {
    var ctx = $("#time_of_day").get(0).getContext("2d");
    new Chart(ctx, {
      type: 'bar', data: data,
      options: {
        scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] }
      }
    });
  });
</script>
<h3>Popular pages from the last {{ days }} days</h3>
<table>
  <thead>
    <tr>
      <th>Page</th>
      <th>Views</th>
    </tr>
  </thead>
  <tbody>
  {% for page in page_views %}
    <tr>
      <td><a href='{{page.url}}'>{{ page.title }}</a></td>
      <td>{{ page.view_count }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
<h3>Top user agents from the last 24 hours</h3>
<p class="text-muted">Useful for spotting and filtering out bots.</p>
<table>
  <thead>
    <tr>
      <th>User agent</th>
      <th>Views</th>
    </tr>
  </thead>
  <tbody>
  {% for agent in top_user_agents %}
    <tr>
      <td>{{ agent.user_agent }}</td>
      <td>{{ agent.view_count }}</td>
    </tr>
  {% empty %}
    <tr>
      <td colspan="2">No page views in the last 24 hours.</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
<h3>Heat map of traffic over the last {{ days }} days</h3>
<div id="map_wrapper" style='height: 600px;'>
<div id="map_visualization" class="mapping mt-2" style='width: 100%; height: 100%;'></div>
</div>
{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}
{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script>
var map = L.map('map_visualization').setView([39.095963, -83.662005], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var heatPoints = [
    {% for view in pageviews %}
    [{{ view.latitude }}, {{ view.longitude }}],
    {% endfor %}
];
L.heatLayer(heatPoints, { radius: 20, gradient: { 0.4: 'rgba(255,69,0,1)', 1.0: 'rgba(139,0,0,1)' } }).addTo(map);
</script>
{% endblock %}