Merge pull request #1503 from bookwyrm-social/dashboard

More! Charts!

bookwyrm/templates/settings/dashboard/dashboard.html

@@ -9,26 +9,26 @@
 
 {% block panel %}
 
-<div class="columns block has-text-centered">
+<div class="columns block has-text-centered is-mobile is-multiline">
-    <div class="column is-3">
+    <div class="column is-3-desktop is-6-mobile">
         <div class="notification">
             <h3>{% trans "Total users" %}</h3>
             <p class="title is-5">{{ users|intcomma }}</p>
         </div>
     </div>
-    <div class="column is-3">
+    <div class="column is-3-desktop is-6-mobile">
         <div class="notification">
             <h3>{% trans "Active this month" %}</h3>
             <p class="title is-5">{{ active_users|intcomma }}</p>
         </div>
     </div>
-    <div class="column is-3">
+    <div class="column is-3-desktop is-6-mobile">
         <div class="notification">
             <h3>{% trans "Statuses" %}</h3>
             <p class="title is-5">{{ statuses|intcomma }}</p>
         </div>
     </div>
-    <div class="column is-3">
+    <div class="column is-3-desktop is-6-mobile">
         <div class="notification">
             <h3>{% trans "Works" %}</h3>
             <p class="title is-5">{{ works|intcomma }}</p>
@@ -64,7 +64,7 @@
 <div class="block content">
     <h2>{% trans "Instance Activity" %}</h2>
 
-    <form method="get" action="{% url 'settings-dashboard' %}" class="notification has-background-white-bis">
+    <form method="get" action="{% url 'settings-dashboard' %}" class="notification has-background-white-bis scroll-x">
         <div class="is-flex is-align-items-flex-end">
             <div class="ml-1 mr-1">
                 <label class="label" for="id_start">
@@ -95,19 +95,31 @@
         </div>
     </form>
 
-    <div class="columns">
+    <div class="columns is-multiline">
-        <div class="column">
+        <div class="column is-half">
-            <h3>{% trans "User signup activity" %}</h3>
+            <h3>{% trans "Total users" %}</h3>
             <div class="box">
                 <canvas id="user_stats"></canvas>
             </div>
         </div>
-        <div class="column">
+        <div class="column is-half">
+            <h3>{% trans "User signup activity" %}</h3>
+            <div class="box">
+                <canvas id="register_stats"></canvas>
+            </div>
+        </div>
+        <div class="column is-half">
             <h3>{% trans "Status activity" %}</h3>
             <div class="box">
                 <canvas id="status_stats"></canvas>
             </div>
         </div>
+        <div class="column is-half">
+            <h3>{% trans "Works created" %}</h3>
+            <div class="box">
+                <canvas id="works_stats"></canvas>
+            </div>
+        </div>
     </div>
 </div>
 
@@ -115,6 +127,8 @@
 
 {% block scripts %}
 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
-{% include 'settings/dashboard/dashboard_user_chart.html' %}
+{% include 'settings/dashboard/user_chart.html' %}
-{% include 'settings/dashboard/dashboard_status_chart.html' %}
+{% include 'settings/dashboard/status_chart.html' %}
+{% include 'settings/dashboard/registration_chart.html' %}
+{% include 'settings/dashboard/works_chart.html' %}
 {% endblock %}

bookwyrm/templates/settings/dashboard/dashboard_status_chart.html

@@ -1,26 +0,0 @@
-{% load i18n %}
-<script>
-const status_labels = [{% for label in status_stats.labels %}"{{ label }}",{% endfor %}];
-const status_data = {
-    labels: status_labels,
-    datasets: [{
-        label: '{% trans "Statuses posted" %}',
-        backgroundColor: 'rgb(255, 99, 132)',
-        borderColor: 'rgb(255, 99, 132)',
-        data: {{ status_stats.total }},
-    }]
-};
-// === include 'setup' then 'config' above ===
-
-const status_config = {
-    type: 'bar',
-    data: status_data,
-    options: {}
-};
-
-var statusStats = new Chart(
-    document.getElementById('status_stats'),
-    status_config
-);
-</script>
-

bookwyrm/templates/settings/dashboard/dashboard_user_chart.html

@@ -1,29 +0,0 @@
-{% load i18n %}
-<script>
-const labels = [{% for label in user_stats.labels %}"{{ label }}",{% endfor %}];
-const data = {
-    labels: labels,
-    datasets: [{
-        label: '{% trans "Total" %}',
-        backgroundColor: 'rgb(255, 99, 132)',
-        borderColor: 'rgb(255, 99, 132)',
-        data: {{ user_stats.total }},
-    }, {
-        label: '{% trans "Active this month" %}',
-        backgroundColor: 'rgb(75, 192, 192)',
-        borderColor: 'rgb(75, 192, 192)',
-        data: {{ user_stats.active }},
-    }]
-};
-
-const config = {
-    type: 'line',
-    data: data,
-    options: {}
-};
-
-var userStats = new Chart(
-    document.getElementById('user_stats'),
-    config
-);
-</script>

bookwyrm/templates/settings/dashboard/registration_chart.html

@@ -0,0 +1,19 @@
+{% load i18n %}
+<script>
+var registerStats = new Chart(
+    document.getElementById('register_stats'),
+    {
+        type: 'bar',
+        data: {
+            labels: [{% for label in register_stats.labels %}"{{ label }}",{% endfor %}],
+            datasets: [{
+                label: '{% trans "Registrations" %}',
+                backgroundColor: 'hsl(171, 100%, 41%)',
+                borderColor: 'hsl(171, 100%, 41%)',
+                data: {{ register_stats.total }},
+            }]
+        },
+        options: {}
+    }
+);
+</script>

bookwyrm/templates/settings/dashboard/status_chart.html

@@ -0,0 +1,21 @@
+{% load i18n %}
+<script>
+
+var statusStats = new Chart(
+    document.getElementById('status_stats'),
+    {
+        type: 'bar',
+        data: {
+        labels: [{% for label in status_stats.labels %}"{{ label }}",{% endfor %}],
+        datasets: [{
+                label: '{% trans "Statuses posted" %}',
+                backgroundColor: 'hsl(141, 71%, 48%)',
+                borderColor: 'hsl(141, 71%, 48%)',
+                data: {{ status_stats.total }},
+            }]
+        },
+        options: {}
+    },
+);
+</script>
+

bookwyrm/templates/settings/dashboard/user_chart.html

@@ -0,0 +1,25 @@
+{% load i18n %}
+<script>
+
+var userStats = new Chart(
+    document.getElementById('user_stats'),
+    {
+        type: 'line',
+        data: {
+            labels: [{% for label in user_stats.labels %}"{{ label }}",{% endfor %}],
+            datasets: [{
+                label: '{% trans "Total" %}',
+                backgroundColor: 'hsl(217, 71%, 53%)',
+                borderColor: 'hsl(217, 71%, 53%)',
+                data: {{ user_stats.total }},
+            }, {
+                label: '{% trans "Active this month" %}',
+                backgroundColor: 'hsl(171, 100%, 41%)',
+                borderColor: 'hsl(171, 100%, 41%)',
+                data: {{ user_stats.active }},
+            }]
+        },
+        options: {}
+    }
+);
+</script>

bookwyrm/templates/settings/dashboard/works_chart.html

@@ -0,0 +1,21 @@
+{% load i18n %}
+<script>
+
+var worksStats = new Chart(
+    document.getElementById('works_stats'),
+    {
+        type: 'bar',
+        data: {
+            labels: [{% for label in works_stats.labels %}"{{ label }}",{% endfor %}],
+            datasets: [{
+                label: '{% trans "Works" %}',
+                backgroundColor: 'hsl(204, 86%, 53%)',
+                borderColor: 'hsl(204, 86%, 53%)',
+                data: {{ works_stats.total }},
+            }]
+        },
+        options: {}
+    }
+);
+</script>
+

bookwyrm/views/admin/dashboard.py

@@ -25,13 +25,6 @@ class Dashboard(View):
         """list of users"""
         interval = int(request.GET.get("days", 1))
         now = timezone.now()
-
-        user_queryset = models.User.objects.filter(local=True)
-        user_stats = {"labels": [], "total": [], "active": []}
-
-        status_queryset = models.Status.objects.filter(user__local=True, deleted=False)
-        status_stats = {"labels": [], "total": []}
-
         start = request.GET.get("start")
         if start:
             start = timezone.make_aware(parse(start))
@@ -42,31 +35,55 @@ class Dashboard(View):
         end = timezone.make_aware(parse(end)) if end else now
         start = start.replace(hour=0, minute=0, second=0)
 
-        interval_start = start
+        user_queryset = models.User.objects.filter(local=True)
-        interval_end = interval_start + timedelta(days=interval)
+        user_chart = Chart(
-        while interval_start <= end:
+            queryset=user_queryset,
-            print(interval_start, interval_end)
+            queries={
-            interval_queryset = user_queryset.filter(
+                "total": lambda q, s, e: q.filter(
-                Q(is_active=True) | Q(deactivation_date__gt=interval_end),
+                    Q(is_active=True) | Q(deactivation_date__gt=e),
-                created_date__lte=interval_end,
+                    created_date__lte=e,
+                ).count(),
+                "active": lambda q, s, e: q.filter(
+                    Q(is_active=True) | Q(deactivation_date__gt=e),
+                    created_date__lte=e,
                 )
-            user_stats["total"].append(interval_queryset.filter().count())
+                .filter(
-            user_stats["active"].append(
+                    last_active_date__gt=e - timedelta(days=31),
-                interval_queryset.filter(
+                )
-                    last_active_date__gt=interval_end - timedelta(days=31),
+                .count(),
-                ).count()
+            },
         )
-            user_stats["labels"].append(interval_start.strftime("%b %d"))
 
-            status_stats["total"].append(
+        status_queryset = models.Status.objects.filter(user__local=True, deleted=False)
-                status_queryset.filter(
+        status_chart = Chart(
-                    created_date__gt=interval_start,
+            queryset=status_queryset,
-                    created_date__lte=interval_end,
+            queries={
+                "total": lambda q, s, e: q.filter(
+                    created_date__gt=s,
+                    created_date__lte=e,
                 ).count()
+            },
+        )
+
+        register_chart = Chart(
+            queryset=user_queryset,
+            queries={
+                "total": lambda q, s, e: q.filter(
+                    created_date__gt=s,
+                    created_date__lte=e,
+                ).count()
+            },
+        )
+
+        works_chart = Chart(
+            queryset=models.Work.objects,
+            queries={
+                "total": lambda q, s, e: q.filter(
+                    created_date__gt=s,
+                    created_date__lte=e,
+                ).count()
+            },
         )
-            status_stats["labels"].append(interval_start.strftime("%b %d"))
-            interval_start = interval_end
-            interval_end += timedelta(days=interval)
 
         data = {
             "start": start.strftime("%Y-%m-%d"),
@@ -82,7 +99,34 @@ class Dashboard(View):
             "invite_requests": models.InviteRequest.objects.filter(
                 ignored=False, invite_sent=False
             ).count(),
-            "user_stats": user_stats,
+            "user_stats": user_chart.get_chart(start, end, interval),
-            "status_stats": status_stats,
+            "status_stats": status_chart.get_chart(start, end, interval),
+            "register_stats": register_chart.get_chart(start, end, interval),
+            "works_stats": works_chart.get_chart(start, end, interval),
         }
         return TemplateResponse(request, "settings/dashboard/dashboard.html", data)
+
+
+class Chart:
+    """Data for a chart"""
+
+    def __init__(self, queryset, queries: dict):
+        self.queryset = queryset
+        self.queries = queries
+
+    def get_chart(self, start, end, interval):
+        """load the data for the chart given a time scale and interval"""
+        interval_start = start
+        interval_end = interval_start + timedelta(days=interval)
+
+        chart = {k: [] for k in self.queries.keys()}
+        chart["labels"] = []
+        while interval_start <= end:
+            for (name, query) in self.queries.items():
+                chart[name].append(query(self.queryset, interval_start, interval_end))
+            chart["labels"].append(interval_start.strftime("%b %d"))
+
+            interval_start = interval_end
+            interval_end += timedelta(days=interval)
+
+        return chart