Gráficos y elementos visuales
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> e <Image>.
Los gráficos se dibujan con elementos de bloque. Las barras usan ocho niveles por celda, y las líneas usan una cuadrícula de 2×2 puntos por celda.
<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 líneas con matriz de puntos, eje Y y leyenda.
| Prop | Descripción |
|---|---|
series | { data, label?, color? }[] |
data | Forma abreviada para una serie |
height | Filas (por defecto 8) |
min / max | Límites fijos (por defecto: los datos) |
axis | Eje Y con etiquetas de mínimo / máximo |
formatValue | Etiquetas del eje (por defecto 1.2k) |
marker | quadrant (por defecto) o braille |
braille agrupa 2×4 puntos por celda. Úsalo en terminales: Menlo, la fuente de la consola de DevTools en macOS, no tiene braille, y los glifos de sustitución son más anchos que una celda.
Los colores predeterminados de las series son accent, success, warning, info y danger.
<BarChart>
Barras horizontales con etiquetas y valores alineados, con una precisión de un octavo de celda.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Llena su ancho con los puntos más recientes. Un valor de height superior a 1 renderiza un área rellena.
<Sparkline data={throughput} height={3} />sparkline(values) devuelve el mismo sparkline como una cadena.
<ProgressBar>
| Prop | Descripción |
|---|---|
value / max | Progreso (omitir para indeterminado) |
variant | block (suave) line thin |
width | Celdas (por defecto: rellenar) |
label | Texto inicial |
formatValue | Texto final (por defecto 42%) |
Las barras indeterminadas se desplazan al ritmo de los fotogramas del renderizador y se detienen cuando se pausa la salida.
<Gradient>
Interpolación de color por celda. Las cadenas de varias líneas comparten un gradiente, por lo que se combina con <AsciiFont>.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Gradientes con nombre: geist dusk ocean mono ember.
<Image>
Las consolas de Chromium y Firefox dibujan la imagen como un sprite de píxeles. El pixel art (256 colores o menos, sin píxeles parcialmente transparentes) conserva hasta 8 × 16 píxeles por celda, y las fotos hasta 4 × 8. Safari, las terminales, las copias en texto plano y las páginas con runtime = "server" reciben medios bloques ▀: cada celda contiene dos píxeles, el superior en primer plano y el inferior en el fondo. Pasa renderMode="halfblock" para dibujar medios bloques en todas partes, como hacía <Image> en 1.3.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Descripción |
|---|---|
src | URL de la imagen (solo en el navegador) |
pixels | RGBA sin procesar como { width, height, data }, 4 bytes por píxel en orden de filas |
width / height | Ancho en celdas, alto en filas. Pasa uno para mantener la relación de aspecto, o ninguno para obtener 1 × 2 píxeles por celda (src se escala hasta un máximo de 256 × 256 px) |
fit | contain (por defecto), cover o fill |
alt | Texto que se muestra mientras carga src o si falla |
renderMode | auto (por defecto: sprite donde se admite, medios bloques ▀ en los demás casos) o halfblock |
<Image> también acepta propiedades de layout.
src se carga a través de un canvas, por lo que las imágenes de otros orígenes necesitan CORS. pixels acepta RGBA sin procesar en cualquier entorno, incluida la terminal.
Una imagen también se dibuja con medios bloques en Chromium y Firefox cuando no puede ser un único sprite:
- Dos imágenes una al lado de otra en las mismas filas, como en una galería.
- Una foto con texto al lado. El pixel art junto a texto sigue siendo un sprite.
- Una imagen recortada por una caja con
overflow="hidden", o parcialmente cubierta por otra caja. - Píxeles transparentes sobre texto o sobre más de un color de fondo.
<Pixels> (experimental)
@textjs/react/experimental exporta <Pixels> para búferes de fotogramas 0xRRGGBBAA en tiempo real, como los de juegos, emuladores y vídeo. Escribe los píxeles empaquetados directamente en source.data e incrementa frame para volver a pintar.
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 | Descripción |
|---|---|
source | { width, height, data: Uint32Array } en orden 0xRRGGBBAA |
frame | Contador de fotogramas; incrementar después de modificar source.data |
width / height | Tamaño de la caja en celdas y filas |
fit | contain (por defecto) o fill |
pixelAspect | Ancho mostrado dividido por el alto de un píxel de origen (por defecto 1) |
palette | Paleta PackedColor[] opcional para cuantizar los colores |
sample | Filtro para la alternativa de medios bloques: nearest (por defecto) o average |
renderMode | auto (por defecto: sprite donde se admite, medios bloques ▀ en los demás casos) o halfblock |
renderMode="auto" dibuja un sprite pixelado en Chromium, y en Firefox según las reglas de estilo de su consola (sin pruebas de rendimiento), y recurre a medios bloques ▀ en Safari, terminales, copias en texto plano y páginas con runtime = "server". Pasa renderMode="halfblock" para dibujar medios bloques en todas partes.
Para dibujar píxeles sin React, importa drawPixels de @textjs/core/experimental junto con DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding y PixelRect. Su opción encoding: "rgba" conserva más de 256 colores y transparencia alfa gradual para imágenes estáticas, y fallback pinta tus propias celdas donde no se pueda mostrar el sprite. Consulta Cambios incompatibles para saber cómo se versionan las exportaciones experimentales.