Grafik dan visual
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient>, dan <Image>.
Grafik digambar dengan elemen blok. Batang menggunakan delapan tingkat per sel, dan garis menggunakan kisi titik 2×2 per sel.
<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>
Plot garis matriks titik dengan sumbu y dan legenda.
| Prop | Deskripsi |
|---|---|
series | { data, label?, color? }[] |
data | Bentuk ringkas untuk satu seri |
height | Baris (bawaan 8) |
min / max | Batas tetap (bawaan: data) |
axis | Sumbu y dengan label min / max |
formatValue | Label sumbu (bawaan 1.2k) |
marker | quadrant (bawaan) atau braille |
braille memuat 2×4 titik per sel. Gunakan di terminal: Menlo, font konsol DevTools di macOS, tidak memiliki braille, dan glif penggantinya lebih lebar daripada satu sel.
Warna seri secara bawaan adalah accent, success, warning, info dan danger.
<BarChart>
Batang horizontal dengan label dan nilai yang sejajar, dengan presisi seperdelapan sel.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Mengisi lebarnya dengan titik terbaru. height di atas 1 me-render area terisi.
<Sparkline data={throughput} height={3} />sparkline(values) mengembalikan sparkline yang sama sebagai string.
<ProgressBar>
| Prop | Deskripsi |
|---|---|
value / max | Progres (hilangkan untuk progres tak tentu) |
variant | block (halus) line thin |
width | Sel (bawaan: isi penuh) |
label | Teks awal |
formatValue | Teks akhir (bawaan 42%) |
Batang progres tak tentu bergerak mengikuti laju frame renderer dan berhenti saat keluaran dijeda.
<Gradient>
Interpolasi warna per sel. String multibaris berbagi satu gradien, sehingga cocok dipasangkan dengan <AsciiFont>.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Gradien bernama: geist dusk ocean mono ember.
<Image>
Konsol Chromium dan Firefox menggambar gambar sebagai sprite piksel. Seni piksel (256 warna atau kurang, tanpa piksel transparan sebagian) mempertahankan hingga 8 × 16 piksel per sel, dan foto hingga 4 × 8. Safari, terminal, salinan teks biasa dan halaman dengan runtime = "server" mendapatkan blok setengah ▀: setiap sel menampung dua piksel, bagian atas di latar depan dan bagian bawah di latar belakang. Berikan renderMode="halfblock" untuk menggambar blok setengah di semua tempat, seperti yang dilakukan <Image> pada 1.3.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Deskripsi |
|---|---|
src | URL gambar (khusus browser) |
pixels | RGBA mentah sebagai { width, height, data }, 4 byte per piksel dalam urutan baris |
width / height | Lebar dalam sel, tinggi dalam baris. Berikan salah satunya untuk mempertahankan rasio aspek, atau jangan berikan keduanya untuk 1 × 2 piksel per sel (src diskalakan hingga maksimum 256 × 256 px) |
fit | contain (bawaan), cover atau fill |
alt | Teks yang ditampilkan saat src dimuat atau jika gagal |
renderMode | auto (bawaan: sprite jika didukung, blok setengah ▀ di tempat lain) atau halfblock |
<Image> juga menerima prop layout.
src dimuat melalui canvas, sehingga gambar lintas origin memerlukan CORS. pixels menerima RGBA mentah di mana pun, termasuk terminal.
Gambar juga digambar sebagai blok setengah di Chromium dan Firefox saat tidak bisa menjadi satu sprite:
- Dua gambar berdampingan pada baris yang sama, seperti dalam galeri.
- Foto dengan teks di sampingnya. Seni piksel di samping teks tetap menjadi sprite.
- Gambar yang terpotong oleh kotak
overflow="hidden", atau tertutup sebagian oleh kotak lain. - Piksel transparan di atas teks atau di atas lebih dari satu warna latar belakang.
<Pixels> (eksperimental)
@textjs/react/experimental mengekspor <Pixels> untuk framebuffer 0xRRGGBBAA langsung seperti game, emulator dan video. Tulis piksel terkemas langsung ke source.data dan naikkan frame untuk menggambar ulang.
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 | Deskripsi |
|---|---|
source | { width, height, data: Uint32Array } dalam urutan 0xRRGGBBAA |
frame | Penghitung frame; naikkan setelah mengubah source.data |
width / height | Ukuran kotak dalam sel dan baris |
fit | contain (bawaan) atau fill |
pixelAspect | Lebar tampilan dibagi tinggi satu piksel sumber (bawaan 1) |
palette | Palet PackedColor[] opsional sebagai acuan kuantisasi warna |
sample | Filter pengganti blok setengah: nearest (bawaan) atau average |
renderMode | auto (bawaan: sprite jika didukung, blok setengah ▀ di tempat lain) atau halfblock |
renderMode="auto" menggambar sprite berpiksel di Chromium, dan Firefox sesuai aturan gaya konsolnya (belum diuji performanya), serta menggunakan blok setengah ▀ sebagai pengganti di Safari, terminal, salinan teks biasa dan halaman dengan runtime = "server". Berikan renderMode="halfblock" untuk menggambar blok setengah di semua tempat.
Untuk menggambar piksel tanpa React, impor drawPixels dari @textjs/core/experimental bersama DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding dan PixelRect. Opsi encoding: "rgba" mempertahankan lebih dari 256 warna dan alfa halus untuk gambar diam, dan fallback menggambar sel Anda sendiri di tempat sprite tidak bisa ditampilkan. Lihat Perubahan yang merusak kompatibilitas untuk mengetahui cara pemberian versi pada ekspor eksperimental.