netdiag-app/src/lib/components/StressChart.svelte

<script lang="ts">
  /**
   * Streifendiagramm eines Dauer-/Stresstests — Laufzeit über die Zeit, mit
   * Ausfällen als rote Bänder statt als glatte Linie durch die Lücke. Wird
   * sowohl für den laufenden Test (windowSec gesetzt = rollierendes Fenster)
   * als auch für einen abgeschlossenen Lauf (windowSec leer = ganzer Verlauf)
   * verwendet.
   *
   * Bewusst OHNE Achsenbeschriftung im SVG: `preserveAspectRatio="none"` zieht
   * die Zeichenfläche auf die Container-Breite — bei eingebettetem `<text>`
   * würde das die Schrift verzerren. Kennzahlen (Max, Ø, …) zeigt die
   * aufrufende Seite als eigene Kacheln daneben.
   */
  import type { StressOutage, StressSample } from '$lib/types';

  let {
    samples,
    outages,
    intervalSec = 1,
    windowSec = undefined,
  }: {
    samples: StressSample[];
    outages: StressOutage[];
    intervalSec?: number;
    /** rollierendes Fenster in Sekunden; weglassen = kompletter Verlauf */
    windowSec?: number;
  } = $props();

  const W = 300;
  const H = 90;

  const view = $derived.by(() => {
    const now = Date.now();
    const cutoff = windowSec ? now - windowSec * 1000 : -Infinity;
    const tail = samples.filter((s) => s.ts >= cutoff);
    if (tail.length === 0) return null;

    const t0 = windowSec ? cutoff : tail[0].ts;
    const t1 = windowSec ? now : tail[tail.length - 1].ts;
    const spanMs = Math.max(1000, t1 - t0);

    const receivedVals = tail.map((s) => s.rtt).filter((v): v is number => v != null);
    const maxRtt = Math.max(20, ...receivedVals, 0);

    const x = (ts: number) => ((ts - t0) / spanMs) * W;
    const y = (rtt: number) => H - (rtt / maxRtt) * H;

    // In Segmente teilen: eine Lücke (verlorene Probe oder größere Zeit-
    // Unterbrechung) darf NICHT als gerade Linie überbrückt werden — das
    // würde eine Messung vortäuschen, die es nicht gab.
    const gapMs = Math.max(intervalSec, 1) * 1500;
    const segments: string[] = [];
    let current: string[] = [];
    let prevTs: number | null = null;
    for (const s of tail) {
      if (s.rtt == null) {
        if (current.length > 1) segments.push(current.join(' '));
        current = [];
        prevTs = null;
        continue;
      }
      if (prevTs !== null && s.ts - prevTs > gapMs) {
        if (current.length > 1) segments.push(current.join(' '));
        current = [];
      }
      current.push(`${x(s.ts).toFixed(1)},${y(s.rtt).toFixed(1)}`);
      prevTs = s.ts;
    }
    if (current.length > 1) segments.push(current.join(' '));

    // Ausfallbänder — laufender Ausfall (kein endTs) reicht bis "jetzt"
    const bands = outages
      .filter((o) => (o.endTs ?? now) >= t0)
      .map((o) => {
        const xs = x(Math.max(o.startTs, t0));
        const xe = x(Math.min(o.endTs ?? now, t1));
        return { x: xs, w: Math.max(1.5, xe - xs) };
      });

    // Letzter Punkt hervorgehoben, wenn er zum sichtbaren Fenster gehört
    const last = tail[tail.length - 1];
    const lastPoint = last && last.rtt != null ? { x: x(last.ts), y: y(last.rtt) } : null;

    return { segments, bands, lastPoint, maxRtt };
  });
</script>

{#if view}
  <svg viewBox="0 0 {W} {H}" class="w-full" preserveAspectRatio="none" role="img" aria-label="Verlauf der Laufzeit">
    <!-- Nulllinie -->
    <line x1="0" y1={H - 0.5} x2={W} y2={H - 0.5} stroke="currentColor" class="text-zinc-800" stroke-width="1" />

    {#each view.bands as b (b.x)}
      <rect x={b.x} y="0" width={b.w} height={H} class="fill-red-500/20" />
    {/each}

    {#each view.segments as seg, i (i)}
      <polyline points={seg} fill="none" stroke="currentColor" stroke-width="2" class="text-sky-400" />
    {/each}

    {#if view.lastPoint}
      <circle cx={view.lastPoint.x} cy={view.lastPoint.y} r="2.5" class="fill-sky-300" />
    {/if}
  </svg>
{:else}
  <div class="flex h-[90px] items-center justify-center text-xs text-zinc-600">Noch keine Daten</div>
{/if}