josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Add timezone preference across time displays

Browse Source
This commit is contained in:
josh
2026-09-20 22:12:27 -04:00
parent 1e6ff3abbf
commit 5c5e75526d
28 changed files with 297 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/metrics/+page.svelte
+7 -6
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { timeFormat, timeZone } from '$ui/stores/time-zone.js';
import { onMount } from 'svelte';
import { invalidateAll } from '$app/navigation';
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
@@ -8,7 +9,7 @@
const percent = (value: number, total: number) => total > 0 ? `${(100 * value / total).toFixed(1)}%` : '—';
const hours = (value: number) => `${value.toFixed(1)} h`;
const peak = $derived(Math.max(1, ...data.points.map(p => p.active + p.idle + p.unknown)));
const label = (at: number) => new Date(at).toISOString().slice(0, data.days === 1 ? 16 : 10).replace('T', ' ');
const label = (at: number) => $timeFormat.period(at);
onMount(() => {
const timer = setInterval(() => { if (!document.hidden) void invalidateAll(); }, 60_000);
return () => clearInterval(timer);
@@ -25,7 +26,7 @@
<a href={`/metrics?days=${days}`} aria-current={data.days === days ? 'page' : undefined}>{days === 1 ? '24 hours' : `${days} days`}</a>
{/each}
</nav>
<span>Updated {new Date(data.now).toISOString().slice(11, 19)} UTC · refreshes every minute</span>
<span>Updated {$timeFormat.time(data.now)} · refreshes every minute</span>
</div>
{#if data.servers.length === 0}
@@ -40,19 +41,19 @@
<section>
<h2>Utilization over time</h2>
<p>Server-hours per {data.days === 1 ? 'hour' : 'day'} (UTC). Taller bars mean more time under observation.</p>
<p>Server-hours per {data.days === 1 ? 'hour' : '24-hour period'}. Period starts are shown in {$timeZone.replaceAll('_', ' ')}. Taller bars mean more time under observation.</p>
<div class="legend"><span><i class="active"></i>Utilized</span><span><i class="idle"></i>Idle</span><span><i class="unknown"></i>Unknown</span></div>
<div class="chart" role="img" aria-label="Stacked server-hours chart. Exact values are in the time data table below.">
{#each data.points as point}
<div class="bar" title={`${label(point.at)} UTC: ${hours(point.active)} utilized, ${hours(point.idle)} idle, ${hours(point.unknown)} unknown`}>
<div class="bar" title={`${label(point.at)}: ${hours(point.active)} utilized, ${hours(point.idle)} idle, ${hours(point.unknown)} unknown`}>
<div class="unknown" style:height={`${point.unknown / peak * 100}%`}></div>
<div class="idle" style:height={`${point.idle / peak * 100}%`}></div>
<div class="active" style:height={`${point.active / peak * 100}%`}></div>
</div>
{/each}
</div>
<div class="axis"><span>{label(data.points[0].at)}</span><span>0–{hours(peak)} per bar</span><span>{label(data.points[data.points.length - 1].at)} UTC</span></div>
<details><summary>View time data</summary><div class="table-wrap"><table><thead><tr><th>Period (UTC)</th><th>Utilized</th><th>Idle</th><th>Unknown</th><th>Player time</th></tr></thead><tbody>{#each data.points as point}<tr><td>{label(point.at)}</td><td>{hours(point.active)}</td><td>{hours(point.idle)}</td><td>{hours(point.unknown)}</td><td>{hours(point.playerHours)}</td></tr>{/each}</tbody></table></div></details>
<div class="axis"><span>{label(data.points[0].at)}</span><span>0–{hours(peak)} per bar</span><span>{label(data.points[data.points.length - 1].at)}</span></div>
<details><summary>View time data</summary><div class="table-wrap"><table><thead><tr><th>Period start ({$timeZone.replaceAll('_', ' ')})</th><th>Utilized</th><th>Idle</th><th>Unknown</th><th>Player time</th></tr></thead><tbody>{#each data.points as point}<tr><td>{label(point.at)}</td><td>{hours(point.active)}</td><td>{hours(point.idle)}</td><td>{hours(point.unknown)}</td><td>{hours(point.playerHours)}</td></tr>{/each}</tbody></table></div></details>
</section>
<section>