Wykresy i wizualizacje
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> i <Image>.
Wykresy są rysowane znakami blokowymi. Słupki używają ośmiu poziomów na komórkę, a linie siatki 2×2 punktów na komórkę.
<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>
Wykresy liniowe z punktów, z osią Y i legendą.
| Prop | Opis |
|---|---|
series | { data, label?, color? }[] |
data | Skrót dla jednej serii |
height | Wiersze (domyślnie 8) |
min / max | Stałe granice (domyślnie: zakres danych) |
axis | Oś Y z etykietami minimum i maksimum |
formatValue | Etykiety osi (domyślnie 1.2k) |
marker | quadrant (domyślnie) lub braille |
braille mieści 2×4 punkty w komórce. Używaj go w terminalach: Menlo, font konsoli DevTools w systemie macOS, nie zawiera znaków brajlowskich, a glify zastępcze są szersze niż komórka.
Domyślne kolory serii to accent, success, warning, info i danger.
<BarChart>
Poziome słupki z wyrównanymi etykietami i wartościami, z dokładnością do jednej ósmej komórki.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Wypełnia swoją szerokość najnowszymi punktami. height powyżej 1 renderuje wypełniony obszar.
<Sparkline data={throughput} height={3} />sparkline(values) zwraca ten sam sparkline jako ciąg znaków.
<ProgressBar>
| Prop | Opis |
|---|---|
value / max | Postęp (pomiń dla nieokreślonego postępu) |
variant | block (płynny) line thin |
width | Komórki (domyślnie: wypełnienie) |
label | Tekst na początku |
formatValue | Tekst na końcu (domyślnie 42%) |
Paski nieokreślonego postępu przesuwają się w tempie klatek renderera i zatrzymują się po wstrzymaniu wyjścia.
<Gradient>
Interpolacja koloru dla każdej komórki. Wielowierszowe ciągi znaków współdzielą jeden gradient, więc można go łączyć z <AsciiFont>.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Nazwane gradienty: geist dusk ocean mono ember.
<Image>
Konsole przeglądarek Chromium i Firefox rysują obraz jako sprite pikselowy. Pixel art (256 kolorów lub mniej, bez częściowo przezroczystych pikseli) zachowuje do 8 × 16 pikseli na komórkę, a zdjęcia do 4 × 8. W przeglądarce Safari, terminalach, kopiach tekstowych i na stronach z runtime = "server" używane są półbloki ▀: każda komórka mieści dwa piksele, górny w kolorze pierwszego planu, a dolny w kolorze tła. Przekaż renderMode="halfblock", aby wszędzie rysować półbloki, tak jak robił to komponent <Image> w wersji 1.3.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Opis |
|---|---|
src | URL obrazu (tylko w przeglądarce) |
pixels | Surowe RGBA jako { width, height, data }, 4 bajty na piksel w kolejności wierszy |
width / height | Szerokość w komórkach, wysokość w wierszach. Przekaż jeden parametr, aby zachować proporcje, lub pomiń oba, aby uzyskać 1 × 2 piksele na komórkę (src skaluje do maksymalnie 256 × 256 px) |
fit | contain (domyślnie), cover lub fill |
alt | Tekst wyświetlany podczas ładowania src lub po jego niepowodzeniu |
renderMode | auto (domyślnie: sprite tam, gdzie jest obsługiwany, półbloki ▀ w pozostałych miejscach) lub halfblock |
<Image> przyjmuje też właściwości layoutu.
src ładuje obraz przez canvas, więc obrazy z innych źródeł wymagają CORS. pixels przyjmuje surowe RGBA wszędzie, także w terminalu.
Obraz jest też rysowany jako półbloki w przeglądarkach Chromium i Firefox, gdy nie może być pojedynczym sprite’em:
- Dwa obrazy obok siebie w tych samych wierszach, jak w galerii.
- Zdjęcie z tekstem obok. Pixel art obok tekstu pozostaje sprite’em.
- Obraz przycięty przez pole z
overflow="hidden"lub częściowo zasłonięty innym polem. - Przezroczyste piksele nad tekstem lub nad więcej niż jednym kolorem tła.
<Pixels> (eksperymentalny)
@textjs/react/experimental eksportuje <Pixels> dla aktualizowanych na żywo buforów klatek 0xRRGGBBAA, używanych w grach, emulatorach i wideo. Zapisuj spakowane piksele bezpośrednio w source.data i zwiększaj frame, aby odrysować obraz.
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 | Opis |
|---|---|
source | { width, height, data: Uint32Array } w kolejności 0xRRGGBBAA |
frame | Licznik klatek; zwiększ po zmianie source.data |
width / height | Rozmiar pola w komórkach i wierszach |
fit | contain (domyślnie) lub fill |
pixelAspect | Wyświetlana szerokość podzielona przez wysokość jednego piksela źródłowego (domyślnie 1) |
palette | Opcjonalna paleta PackedColor[] do kwantyzacji kolorów |
sample | Filtr dla zastępczego renderowania półblokami: nearest (domyślnie) lub average |
renderMode | auto (domyślnie: sprite tam, gdzie jest obsługiwany, półbloki ▀ w pozostałych miejscach) lub halfblock |
renderMode="auto" rysuje pikselowy sprite w przeglądarce Chromium oraz w przeglądarce Firefox zgodnie z regułami stylów jej konsoli (bez pomiarów wydajności), a w przeglądarce Safari, terminalach, kopiach tekstowych i na stronach z runtime = "server" używa zastępczo półbloków ▀. Przekaż renderMode="halfblock", aby wszędzie rysować półbloki.
Aby rysować piksele bez React, zaimportuj drawPixels z @textjs/core/experimental wraz z DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding i PixelRect. Opcja encoding: "rgba" zachowuje ponad 256 kolorów i płynną przezroczystość nieruchomych obrazów, a fallback rysuje twoje własne komórki wszędzie tam, gdzie nie można wyświetlić sprite’a. Zobacz Zmiany niezgodne wstecznie, aby dowiedzieć się, jak wersjonowane są eksperymentalne eksporty.