From ef5d0a81eba046b5ad7634a65a4c0cbe85eda20e Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Sun, 3 Mar 2024 15:31:59 -0500
Subject: [PATCH] [O] Display relative time in rating chart

---
 AquaNet/src/libs/ui.ts            | 19 +++++++++++++++++--
 AquaNet/src/pages/UserHome.svelte | 13 +++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/AquaNet/src/libs/ui.ts b/AquaNet/src/libs/ui.ts
index 50846d0c..cf1f7173 100644
--- a/AquaNet/src/libs/ui.ts
+++ b/AquaNet/src/libs/ui.ts
@@ -61,6 +61,7 @@ export function renderCal(el: HTMLElement, d: {date: any, value: any}[]) {
 }
 
 
+const now = moment()
 export const CHARTJS_OPT: ChartOptions<'line'> = {
   responsive: true,
   maintainAspectRatio: false,
@@ -85,7 +86,21 @@ export const CHARTJS_OPT: ChartOptions<'line'> = {
     },
     tooltip: {
       mode: 'index',
-      intersect: false
+      intersect: false,
+      callbacks: {
+        title: (tooltipItems) => {
+          const date = tooltipItems[0].parsed.x;
+          const diff = now.diff(date, 'days')
+          return diff ? `${diff} days ago` : 'Today'
+        }
+      }
     }
   },
-}
\ No newline at end of file
+}
+
+export const pfpNotFound = (e: Event) => {
+  (e.target as HTMLImageElement).src = "/assets/imgs/no_profile.png"
+}
+export const coverNotFound = (e: Event) => {
+  (e.target as HTMLImageElement).src = "/assets/imgs/no_cover.jpg"
+}
diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 31876581..3ab1f601 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {CHARTJS_OPT, registerChart, renderCal, title} from "../libs/ui";
+  import { CHARTJS_OPT, coverNotFound, pfpNotFound, registerChart, renderCal, title } from "../libs/ui";
   import type { GenericGamePlaylog, GenericGameSummary, MusicMeta, TrendEntry } from "../libs/generalTypes";
   import {DATA_HOST} from "../libs/config";
   import 'cal-heatmap/cal-heatmap.css';
@@ -34,19 +34,13 @@
   ]).then(([user, trend, music]) => {
     console.log(user)
     console.log(trend)
-    console.log(music)
 
     d = {user, trend, recent: user.recent.map(it => {return {...music[it.musicId], ...it}})}
     localStorage.setItem("tmp-user-details", JSON.stringify(d))
     renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}}))
   }).catch((e) => error = e.message);
 
-  const pfpNotFound = (e: Event) => {
-    (e.target as HTMLImageElement).src = "/assets/imgs/no_profile.png"
-  }
-  const coverNotFound = (e: Event) => {
-    (e.target as HTMLImageElement).src = "/assets/imgs/no_cover.jpg"
-  }
+
   const titleText = {chu3: 'Chuni', mai2: 'Mai', ongeki: 'Ongeki'}[game]
 </script>
 
@@ -169,8 +163,7 @@
       <div class="scores">
         {#each d.recent as r, i}
           <div class:alt={i % 2 === 0}>
-            <img src={`${DATA_HOST}/d/${game}/music/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt=""
-                  on:error={coverNotFound} />
+            <img src={`${DATA_HOST}/d/${game}/music/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="" on:error={coverNotFound} />
             <div class="info">
               <div>
                 <span class="name">{r.name}</span>