Biểu đồ và hình ảnh
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> và <Image>.
Biểu đồ được vẽ bằng ký tự khối. Thanh dùng tám mức trên mỗi ô, còn đường dùng lưới chấm 2×2 trên mỗi ô.
<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>
Biểu đồ đường dạng ma trận chấm có trục y và chú giải.
| Prop | Mô tả |
|---|---|
series | { data, label?, color? }[] |
data | Cách viết tắt cho một chuỗi dữ liệu |
height | Số dòng (mặc định 8) |
min / max | Giới hạn cố định (mặc định: theo dữ liệu) |
axis | Trục y với nhãn giá trị nhỏ nhất / lớn nhất |
formatValue | Nhãn trục (mặc định 1.2k) |
marker | quadrant (mặc định) hoặc braille |
braille chứa 2×4 chấm trên mỗi ô. Dùng trong terminal: Menlo, phông chữ console của DevTools trên macOS, không có ký tự braille, và các ký tự thay thế rộng hơn một ô.
Màu chuỗi dữ liệu mặc định là accent, success, warning, info và danger.
<BarChart>
Thanh ngang với nhãn và giá trị căn thẳng hàng, có độ chính xác đến một phần tám ô.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Lấp đầy chiều rộng bằng các điểm mới nhất. height lớn hơn 1 render một vùng tô kín.
<Sparkline data={throughput} height={3} />sparkline(values) trả về cùng sparkline đó dưới dạng chuỗi.
<ProgressBar>
| Prop | Mô tả |
|---|---|
value / max | Tiến độ (bỏ qua để dùng trạng thái không xác định) |
variant | block (mượt) line thin |
width | Số ô (mặc định: lấp đầy) |
label | Văn bản đầu thanh |
formatValue | Văn bản cuối thanh (mặc định 42%) |
Thanh không xác định quét theo nhịp frame của bộ render và dừng khi đầu ra tạm dừng.
<Gradient>
Nội suy màu theo từng ô. Chuỗi nhiều dòng dùng chung một dải chuyển màu, nên có thể kết hợp với <AsciiFont>.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Dải chuyển màu có tên: geist dusk ocean mono ember.
<Image>
Console của Chromium và Firefox vẽ ảnh dưới dạng sprite pixel. Ảnh pixel art (256 màu trở xuống, không có pixel bán trong suốt) giữ tối đa 8 × 16 pixel trên mỗi ô, còn ảnh chụp giữ tối đa 4 × 8. Safari, terminal, bản sao văn bản thuần và trang có runtime = "server" dùng nửa khối ▀: mỗi ô chứa hai pixel, pixel trên dùng màu chữ và pixel dưới dùng màu nền. Truyền renderMode="halfblock" để vẽ nửa khối ở mọi nơi, như <Image> trong phiên bản 1.3.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Mô tả |
|---|---|
src | URL ảnh (chỉ trên trình duyệt) |
pixels | RGBA thô dưới dạng { width, height, data }, 4 byte mỗi pixel theo thứ tự dòng |
width / height | Chiều rộng theo ô, chiều cao theo dòng. Truyền một trong hai để giữ tỷ lệ khung hình, hoặc không truyền cả hai để dùng 1 × 2 pixel mỗi ô (src co giãn đến tối đa 256 × 256 px) |
fit | contain (mặc định), cover hoặc fill |
alt | Văn bản hiển thị khi src đang tải hoặc tải thất bại |
renderMode | auto (mặc định: sprite ở nơi hỗ trợ, nửa khối ▀ ở nơi khác) hoặc halfblock |
<Image> cũng nhận prop layout.
src tải qua canvas, nên ảnh khác nguồn cần CORS. pixels nhận RGBA thô ở mọi nơi, kể cả terminal.
Ảnh cũng hiển thị dưới dạng nửa khối trong Chromium và Firefox khi không thể vẽ thành một sprite:
- Hai ảnh nằm cạnh nhau trên cùng các dòng, như trong thư viện ảnh.
- Ảnh chụp có văn bản bên cạnh. Pixel art bên cạnh văn bản vẫn là sprite.
- Ảnh bị cắt bởi hộp
overflow="hidden", hoặc bị hộp khác che một phần. - Pixel trong suốt nằm trên văn bản hoặc trên nhiều hơn một màu nền.
<Pixels> (thử nghiệm)
@textjs/react/experimental xuất <Pixels> cho bộ đệm frame 0xRRGGBBAA cập nhật trực tiếp như trò chơi, trình giả lập và video. Ghi trực tiếp pixel đóng gói vào source.data và tăng frame để vẽ lại.
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 | Mô tả |
|---|---|
source | { width, height, data: Uint32Array } theo thứ tự 0xRRGGBBAA |
frame | Bộ đếm frame; tăng sau khi sửa source.data |
width / height | Kích thước hộp theo ô và dòng |
fit | contain (mặc định) hoặc fill |
pixelAspect | Chiều rộng hiển thị chia cho chiều cao của một pixel nguồn (mặc định 1) |
palette | Bảng màu PackedColor[] tùy chọn để lượng tử hóa màu theo |
sample | Bộ lọc dự phòng cho nửa khối: nearest (mặc định) hoặc average |
renderMode | auto (mặc định: sprite ở nơi hỗ trợ, nửa khối ▀ ở nơi khác) hoặc halfblock |
renderMode="auto" vẽ sprite dạng pixel trong Chromium và trong Firefox theo quy tắc kiểu của console (chưa đo hiệu năng), đồng thời dùng nửa khối ▀ làm phương án dự phòng trong Safari, terminal, bản sao văn bản thuần và trang có runtime = "server". Truyền renderMode="halfblock" để vẽ nửa khối ở mọi nơi.
Để vẽ pixel không dùng React, nhập drawPixels từ @textjs/core/experimental cùng với DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding và PixelRect. Tùy chọn encoding: "rgba" giữ hơn 256 màu và độ trong suốt alpha chuyển mượt cho ảnh tĩnh, còn fallback vẽ các ô do bạn định nghĩa ở nơi không thể hiển thị sprite. Xem Thay đổi không tương thích để biết cách đánh phiên bản cho các thành phần xuất thử nghiệm.