Grafikler ve görseller
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> ve <Image>.
Grafikler blok öğelerle çizilir. Çubuklar hücre başına sekiz seviye, çizgiler ise hücre başına 2×2 noktalı bir ızgara kullanır.
<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>
Y ekseni ve açıklama içeren nokta matrisli çizgi grafikleri.
| Prop | Açıklama |
|---|---|
series | { data, label?, color? }[] |
data | Tek seri için kısa kullanım |
height | Satır sayısı (varsayılan 8) |
min / max | Sabit sınırlar (varsayılan: veriler) |
axis | Min / max etiketli Y ekseni |
formatValue | Eksen etiketleri (varsayılan 1.2k) |
marker | quadrant (varsayılan) veya braille |
braille hücre başına 2×4 nokta sığdırır. Bunu terminallerde kullanın: macOS’ta DevTools konsolunun yazı tipi olan Menlo’da braille yoktur ve yedek glifler bir hücreden daha geniştir.
Seri renkleri varsayılan olarak accent, success, warning, info ve danger değerlerini kullanır.
<BarChart>
Etiketleri ve değerleri hizalanmış, hücrenin sekizde biri hassasiyetinde yatay çubuklar.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Genişliğini en son noktalarla doldurur. height değeri 1 üzerinde olduğunda dolu bir alan render eder.
<Sparkline data={throughput} height={3} />sparkline(values) aynı sparkline’ı bir dize olarak döndürür.
<ProgressBar>
| Prop | Açıklama |
|---|---|
value / max | İlerleme (belirsiz ilerleme için belirtmeyin) |
variant | block (pürüzsüz) line thin |
width | Hücre sayısı (varsayılan: doldur) |
label | Baştaki metin |
formatValue | Sondaki metin (varsayılan 42%) |
Belirsiz ilerleme çubukları, render motorunun kare hızında ilerler ve çıktı duraklatıldığında durur.
<Gradient>
Hücre başına renk enterpolasyonu. Çok satırlı dizeler tek bir gradyanı paylaşır, bu nedenle <AsciiFont> ile birlikte kullanılabilir.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Adlandırılmış gradyanlar: geist dusk ocean mono ember.
<Image>
Chromium ve Firefox konsolları görseli bir piksel sprite’ı olarak çizer. Piksel sanatı (256 veya daha az renk, kısmen saydam piksel olmadan) hücre başına en fazla 8 × 16 piksel, fotoğraflar ise en fazla 4 × 8 piksel korur. Safari, terminaller, düz metin kopyaları ve runtime = "server" kullanan sayfalar ▀ yarım bloklarını kullanır: her hücre iki piksel tutar; üst piksel ön planda, alt piksel arka plandadır. <Image> bileşeninin 1.3 sürümünde yaptığı gibi her yerde yarım blok çizmek için renderMode="halfblock" geçirin.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Açıklama |
|---|---|
src | Görsel URL’si (yalnızca tarayıcıda) |
pixels | { width, height, data } biçiminde ham RGBA, satır sırasıyla piksel başına 4 bayt |
width / height | Hücre cinsinden genişlik, satır cinsinden yükseklik. En boy oranını korumak için birini geçirin veya hücre başına 1 × 2 piksel için ikisini de belirtmeyin (src en fazla 256 × 256 px boyutuna ölçeklenir) |
fit | contain (varsayılan), cover veya fill |
alt | src yüklenirken veya yüklenemezse gösterilen metin |
renderMode | auto (varsayılan: desteklenen yerlerde sprite, diğer yerlerde ▀ yarım blokları) veya halfblock |
<Image> ayrıca layout prop’larını da alır.
src bir canvas üzerinden yüklenir, bu nedenle farklı kaynaklardaki görseller CORS gerektirir. pixels, terminal dahil her yerde ham RGBA alır.
Bir görsel tek bir sprite olamadığında Chromium ve Firefox’ta da yarım bloklarla çizilir:
- Galerideki gibi aynı satırlarda yan yana duran iki görsel.
- Yanında metin bulunan bir fotoğraf. Metnin yanındaki piksel sanatı sprite olarak kalır.
- Bir
overflow="hidden"kutusunun kırptığı veya başka bir kutunun kısmen kapattığı görsel. - Metnin veya birden fazla arka plan renginin üzerindeki saydam pikseller.
<Pixels> (deneysel)
@textjs/react/experimental, oyunlar, emülatörler ve video gibi canlı 0xRRGGBBAA kare arabellekleri için <Pixels> bileşenini dışa aktarır. Paketlenmiş pikselleri yerinde source.data içine yazın ve yeniden çizmek için frame değerini artırın.
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 | Açıklama |
|---|---|
source | 0xRRGGBBAA sırasında { width, height, data: Uint32Array } |
frame | Kare sayacı; source.data değiştirildikten sonra artırın |
width / height | Hücre ve satır cinsinden kutu boyutu |
fit | contain (varsayılan) veya fill |
pixelAspect | Bir kaynak pikselin görüntülenen genişliğinin yüksekliğine bölümü (varsayılan 1) |
palette | Renkleri kuantalamak için isteğe bağlı PackedColor[] paleti |
sample | Yarım blok yedek filtresi: nearest (varsayılan) veya average |
renderMode | auto (varsayılan: desteklenen yerlerde sprite, diğer yerlerde ▀ yarım blokları) veya halfblock |
renderMode="auto", Chromium’da ve konsolunun stil kurallarına göre Firefox’ta (performansı ölçülmedi) pikselli bir sprite çizer; Safari’de, terminallerde, düz metin kopyalarında ve runtime = "server" kullanan sayfalarda ▀ yarım bloklarına geçer. Her yerde yarım blok çizmek için renderMode="halfblock" geçirin.
React olmadan piksel çizmek için @textjs/core/experimental paketinden drawPixels ile birlikte DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding ve PixelRect içe aktarın. encoding: "rgba" seçeneği durağan görseller için 256’dan fazla rengi ve yumuşak alfayı korur; fallback ise sprite’ın gösterilemediği her yerde kendi hücrelerinizi boyar. Deneysel dışa aktarımların nasıl sürümlendiğini öğrenmek için Uyumluluğu bozan değişiklikler bölümüne bakın.