Initial Commit

2026-06-06 13:23:33 +01:00
commit 1a0d45dd67
58 changed files with 5268 additions and 0 deletions
@@ -0,0 +1,156 @@
+import { useMemo, useCallback } from 'react'
+import {
+  ComposedChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
+  ResponsiveContainer, ReferenceLine,
+} from 'recharts'
+import { formatDuration, formatPace } from '../../utils/format'
+
+function downsample(points, maxPoints = 500) {
+  if (points.length <= maxPoints) return points
+  const step = Math.ceil(points.length / maxPoints)
+  return points.filter((_, i) => i % step === 0)
+}
+
+function buildChartData(dataPoints, activeMetrics) {
+  return dataPoints
+    .filter(p => p.timestamp)
+    .map(p => {
+      const row = { distance_m: p.distance_m ?? 0 }
+      for (const key of activeMetrics) {
+        row[key] = p[key] ?? null
+      }
+      return row
+    })
+}
+
+const CustomTooltip = ({ active, payload, label, metrics, sportType, onHover }) => {
+  if (!active || !payload?.length) return null
+
+  if (onHover) onHover(label)
+
+  return (
+    <div className="bg-gray-900 border border-gray-700 rounded-lg p-3 text-xs shadow-xl">
+      <p className="text-gray-400 mb-1">{(label / 1000).toFixed(2)} km</p>
+      {payload.map(entry => {
+        const metric = metrics.find(m => m.key === entry.dataKey)
+        if (!metric || entry.value == null) return null
+        let display = entry.value.toFixed(1)
+        if (entry.dataKey === 'speed_ms') display = formatPace(entry.value, sportType)
+        else if (entry.dataKey === 'heart_rate') display = `${Math.round(entry.value)} bpm`
+        else if (entry.dataKey === 'cadence') display = `${Math.round(entry.value)} rpm`
+        else if (entry.dataKey === 'power') display = `${Math.round(entry.value)} W`
+        else if (entry.dataKey === 'temperature_c') display = `${entry.value.toFixed(1)} °C`
+        else if (entry.dataKey === 'altitude_m') display = `${entry.value.toFixed(0)} m`
+        return (
+          <div key={entry.dataKey} className="flex items-center gap-2">
+            <span style={{ color: entry.color }}>●</span>
+            <span className="text-gray-300">{metric.label}:</span>
+            <span className="text-white font-medium">{display}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default function MetricTimeline({ dataPoints, activeMetrics, metrics, onHoverDistance, sportType }) {
+  const chartData = useMemo(() =>
+    downsample(buildChartData(dataPoints, activeMetrics)),
+    [dataPoints, activeMetrics]
+  )
+
+  const activeMetricConfigs = metrics.filter(m => activeMetrics.includes(m.key))
+
+  // Build per-metric Y-axis domains
+  const domains = useMemo(() => {
+    const result = {}
+    for (const m of activeMetricConfigs) {
+      const vals = chartData.map(p => p[m.key]).filter(v => v != null)
+      if (!vals.length) continue
+      const min = Math.min(...vals)
+      const max = Math.max(...vals)
+      const pad = (max - min) * 0.1 || 1
+      result[m.key] = [min - pad, max + pad]
+    }
+    return result
+  }, [chartData, activeMetricConfigs])
+
+  if (!chartData.length) {
+    return (
+      <div className="flex items-center justify-center h-48 text-gray-600 text-sm">
+        No timeline data available
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {activeMetricConfigs.map((metric, idx) => {
+        const domain = domains[metric.key] || ['auto', 'auto']
+        const data = chartData.filter(p => p[metric.key] != null)
+        if (!data.length) return null
+
+        return (
+          <div key={metric.key}>
+            <div className="flex items-center gap-2 mb-1">
+              <span style={{ color: metric.color }} className="text-xs font-medium">
+                {metric.label}
+              </span>
+              {metric.unit && (
+                <span className="text-xs text-gray-600">({metric.unit})</span>
+              )}
+            </div>
+            <ResponsiveContainer width="100%" height={100}>
+              <ComposedChart data={chartData} margin={{ top: 2, right: 8, bottom: 2, left: 8 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
+                <XAxis
+                  dataKey="distance_m"
+                  type="number"
+                  domain={['dataMin', 'dataMax']}
+                  tickFormatter={v => `${(v / 1000).toFixed(1)}`}
+                  tick={{ fontSize: 10, fill: '#6b7280' }}
+                  axisLine={false}
+                  tickLine={false}
+                  hide={idx < activeMetricConfigs.length - 1}
+                />
+                <YAxis
+                  domain={domain}
+                  tick={{ fontSize: 10, fill: '#6b7280' }}
+                  axisLine={false}
+                  tickLine={false}
+                  width={36}
+                  tickFormatter={v => {
+                    if (metric.key === 'speed_ms') return `${(v * 3.6).toFixed(0)}`
+                    return Math.round(v)
+                  }}
+                />
+                <Tooltip
+                  content={
+                    <CustomTooltip
+                      metrics={metrics}
+                      sportType={sportType}
+                      onHover={onHoverDistance}
+                    />
+                  }
+                  isAnimationActive={false}
+                />
+                <Line
+                  type="monotone"
+                  dataKey={metric.key}
+                  stroke={metric.color}
+                  strokeWidth={1.5}
+                  dot={false}
+                  isAnimationActive={false}
+                  connectNulls={false}
+                />
+              </ComposedChart>
+            </ResponsiveContainer>
+          </div>
+        )
+      })}
+
+      {/* Shared distance axis label */}
+      <p className="text-xs text-gray-600 text-center">Distance (km)</p>
+    </div>
+  )
+}