implement basic version of profile graph

1 files changed, 43 insertions, 0 deletions

diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts
index 1073ae4..c34e3d4 100644
--- a/asset-sources/fietsboek.ts
+++ b/asset-sources/fietsboek.ts
@@ -9,6 +9,10 @@ interface JsonFriend {
     id: number,
 }
 
+interface YearSummary {
+    [index: string]: {[index: number]: number},
+}
+
 interface Window {
     fietsboekImageIndex: number,
     fietsboekCurrentImage: HTMLDivElement | null,
@@ -470,6 +474,45 @@ function toggleTrackFavourite(event: MouseEvent) {
 
 addHandler(".favourite-star", "click", toggleTrackFavourite);
 
+/**
+ * Load and plot the user's summary.
+ */
+function loadProfileStats() {
+    let monthNames: string[] = [];
+    let date = new Date(2000, 0);
+    for (let i = 0; i < 12; i++) {
+        monthNames.push(date.toLocaleString(LOCALE, {month: 'long'}));
+        date.setMonth(i + 1);
+    }
+
+    const url = new URL("/me/summary.json", window.location.href);
+    fetch(url)
+        .then(response => response.json())
+        .then((response: YearSummary) => {
+            let datasets = [];
+            for (const [year, months] of Object.entries(response)) {
+                let data = [];
+                for (let i = 1; i <= 12; ++i) {
+                    data.push((i in months) ? (months[i] / 1000) : 0);
+                }
+                datasets.push({
+                    data: data,
+                    label: year,
+                })
+            }
+
+            new Chart(
+                "graph-month-summary",
+                {
+                    type: "line",
+                    data: {
+                        datasets: datasets,
+                        labels: monthNames,
+                    },
+                },
+            );
+        });
+}
 
 document.addEventListener('DOMContentLoaded', function() {
     window.fietsboekImageIndex = 0;