Fix pace sentinel, route map thumbnails, tiled segments, health/dashboard layout
- Pace: FIT 0xFFFF sentinel (65.535 m/s) was stored as avg_speed_ms on every activity and lap; add _sanitize_speed() to parser falling back to dist/dur, plus a startup SQL migration that fixed 120 activities and 688 laps in-place - Records: remove swimming from Distance PRs; Route Records rows are clickable (navigate to activity), View button removed, small SVG route map per row; Segment Records uses same tiled route-card layout as Segments page - Segments: replace route dropdown with responsive tile grid showing SVG map thumbnails; selecting a tile reveals the segment management panel below - RouteMiniMap: new pure-SVG component (no Leaflet) for route thumbnails, decodes polyline and normalises coords into a fixed viewBox - Health: rename "Avg Heart Rate (day)" → "Heart Rate"; weight chart now filters to non-null rows and enables connectNulls + dots for sparse data - Dashboard: 4-col layout at lg breakpoint so Body Battery sits between weekly chart and Health Today; Body Battery card gains a 24-hr sparkline from the values[] already present in the health summary response Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts'
|
||||
import { startOfWeek, format, subWeeks, eachWeekOfInterval, subDays, addDays } from 'date-fns'
|
||||
import api from '../utils/api'
|
||||
import StatCard from '../components/ui/StatCard'
|
||||
@@ -19,10 +19,13 @@ function bbLevelColor(level) {
|
||||
|
||||
function MiniBodyBattery({ bb }) {
|
||||
if (!bb?.end_level && !bb?.charged) return null
|
||||
const { charged, drained, start_level, end_level } = bb
|
||||
const { charged, drained, start_level, end_level, values } = bb
|
||||
const color = bbLevelColor(end_level)
|
||||
const sparkData = Array.isArray(values)
|
||||
? values.map(([ts, level]) => ({ ts, level }))
|
||||
: []
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4 h-full">
|
||||
<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>
|
||||
@@ -41,6 +44,27 @@ function MiniBodyBattery({ bb }) {
|
||||
{start_level != null && end_level != null && (
|
||||
<p className="text-xs text-gray-500 mt-1">{start_level} → {end_level} today</p>
|
||||
)}
|
||||
{sparkData.length >= 2 && (
|
||||
<div className="mt-3">
|
||||
<ResponsiveContainer width="100%" height={60}>
|
||||
<AreaChart data={sparkData} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="bbGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={color} stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area type="monotone" dataKey="level" stroke={color} strokeWidth={1.5}
|
||||
fill="url(#bbGrad)" dot={false} isAnimationActive={false} />
|
||||
<Tooltip
|
||||
contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 6, fontSize: 11 }}
|
||||
labelFormatter={ts => format(new Date(ts), 'HH:mm')}
|
||||
formatter={v => [`${Math.round(v)}`, 'Battery']}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -145,36 +169,37 @@ export default function DashboardPage() {
|
||||
<StatCard label="Sleep" value={formatSleep(latest?.sleep_duration_s)} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<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="flex flex-col gap-4">
|
||||
<div className="lg:col-span-1">
|
||||
<MiniBodyBattery bb={latest?.body_battery} />
|
||||
<div className="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>
|
||||
{latest ? (
|
||||
<>
|
||||
{[
|
||||
['HRV', latest.hrv_nightly_avg ? `${Math.round(latest.hrv_nightly_avg)} ms` : '--'],
|
||||
['Sleep score', latest.sleep_score ? Math.round(latest.sleep_score) : '--'],
|
||||
['Steps', latest.steps?.toLocaleString() ?? '--'],
|
||||
['VO2 Max', latest.vo2max ? latest.vo2max.toFixed(1) : '--'],
|
||||
['Stress', latest.avg_stress ? Math.round(latest.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>
|
||||
</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>
|
||||
{latest ? (
|
||||
<>
|
||||
{[
|
||||
['HRV', latest.hrv_nightly_avg ? `${Math.round(latest.hrv_nightly_avg)} ms` : '--'],
|
||||
['Sleep score', latest.sleep_score ? Math.round(latest.sleep_score) : '--'],
|
||||
['Steps', latest.steps?.toLocaleString() ?? '--'],
|
||||
['VO2 Max', latest.vo2max ? latest.vo2max.toFixed(1) : '--'],
|
||||
['Stress', latest.avg_stress ? Math.round(latest.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>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user