Serverpuls: Admin-Seite mit Verlauf und Warnungen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/serverpuls/Sparkline.jsx

@@ -0,0 +1,31 @@
+// Winzige Inline-SVG-Minikurve. points: Zahlen oder {v}/{bytes}; null-Werte erzeugen Luecken.
+export default function Sparkline({ points = [], width = 120, height = 32, color = 'var(--accent)' }) {
+  const vals = points.map((p) =>
+    p === null || p === undefined ? null : typeof p === 'number' ? p : (p.v ?? p.bytes ?? null)
+  )
+  const nums = vals.filter((v) => v !== null)
+  if (nums.length < 2) {
+    return <svg className="sp-spark" width={width} height={height} aria-hidden="true" />
+  }
+  const min = Math.min(...nums)
+  const max = Math.max(...nums)
+  const span = max - min || 1
+  const step = width / (vals.length - 1)
+  let d = ''
+  let pen = false
+  vals.forEach((v, i) => {
+    if (v === null) {
+      pen = false
+      return
+    }
+    const x = (i * step).toFixed(1)
+    const y = (height - 2 - ((v - min) / span) * (height - 4)).toFixed(1)
+    d += `${pen ? 'L' : 'M'}${x} ${y} `
+    pen = true
+  })
+  return (
+    <svg className="sp-spark" width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
+      <path d={d} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
+    </svg>
+  )
+}