Layout

peakup-frontend/src/components/dashboard/LastWorkoutCard.tsx

@@ -2,6 +2,7 @@ import 'leaflet/dist/leaflet.css'
 import L from 'leaflet'
 import {format} from 'date-fns'
 import {useEffect, useRef, useState} from 'react'
+import {Area, AreaChart, ReferenceLine, ResponsiveContainer, XAxis, YAxis} from 'recharts'
 import type {ActivityMapStreamPointDo} from '@/types/ActivityMapStreamPointDo'
 import type {ActivityStreamPointDo} from '@/types/ActivityStreamPointDo'
 import type {ActivitySummaryDo} from '@/types/ActivitySummaryDo'
@@ -106,6 +107,11 @@ function ActivityRouteMap({
         distance: tsPoint.distanceM ?? 0,
     } : null
 
+    const altitudeData = timeSeries.map((p, i) => ({
+        i,
+        alt: p.fixedAltitudeM ?? p.altitudeM,
+    }))
+
     return (
         <div className="flex flex-col w-full h-full">
             <div className="relative flex-1 min-h-0">
@@ -137,6 +143,45 @@ function ActivityRouteMap({
                     </div>
                 )}
             </div>
+            {altitudeData.some((p) => p.alt !== null) && (
+                <div
+                    className="h-20 shrink-0 cursor-crosshair"
+                    onClick={(e) => {
+                        const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect()
+                        const ratio = (e.clientX - rect.left) / rect.width
+                        setSliderIdx(Math.round(ratio * sliderMax))
+                    }}
+                >
+                    <ResponsiveContainer width="100%" height="100%">
+                        <AreaChart data={altitudeData} margin={{top: 4, right: 0, bottom: 0, left: 0}}>
+                            <defs>
+                                <linearGradient id="altGrad" x1="0" y1="0" x2="1" y2="0">
+                                    <stop offset="0%" stopColor="#ef4444"/>
+                                    <stop offset="100%" stopColor="#f97316"/>
+                                </linearGradient>
+                                <linearGradient id="altAreaGrad" x1="0" y1="0" x2="0" y2="1">
+                                    <stop offset="0%" stopColor="#ef4444" stopOpacity={0.25}/>
+                                    <stop offset="100%" stopColor="#f97316" stopOpacity={0.04}/>
+                                </linearGradient>
+                            </defs>
+                            <XAxis dataKey="i" hide/>
+                            <YAxis hide domain={['auto', 'auto']}/>
+                            <Area
+                                type="monotone"
+                                dataKey="alt"
+                                stroke="url(#altGrad)"
+                                strokeWidth={1.5}
+                                fill="url(#altAreaGrad)"
+                                connectNulls
+                                dot={false}
+                                activeDot={false}
+                                isAnimationActive={false}
+                            />
+                            <ReferenceLine x={boundedIdx} stroke="#f97316" strokeWidth={1.5} strokeOpacity={0.8}/>
+                        </AreaChart>
+                    </ResponsiveContainer>
+                </div>
+            )}
             {sliderMax > 0 && (
                 <div className="px-5 pt-3 pb-4 bg-white border-t border-zinc-100 shrink-0">
                     <div className="flex items-center justify-between mb-2">