Add chart of stats over time (#40)

app/logger/charts.py

@@ -0,0 +1,57 @@
+from django.contrib.auth import get_user_model
+from django.contrib.auth.decorators import login_required
+from django.contrib.gis.measure import D
+from django.http import JsonResponse
+from .models import Trip
+
+
+def use_units(value, units):
+    if units == get_user_model().IMPERIAL:
+        return value.ft
+    else:
+        return value.m
+
+
+@login_required
+def stats_over_time(request):
+    """JSON data for a chart showing stats over time"""
+    qs = Trip.objects.filter(user=request.user).order_by("start")
+    labels, duration, vert_down, vert_up, surveyed, resurveyed = [], [], [], [], [], []
+    accum_duration = 0
+    accum_vert_up = D(m=0)
+    accum_vert_down = D(m=0)
+    accum_surveyed = D(m=0)
+    accum_resurveyed = D(m=0)
+
+    for trip in qs:
+        labels.append(trip.start.strftime("%Y-%m-%d"))
+        if trip.duration:
+            accum_duration += trip.duration.total_seconds() / 60 / 60
+        duration.append(accum_duration)
+
+        if trip.vert_dist_up:
+            accum_vert_up += trip.vert_dist_up
+        vert_up.append(use_units(accum_vert_up, request.user.units))
+
+        if trip.vert_dist_down:
+            accum_vert_down += trip.vert_dist_down
+        vert_down.append(use_units(accum_vert_down, request.user.units))
+
+        if trip.surveyed_dist:
+            accum_surveyed += trip.surveyed_dist
+        surveyed.append(use_units(accum_surveyed, request.user.units))
+
+        if trip.resurveyed_dist:
+            accum_resurveyed += trip.resurveyed_dist
+        resurveyed.append(use_units(accum_resurveyed, request.user.units))
+
+    return JsonResponse(
+        data={
+            "labels": labels,
+            "duration": duration,
+            "vert_up": vert_up,
+            "vert_down": vert_down,
+            "surveyed": surveyed,
+            "resurveyed": resurveyed,
+        }
+    )

app/logger/charts_urls.py

@@ -0,0 +1,8 @@
+from django.urls import path
+from . import charts
+
+app_name = "charts"
+
+urlpatterns = [
+    path("duration/", charts.stats_over_time, name="stats_over_time"),
+]

app/logger/templates/statistics.html

@@ -4,6 +4,12 @@
 {% block title %}Your statistics{% endblock %}
 {% block sidebar %}{% include "sidebar_trips.html" %}{% endblock %}
 
+{% block header_scripts %}
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.4.min.js"
+    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
+{% endblock%}
+
 {% block main %}
 
 {% if trips %}
@@ -397,12 +403,17 @@ <h5>Horizontal distance</h5>
       </div>
     </div>
   </div>
-{% else %}
 
-<div class="card">
-  <div class="card-header fs-4">
-    Statistics
+  <div class="card mt-4">
+    <div class="card-header">
+      Statistics over time
+    </div>
+
+    <div class="card-body">
+      <canvas id="stats-over-time" data-url="{% url 'log:charts:stats_over_time' %}"></canvas>
+    </div>
   </div>
+{% else %}
 
   <div class="card-body">
     <p class="m-0">
@@ -414,3 +425,66 @@ <h5>Horizontal distance</h5>
 {% endif %}
 
 {% endblock main %}
+
+{% block footer_scripts %}
+  <script>
+    $(function () {
+      var $statsTimeChart = $("#stats-over-time");
+      $.ajax({
+        url: $statsTimeChart.data("url"),
+        success: function (data) {
+
+          var ctx = $statsTimeChart[0].getContext("2d");
+
+          new Chart(ctx, {
+            type: 'line',
+            data: {
+              labels: data.labels,
+              datasets: [{
+                label: 'Hours',
+                borderColor: '#008CBA',
+                backgroundColor: '#008CBA',
+                data: data.duration,
+              },
+              {
+                label: 'Rope climbed ({{ chart_units }})',
+                borderColor: 'orange',
+                backgroundColor: 'orange',
+                data: data.vert_up,
+              },
+              {
+                label: 'Rope descended ({{ chart_units }})',
+                borderColor: 'red',
+                backgroundColor: 'red',
+                data: data.vert_down,
+              },
+              {
+                label: 'Surveyed ({{ chart_units }})',
+                borderColor: 'green',
+                backgroundColor: 'green',
+                data: data.surveyed,
+              },
+              {
+                label: 'Resurveyed ({{ chart_units }})',
+                borderColor: 'purple',
+                backgroundColor: 'purple',
+                data: data.resurveyed,
+              }],
+            },
+            options: {
+              responsive: true,
+              elements: {
+                point: {
+                  pointStyle: false,
+                },
+                line: {
+                  tension: 0.4,
+                }
+              },
+            }
+          });
+        }
+      });
+    });
+  </script>
+{% endblock footer_scripts %}

app/logger/urls.py

@@ -1,7 +1,9 @@
-from django.urls import path
+from django.urls import path, include
 from . import views
+from . import charts
 
 app_name = "log"
+
 urlpatterns = [
     path("", views.index, name="index"),
     path("trip/<int:pk>/", views.TripDetailView.as_view(), name="trip_detail"),
@@ -25,4 +27,5 @@
     path("statistics/", views.user_statistics, name="statistics"),
     path("about/", views.about, name="about"),
     path("admin-tools/", views.admin_tools, name="admin_tools"),
+    path("charts/", include("logger.charts_urls")),
 ]

app/logger/views.py

@@ -192,6 +192,9 @@ def export(request):
 def user_statistics(request):
     """Show statistics for a user."""
     trips = request.user.trips
+    chart_units = "m"
+    if request.user.units == get_user_model().IMPERIAL:
+        chart_units = "ft"
 
     # Generate stats for trips/distances by year
     this_year = timezone.now().year
@@ -234,6 +237,7 @@ def user_statistics(request):
         "most_horizontal": trips.filter(horizontal_dist__gt=0).order_by(
             "-horizontal_dist"
         )[0:10],
+        "chart_units": chart_units,
     }
     return render(request, "statistics.html", context)