Add daily active users chart to the statistics page

flofriday · Oct 16, 2023 · 6e14fa3 · 6e14fa3
1 parent ad61f17
commit 6e14fa3
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 42 deletions.
diff --git a/app/__init__.py b/app/__init__.py
@@ -1,10 +1,11 @@
+import json
 from flask import Flask, render_template, send_from_directory, request, g
 import requests
 import sqlite3
 
 import app.tiss as tiss
 from app.format import improve_calendar
-from app.monitoring import get_statistics, add_usage
+from app.monitoring import get_statistics, add_usage, get_chart_data
 
 app = Flask(__name__)
 
@@ -50,7 +51,10 @@ def home():
 @app.route("/statistics")
 def statistic_page():
     statistic = get_statistics(get_db())
-    return render_template("statistics.html", statistic=statistic)
+    chart_data = get_chart_data(get_db())
+    return render_template(
+        "statistics.html", statistic=statistic, chart_data=json.dumps(chart_data)
+    )
 
 
 @app.route("/static/<path:path>")

diff --git a/app/monitoring.py b/app/monitoring.py
@@ -1,6 +1,7 @@
 from dataclasses import dataclass
 from sqlite3 import Connection
 import hashlib
+from typing import Tuple
 
 
 def add_usage(db: Connection, token: str):
@@ -49,3 +50,17 @@ def get_statistics(db: Connection) -> statistic:
     total_rows = cursor.fetchone()[0]
 
     return statistic(daily_users, monthly_users, total_users, total_rows)
+
+
+def get_chart_data(db: Connection) -> list[Tuple[str, int]]:
+    # Get daily active users
+    cursor = db.cursor()
+    cursor.execute(
+        """
+        SELECT strftime('%Y-%m-%d', date) AS day, COUNT(DISTINCT token_hash) AS unique_token_count
+        FROM statistics
+        GROUP BY day;
+        """
+    )
+    rows = cursor.fetchall()
+    return rows
diff --git a/app/static/statistics.js b/app/static/statistics.js
@@ -0,0 +1,34 @@
+const ctx = document.getElementById("dailyChart");
+
+Chart.defaults.backgroundColor = "rgba(255, 255, 255, 0.2)";
+Chart.defaults.borderColor = "rgba(255, 255, 255, 0.2)";
+Chart.defaults.color = "#FFF";
+
+console.log(daily_data);
+let labels = daily_data.map(([label, _]) => label);
+let counts = daily_data.map(([_, count]) => count);
+new Chart(ctx, {
+  type: "line",
+  data: {
+    labels: labels,
+    datasets: [
+      {
+        label: "daily active users",
+        data: counts,
+        borderWidth: 1,
+      },
+    ],
+  },
+  options: {
+    scales: {
+      y: {
+        beginAtZero: true,
+      },
+    },
+    elements: {
+      point: {
+        radius: 2,
+      },
+    },
+  },
+});
diff --git a/app/templates/statistics.html b/app/templates/statistics.html
@@ -1,51 +1,74 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
 
     <title>Statistics</title>
     <meta property="og:title" content="Statistics" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/logo32.png">
-    <link rel="icon" type="image/png" sizes="48x48" href="/static/logo48.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="/static/logo192.png">
-    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/static/logo180.png">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-        rel="stylesheet">
-    <link href="/static/style.css" rel="stylesheet">
-</head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/logo32.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="/static/logo48.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/static/logo192.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      type="image/png"
+      sizes="180x180"
+      href="/static/logo180.png"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="/static/style.css" rel="stylesheet" />
+  </head>
 
-<body class="h-screen">
+  <body class="h-screen">
     <div class="h-full flex flex-col justify-between">
-        <main class="container w-full max-w-md mx-auto px-4 text-center">
-            <h1 class="text-6xl font-bold pt-12 pb-6 leading-snug">
-                Statistics
-            </h1>
+      <main class="container w-full max-w-[40rem] mx-auto px-4 text-center">
+        <h1 class="text-6xl font-bold pt-12 pb-6 leading-snug">Statistics</h1>
 
-            <div class="text-left">
-                <ul>
-                    <li>Daily active users: {{statistic.daily_users}}</li>
-                    <li>Montly active users: {{statistic.monthly_users}}</li>
-                    <li>Total users: {{statistic.total_users}}</li>
-                </ul>
-            </div>
+        <ul>
+          <li>Daily active users: {{statistic.daily_users}}</li>
+          <li>Montly active users: {{statistic.monthly_users}}</li>
+          <li>Total users: {{statistic.total_users}}</li>
+        </ul>
 
-        </main>
-        <footer class="bg-neutral-900 border-t-2 border-t-[color:#333] p-4 text-sm text-neutral-400 mt-16">
-            <div class="container w-full max-w-lg mx-auto">
-                <div class="flex flex-row justify-between">
-                    <div>Made with ❤️ by <a href="https://github.com/flofriday">flofriday</a></div>
-                    <div>
-                        on <a href="https://github.com/flofriday/better-tiss-calendar">GitHub</a>
-                    </div>
-                </div>
+        <div class="pt-8 w-full">
+          <canvas id="dailyChart"></canvas>
+        </div>
+      </main>
+      <footer
+        class="bg-neutral-900 border-t-2 border-t-[color:#333] p-4 text-sm text-neutral-400 mt-16"
+      >
+        <div class="container w-full max-w-lg mx-auto">
+          <div class="flex flex-row justify-between">
+            <div>
+              Made with ❤️ by
+              <a href="https://github.com/flofriday">flofriday</a>
             </div>
-        </footer>
+            <div>
+              on
+              <a href="https://github.com/flofriday/better-tiss-calendar"
+                >GitHub</a
+              >
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
-</body>
-
-</html>
+    <!-- prettier-ignore -->
+    <script>
+        let daily_data = {{ chart_data | safe }};
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="/static/statistics.js"></script>
+  </body>
+</html>