Diagramme und Visualisierungen
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> und <Image>.
Diagramme werden mit Blockelementen gezeichnet. Balken verwenden acht Stufen pro Zelle, Linien ein 2×2-Punktraster pro Zelle.
<LineChart height={6} series={[ { label: "p50", data: p50 }, { label: "p95", data: p95, color: "muted" }, ]} formatValue={(v) => `${Math.round(v)}ms`}/><BarChart data={[{ label: "iad1", value: 1240 }, { label: "sfo1", value: 860 }]} /><Sparkline data={requests} /><ProgressBar label="Build" value={0.42} /><LineChart>
Liniendiagramme aus einer Punktmatrix mit y-Achse und Legende.
| Prop | Beschreibung |
|---|---|
series | { data, label?, color? }[] |
data | Kurzform für eine Datenreihe |
height | Zeilen (Standard 8) |
min / max | Feste Grenzen (Standard: die Daten) |
axis | Y-Achse mit Min-/Max-Beschriftungen |
formatValue | Achsenbeschriftungen (Standard 1.2k) |
marker | quadrant (Standard) oder braille |
braille packt 2×4 Punkte in jede Zelle. Verwende es in Terminals: Menlo, die Schriftart der DevTools-Konsole unter macOS, enthält keine Braille-Zeichen, und die Ersatzzeichen sind breiter als eine Zelle.
Die Standardfarben für Datenreihen sind accent, success, warning, info und danger.
<BarChart>
Horizontale Balken mit ausgerichteten Beschriftungen und Werten, mit einer Genauigkeit von einer Achtelzelle.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Füllt seine Breite mit den neuesten Punkten. height über 1 rendert eine gefüllte Fläche.
<Sparkline data={throughput} height={3} />sparkline(values) gibt dieselbe Sparkline als String zurück.
<ProgressBar>
| Prop | Beschreibung |
|---|---|
value / max | Fortschritt (für unbestimmten Fortschritt weglassen) |
variant | block (stufenlos) line thin |
width | Zellen (Standard: ausfüllen) |
label | Vorangestellter Text |
formatValue | Nachgestellter Text (Standard 42%) |
Balken mit unbestimmtem Fortschritt bewegen sich im Frame-Takt des Renderers und halten an, wenn die Ausgabe pausiert.
<Gradient>
Farbinterpolation pro Zelle. Mehrzeilige Strings teilen sich einen Farbverlauf, daher lässt sich die Komponente mit <AsciiFont> kombinieren.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Benannte Farbverläufe: geist dusk ocean mono ember.
<Image>
Die Konsolen von Chromium und Firefox zeichnen das Bild als Pixel-Sprite. Pixel-Art (256 Farben oder weniger, ohne teiltransparente Pixel) behält bis zu 8 × 16 Pixel pro Zelle bei, Fotos bis zu 4 × 8. Safari, Terminals, reine Textkopien und Seiten mit runtime = "server" erhalten ▀-Halbblöcke: Jede Zelle enthält zwei Pixel, oben im Vordergrund und unten im Hintergrund. Übergib renderMode="halfblock", um überall Halbblöcke zu zeichnen, wie es <Image> in 1.3 tat.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Beschreibung |
|---|---|
src | Bild-URL (nur im Browser) |
pixels | RGBA-Rohdaten als { width, height, data }, 4 Bytes pro Pixel in Zeilenreihenfolge |
width / height | Breite in Zellen, Höhe in Zeilen. Übergib einen Wert, um das Seitenverhältnis beizubehalten, oder keinen für 1 × 2 Pixel pro Zelle (src skaliert auf höchstens 256 × 256 px) |
fit | contain (Standard), cover oder fill |
alt | Text, der angezeigt wird, während src lädt oder wenn das Laden fehlschlägt |
renderMode | auto (Standard: Sprite, wo unterstützt, sonst ▀-Halbblöcke) oder halfblock |
<Image> akzeptiert auch Layout-Props.
src lädt über ein Canvas, daher benötigen Bilder anderer Origins CORS. pixels akzeptiert überall RGBA-Rohdaten, auch im Terminal.
Ein Bild wird in Chromium und Firefox auch dann als Halbblöcke gezeichnet, wenn es kein einzelnes Sprite sein kann:
- Zwei Bilder nebeneinander in denselben Zeilen, wie in einer Galerie.
- Ein Foto mit Text daneben. Pixel-Art neben Text bleibt ein Sprite.
- Ein Bild, das eine Box mit
overflow="hidden"beschneidet oder das eine andere Box teilweise verdeckt. - Transparente Pixel über Text oder über mehr als einer Hintergrundfarbe.
<Pixels> (experimentell)
@textjs/react/experimental exportiert <Pixels> für Live-Framebuffer im Format 0xRRGGBBAA, etwa für Spiele, Emulatoren und Videos. Schreibe gepackte Pixel direkt in source.data und erhöhe frame, um neu zu zeichnen.
import { Pixels, type PixelSource } from "@textjs/react/experimental";const source: PixelSource = { width: 320, height: 200, data: new Uint32Array(320 * 200) };<Pixels source={source} frame={frame} width={80} height={25} pixelAspect={5 / 6} />| Prop | Beschreibung |
|---|---|
source | { width, height, data: Uint32Array } in 0xRRGGBBAA-Reihenfolge |
frame | Frame-Zähler; nach Änderungen an source.data erhöhen |
width / height | Boxgröße in Zellen und Zeilen |
fit | contain (Standard) oder fill |
pixelAspect | Angezeigte Breite geteilt durch die Höhe eines Quellpixels (Standard 1) |
palette | Optionale PackedColor[]-Palette zur Farbquantisierung |
sample | Filter für den Halbblock-Fallback: nearest (Standard) oder average |
renderMode | auto (Standard: Sprite, wo unterstützt, sonst ▀-Halbblöcke) oder halfblock |
renderMode="auto" zeichnet ein pixeliges Sprite in Chromium und in Firefox gemäß den Stilregeln seiner Konsole (nicht per Benchmark gemessen) und verwendet in Safari, Terminals, reinen Textkopien und Seiten mit runtime = "server" ersatzweise ▀-Halbblöcke. Übergib renderMode="halfblock", um überall Halbblöcke zu zeichnen.
Um Pixel ohne React zu zeichnen, importiere drawPixels aus @textjs/core/experimental zusammen mit DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding und PixelRect. Die Option encoding: "rgba" behält mehr als 256 Farben und weiche Alphatransparenz für Standbilder bei, und fallback zeichnet deine eigenen Zellen überall dort, wo das Sprite nicht angezeigt werden kann. Unter Inkompatible Änderungen erfährst du, wie experimentelle Exporte versioniert werden.