FEAT-6: Gesundheit/Gewicht/Fotos tab components + hand-rolled SVG LineChart (no chart dependency)

2026-06-06 00:27:09 +02:00
parent 1bf94c2040
commit d7be812ad0
5 changed files with 613 additions and 0 deletions
--- a/gerbil-manager-web/src/components/LineChart.tsx
+++ b/gerbil-manager-web/src/components/LineChart.tsx
@@ -0,0 +1,121 @@
+/**
+ * FEAT-6: Schlichtes, responsives SVG-Liniendiagramm (eine Serie) —
+ * bewusst OHNE Chart-Bibliothek (god-Entscheidung für v1).
+ * X-Achse: Datum (TT.MM.JJ), Y-Achse: Wert mit Einheiten-Suffix.
+ */
+
+export interface ChartPoint {
+  /** ISO-Datum "YYYY-MM-DD". */
+  date: string
+  value: number
+}
+
+interface Props {
+  points: ChartPoint[]
+  /** Einheiten-Suffix der Y-Achse, z. B. "g". */
+  unit: string
+  /** Zugänglicher Titel des Diagramms. */
+  title: string
+}
+
+const W = 600
+const H = 260
+const PAD = { top: 16, right: 16, bottom: 36, left: 48 }
+
+function shortDate(iso: string): string {
+  const [y, m, d] = iso.split('-')
+  return y && m && d ? `${d}.${m}.${y.slice(2)}` : iso
+}
+
+export default function LineChart({ points, unit, title }: Props) {
+  // Aufsteigend nach Datum; mindestens 2 Punkte werden vom Aufrufer garantiert.
+  const sorted = [...points].sort((a, b) => a.date.localeCompare(b.date))
+  const xs = sorted.map((p) => Date.parse(p.date))
+  const ys = sorted.map((p) => p.value)
+
+  const xMin = Math.min(...xs)
+  const xMax = Math.max(...xs)
+  const yLo = Math.min(...ys)
+  const yHi = Math.max(...ys)
+  // Y-Skala mit Luft nach oben/unten, auf ganze Werte gerundet.
+  const yPad = Math.max(1, Math.round((yHi - yLo) * 0.15))
+  const yMin = Math.max(0, yLo - yPad)
+  const yMax = yHi + yPad
+
+  const x = (t: number) =>
+    xMax === xMin
+      ? (PAD.left + (W - PAD.right)) / 2
+      : PAD.left + ((t - xMin) / (xMax - xMin)) * (W - PAD.left - PAD.right)
+  const y = (v: number) => H - PAD.bottom - ((v - yMin) / (yMax - yMin)) * (H - PAD.top - PAD.bottom)
+
+  const path = sorted
+    .map((p, i) => `${i === 0 ? 'M' : 'L'}${x(Date.parse(p.date)).toFixed(1)},${y(p.value).toFixed(1)}`)
+    .join(' ')
+
+  const yTicks = [yMin, Math.round((yMin + yMax) / 2), yMax]
+  // X-Ticks: erstes, mittleres und letztes Datum (dedupliziert).
+  const xTickPoints = [...new Set([0, Math.floor((sorted.length - 1) / 2), sorted.length - 1])].map(
+    (i) => sorted[i],
+  )
+
+  return (
+    <svg
+      className="line-chart"
+      viewBox={`0 0 ${W} ${H}`}
+      role="img"
+      aria-label={title}
+      preserveAspectRatio="xMidYMid meet"
+    >
+      {/* Achsen */}
+      <line x1={PAD.left} y1={PAD.top} x2={PAD.left} y2={H - PAD.bottom} className="line-chart__axis" />
+      <line
+        x1={PAD.left}
+        y1={H - PAD.bottom}
+        x2={W - PAD.right}
+        y2={H - PAD.bottom}
+        className="line-chart__axis"
+      />
+
+      {/* Y-Beschriftung + Hilfslinien */}
+      {yTicks.map((v) => (
+        <g key={v}>
+          <line
+            x1={PAD.left}
+            y1={y(v)}
+            x2={W - PAD.right}
+            y2={y(v)}
+            className="line-chart__grid"
+          />
+          <text x={PAD.left - 6} y={y(v) + 4} textAnchor="end" className="line-chart__label">
+            {v} {unit}
+          </text>
+        </g>
+      ))}
+
+      {/* X-Beschriftung */}
+      {xTickPoints.map((p) => (
+        <text
+          key={p.date}
+          x={x(Date.parse(p.date))}
+          y={H - PAD.bottom + 18}
+          textAnchor="middle"
+          className="line-chart__label"
+        >
+          {shortDate(p.date)}
+        </text>
+      ))}
+
+      {/* Serie */}
+      <path d={path} className="line-chart__line" fill="none" />
+      {sorted.map((p) => (
+        <circle
+          key={`${p.date}-${p.value}`}
+          cx={x(Date.parse(p.date))}
+          cy={y(p.value)}
+          r={3.5}
+          className="line-chart__dot"
+        />
+      ))}
+    </svg>
+  )
+}