Merge branch 'profile-graph'

2 files changed, 73 insertions, 2 deletions

diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts
index d9d2c15..66caa4f 100644
--- a/asset-sources/fietsboek.ts
+++ b/asset-sources/fietsboek.ts
@@ -10,6 +10,10 @@ interface JsonFriend {
     id: number,
 }
 
+interface YearSummary {
+    [index: string]: {[index: number]: number},
+}
+
 interface Window {
     fietsboekImageIndex: number,
     fietsboekCurrentImage: HTMLDivElement | null,
@@ -36,6 +40,19 @@ function getCookie(name: string): string | undefined {
         ?.split("=")[1];
 }
 
+
+/**
+ * Builds a URL with the correct application URL as base.
+ *
+ * Do not add the leading slash, otherwise the resolution will be wrong!
+ *
+ * @param path - Path to append to the base.
+ * @return The correct URL in regards to the application URL.
+ */
+function makeUrl(name: string): URL {
+    return new URL(name, BASE_URL);
+}
+
 /**
  * Installs a listener to the given DOM objects.
  *
@@ -390,7 +407,7 @@ addHandler(".summary-toggler", "click", toggleSummary);
  */
 addHandler("#archiveDownloadButton", "click", () => {
     const checked = document.querySelectorAll(".archive-checkbox:checked");
-    const url = new URL("/track/archive", window.location.href);
+    const url = makeUrl("track/archive");
     checked.forEach((c) => {
         url.searchParams.append("track_id[]", (c as HTMLInputElement).value);
     });
@@ -453,7 +470,7 @@ function toggleTrackFavourite(event: MouseEvent) {
     if (trackId === null) {
         return;
     }
-    const url = new URL("/me/toggle-favourite", window.location.href);
+    const url = makeUrl("me/toggle-favourite");
     const formData = new URLSearchParams();
     formData.append("track-id", trackId);
     formData.append("csrf_token", getCookie("csrf_token") ?? "");
@@ -472,6 +489,56 @@ function toggleTrackFavourite(event: MouseEvent) {
 
 addHandler(".favourite-star", "click", toggleTrackFavourite);
 
+/**
+ * Returns an array of localized month names (Jan-Dec).
+ */
+function getLocalizedMonthNames(): string[] {
+    const monthNames: string[] = [];
+    const date = new Date(2000, 0);
+    for (let i = 0; i < 12; i++) {
+        monthNames.push(date.toLocaleString(LOCALE, {month: 'long'}));
+        date.setMonth(i + 1);
+    }
+    return monthNames;
+}
+
+/**
+ * Load and plot the user's summary.
+ */
+function loadProfileStats() {
+    const monthNames = getLocalizedMonthNames();
+
+    const url = makeUrl("me/summary.json");
+    fetch(url)
+        .then(response => response.json())
+        .then((response: YearSummary) => {
+            const datasets = [];
+            for (const [year, months] of Object.entries(response)) {
+                const 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: "bar",
+                    data: {
+                        datasets: datasets,
+                        labels: monthNames,
+                    },
+                },
+            );
+        });
+}
+
+/* Used via in-page scripts, so make eslint happy */
+loadProfileStats;
 
 document.addEventListener('DOMContentLoaded', function() {
     window.fietsboekImageIndex = 0;
diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index 610e688..20708f3 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -156,6 +156,10 @@ strong {
   width: 25%;
 }
 
+.chart-title {
+  text-align: center;
+}
+
 .list-group.list-group-root {
   padding: 0;
   overflow: hidden;