Fix health trends range selector; add day navigation and chart click
- Fix keepPreviousData v4→v5: import keepPreviousData from @tanstack/react-query and use as placeholderData so charts don't blank out when switching ranges - Normalise all metric dates to YYYY-MM-DD in queryFn so XAxis values and ReferenceLine x values always match - Add allDays query (last 365 days) for snapshot navigation, keyed under ['health-metrics', 'all'] so UploadPage invalidation covers it - Arrow nav (← →) in snapshot header steps through available days - Clicking any trend chart data point loads that day in the snapshot - Blue dashed ReferenceLine marks the selected day in every chart Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+204
-125
@@ -1,12 +1,12 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useQuery, keepPreviousData } from '@tanstack/react-query'
|
||||
import {
|
||||
AreaChart, Area, BarChart, Bar,
|
||||
AreaChart, Area, BarChart, Bar, ReferenceLine,
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { format, subDays } from 'date-fns'
|
||||
import api from '../utils/api'
|
||||
import { formatSleep, formatWeight, formatHeartRate } from '../utils/format'
|
||||
import { formatSleep } from '../utils/format'
|
||||
|
||||
const RANGES = [
|
||||
{ label: '1W', days: 7 },
|
||||
@@ -17,9 +17,14 @@ const RANGES = [
|
||||
{ label: '1Y', days: 365 },
|
||||
]
|
||||
|
||||
const tooltipStyle = { background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }
|
||||
const tooltipStyle = {
|
||||
background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12,
|
||||
}
|
||||
|
||||
// ── Daily Snapshot helpers ──────────────────────────────────────────────────
|
||||
// Normalise any date string to YYYY-MM-DD so XAxis values and ReferenceLine x match.
|
||||
const d10 = (s) => (s || '').slice(0, 10)
|
||||
|
||||
// ── Daily Snapshot ──────────────────────────────────────────────────────────
|
||||
|
||||
function fmtTime(ts) {
|
||||
if (!ts) return '--'
|
||||
@@ -52,22 +57,22 @@ function HrvBadge({ status }) {
|
||||
return <span className={`text-xs px-2 py-0.5 rounded-full border ${cls}`}>{status}</span>
|
||||
}
|
||||
|
||||
function Stat({ label, value, unit, sub, accent }) {
|
||||
const accentCls = accent === 'red' ? 'text-rose-400' : accent === 'blue' ? 'text-blue-400' : accent === 'green' ? 'text-green-400' : 'text-white'
|
||||
function NavArrow({ onClick, disabled, children }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-0.5">{label}</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className={`text-2xl font-bold ${accentCls}`}>{value}</span>
|
||||
{unit && <span className="text-xs text-gray-500">{unit}</span>}
|
||||
</div>
|
||||
{sub && <p className="text-xs text-gray-500 mt-0.5">{sub}</p>}
|
||||
</div>
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className="w-7 h-7 flex items-center justify-center rounded-lg text-gray-400
|
||||
hover:text-white hover:bg-gray-800 disabled:opacity-20 disabled:cursor-default
|
||||
transition-colors text-base font-medium"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function DailySnapshot({ latest, avg30 }) {
|
||||
if (!latest) return (
|
||||
function DailySnapshot({ day, avg30, onOlder, onNewer, hasOlder, hasNewer }) {
|
||||
if (!day) return (
|
||||
<div className="text-center py-10 text-gray-600">
|
||||
<p className="text-3xl mb-2">📊</p>
|
||||
<p>No health data yet</p>
|
||||
@@ -75,71 +80,67 @@ function DailySnapshot({ latest, avg30 }) {
|
||||
</div>
|
||||
)
|
||||
|
||||
const dateLabel = latest.date
|
||||
? format(new Date(latest.date), 'EEEE, d MMMM yyyy')
|
||||
: 'Latest'
|
||||
|
||||
const hasSleepStages = latest.sleep_deep_s || latest.sleep_light_s || latest.sleep_rem_s
|
||||
const dateLabel = day.date ? format(new Date(day.date), 'EEEE, d MMMM yyyy') : 'Latest'
|
||||
const hasSleepStages = day.sleep_deep_s || day.sleep_light_s || day.sleep_rem_s
|
||||
const stepsGoal = 10000
|
||||
const stepsPct = latest.steps ? Math.min(100, (latest.steps / stepsGoal * 100).toFixed(0)) : 0
|
||||
const stepsPct = day.steps ? Math.min(100, Math.round(day.steps / stepsGoal * 100)) : 0
|
||||
|
||||
const stressLabel = !latest.avg_stress ? null :
|
||||
latest.avg_stress < 25 ? 'Restful' :
|
||||
latest.avg_stress < 50 ? 'Low' :
|
||||
latest.avg_stress < 75 ? 'Medium' : 'High'
|
||||
const stressColor = !latest.avg_stress ? 'text-white' :
|
||||
latest.avg_stress < 25 ? 'text-green-400' :
|
||||
latest.avg_stress < 50 ? 'text-yellow-400' :
|
||||
latest.avg_stress < 75 ? 'text-orange-400' : 'text-red-400'
|
||||
const stressLabel = !day.avg_stress ? null
|
||||
: day.avg_stress < 25 ? 'Restful'
|
||||
: day.avg_stress < 50 ? 'Low'
|
||||
: day.avg_stress < 75 ? 'Medium' : 'High'
|
||||
const stressColor = !day.avg_stress ? 'text-white'
|
||||
: day.avg_stress < 25 ? 'text-green-400'
|
||||
: day.avg_stress < 50 ? 'text-yellow-400'
|
||||
: day.avg_stress < 75 ? 'text-orange-400' : 'text-red-400'
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
|
||||
{/* Header + arrows */}
|
||||
<div className="flex items-center gap-3">
|
||||
<NavArrow onClick={onOlder} disabled={!hasOlder}>←</NavArrow>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wide">Daily snapshot</p>
|
||||
<h2 className="text-xl font-semibold text-white mt-0.5">{dateLabel}</h2>
|
||||
<h2 className="text-xl font-semibold text-white leading-tight">{dateLabel}</h2>
|
||||
</div>
|
||||
<NavArrow onClick={onNewer} disabled={!hasNewer}>→</NavArrow>
|
||||
</div>
|
||||
|
||||
{/* Top row: Sleep (wide) + Heart/HRV */}
|
||||
{/* Sleep (wide) + Heart / HRV */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
|
||||
{/* Sleep card — 2/3 width on desktop */}
|
||||
<div className="lg:col-span-2 bg-gray-900 rounded-xl border border-gray-800 p-5 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-gray-300">Sleep</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
{latest.sleep_score != null && (
|
||||
{day.sleep_score != null && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full border border-indigo-400/30 bg-indigo-400/10 text-indigo-300">
|
||||
Score {Math.round(latest.sleep_score)}
|
||||
Score {Math.round(day.sleep_score)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end gap-3">
|
||||
<span className="text-4xl font-bold text-white tracking-tight">
|
||||
{formatSleep(latest.sleep_duration_s)}
|
||||
{formatSleep(day.sleep_duration_s)}
|
||||
</span>
|
||||
{latest.sleep_start && latest.sleep_end && (
|
||||
{day.sleep_start && day.sleep_end && (
|
||||
<span className="text-sm text-gray-500 pb-1">
|
||||
{fmtTime(latest.sleep_start)} → {fmtTime(latest.sleep_end)}
|
||||
{fmtTime(day.sleep_start)} → {fmtTime(day.sleep_end)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasSleepStages ? (
|
||||
<>
|
||||
<SleepStagesBar
|
||||
deep={latest.sleep_deep_s}
|
||||
light={latest.sleep_light_s}
|
||||
rem={latest.sleep_rem_s}
|
||||
awake={latest.sleep_awake_s}
|
||||
deep={day.sleep_deep_s} light={day.sleep_light_s}
|
||||
rem={day.sleep_rem_s} awake={day.sleep_awake_s}
|
||||
/>
|
||||
<div className="flex flex-wrap gap-x-5 gap-y-1.5">
|
||||
{[
|
||||
['Deep', latest.sleep_deep_s, '#6366f1'],
|
||||
['REM', latest.sleep_rem_s, '#8b5cf6'],
|
||||
['Light', latest.sleep_light_s, '#a78bfa'],
|
||||
['Awake', latest.sleep_awake_s, '#4b5563'],
|
||||
['Deep', day.sleep_deep_s, '#6366f1'],
|
||||
['REM', day.sleep_rem_s, '#8b5cf6'],
|
||||
['Light', day.sleep_light_s, '#a78bfa'],
|
||||
['Awake', day.sleep_awake_s, '#4b5563'],
|
||||
].map(([label, secs, color]) => secs ? (
|
||||
<div key={label} className="flex items-center gap-1.5">
|
||||
<div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: color }} />
|
||||
@@ -150,53 +151,47 @@ function DailySnapshot({ latest, avg30 }) {
|
||||
) : null)}
|
||||
</div>
|
||||
</>
|
||||
) : !latest.sleep_duration_s ? (
|
||||
) : !day.sleep_duration_s ? (
|
||||
<p className="text-sm text-gray-600">No sleep data</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Heart & HRV card — 1/3 width */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-5 space-y-4">
|
||||
<h3 className="text-sm font-medium text-gray-300">Heart & HRV</h3>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-0.5">Resting HR</p>
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-3xl font-bold text-rose-400">
|
||||
{latest.resting_hr ? Math.round(latest.resting_hr) : '--'}
|
||||
{day.resting_hr ? Math.round(day.resting_hr) : '--'}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">bpm</span>
|
||||
</div>
|
||||
{avg30?.resting_hr && latest.resting_hr && (
|
||||
{avg30?.resting_hr && day.resting_hr && (
|
||||
<p className="text-xs text-gray-500 mt-0.5">
|
||||
30d avg {Math.round(avg30.resting_hr)} bpm
|
||||
{latest.resting_hr < avg30.resting_hr
|
||||
{day.resting_hr < avg30.resting_hr
|
||||
? <span className="text-green-400 ml-1">↓</span>
|
||||
: latest.resting_hr > avg30.resting_hr
|
||||
: day.resting_hr > avg30.resting_hr
|
||||
? <span className="text-red-400 ml-1">↑</span>
|
||||
: null}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-0.5">HRV</p>
|
||||
<div className="flex items-baseline gap-1.5 flex-wrap">
|
||||
<span className="text-3xl font-bold text-violet-400">
|
||||
{latest.hrv_nightly_avg ? Math.round(latest.hrv_nightly_avg) : '--'}
|
||||
{day.hrv_nightly_avg ? Math.round(day.hrv_nightly_avg) : '--'}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">ms</span>
|
||||
<HrvBadge status={latest.hrv_status} />
|
||||
<HrvBadge status={day.hrv_status} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{latest.avg_hr_day && (
|
||||
{day.avg_hr_day && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-0.5">Avg HR (day)</p>
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-xl font-semibold text-orange-400">
|
||||
{Math.round(latest.avg_hr_day)}
|
||||
</span>
|
||||
<span className="text-xl font-semibold text-orange-400">{Math.round(day.avg_hr_day)}</span>
|
||||
<span className="text-xs text-gray-500">bpm</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,78 +202,69 @@ function DailySnapshot({ latest, avg30 }) {
|
||||
{/* Activity strip */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
|
||||
{/* Steps */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<p className="text-xs text-gray-500 mb-1">Steps</p>
|
||||
<div className="flex items-baseline gap-1 mb-2">
|
||||
<span className="text-2xl font-bold text-yellow-400">
|
||||
{latest.steps ? latest.steps.toLocaleString() : '--'}
|
||||
{day.steps ? day.steps.toLocaleString() : '--'}
|
||||
</span>
|
||||
</div>
|
||||
{latest.steps ? (
|
||||
{day.steps ? (
|
||||
<>
|
||||
<div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-yellow-400 rounded-full transition-all" style={{ width: `${stepsPct}%` }} />
|
||||
<div className="h-full bg-yellow-400 rounded-full transition-all"
|
||||
style={{ width: `${stepsPct}%` }} />
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mt-1">{stepsPct}% of {stepsGoal.toLocaleString()}</p>
|
||||
</>
|
||||
) : null}
|
||||
{latest.floors_climbed ? (
|
||||
<p className="text-xs text-gray-500 mt-1">{latest.floors_climbed} floors</p>
|
||||
) : null}
|
||||
{day.floors_climbed
|
||||
? <p className="text-xs text-gray-500 mt-1">{day.floors_climbed} floors</p>
|
||||
: null}
|
||||
</div>
|
||||
|
||||
{/* Calories */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<p className="text-xs text-gray-500 mb-1">Calories</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-2xl font-bold text-white">
|
||||
{latest.total_calories
|
||||
? Math.round(latest.total_calories)
|
||||
: latest.active_calories
|
||||
? Math.round(latest.active_calories)
|
||||
: '--'}
|
||||
{day.total_calories
|
||||
? Math.round(day.total_calories)
|
||||
: day.active_calories ? Math.round(day.active_calories) : '--'}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">kcal</span>
|
||||
</div>
|
||||
{latest.active_calories && latest.total_calories && (
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Active {Math.round(latest.active_calories)} kcal
|
||||
</p>
|
||||
{day.active_calories && day.total_calories && (
|
||||
<p className="text-xs text-gray-500 mt-1">Active {Math.round(day.active_calories)} kcal</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stress */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<p className="text-xs text-gray-500 mb-1">Stress</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className={`text-2xl font-bold ${stressColor}`}>
|
||||
{latest.avg_stress ? Math.round(latest.avg_stress) : '--'}
|
||||
{day.avg_stress ? Math.round(day.avg_stress) : '--'}
|
||||
</span>
|
||||
{latest.avg_stress && <span className="text-xs text-gray-500">/100</span>}
|
||||
{day.avg_stress && <span className="text-xs text-gray-500">/100</span>}
|
||||
</div>
|
||||
{stressLabel && <p className="text-xs text-gray-500 mt-1">{stressLabel}</p>}
|
||||
</div>
|
||||
|
||||
{/* SpO2 or VO2 Max */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
{latest.spo2_avg ? (
|
||||
{day.spo2_avg ? (
|
||||
<>
|
||||
<p className="text-xs text-gray-500 mb-1">SpO2</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-2xl font-bold text-sky-400">{latest.spo2_avg.toFixed(1)}</span>
|
||||
<span className="text-2xl font-bold text-sky-400">{day.spo2_avg.toFixed(1)}</span>
|
||||
<span className="text-xs text-gray-500">%</span>
|
||||
</div>
|
||||
</>
|
||||
) : latest.vo2max ? (
|
||||
) : day.vo2max ? (
|
||||
<>
|
||||
<p className="text-xs text-gray-500 mb-1">VO2 Max</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-2xl font-bold text-blue-400">{latest.vo2max.toFixed(1)}</span>
|
||||
<span className="text-2xl font-bold text-blue-400">{day.vo2max.toFixed(1)}</span>
|
||||
</div>
|
||||
{latest.fitness_age && (
|
||||
<p className="text-xs text-gray-500 mt-1">Fitness age {latest.fitness_age}</p>
|
||||
)}
|
||||
{day.fitness_age && <p className="text-xs text-gray-500 mt-1">Fitness age {day.fitness_age}</p>}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@@ -294,14 +280,22 @@ function DailySnapshot({ latest, avg30 }) {
|
||||
|
||||
// ── Trend Charts ────────────────────────────────────────────────────────────
|
||||
|
||||
function MetricChart({ data, dataKey, color, formatter, height = 140 }) {
|
||||
function MetricChart({ data, dataKey, color, formatter, height = 140, selectedDate, onDayClick }) {
|
||||
const vals = data.filter(d => d[dataKey] != null)
|
||||
if (!vals.length) return (
|
||||
<div className="flex items-center justify-center text-gray-600 text-xs" style={{ height }}>No data</div>
|
||||
)
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={height}>
|
||||
<AreaChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }}>
|
||||
<AreaChart
|
||||
data={data}
|
||||
margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
|
||||
style={{ cursor: onDayClick ? 'pointer' : 'default' }}
|
||||
onClick={evt => {
|
||||
const p = evt?.activePayload?.[0]?.payload
|
||||
if (p?.date && onDayClick) onDayClick(p.date)
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={`grad-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={color} stopOpacity={0.3} />
|
||||
@@ -315,6 +309,9 @@ function MetricChart({ data, dataKey, color, formatter, height = 140 }) {
|
||||
tickFormatter={formatter} />
|
||||
<Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')}
|
||||
formatter={v => [formatter ? formatter(v) : v?.toFixed(1)]} />
|
||||
{selectedDate && (
|
||||
<ReferenceLine x={selectedDate} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
|
||||
)}
|
||||
<Area type="monotone" dataKey={dataKey} stroke={color} strokeWidth={2}
|
||||
fill={`url(#grad-${dataKey})`} dot={false} connectNulls={false} isAnimationActive={false} />
|
||||
</AreaChart>
|
||||
@@ -322,25 +319,39 @@ function MetricChart({ data, dataKey, color, formatter, height = 140 }) {
|
||||
)
|
||||
}
|
||||
|
||||
function SleepChart({ data }) {
|
||||
function SleepChart({ data, selectedDate, onDayClick }) {
|
||||
const chartData = data.map(d => ({
|
||||
date: d.date,
|
||||
date: d.date, // already normalised to YYYY-MM-DD
|
||||
deep: d.sleep_deep_s ? +(d.sleep_deep_s / 3600).toFixed(2) : null,
|
||||
rem: d.sleep_rem_s ? +(d.sleep_rem_s / 3600).toFixed(2) : null,
|
||||
light: d.sleep_light_s ? +(d.sleep_light_s / 3600).toFixed(2) : null,
|
||||
awake: d.sleep_awake_s ? +(d.sleep_awake_s / 3600).toFixed(2) : null,
|
||||
}))
|
||||
const hasData = chartData.some(d => d.deep || d.rem || d.light)
|
||||
if (!hasData) return <div className="flex items-center justify-center h-36 text-gray-600 text-xs">No sleep data</div>
|
||||
if (!hasData) return (
|
||||
<div className="flex items-center justify-center h-36 text-gray-600 text-xs">No sleep data</div>
|
||||
)
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={140}>
|
||||
<BarChart data={chartData} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={6}>
|
||||
<BarChart
|
||||
data={chartData}
|
||||
margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
|
||||
barSize={6}
|
||||
style={{ cursor: onDayClick ? 'pointer' : 'default' }}
|
||||
onClick={evt => {
|
||||
const p = evt?.activePayload?.[0]?.payload
|
||||
if (p?.date && onDayClick) onDayClick(p.date)
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
|
||||
<XAxis dataKey="date" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
|
||||
tickFormatter={d => format(new Date(d), 'MMM d')} interval="preserveStartEnd" />
|
||||
<YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={24}
|
||||
tickFormatter={v => `${v}h`} />
|
||||
<Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')} />
|
||||
{selectedDate && (
|
||||
<ReferenceLine x={selectedDate} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
|
||||
)}
|
||||
<Bar dataKey="deep" name="Deep" stackId="a" fill="#6366f1" />
|
||||
<Bar dataKey="rem" name="REM" stackId="a" fill="#8b5cf6" />
|
||||
<Bar dataKey="light" name="Light" stackId="a" fill="#a78bfa" />
|
||||
@@ -350,44 +361,92 @@ function SleepChart({ data }) {
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ────────────────────────────────────────────────────────────────────
|
||||
// ── Page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function HealthPage() {
|
||||
const [rangeDays, setRangeDays] = useState(7)
|
||||
const [selectedDateStr, setSelectedDateStr] = useState(null) // YYYY-MM-DD or null = latest
|
||||
|
||||
const fromDate = useMemo(() => format(subDays(new Date(), rangeDays), 'yyyy-MM-dd'), [rangeDays])
|
||||
const fromDate = useMemo(
|
||||
() => format(subDays(new Date(), rangeDays), 'yyyy-MM-dd'),
|
||||
[rangeDays],
|
||||
)
|
||||
|
||||
const { data: summary } = useQuery({
|
||||
queryKey: ['health-summary'],
|
||||
queryFn: () => api.get('/health-metrics/summary').then(r => r.data),
|
||||
})
|
||||
|
||||
const { data: metrics, isLoading } = useQuery({
|
||||
queryKey: ['health-metrics', rangeDays],
|
||||
// Full history for snapshot navigation.
|
||||
// Key starts with ['health-metrics'] so UploadPage invalidation hits it automatically.
|
||||
const { data: allDays } = useQuery({
|
||||
queryKey: ['health-metrics', 'all'],
|
||||
queryFn: () =>
|
||||
api.get('/health-metrics/', {
|
||||
params: { from_date: fromDate, limit: rangeDays + 1 },
|
||||
}).then(r => r.data.slice().reverse()),
|
||||
keepPreviousData: true,
|
||||
api.get('/health-metrics/', { params: { limit: 365 } })
|
||||
.then(r => r.data.map(d => ({ ...d, date: d10(d.date) }))),
|
||||
})
|
||||
|
||||
const latest = summary?.latest
|
||||
const avg30 = summary?.avg_30d
|
||||
// Trend window (changes with range selector).
|
||||
// Dates normalised to YYYY-MM-DD so XAxis values match ReferenceLine x.
|
||||
const { data: rawMetrics, isLoading } = useQuery({
|
||||
queryKey: ['health-metrics', rangeDays],
|
||||
queryFn: () =>
|
||||
api.get('/health-metrics/', { params: { from_date: fromDate, limit: rangeDays + 1 } })
|
||||
.then(r => r.data.slice().reverse().map(d => ({ ...d, date: d10(d.date) }))),
|
||||
placeholderData: keepPreviousData,
|
||||
})
|
||||
const metrics = rawMetrics || []
|
||||
|
||||
// Snapshot navigation: newest-first sorted list of all available days
|
||||
const allDaysSorted = useMemo(
|
||||
() => (allDays || []).slice().sort((a, b) => b.date.localeCompare(a.date)),
|
||||
[allDays],
|
||||
)
|
||||
|
||||
const selectedDay = useMemo(() => {
|
||||
if (!selectedDateStr) return allDaysSorted[0] || null
|
||||
return allDaysSorted.find(d => d.date === selectedDateStr) || null
|
||||
}, [selectedDateStr, allDaysSorted])
|
||||
|
||||
const selectedIdx = useMemo(() => {
|
||||
if (!selectedDay) return -1
|
||||
return allDaysSorted.findIndex(d => d.date === selectedDay.date)
|
||||
}, [selectedDay, allDaysSorted])
|
||||
|
||||
const handleDayClick = (dateStr) => setSelectedDateStr(d10(dateStr))
|
||||
const goOlder = () => {
|
||||
if (selectedIdx < allDaysSorted.length - 1)
|
||||
setSelectedDateStr(allDaysSorted[selectedIdx + 1].date)
|
||||
}
|
||||
const goNewer = () => {
|
||||
if (selectedIdx > 0)
|
||||
setSelectedDateStr(allDaysSorted[selectedIdx - 1].date)
|
||||
}
|
||||
|
||||
// The date string to highlight in charts (only shown if it falls within the current trend window)
|
||||
const selDateForCharts = selectedDay?.date
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-8">
|
||||
<h1 className="text-2xl font-bold text-white">Health</h1>
|
||||
|
||||
{/* Daily snapshot */}
|
||||
<DailySnapshot latest={latest} avg30={avg30} />
|
||||
<DailySnapshot
|
||||
day={selectedDay}
|
||||
avg30={summary?.avg_30d}
|
||||
onOlder={goOlder}
|
||||
onNewer={goNewer}
|
||||
hasOlder={selectedIdx >= 0 && selectedIdx < allDaysSorted.length - 1}
|
||||
hasNewer={selectedIdx > 0}
|
||||
/>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-gray-800" />
|
||||
|
||||
{/* Trends section */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-gray-300">Trends</h2>
|
||||
<p className="text-xs text-gray-600">Click any point to load that day above</p>
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
{RANGES.map(({ label, days }) => (
|
||||
<button key={label} onClick={() => setRangeDays(days)}
|
||||
@@ -404,24 +463,27 @@ export default function HealthPage() {
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-gray-500 text-sm">Loading…</div>
|
||||
) : metrics && metrics.length > 0 ? (
|
||||
) : metrics.length > 0 ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Resting Heart Rate</h3>
|
||||
<MetricChart data={metrics} dataKey="resting_hr" color="#f43f5e"
|
||||
formatter={v => `${Math.round(v)} bpm`} />
|
||||
formatter={v => `${Math.round(v)} bpm`}
|
||||
selectedDate={selDateForCharts} onDayClick={handleDayClick} />
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">HRV (nightly avg)</h3>
|
||||
<MetricChart data={metrics} dataKey="hrv_nightly_avg" color="#8b5cf6"
|
||||
formatter={v => `${Math.round(v)} ms`} />
|
||||
formatter={v => `${Math.round(v)} ms`}
|
||||
selectedDate={selDateForCharts} onDayClick={handleDayClick} />
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Sleep</h3>
|
||||
<SleepChart data={metrics} />
|
||||
<SleepChart data={metrics}
|
||||
selectedDate={selDateForCharts} onDayClick={handleDayClick} />
|
||||
<div className="flex gap-4 mt-2">
|
||||
{[['Deep','#6366f1'],['REM','#8b5cf6'],['Light','#a78bfa'],['Awake','#374151']].map(([l,c]) => (
|
||||
<div key={l} className="flex items-center gap-1.5">
|
||||
@@ -435,19 +497,32 @@ export default function HealthPage() {
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Weight</h3>
|
||||
<MetricChart data={metrics} dataKey="weight_kg" color="#34d399"
|
||||
formatter={v => `${v.toFixed(1)} kg`} />
|
||||
formatter={v => `${v.toFixed(1)} kg`}
|
||||
selectedDate={selDateForCharts} onDayClick={handleDayClick} />
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Daily Steps</h3>
|
||||
<ResponsiveContainer width="100%" height={140}>
|
||||
<BarChart data={metrics} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={6}>
|
||||
<BarChart
|
||||
data={metrics}
|
||||
margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
|
||||
barSize={6}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={evt => {
|
||||
const p = evt?.activePayload?.[0]?.payload
|
||||
if (p?.date) handleDayClick(p.date)
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
|
||||
<XAxis dataKey="date" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false}
|
||||
tickFormatter={d => format(new Date(d), 'MMM d')} interval="preserveStartEnd" />
|
||||
<YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={36}
|
||||
tickFormatter={v => v >= 1000 ? `${(v/1000).toFixed(0)}k` : v} />
|
||||
<Tooltip contentStyle={tooltipStyle} labelFormatter={d => format(new Date(d), 'MMM d, yyyy')} />
|
||||
{selDateForCharts && (
|
||||
<ReferenceLine x={selDateForCharts} stroke="#60a5fa" strokeWidth={1.5} strokeDasharray="4 2" />
|
||||
)}
|
||||
<Bar dataKey="steps" name="Steps" fill="#fbbf24" radius={[2, 2, 0, 0]} isAnimationActive={false} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
@@ -456,19 +531,23 @@ export default function HealthPage() {
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Stress Level</h3>
|
||||
<MetricChart data={metrics} dataKey="avg_stress" color="#a78bfa"
|
||||
formatter={v => Math.round(v)} />
|
||||
formatter={v => Math.round(v)}
|
||||
selectedDate={selDateForCharts} onDayClick={handleDayClick} />
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Avg Heart Rate (day)</h3>
|
||||
<MetricChart data={metrics} dataKey="avg_hr_day" color="#f97316"
|
||||
formatter={v => `${Math.round(v)} bpm`} />
|
||||
formatter={v => `${Math.round(v)} bpm`}
|
||||
selectedDate={selDateForCharts} onDayClick={handleDayClick} />
|
||||
</div>
|
||||
|
||||
{metrics.some(d => d.vo2max) && (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">VO2 Max</h3>
|
||||
<MetricChart data={metrics} dataKey="vo2max" color="#3b82f6" formatter={v => v.toFixed(1)} />
|
||||
<MetricChart data={metrics} dataKey="vo2max" color="#3b82f6"
|
||||
formatter={v => v.toFixed(1)}
|
||||
selectedDate={selDateForCharts} onDayClick={handleDayClick} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user