122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
/**
|
|
* 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>
|
|
)
|
|
}
|