Kapitel 7: Svelte

Bisher ging es um die Bibliothek: Optionen hinein, SVG heraus, gleich im Browser, auf dem Server und im Go-Port. Eine Seite braucht ein wenig mehr — einen Behälter, der seine Breite ändert, einen Zeiger, eine Tastatur, einen Dunkelmodus, einen Druckdialog. ml-time-graph-svelte ist dieses wenige mehr, als zwei Svelte-5-Komponenten. Die Bibliothek rechnet weiter; die Komponente verdrahtet.

npm install ml-time-graph ml-time-graph-svelte

Ein Diagramm

<script lang="ts">
  import { TimeGraph } from "ml-time-graph-svelte";
  const options = { series: [{ name: "Kühlschrank", data: messwerte }], axes: { left: { label: "°C" } } };
</script>

<TimeGraph {options} height={260} />

Die Optionen sind die aus den vorigen Kapiteln, unverändert. Die Komponente zeichnet in der Breite ihres Behälters und wieder, wenn sie sich ändert, nimmt die Ränder aus autoMargin, lässt über und unter der Kurve etwas Luft und zeigt einen Tooltip — beim Darüberfahren und mit den Pfeiltasten, sobald das Diagramm den Fokus hat.

Eine Legende, die sich bedienen lässt

Die SVG-Legende aus Kapitel 4 gehört zum Bild — richtig für den Druck, aber nicht per Tastatur bedienbar, und sie nimmt Fläche im Diagramm. <Legend> ist eine Reihe Knöpfe daneben. Ihre Kästchen kommen aus denselben Funktionen, die die Linien zeichnen: eine gestrichelte Reihe hat ein gestricheltes Kästchen, in derselben Breite.

<Legend items={legend} bind:hidden />
<TimeGraph {options} bind:hidden bind:legend />

Ausblenden behält die Achsen: Die Skala gehört zum Vergleich, und Achsen, die beim Schalten springen, liest man schlecht. hiddenMode="remove" lässt sie sich anpassen.

Daten im Tooltip, kein HTML

Der Tooltip fragt die Bibliothek, was jede Linie unter dem Zeiger zeigt (pointsAt): Eine Treppe hält ihren Zustand, ein Fühler, der nur bei Änderung meldet, bekommt seinen letzten Messwert, eine Enum-Reihe nennt ihren Zustand. Ein Snippet bekommt genau das und schreibt das Markup; Platzierung und Fadenkreuz bleiben bei der Komponente.

Wer gar keinen Tooltip-Kasten will: tooltip={false} schaltet nur den Kasten ab. Fadenkreuz, hervorgehobene Punkte, onhover, die Ansage für Vorleseprogramme, Zoom und Tastatur bleiben. Das ist der Schalter „Tooltip aus, Zoom an" einer Werkzeugleiste; interactive={false} nähme Zoom und Tastatur mit.

Zoom

Mit zoomable ziehst du ein Fenster über die Zeitachse; die Wertachse folgt dem, was sichtbar ist. Doppelklick oder Esc führt zurück. Mit applyZoom={false} meldet die Komponente das Fenster nur, und deine Anwendung lädt feiner aufgelöste Daten dafür.

Hell, dunkel, Druck

Der Dunkelmodus folgt standardmäßig einer Klasse am <html>; jedes Diagramm bekommt sein eigenes Theme, zwei Diagramme färben sich nie gegenseitig um. CSS-Variablen (--mtg-grid, --mtg-palette, …) an einem beliebigen Vorfahren bringen deine Gestaltungsvorgaben hinein. Gedruckt wird hell und mit allen Reihen — ausgeblendet ist eine Ansicht, kein Löschen —, und die Exporte tun dasselbe.

Eine Tafel

Die Teile zusammen, so wie eine Überwachungsanwendung sie einsetzt: Kacheln, die dem Zeiger des Detaildiagramms folgen (syncTime), ein Fühler, der verstummt ist (gaps.atEnd), zwei Fühler, die sich nicht einig sind (where), Grenzwerte, die im Bild bleiben (includeThresholds), Zoom und Export. Es ist eine einzige Svelte-Datei; der Code-Reiter zeigt sie. Liegt die gemeinsame Zeit außerhalb des Fensters einer Kachel, zeigt die Kachel einen kleinen Pfeil am Rand ihrer Fläche, dorthin, wo der Moment liegt, statt nichts zu zeigen.

Die vollständige Referenz — jede Eigenschaft, die Snippets, die CSS-Variablen, Rendern auf dem Server und die Fallen — steht in der README des Pakets: ml-time-graph-svelte auf npm.