Add troop dashboard

static/registration/js/chart.bundle.min.js

@@ -0,0 +1 @@
+chart.bundle.min-2.9.3.js

troop/templates/troop/index.html

@@ -1,13 +1,35 @@
 {% extends "registration/base.html" %}
+{% load static %}
 {% load i18n %}
 
 {% block content_title %}{{ request.troop.name}}{% endblock %}
 
 {% block content %}
-<p class="mb-6">
-    # TODO<br>
-    Number of registrations, payments...
-</p>
+
+<div class="flex mb-4">
+    <div class="w-1/2">
+        <canvas id="participant-distribution"></canvas>
+    </div>
+    <div class="w-1/2"></div>
+</div>
+
+<script src="{% static "registration/js/chart.bundle.min.js" %}"></script>
+<script>
+var ctx = document.getElementById('participant-distribution').getContext('2d');
+var chart = new Chart(ctx, {
+    type: 'pie',
+
+    data: {
+        labels: [{% for k, c, v in participant_distribution %} '{{ k }}', {% endfor %}],
+        datasets: [{
+            data: [{% for k, c, v in participant_distribution %} '{{ v }}', {% endfor %}],
+            backgroundColor: [{% for k, c, v in participant_distribution %} '{{ c }}', {% endfor %}],
+        }]
+    },
+
+    options: {}
+});
+</script>
 
 <a href="{% url "troop:participant.export" troop_number=request.troop.number %}" class="bg-gray-600 text-white px-4 py-1 cursor-pointer uppercase">{% trans "CSV Export of the participants" %}</a>
 {% endblock %}

troop/templatetags/troop_extras.py

@@ -20,3 +20,19 @@ def section_color(value):
     elif value == Participant.SECTION_ROVER:
         return "red-600"
     return "purple-600"
+
+
+@register.filter
+@stringfilter
+def section_color_hex(value):
+    if value == Participant.SECTION_BEAVER:
+        return "#718096"
+    elif value == Participant.SECTION_CUB:
+        return "#dd6b20"
+    elif value == Participant.SECTION_SCOUT:
+        return "#3182ce"
+    elif value == Participant.SECTION_VENTURER:
+        return "#38a169"
+    elif value == Participant.SECTION_ROVER:
+        return "#e53e3e"
+    return "#805ad5"

troop/views.py

@@ -13,6 +13,7 @@
 
 from .models import Participant, Attendance, Troop
 from .forms import CreateParticipantForm, NamiSearchForm, SendEmailForm
+from .templatetags import troop_extras
 
 from nami import Nami, MemberNotFound
 
@@ -32,6 +33,38 @@ def dispatch(self, request, troop_number=None, *args, **kwargs):
 class IndexView(OnlyTroopManagerMixin, generic.TemplateView):
     template_name = "troop/index.html"
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        participant_distribution = (
+            self.request.troop.participant_set.all()
+            .values("age_section")
+            .annotate(total=Count("age_section"))
+            .order_by(Participant.age_section_order())
+        )
+
+        sections = {
+            "": _("no section"),
+            "beaver": _("Beavers"),
+            "cub": _("Cubs"),
+            "scout": _("Scouts"),
+            "venturer": _("Venturers"),
+            "rover": _("Rovers"),
+        }
+
+        participant_distribution = [
+            (
+                sections[x["age_section"]],
+                troop_extras.section_color_hex(x["age_section"]),
+                x["total"],
+            )
+            for x in participant_distribution
+        ]
+
+        context["participant_distribution"] = participant_distribution
+
+        return context
+
 
 class IndexParticipantView(OnlyTroopManagerMixin, generic.ListView):
     template_name = "participant/index.html"