Gráficos e elementos visuais
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> e <Image>.
Os gráficos são desenhados com elementos de bloco. As barras usam oito níveis por célula, e as linhas usam uma grade de 2×2 pontos por célula.
<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>
Gráficos de linha em matriz de pontos com eixo y e legenda.
| Prop | Descrição |
|---|---|
series | { data, label?, color? }[] |
data | Atalho para uma série |
height | Linhas (padrão 8) |
min / max | Limites fixos (padrão: os dados) |
axis | Eixo y com rótulos de mínimo / máximo |
formatValue | Rótulos do eixo (padrão 1.2k) |
marker | quadrant (padrão) ou braille |
braille agrupa 2×4 pontos por célula. Use em terminais: Menlo, a fonte do console do DevTools no macOS, não tem braille, e os glifos substitutos são mais largos que uma célula.
As cores padrão das séries são accent, success, warning, info e danger.
<BarChart>
Barras horizontais com rótulos e valores alinhados, com precisão de um oitavo de célula.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Preenche sua largura com os pontos mais recentes. height acima de 1 renderiza uma área preenchida.
<Sparkline data={throughput} height={3} />sparkline(values) retorna a mesma sparkline como uma string.
<ProgressBar>
| Prop | Descrição |
|---|---|
value / max | Progresso (omita para indeterminado) |
variant | block (suave) line thin |
width | Células (padrão: preencher) |
label | Texto inicial |
formatValue | Texto final (padrão 42%) |
As barras indeterminadas avançam no ritmo dos quadros do renderizador e param quando a saída é pausada.
<Gradient>
Interpolação de cores por célula. Strings com várias linhas compartilham um gradiente, por isso ele combina com <AsciiFont>.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Gradientes nomeados: geist dusk ocean mono ember.
<Image>
Os consoles do Chromium e do Firefox desenham a imagem como um sprite de pixels. Pixel art (256 cores ou menos, sem pixels parcialmente transparentes) mantém até 8 × 16 pixels por célula, e fotos até 4 × 8. Safari, terminais, cópias em texto puro e páginas com runtime = "server" recebem meios-blocos ▀: cada célula contém dois pixels, o superior no primeiro plano e o inferior no fundo. Passe renderMode="halfblock" para desenhar meios-blocos em todos os lugares, como <Image> fazia na versão 1.3.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Descrição |
|---|---|
src | URL da imagem (somente no navegador) |
pixels | RGBA bruto como { width, height, data }, 4 bytes por pixel em ordem de linhas |
width / height | Largura em células, altura em linhas. Passe uma delas para manter a proporção, ou nenhuma para 1 × 2 pixels por célula (src redimensiona para no máximo 256 × 256 px) |
fit | contain (padrão), cover ou fill |
alt | Texto exibido enquanto src carrega ou se falhar |
renderMode | auto (padrão: sprite onde houver suporte, meios-blocos ▀ nos demais casos) ou halfblock |
<Image> também aceita props de layout.
src carrega por meio de um canvas, então imagens de outras origens precisam de CORS. pixels aceita RGBA bruto em qualquer ambiente, incluindo o terminal.
Uma imagem também é desenhada como meios-blocos no Chromium e no Firefox quando não pode ser um único sprite:
- Duas imagens lado a lado nas mesmas linhas, como em uma galeria.
- Uma foto com texto ao lado. Pixel art ao lado de texto continua sendo um sprite.
- Uma imagem recortada por uma caixa com
overflow="hidden", ou parcialmente coberta por outra caixa. - Pixels transparentes sobre texto ou sobre mais de uma cor de fundo.
<Pixels> (experimental)
@textjs/react/experimental exporta <Pixels> para buffers de quadros 0xRRGGBBAA em tempo real, como os de jogos, emuladores e vídeo. Grave pixels compactados diretamente em source.data e incremente frame para repintar.
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 | Descrição |
|---|---|
source | { width, height, data: Uint32Array } na ordem 0xRRGGBBAA |
frame | Contador de quadros; incremente após alterar source.data |
width / height | Tamanho da caixa em células e linhas |
fit | contain (padrão) ou fill |
pixelAspect | Largura exibida dividida pela altura de um pixel de origem (padrão 1) |
palette | Paleta PackedColor[] opcional usada como referência para quantizar as cores |
sample | Filtro para a alternativa em meios-blocos: nearest (padrão) ou average |
renderMode | auto (padrão: sprite onde houver suporte, meios-blocos ▀ nos demais casos) ou halfblock |
renderMode="auto" desenha um sprite pixelado no Chromium e no Firefox conforme as regras de estilo do console dele (sem medição de desempenho), e usa meios-blocos ▀ como alternativa no Safari, em terminais, em cópias em texto puro e em páginas com runtime = "server". Passe renderMode="halfblock" para desenhar meios-blocos em todos os lugares.
Para desenhar pixels sem React, importe drawPixels de @textjs/core/experimental junto com DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding e PixelRect. A opção encoding: "rgba" mantém mais de 256 cores e transparência alfa gradual para imagens estáticas, e fallback pinta suas próprias células onde o sprite não puder ser exibido. Consulte Alterações incompatíveis para saber como as exportações experimentais são versionadas.