Show stats by domain in a doughnut chart for Link Previews

Author: chimbori

src/dashboard/dashboard.go

@@ -34,6 +34,7 @@ func Init(mux *http.ServeMux) {
 	mux.Handle("GET /dashboard/link-previews", chain.ThenFunc(linkPreviewsPageHandler))
 	mux.Handle("GET /dashboard/link-previews/list", chain.ThenFunc(linkPreviewsListHandler))
 	mux.Handle("GET /dashboard/link-previews/image", chain.ThenFunc(serveLinkPreviewHandler))
+	mux.Handle("GET /dashboard/link-previews/stats", chain.ThenFunc(linkPreviewsStatsHandler))
 	mux.Handle("DELETE /dashboard/link-previews/url", chain.ThenFunc(deleteLinkPreviewHandler))
 
 	mux.Handle("GET /dashboard/qr-codes", chain.ThenFunc(listQrCodesHandler))

src/dashboard/dashboard.js

@@ -0,0 +1,3 @@
+import { initLinkPreviewsChart } from './linkpreviews_chart.js';
+
+initLinkPreviewsChart();

src/dashboard/dashboard.templ

@@ -21,6 +21,7 @@ templ ContentTempl(title string, contents templ.Component) {
 			<meta name="viewport" content="width=device-width,initial-scale=1"/>
 			<link rel="manifest" href="/app.webmanifest"/>
 			<script src="/static/htmx.min.js"></script>
+			<script src="/static/chart.min.js"></script>
 			<meta name="htmx-config" content='{"selfRequestsOnly":false}'/>
 			<link rel="stylesheet" href="/static/gen.min.css"/>
 			<link rel="icon" href="/static/favicon.svg"/>
@@ -34,6 +35,7 @@ templ ContentTempl(title string, contents templ.Component) {
 				@FooterTempl()
 			</main>
 		</body>
+		<script src="/static/dashboard.min.js"></script>
 	</html>
 }
 

src/dashboard/dashboard_templ.go

@@ -2,6 +2,7 @@ package dashboard
 
 import (
 	"bytes"
+	"encoding/json"
 	"fmt"
 	"image"
 	_ "image/png"
@@ -281,6 +282,25 @@ func serveLinkPreviewHandler(w http.ResponseWriter, req *http.Request) {
 		"hostname", u.Hostname())
 }
 
+// GET /dashboard/link-previews/stats - Get link preview statistics by domain as JSON
+func linkPreviewsStatsHandler(w http.ResponseWriter, req *http.Request) {
+	queries := db.New(db.Pool)
+	stats, err := queries.GetLinkPreviewsByDomain(req.Context())
+	if err != nil {
+		slog.Error("failed to get link preview stats", tint.Err(err),
+			"method", req.Method,
+			"path", req.URL.Path,
+			"url", req.URL.String(),
+			"status", http.StatusInternalServerError)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(stats)
+}
+
 func calculateTotalPages(totalCount int64) int64 {
 	limit := int64(conf.Config.Dashboard.Pagination.Limit)
 	return (totalCount + (limit - 1)) / limit

src/dashboard/linkpreviews.go

@@ -8,6 +8,10 @@ import (
 
 templ LinkPreviewsPageTempl(page int) {
 	@ContentTempl("Link Previews", NilTemplate()) {
+		<section>
+			<h2>Requests by Domain</h2>
+			<canvas id="linkpreviews-domain-chart" class="max-w-240 max-h-64"></canvas>
+		</section>
 		<section
 			id="link-previews-section"
 			hx-get={ "/dashboard/link-previews/list?page=" + fmt.Sprintf("%d", page) }

src/dashboard/linkpreviews.templ

@@ -0,0 +1,53 @@
+/**
+ * @fileoverview Renders a doughnut chart for link preview statistics on the dashboard.
+ */
+export function initLinkPreviewsChart() {
+  async function loadChart() {
+    try {
+      const response = await fetch('/dashboard/link-previews/stats');
+      if (!response.ok) {
+        console.error('Failed to fetch link preview statistics');
+        return;
+      }
+
+      const stats = await response.json();
+      if (stats.length === 0) {
+        console.log('No link preview data available');
+        return;
+      }
+
+      new Chart(document.getElementById('linkpreviews-domain-chart').getContext('2d'), {
+        type: 'doughnut',
+        data: {
+          labels: stats.map(d => d.Domain),
+          datasets: [{
+            data: stats.map(d => d.TotalAccesses),
+            borderWidth: 1
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              position: 'right',
+              labels: {
+                font: {
+                  size: 14,
+                  family: 'Inter'
+                }
+              }
+            }
+          }
+        }
+      });
+    } catch (error) {
+      console.error('Error loading link preview chart:', error);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', loadChart);
+  } else {
+    loadChart();
+  }
+}