archive
/
AquaDX
mirror of https://github.com/hykilpikonna/AquaDX
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

[O] Display relative time in rating chart

pull/17/head
Azalea 2024-03-03 15:31:59 -05:00
parent 48819c10a9
commit ef5d0a81eb
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
AquaNet/src/libs/ui.ts
View File

@ -61,6 +61,7 @@ export function renderCal(el: HTMLElement, d: {date: any, value: any}[]) {
} }
const now = moment()
export const CHARTJS_OPT: ChartOptions<'line'> = { export const CHARTJS_OPT: ChartOptions<'line'> = {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
@ -85,7 +86,21 @@ export const CHARTJS_OPT: ChartOptions<'line'> = {
}, },
tooltip: { tooltip: {
mode: 'index', 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'
}
}
} }
}, },
} }
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"
}

13
AquaNet/src/pages/UserHome.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <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 type { GenericGamePlaylog, GenericGameSummary, MusicMeta, TrendEntry } from "../libs/generalTypes";
import {DATA_HOST} from "../libs/config"; import {DATA_HOST} from "../libs/config";
import 'cal-heatmap/cal-heatmap.css'; import 'cal-heatmap/cal-heatmap.css';
@ -34,19 +34,13 @@
]).then(([user, trend, music]) => { ]).then(([user, trend, music]) => {
console.log(user) console.log(user)
console.log(trend) console.log(trend)
console.log(music)
d = {user, trend, recent: user.recent.map(it => {return {...music[it.musicId], ...it}})} d = {user, trend, recent: user.recent.map(it => {return {...music[it.musicId], ...it}})}
localStorage.setItem("tmp-user-details", JSON.stringify(d)) localStorage.setItem("tmp-user-details", JSON.stringify(d))
renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}})) renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}}))
}).catch((e) => error = e.message); }).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] const titleText = {chu3: 'Chuni', mai2: 'Mai', ongeki: 'Ongeki'}[game]
</script> </script>
@ -169,8 +163,7 @@
<div class="scores"> <div class="scores">
{#each d.recent as r, i} {#each d.recent as r, i}
<div class:alt={i % 2 === 0}> <div class:alt={i % 2 === 0}>
<img src={`${DATA_HOST}/d/${game}/music/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="" <img src={`${DATA_HOST}/d/${game}/music/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="" on:error={coverNotFound} />
on:error={coverNotFound} />
<div class="info"> <div class="info">
<div> <div>
<span class="name">{r.name}</span> <span class="name">{r.name}</span>