HRV balanced dots, dashed gap lines, dashboard widgets + drag-to-edit layout
- Green dots for balanced HRV (joining orange unbalanced / red low) on the trend - Trend charts bridge data gaps with a dashed line instead of a blank break - Dashboard: drop Health today; add VO2 max, small sleep, and HRV status widgets - Dashboard: editable widget grid (react-grid-layout) with drag/resize, saved per-user Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Generated
+59
@@ -16,6 +16,7 @@
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-grid-layout": "^1.5.3",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"recharts": "^2.12.7",
|
||||
@@ -2820,6 +2821,20 @@
|
||||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-draggable": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.6.0.tgz",
|
||||
"integrity": "sha512-g4vqY53xhmPrBnZvGP+1YQV0eYnB3o0VLzoi6q2IpwnQrxIZ34tYRKpVtsWIXPg4D/pvLn+oYCW5gOK2cWIrgA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3.0",
|
||||
"react-dom": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dropzone": {
|
||||
"version": "14.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.4.1.tgz",
|
||||
@@ -2837,6 +2852,30 @@
|
||||
"react": ">= 16.8 || 18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-grid-layout": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.5.3.tgz",
|
||||
"integrity": "sha512-KaG6IbjD6fYhagUtIvOzhftXG+ViKZjCjADe86X1KHl7C/dsBN2z0mi14nbvZKTkp0RKiil9RPcJBgq3LnoA8g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"fast-equals": "^4.0.3",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-draggable": "^4.4.6",
|
||||
"react-resizable": "^3.0.5",
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3.0",
|
||||
"react-dom": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-grid-layout/node_modules/fast-equals": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
|
||||
"integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
@@ -2867,6 +2906,20 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-resizable": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.2.0.tgz",
|
||||
"integrity": "sha512-3NKQ0SLZV7rs3LQHeXlOzDSRQfFrkX6TVet77/Qk03zqiZyee37b7N8/gwDJAA8UUjRz7PdWCCy49hcso45SMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "15.x",
|
||||
"react-draggable": "^4.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3",
|
||||
"react-dom": ">= 16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.30.4",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
|
||||
@@ -2992,6 +3045,12 @@
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.12",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
|
||||
|
||||
+14
-13
@@ -9,24 +9,25 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"recharts": "^2.12.7",
|
||||
"date-fns": "^3.6.0",
|
||||
"clsx": "^2.1.1",
|
||||
"zustand": "^4.5.2",
|
||||
"@tanstack/react-query": "^5.40.0",
|
||||
"axios": "^1.7.2",
|
||||
"react-dropzone": "^14.2.3"
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-grid-layout": "^1.5.3",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"recharts": "^2.12.7",
|
||||
"zustand": "^4.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"vite": "^5.2.13",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.4"
|
||||
"tailwindcss": "^3.4.4",
|
||||
"vite": "^5.2.13"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,73 @@
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useMemo } from 'react'
|
||||
import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
|
||||
import { useQuery, useMutation } from '@tanstack/react-query'
|
||||
import { useMemo, useState, useEffect, useRef } from 'react'
|
||||
import {
|
||||
BarChart, Bar, AreaChart, Area, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import GridLayout, { WidthProvider } from 'react-grid-layout'
|
||||
import 'react-grid-layout/css/styles.css'
|
||||
import 'react-resizable/css/styles.css'
|
||||
import { startOfWeek, format, subWeeks, eachWeekOfInterval, subDays, addDays } from 'date-fns'
|
||||
import api from '../utils/api'
|
||||
import StatCard from '../components/ui/StatCard'
|
||||
import ActivityMap from '../components/activity/ActivityMap'
|
||||
import {
|
||||
formatDuration, formatDistance, formatPace, formatHeartRate, formatElevation,
|
||||
formatDuration, formatDistance, formatHeartRate, formatElevation,
|
||||
formatDate, sportIcon, formatSleep,
|
||||
} from '../utils/format'
|
||||
import { BB_INFERRED_COLOR, BB_INFERRED_LABEL, bbLevelColor, inferBBType } from '../utils/bodyBattery'
|
||||
|
||||
const Grid = WidthProvider(GridLayout)
|
||||
|
||||
const MEDALS = { 1: '🥇', 2: '🥈', 3: '🥉' }
|
||||
|
||||
const HRV_PALETTE = {
|
||||
balanced: 'text-green-400 bg-green-400/10 border-green-400/30',
|
||||
unbalanced: 'text-orange-400 bg-orange-400/10 border-orange-400/30',
|
||||
low: 'text-red-400 bg-red-400/10 border-red-400/30',
|
||||
poor: 'text-red-400 bg-red-400/10 border-red-400/30',
|
||||
}
|
||||
|
||||
// Widget registry + default grid positions (12-col grid). minW/minH keep widgets usable.
|
||||
const WIDGETS = [
|
||||
{ id: 'stats', default: { x: 0, y: 0, w: 12, h: 1 }, minW: 4, minH: 1 },
|
||||
{ id: 'weekly', default: { x: 0, y: 1, w: 6, h: 3 }, minW: 4, minH: 2 },
|
||||
{ id: 'bodyBattery', default: { x: 6, y: 1, w: 3, h: 3 }, minW: 3, minH: 2 },
|
||||
{ id: 'vo2max', default: { x: 9, y: 1, w: 3, h: 3 }, minW: 2, minH: 2 },
|
||||
{ id: 'sleep', default: { x: 0, y: 4, w: 5, h: 3 }, minW: 3, minH: 2 },
|
||||
{ id: 'hrv', default: { x: 5, y: 4, w: 3, h: 2 }, minW: 2, minH: 2 },
|
||||
{ id: 'featured', default: { x: 0, y: 7, w: 8, h: 5 }, minW: 4, minH: 3 },
|
||||
{ id: 'recent', default: { x: 8, y: 7, w: 4, h: 5 }, minW: 3, minH: 3 },
|
||||
{ id: 'prs', default: { x: 0, y: 12, w: 12, h: 2 }, minW: 4, minH: 2 },
|
||||
]
|
||||
|
||||
// Merge a saved layout with the registry: keep saved positions for known widgets,
|
||||
// fall back to defaults for any widget the saved layout doesn't include (e.g. new ones).
|
||||
function buildLayout(saved) {
|
||||
const byId = Object.fromEntries((saved || []).map(l => [l.i, l]))
|
||||
return WIDGETS.map(w => {
|
||||
const s = byId[w.id]
|
||||
const pos = s ? { x: s.x, y: s.y, w: s.w, h: s.h } : w.default
|
||||
return { i: w.id, ...pos, minW: w.minW, minH: w.minH }
|
||||
})
|
||||
}
|
||||
|
||||
// ── Widgets ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function Card({ title, viewHref, children, className = '' }) {
|
||||
return (
|
||||
<div className={`bg-gray-900 rounded-xl border border-gray-800 p-4 h-full flex flex-col ${className}`}>
|
||||
{title && (
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-medium text-gray-300">{title}</h3>
|
||||
{viewHref && <Link to={viewHref} className="text-xs text-blue-400 hover:underline">View →</Link>}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-h-0">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Stat({ label, value }) {
|
||||
return (
|
||||
<div className="bg-gray-900 px-4 py-3 flex flex-col justify-center">
|
||||
@@ -23,11 +77,22 @@ function Stat({ label, value }) {
|
||||
)
|
||||
}
|
||||
|
||||
function StatsRow({ health, ytdStats }) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-5 gap-3 h-full">
|
||||
<StatCard label="Steps today" value={health.steps != null ? health.steps.toLocaleString() : '--'} accent="green" sub="goal 10,000" />
|
||||
<StatCard label="Running this year" value={ytdStats ? `${ytdStats.running_km.toFixed(0)} km` : '--'} accent="blue" />
|
||||
<StatCard label="Cycling this year" value={ytdStats ? `${ytdStats.cycling_km.toFixed(0)} km` : '--'} accent="orange" />
|
||||
<StatCard label="Resting HR" value={formatHeartRate(health.resting_hr)} accent="red" />
|
||||
<StatCard label="Sleep" value={formatSleep(health.sleep_duration_s)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MiniBodyBattery({ bb, hires, sleepStart, sleepEnd }) {
|
||||
const raw = (hires?.length ? hires : bb?.values || []).map(([ts, level]) => ({ ts, level }))
|
||||
const sleepStartMs = sleepStart ? new Date(sleepStart).getTime() : null
|
||||
const sleepEndMs = sleepEnd ? new Date(sleepEnd).getTime() : null
|
||||
// Same classification the Health page uses, so colours match across views.
|
||||
const data = raw.map((d, i) => ({
|
||||
...d,
|
||||
type: inferBBType(d.ts, d.level, i > 0 ? raw[i - 1].level : null, sleepStartMs, sleepEndMs),
|
||||
@@ -38,11 +103,7 @@ function MiniBodyBattery({ bb, hires, sleepStart, sleepEnd }) {
|
||||
const presentTypes = [...new Set(data.map(d => d.type))]
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4 h-full flex flex-col">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-medium text-gray-300">Body Battery</h3>
|
||||
<Link to="/health" className="text-xs text-blue-400 hover:underline">View →</Link>
|
||||
</div>
|
||||
<Card title="Body Battery" viewHref="/health">
|
||||
<div className="flex items-baseline gap-3 flex-wrap">
|
||||
{peak != null && (
|
||||
<span className="text-3xl font-bold" style={{ color: bbLevelColor(peak) }}>{Math.round(peak)}</span>
|
||||
@@ -53,8 +114,8 @@ function MiniBodyBattery({ bb, hires, sleepStart, sleepEnd }) {
|
||||
</div>
|
||||
{hasGraph ? (
|
||||
<>
|
||||
<div className="mt-3 flex-1">
|
||||
<ResponsiveContainer width="100%" height={70}>
|
||||
<div className="mt-3 flex-1 min-h-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={data} margin={{ top: 2, right: 0, bottom: 0, left: 0 }} barCategoryGap={0}>
|
||||
<YAxis domain={[0, 100]} hide />
|
||||
<Tooltip
|
||||
@@ -81,50 +142,136 @@ function MiniBodyBattery({ bb, hires, sleepStart, sleepEnd }) {
|
||||
) : (
|
||||
<p className="text-xs text-gray-600 mt-3">No body battery data today</p>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function Vo2MaxWidget({ health, recentHealth }) {
|
||||
const series = useMemo(
|
||||
() => [...(recentHealth || [])]
|
||||
.filter(d => d.vo2max != null)
|
||||
.sort((a, b) => new Date(a.date) - new Date(b.date))
|
||||
.map(d => ({ date: d.date, v: d.vo2max })),
|
||||
[recentHealth],
|
||||
)
|
||||
return (
|
||||
<Card title="VO₂ Max" viewHref="/health">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-bold text-blue-400">{health.vo2max != null ? health.vo2max.toFixed(1) : '--'}</span>
|
||||
<span className="text-xs text-gray-500">ml/kg/min</span>
|
||||
</div>
|
||||
{health.fitness_age != null && (
|
||||
<p className="text-xs text-gray-500 mt-0.5">Fitness age {health.fitness_age}</p>
|
||||
)}
|
||||
{series.length >= 2 && (
|
||||
<div className="flex-1 min-h-0 mt-2">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={series} margin={{ top: 4, right: 2, bottom: 0, left: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="grad-dash-vo2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<YAxis domain={['dataMin - 1', 'dataMax + 1']} hide />
|
||||
<Tooltip contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 6, fontSize: 11 }}
|
||||
labelFormatter={d => format(new Date(d), 'MMM d')} formatter={v => [v.toFixed(1), 'VO₂ max']} />
|
||||
<Area type="monotone" dataKey="v" stroke="#3b82f6" strokeWidth={2} fill="url(#grad-dash-vo2)"
|
||||
dot={false} connectNulls isAnimationActive={false} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const SLEEP_STAGES = [
|
||||
{ key: 'sleep_deep_s', label: 'Deep', color: '#3b82f6' },
|
||||
{ key: 'sleep_rem_s', label: 'REM', color: '#8b5cf6' },
|
||||
{ key: 'sleep_light_s', label: 'Light', color: '#60a5fa' },
|
||||
{ key: 'sleep_awake_s', label: 'Awake', color: '#6b7280' },
|
||||
]
|
||||
|
||||
function SleepMini({ health }) {
|
||||
const total = SLEEP_STAGES.reduce((s, st) => s + (health[st.key] || 0), 0)
|
||||
return (
|
||||
<Card title="Sleep" viewHref="/health">
|
||||
<div className="flex items-baseline gap-3 flex-wrap">
|
||||
<span className="text-3xl font-bold text-indigo-300">{formatSleep(health.sleep_duration_s)}</span>
|
||||
{health.sleep_score != null && (
|
||||
<span className="text-sm text-gray-400">score <span className="text-white font-semibold">{Math.round(health.sleep_score)}</span></span>
|
||||
)}
|
||||
</div>
|
||||
{total > 0 ? (
|
||||
<>
|
||||
<div className="flex h-3 rounded-full overflow-hidden gap-0.5 mt-3">
|
||||
{SLEEP_STAGES.map(st => {
|
||||
const pct = ((health[st.key] || 0) / total) * 100
|
||||
if (pct < 0.5) return null
|
||||
return <div key={st.key} style={{ width: `${pct}%`, backgroundColor: st.color }} title={`${st.label}: ${formatSleep(health[st.key])}`} />
|
||||
})}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-3 gap-y-1 mt-2">
|
||||
{SLEEP_STAGES.map(st => (health[st.key] ? (
|
||||
<div key={st.key} className="flex items-center gap-1.5">
|
||||
<div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: st.color }} />
|
||||
<span className="text-xs text-gray-400">{st.label}</span>
|
||||
<span className="text-xs text-white">{formatSleep(health[st.key])}</span>
|
||||
</div>
|
||||
) : null))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-gray-600 mt-3">No sleep stages for last night</p>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function HrvWidget({ health }) {
|
||||
const status = health.hrv_status
|
||||
const cls = status ? (HRV_PALETTE[status.toLowerCase()] || 'text-gray-400 bg-gray-400/10 border-gray-400/30') : null
|
||||
return (
|
||||
<Card title="HRV status" viewHref="/health">
|
||||
<div className="flex flex-col items-start justify-center h-full gap-2">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-bold text-violet-300">{health.hrv_nightly_avg != null ? Math.round(health.hrv_nightly_avg) : '--'}</span>
|
||||
<span className="text-xs text-gray-500">ms</span>
|
||||
</div>
|
||||
{status
|
||||
? <span className={`text-xs px-2 py-0.5 rounded-full border ${cls}`}>{status}</span>
|
||||
: <span className="text-xs text-gray-600">No HRV status</span>}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function WeeklyChart({ activities }) {
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (!activities?.length) return (
|
||||
<div className="flex items-center justify-center h-36 text-gray-600 text-sm">No activities yet</div>
|
||||
<div className="flex items-center justify-center h-full text-gray-600 text-sm">No activities yet</div>
|
||||
)
|
||||
|
||||
// Build last 8 weeks in chronological order
|
||||
const now = new Date()
|
||||
const weeks = eachWeekOfInterval({
|
||||
start: subWeeks(startOfWeek(now), 7),
|
||||
end: startOfWeek(now),
|
||||
})
|
||||
|
||||
const weeks = eachWeekOfInterval({ start: subWeeks(startOfWeek(now), 7), end: startOfWeek(now) })
|
||||
const data = weeks.map(weekStart => {
|
||||
const weekKey = format(weekStart, 'MMM d')
|
||||
const weekEnd = addDays(weekStart, 7)
|
||||
const km = activities
|
||||
.filter(a => {
|
||||
const t = new Date(a.start_time)
|
||||
return t >= weekStart && t < weekEnd
|
||||
})
|
||||
.filter(a => { const t = new Date(a.start_time); return t >= weekStart && t < weekEnd })
|
||||
.reduce((s, a) => s + (a.distance_m || 0) / 1000, 0)
|
||||
return {
|
||||
week: weekKey,
|
||||
week: format(weekStart, 'MMM d'),
|
||||
km: parseFloat(km.toFixed(2)),
|
||||
weekStartISO: format(weekStart, 'yyyy-MM-dd'),
|
||||
weekEndISO: format(weekEnd, 'yyyy-MM-dd'),
|
||||
}
|
||||
})
|
||||
|
||||
const handleBarClick = (entry) => {
|
||||
if (entry?.activePayload?.[0]?.payload) {
|
||||
const { weekStartISO, weekEndISO } = entry.activePayload[0].payload
|
||||
navigate(`/activities?from=${weekStartISO}&to=${weekEndISO}`)
|
||||
}
|
||||
const p = entry?.activePayload?.[0]?.payload
|
||||
if (p) navigate(`/activities?from=${p.weekStartISO}&to=${p.weekEndISO}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={140}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}
|
||||
onClick={handleBarClick} style={{ cursor: 'pointer' }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
|
||||
@@ -132,14 +279,126 @@ function WeeklyChart({ activities }) {
|
||||
<YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
|
||||
tickFormatter={v => `${v.toFixed(0)}`} />
|
||||
<Tooltip contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
|
||||
formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']}
|
||||
cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
|
||||
formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']} cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
|
||||
<Bar dataKey="km" fill="#3b82f6" radius={[3, 3, 0, 0]} isAnimationActive={false} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
}
|
||||
|
||||
function FeaturedActivity({ activity, segments }) {
|
||||
if (!activity) return (
|
||||
<Card title="Latest activity"><div className="flex items-center justify-center h-full text-gray-600 text-sm">No activities yet</div></Card>
|
||||
)
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden h-full flex flex-col">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-800">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-xl">{sportIcon(activity.sport_type)}</span>
|
||||
<div className="min-w-0">
|
||||
<Link to={`/activities/${activity.id}`} className="text-sm font-semibold text-white hover:text-blue-400 transition-colors truncate block">
|
||||
{activity.name}
|
||||
</Link>
|
||||
<p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link to={`/activities/${activity.id}`} className="text-xs text-blue-400 hover:underline flex-shrink-0">Open →</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 flex-1 min-h-0">
|
||||
<div className="lg:col-span-2 min-h-[180px] bg-gray-950">
|
||||
{activity.polyline
|
||||
? <ActivityMap polyline={activity.polyline} sportType={activity.sport_type} colorMode="solid" />
|
||||
: <div className="flex items-center justify-center h-full text-gray-600 text-sm">No GPS track</div>}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-1 gap-px bg-gray-800/50 content-start">
|
||||
<Stat label="Distance" value={formatDistance(activity.distance_m)} />
|
||||
<Stat label="Elevation ↑" value={formatElevation(activity.elevation_gain_m)} />
|
||||
<Stat label="Moving time" value={formatDuration(activity.moving_time_s ?? activity.duration_s)} />
|
||||
<Stat label="Calories" value={activity.calories ? `${Math.round(activity.calories)} kcal` : '--'} />
|
||||
</div>
|
||||
</div>
|
||||
{segments?.length > 0 && (
|
||||
<div className="border-t border-gray-800 px-4 py-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-xs font-medium text-gray-400 uppercase tracking-wide">Segments</h4>
|
||||
<Link to={`/activities/${activity.id}`} className="text-xs text-blue-400 hover:underline">Details →</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5">
|
||||
{segments.map(seg => {
|
||||
const isPodium = seg.rank && seg.rank <= 3
|
||||
const delta = seg.best_s != null ? seg.duration_s - seg.best_s : null
|
||||
return (
|
||||
<div key={seg.segment_id} className="flex items-center gap-2 text-sm">
|
||||
<span className="flex-1 text-gray-300 text-xs truncate">{seg.name}</span>
|
||||
<span className={`font-mono text-xs ${isPodium ? 'text-yellow-400 font-semibold' : 'text-gray-200'}`}>
|
||||
{formatDuration(seg.duration_s)}
|
||||
</span>
|
||||
<span className="w-8 text-right text-xs">
|
||||
{isPodium
|
||||
? <span title={`#${seg.rank} of ${seg.effort_count}`}>{MEDALS[seg.rank]}</span>
|
||||
: delta != null
|
||||
? <span className="text-red-400 font-mono">+{formatDuration(delta)}</span>
|
||||
: <span className="text-gray-700">--</span>}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RecentActivities({ activities }) {
|
||||
return (
|
||||
<Card title="Recent activities" viewHref="/activities">
|
||||
<div className="space-y-2 overflow-auto h-full">
|
||||
{activities?.slice(0, 6).map(activity => (
|
||||
<Link key={activity.id} to={`/activities/${activity.id}`}
|
||||
className="flex items-center gap-3 py-2 border-b border-gray-800/50 hover:bg-gray-800/30 rounded-lg px-2 -mx-2 transition-colors">
|
||||
<span className="text-lg">{sportIcon(activity.sport_type)}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">{activity.name}</p>
|
||||
<p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
|
||||
</div>
|
||||
<div className="text-right text-sm">
|
||||
<p className="text-gray-200">{formatDistance(activity.distance_m)}</p>
|
||||
<p className="text-xs text-red-400">{formatHeartRate(activity.avg_heart_rate)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
{!activities?.length && (
|
||||
<p className="text-gray-600 text-sm text-center py-8">
|
||||
No activities yet — <Link to="/upload" className="text-blue-400 hover:underline">import some data</Link>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function RunningPRs({ records }) {
|
||||
return (
|
||||
<Card title="Running PRs" viewHref="/records">
|
||||
{records?.length > 0 ? (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
||||
{records.slice(0, 5).map(rec => (
|
||||
<div key={rec.id} className="bg-gray-800/60 rounded-lg p-3 text-center">
|
||||
<p className="text-xs text-gray-500 mb-1">{rec.distance_label}</p>
|
||||
<p className="font-mono font-semibold text-yellow-400">{formatDuration(rec.duration_s)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-600 text-sm">No running records yet</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data: recentActivities } = useQuery({
|
||||
queryKey: ['activities-recent'],
|
||||
@@ -149,9 +408,7 @@ export default function DashboardPage() {
|
||||
const { data: allActivities } = useQuery({
|
||||
queryKey: ['activities-all-chart'],
|
||||
queryFn: () =>
|
||||
api.get('/activities/', {
|
||||
params: { per_page: 100, from_date: subDays(new Date(), 60).toISOString() },
|
||||
}).then(r => r.data),
|
||||
api.get('/activities/', { params: { per_page: 100, from_date: subDays(new Date(), 60).toISOString() } }).then(r => r.data),
|
||||
})
|
||||
|
||||
const { data: recentHealth } = useQuery({
|
||||
@@ -159,24 +416,32 @@ export default function DashboardPage() {
|
||||
queryFn: () => api.get('/health-metrics/', { params: { limit: 365 } }).then(r => r.data),
|
||||
})
|
||||
|
||||
// Latest available (non-null) value per metric — Garmin updates some fields
|
||||
// less often than daily, so "today" can be sparse.
|
||||
const { data: profile } = useQuery({
|
||||
queryKey: ['profile'],
|
||||
queryFn: () => api.get('/profile/').then(r => r.data),
|
||||
})
|
||||
|
||||
const health = useMemo(() => {
|
||||
const rows = [...(recentHealth || [])].sort((a, b) => new Date(b.date) - new Date(a.date))
|
||||
const pick = f => rows.find(d => d[f] != null)?.[f] ?? null
|
||||
const latest = rows[0] || {}
|
||||
return {
|
||||
date: rows[0]?.date ? rows[0].date.slice(0, 10) : null, // intraday endpoint wants YYYY-MM-DD
|
||||
date: rows[0]?.date ? rows[0].date.slice(0, 10) : null,
|
||||
resting_hr: pick('resting_hr'),
|
||||
sleep_duration_s: pick('sleep_duration_s'),
|
||||
// Sleep window must come from the SAME day as `date` (the day whose intraday
|
||||
// body battery we chart), not the latest non-null — otherwise the sleep
|
||||
// shading is aligned to a different night. Null here just means "no shading".
|
||||
sleep_start: rows[0]?.sleep_start ?? null,
|
||||
sleep_end: rows[0]?.sleep_end ?? null,
|
||||
hrv_nightly_avg: pick('hrv_nightly_avg'),
|
||||
sleep_start: latest.sleep_start ?? null,
|
||||
sleep_end: latest.sleep_end ?? null,
|
||||
// Sleep stages + score for the latest night (same row as sleep_start).
|
||||
sleep_deep_s: latest.sleep_deep_s ?? null,
|
||||
sleep_rem_s: latest.sleep_rem_s ?? null,
|
||||
sleep_light_s: latest.sleep_light_s ?? null,
|
||||
sleep_awake_s: latest.sleep_awake_s ?? null,
|
||||
sleep_score: pick('sleep_score'),
|
||||
hrv_nightly_avg: pick('hrv_nightly_avg'),
|
||||
hrv_status: pick('hrv_status'),
|
||||
steps: pick('steps'),
|
||||
vo2max: pick('vo2max'),
|
||||
fitness_age: pick('fitness_age'),
|
||||
avg_stress: pick('avg_stress'),
|
||||
}
|
||||
}, [recentHealth])
|
||||
@@ -198,170 +463,106 @@ export default function DashboardPage() {
|
||||
})
|
||||
|
||||
const featured = recentActivities?.[0]
|
||||
|
||||
const { data: featuredSegments } = useQuery({
|
||||
queryKey: ['activity-segments', featured?.id],
|
||||
queryFn: () => api.get(`/segments/by-activity/${featured.id}`).then(r => r.data),
|
||||
enabled: !!featured?.id,
|
||||
})
|
||||
|
||||
// ── Layout state ──────────────────────────────────────────────────────────
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
const [layout, setLayout] = useState(() => buildLayout(null))
|
||||
const saveTimer = useRef(null)
|
||||
const loadedRef = useRef(false)
|
||||
|
||||
// Apply the saved layout once the profile loads.
|
||||
useEffect(() => {
|
||||
if (profile && !loadedRef.current) {
|
||||
loadedRef.current = true
|
||||
setLayout(buildLayout(profile.dashboard_layout))
|
||||
}
|
||||
}, [profile])
|
||||
|
||||
const saveLayout = useMutation({
|
||||
mutationFn: (lay) =>
|
||||
api.put('/profile/dashboard-layout', { layout: lay.map(({ i, x, y, w, h }) => ({ i, x, y, w, h })) }),
|
||||
})
|
||||
|
||||
const handleLayoutChange = (next) => {
|
||||
setLayout(next)
|
||||
if (editMode) {
|
||||
clearTimeout(saveTimer.current)
|
||||
saveTimer.current = setTimeout(() => saveLayout.mutate(next), 700)
|
||||
}
|
||||
}
|
||||
|
||||
const finishEditing = () => {
|
||||
clearTimeout(saveTimer.current)
|
||||
saveLayout.mutate(layout)
|
||||
setEditMode(false)
|
||||
}
|
||||
|
||||
const resetLayout = () => {
|
||||
const def = buildLayout(null)
|
||||
setLayout(def)
|
||||
saveLayout.mutate(def)
|
||||
}
|
||||
|
||||
const WIDGET_CONTENT = {
|
||||
stats: <StatsRow health={health} ytdStats={ytdStats} />,
|
||||
weekly: <Card title="Weekly distance (km)"><WeeklyChart activities={allActivities} /></Card>,
|
||||
bodyBattery: <MiniBodyBattery bb={intraday?.body_battery} hires={intraday?.body_battery_hires} sleepStart={health.sleep_start} sleepEnd={health.sleep_end} />,
|
||||
vo2max: <Vo2MaxWidget health={health} recentHealth={recentHealth} />,
|
||||
sleep: <SleepMini health={health} />,
|
||||
hrv: <HrvWidget health={health} />,
|
||||
featured: <FeaturedActivity activity={featured} segments={featuredSegments} />,
|
||||
recent: <RecentActivities activities={recentActivities} />,
|
||||
prs: <RunningPRs records={records} />,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-2xl font-bold text-white">Dashboard</h1>
|
||||
<Link to="/upload" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">+ Import data</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
|
||||
<StatCard label="Steps today" value={health.steps != null ? health.steps.toLocaleString() : '--'} accent="green" sub="goal 10,000" />
|
||||
<StatCard label="Running this year" value={ytdStats ? `${ytdStats.running_km.toFixed(0)} km` : '--'} accent="blue" />
|
||||
<StatCard label="Cycling this year" value={ytdStats ? `${ytdStats.cycling_km.toFixed(0)} km` : '--'} accent="orange" />
|
||||
<StatCard label="Resting HR" value={formatHeartRate(health.resting_hr)} accent="red" />
|
||||
<StatCard label="Sleep" value={formatSleep(health.sleep_duration_s)} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<div className="lg:col-span-2 bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Weekly distance (km)</h3>
|
||||
<WeeklyChart activities={allActivities} />
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
<MiniBodyBattery bb={intraday?.body_battery} hires={intraday?.body_battery_hires}
|
||||
sleepStart={health.sleep_start} sleepEnd={health.sleep_end} />
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1 bg-gray-900 rounded-xl border border-gray-800 p-4 space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-300">Health today</h3>
|
||||
{health.date ? (
|
||||
<>
|
||||
{[
|
||||
['HRV', health.hrv_nightly_avg ? `${Math.round(health.hrv_nightly_avg)} ms` : '--'],
|
||||
['Sleep score', health.sleep_score ? Math.round(health.sleep_score) : '--'],
|
||||
['Steps', health.steps?.toLocaleString() ?? '--'],
|
||||
['VO2 Max', health.vo2max ? health.vo2max.toFixed(1) : '--'],
|
||||
['Stress', health.avg_stress ? Math.round(health.avg_stress) : '--'],
|
||||
].map(([label, val]) => (
|
||||
<div key={label} className="flex justify-between text-sm">
|
||||
<span className="text-gray-500">{label}</span>
|
||||
<span className="text-white">{val}</span>
|
||||
</div>
|
||||
))}
|
||||
<Link to="/health" className="block text-xs text-blue-400 hover:underline mt-2">View full health dashboard →</Link>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-gray-600">No health data. Import a Garmin export.</p>
|
||||
<div className="flex items-center gap-3">
|
||||
{editMode && (
|
||||
<button onClick={resetLayout} className="text-xs text-gray-400 hover:text-white transition-colors">Reset layout</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => (editMode ? finishEditing() : setEditMode(true))}
|
||||
className={`text-sm font-medium px-3 py-1.5 rounded-lg transition-colors ${
|
||||
editMode ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-gray-800 hover:bg-gray-700 text-gray-200'
|
||||
}`}>
|
||||
{editMode ? '✓ Done' : '✎ Edit dashboard'}
|
||||
</button>
|
||||
<Link to="/upload" className="text-sm text-blue-400 hover:text-blue-300 transition-colors">+ Import data</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Featured most-recent activity */}
|
||||
{featured && (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-800">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-xl">{sportIcon(featured.sport_type)}</span>
|
||||
<div className="min-w-0">
|
||||
<Link to={`/activities/${featured.id}`} className="text-sm font-semibold text-white hover:text-blue-400 transition-colors truncate block">
|
||||
{featured.name}
|
||||
</Link>
|
||||
<p className="text-xs text-gray-500">{formatDate(featured.start_time)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link to={`/activities/${featured.id}`} className="text-xs text-blue-400 hover:underline flex-shrink-0">Open →</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3">
|
||||
<div className="lg:col-span-2 h-64 bg-gray-950">
|
||||
{featured.polyline
|
||||
? <ActivityMap polyline={featured.polyline} sportType={featured.sport_type} colorMode="solid" />
|
||||
: <div className="flex items-center justify-center h-full text-gray-600 text-sm">No GPS track</div>}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-1 gap-px bg-gray-800/50">
|
||||
<Stat label="Distance" value={formatDistance(featured.distance_m)} />
|
||||
<Stat label="Elevation ↑" value={formatElevation(featured.elevation_gain_m)} />
|
||||
<Stat label="Moving time" value={formatDuration(featured.duration_s)} />
|
||||
<Stat label="Calories" value={featured.calories ? `${Math.round(featured.calories)} kcal` : '--'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{featuredSegments?.length > 0 && (
|
||||
<div className="border-t border-gray-800 px-4 py-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-xs font-medium text-gray-400 uppercase tracking-wide">Segments</h4>
|
||||
<Link to={`/activities/${featured.id}`} className="text-xs text-blue-400 hover:underline">Details →</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1.5">
|
||||
{featuredSegments.map(seg => {
|
||||
const isPodium = seg.rank && seg.rank <= 3
|
||||
const delta = seg.best_s != null ? seg.duration_s - seg.best_s : null
|
||||
return (
|
||||
<div key={seg.segment_id} className="flex items-center gap-2 text-sm">
|
||||
<span className="flex-1 text-gray-300 text-xs truncate">{seg.name}</span>
|
||||
<span className={`font-mono text-xs ${isPodium ? 'text-yellow-400 font-semibold' : 'text-gray-200'}`}>
|
||||
{formatDuration(seg.duration_s)}
|
||||
</span>
|
||||
<span className="w-8 text-right text-xs">
|
||||
{isPodium
|
||||
? <span title={`#${seg.rank} of ${seg.effort_count}`}>{MEDALS[seg.rank]}</span>
|
||||
: delta != null
|
||||
? <span className="text-red-400 font-mono">+{formatDuration(delta)}</span>
|
||||
: <span className="text-gray-700">--</span>}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{editMode && (
|
||||
<p className="text-xs text-gray-500 mb-3">Drag widgets to move them, or drag a corner to resize. Changes save automatically.</p>
|
||||
)}
|
||||
|
||||
{/* Recent activities */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-medium text-gray-300">Recent activities</h3>
|
||||
<Link to="/activities" className="text-xs text-blue-400 hover:underline">View all →</Link>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{recentActivities?.slice(0, 5).map(activity => (
|
||||
<Link key={activity.id} to={`/activities/${activity.id}`}
|
||||
className="flex items-center gap-3 py-2 border-b border-gray-800/50 hover:bg-gray-800/30 rounded-lg px-2 -mx-2 transition-colors">
|
||||
<span className="text-lg">{sportIcon(activity.sport_type)}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">{activity.name}</p>
|
||||
<p className="text-xs text-gray-500">{formatDate(activity.start_time)}</p>
|
||||
</div>
|
||||
<div className="flex gap-4 text-sm text-right">
|
||||
<div><p className="text-gray-200">{formatDistance(activity.distance_m)}</p><p className="text-xs text-gray-600">dist</p></div>
|
||||
<div><p className="text-gray-200">{formatDuration(activity.duration_s)}</p><p className="text-xs text-gray-600">time</p></div>
|
||||
<div><p className="text-red-400">{formatHeartRate(activity.avg_heart_rate)}</p><p className="text-xs text-gray-600">HR</p></div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
{!recentActivities?.length && (
|
||||
<p className="text-gray-600 text-sm text-center py-8">
|
||||
No activities yet — <Link to="/upload" className="text-blue-400 hover:underline">import some data</Link>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{records?.length > 0 && (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-medium text-gray-300">Running PRs</h3>
|
||||
<Link to="/records" className="text-xs text-blue-400 hover:underline">View all →</Link>
|
||||
<Grid
|
||||
className="layout"
|
||||
layout={layout}
|
||||
cols={12}
|
||||
rowHeight={80}
|
||||
margin={[16, 16]}
|
||||
isDraggable={editMode}
|
||||
isResizable={editMode}
|
||||
onLayoutChange={handleLayoutChange}
|
||||
compactType="vertical"
|
||||
>
|
||||
{WIDGETS.map(w => (
|
||||
<div key={w.id}
|
||||
className={`rounded-xl ${editMode ? 'ring-2 ring-blue-500/40 cursor-move' : ''}`}>
|
||||
<div className={`h-full ${editMode ? 'pointer-events-none select-none' : ''}`}>
|
||||
{WIDGET_CONTENT[w.id]}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
|
||||
{records.slice(0, 5).map(rec => (
|
||||
<div key={rec.id} className="bg-gray-800/60 rounded-lg p-3 text-center">
|
||||
<p className="text-xs text-gray-500 mb-1">{rec.distance_label}</p>
|
||||
<p className="font-mono font-semibold text-yellow-400">{formatDuration(rec.duration_s)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useQuery, keepPreviousData } from '@tanstack/react-query'
|
||||
import {
|
||||
AreaChart, Area, BarChart, Bar, ReferenceLine, ReferenceArea,
|
||||
AreaChart, Area, ComposedChart, Line, BarChart, Bar, ReferenceLine, ReferenceArea,
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell,
|
||||
} from 'recharts'
|
||||
import { format, subDays, differenceInCalendarDays, parseISO } from 'date-fns'
|
||||
@@ -651,7 +651,7 @@ function DailySnapshot({ day, snapshotWeight, avg30, intradayHr, bodyBattery, bb
|
||||
|
||||
// Highlight problem days on a trend line by colouring the dot from a status field
|
||||
// (e.g. HRV status): orange = unbalanced, red = low/poor. Other days get no dot.
|
||||
const STATUS_DOT_COLORS = { unbalanced: '#f97316', low: '#ef4444', poor: '#ef4444' }
|
||||
const STATUS_DOT_COLORS = { balanced: '#22c55e', unbalanced: '#f97316', low: '#ef4444', poor: '#ef4444' }
|
||||
const statusDot = (statusKey) => (props) => {
|
||||
const { cx, cy, payload } = props
|
||||
const color = STATUS_DOT_COLORS[String(payload?.[statusKey] || '').toLowerCase()]
|
||||
@@ -666,7 +666,7 @@ function MetricChart({ data, dataKey, color, formatter, height = 140, selectedDa
|
||||
)
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={height}>
|
||||
<AreaChart
|
||||
<ComposedChart
|
||||
data={data}
|
||||
margin={{ top: 4, right: 4, bottom: 4, left: 0 }}
|
||||
style={{ cursor: onDayClick ? 'pointer' : 'default' }}
|
||||
@@ -694,11 +694,15 @@ function MetricChart({ data, dataKey, color, formatter, height = 140, selectedDa
|
||||
{(referenceLines || []).map((rl, i) => (
|
||||
<ReferenceLine key={i} {...rl} />
|
||||
))}
|
||||
{/* Dashed line bridging gaps (no data). Drawn first; the solid area below
|
||||
covers it wherever real data exists, leaving only gaps shown dashed. */}
|
||||
<Line type="monotone" dataKey={dataKey} stroke={color} strokeWidth={1.5}
|
||||
strokeDasharray="4 4" dot={false} connectNulls isAnimationActive={false} legendType="none" />
|
||||
<Area type="monotone" dataKey={dataKey} stroke={color} strokeWidth={2}
|
||||
fill={`url(#grad-${dataKey})`}
|
||||
dot={statusDotKey ? statusDot(statusDotKey) : (showDots ? { fill: color, r: 3, strokeWidth: 0 } : false)}
|
||||
connectNulls={connectNulls} isAnimationActive={false} />
|
||||
</AreaChart>
|
||||
connectNulls={false} isAnimationActive={false} />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
}
|
||||
@@ -1030,6 +1034,7 @@ export default function HealthPage() {
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium text-gray-300">HRV (nightly avg)</h3>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full" style={{ background: '#22c55e' }} /> Balanced</span>
|
||||
<span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full" style={{ background: '#f97316' }} /> Unbalanced</span>
|
||||
<span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full" style={{ background: '#ef4444' }} /> Low</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user