[PULSE-54] Analytics chart improvements and live dashboard #24

Merged
uz1mani merged 10 commits from staging into main 2026-02-12 07:55:21 +00:00
7 changed files with 327 additions and 90 deletions
Showing only changes of commit fc56cbd661 - Show all commits

View File

@@ -92,9 +92,9 @@ export default function PublicDashboardPage() {
return () => clearInterval(interval) return () => clearInterval(interval)
}, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password]) }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password])
// * Tick every 5s to refresh "Updated X ago" display // * Tick every 1s so "Live · Xs ago" counts in real time
useEffect(() => { useEffect(() => {
const interval = setInterval(() => setTick((t) => t + 1), 5000) const interval = setInterval(() => setTick((t) => t + 1), 1000)
return () => clearInterval(interval) return () => clearInterval(interval)
}, []) }, [])

View File

@@ -138,9 +138,9 @@ export default function SiteDashboardPage() {
return () => clearInterval(interval) return () => clearInterval(interval)
}, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded]) }, [siteId, dateRange, todayInterval, multiDayInterval, isSettingsLoaded])
// * Tick every 5s to refresh "Updated X ago" display // * Tick every 1s so "Live · Xs ago" counts in real time
useEffect(() => { useEffect(() => {
const interval = setInterval(() => setTick((t) => t + 1), 5000) const interval = setInterval(() => setTick((t) => t + 1), 1000)
return () => clearInterval(interval) return () => clearInterval(interval)
}, []) }, [])

View File

@@ -416,9 +416,13 @@ export default function Chart({
{/* * Subtle live/updated indicator in bottom-right corner */} {/* * Subtle live/updated indicator in bottom-right corner */}
{lastUpdatedAt != null && ( {lastUpdatedAt != null && (
<div <div
className="absolute bottom-3 right-6 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none" className="absolute bottom-3 right-6 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
title="Data refreshes every 30 seconds" title="Data refreshes every 30 seconds"
> >
<span className="relative flex h-1.5 w-1.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
</span>
Live · {formatUpdatedAgo(lastUpdatedAt)} Live · {formatUpdatedAgo(lastUpdatedAt)}
</div> </div>
)} )}