Графики и визуализация
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> и <Image>.
Графики рисуются блочными символами. Столбцы используют восемь уровней на ячейку, а линии — сетку из 2×2 точек на ячейку.
<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 и легендой.
| Prop | Описание |
|---|---|
series | { data, label?, color? }[] |
data | Сокращённая запись для одного ряда |
height | Строки (по умолчанию 8) |
min / max | Фиксированные границы (по умолчанию: по данным) |
axis | Ось Y с подписями минимума и максимума |
formatValue | Подписи оси (по умолчанию 1.2k) |
marker | quadrant (по умолчанию) или braille |
braille размещает 2×4 точки в ячейке. Используйте его в терминалах: в Menlo, шрифте консоли DevTools на macOS, нет символов Брайля, а символы из подставляемого шрифта шире ячейки.
Цвета рядов по умолчанию: accent, success, warning, info и danger.
<BarChart>
Горизонтальные столбцы с выровненными подписями и значениями, с точностью до одной восьмой ячейки.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Заполняет свою ширину последними точками. При height больше 1 рисуется область с заливкой.
<Sparkline data={throughput} height={3} />sparkline(values) возвращает тот же спарклайн в виде строки.
<ProgressBar>
| Prop | Описание |
|---|---|
value / max | Прогресс (не указывайте для неопределённого) |
variant | block (плавный) line thin |
width | Ячейки (по умолчанию: заполнение) |
label | Текст в начале |
formatValue | Текст в конце (по умолчанию 42%) |
Неопределённые индикаторы движутся с частотой кадров рендерера и останавливаются при приостановке вывода.
<Gradient>
Интерполяция цвета по ячейкам. Многострочные строки используют один общий градиент, поэтому компонент сочетается с <AsciiFont>.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Именованные градиенты: geist dusk ocean mono ember.
<Image>
Консоли Chromium и Firefox рисуют изображение как пиксельный спрайт. Пиксельная графика (256 цветов или меньше, без частично прозрачных пикселей) сохраняет до 8 × 16 пикселей на ячейку, а фотографии — до 4 × 8. В Safari, терминалах, текстовых копиях и на страницах с runtime = "server" используются полублоки ▀: каждая ячейка содержит два пикселя, верхний в цвете текста и нижний в цвете фона. Передайте renderMode="halfblock", чтобы везде рисовать полублоками, как это делал <Image> в 1.3.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Описание |
|---|---|
src | URL изображения (только в браузере) |
pixels | Необработанные RGBA-данные в виде { width, height, data }, 4 байта на пиксель в порядке строк |
width / height | Ширина в ячейках, высота в строках. Передайте одно значение, чтобы сохранить пропорции, или не передавайте оба для 1 × 2 пикселей на ячейку (src масштабируется максимум до 256 × 256 пикселей) |
fit | contain (по умолчанию), cover или fill |
alt | Текст, отображаемый во время загрузки src или при её ошибке |
renderMode | auto (по умолчанию: спрайт там, где поддерживается, полублоки ▀ в остальных случаях) или halfblock |
<Image> также принимает свойства макета.
src загружается через canvas, поэтому изображениям с другого источника нужен CORS. pixels принимает необработанные RGBA-данные везде, включая терминал.
Изображение также рисуется полублоками в Chromium и Firefox, когда его нельзя отобразить одним спрайтом:
- Два изображения рядом в одних и тех же строках, как в галерее.
- Фотография с текстом рядом. Пиксельная графика рядом с текстом остаётся спрайтом.
- Изображение, обрезанное блоком с
overflow="hidden"или частично перекрытое другим блоком. - Прозрачные пиксели поверх текста или нескольких цветов фона.
<Pixels> (экспериментальный)
@textjs/react/experimental экспортирует <Pixels> для обновляемых кадровых буферов 0xRRGGBBAA, например для игр, эмуляторов и видео. Записывайте упакованные пиксели непосредственно в source.data и увеличивайте frame для перерисовки.
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 | Описание |
|---|---|
source | { width, height, data: Uint32Array } в порядке 0xRRGGBBAA |
frame | Счётчик кадров; увеличивайте после изменения source.data |
width / height | Размер блока в ячейках и строках |
fit | contain (по умолчанию) или fill |
pixelAspect | Отображаемая ширина одного исходного пикселя, делённая на его высоту (по умолчанию 1) |
palette | Необязательная палитра PackedColor[] для квантования цветов |
sample | Фильтр при переходе к полублокам: nearest (по умолчанию) или average |
renderMode | auto (по умолчанию: спрайт там, где поддерживается, полублоки ▀ в остальных случаях) или halfblock |
renderMode="auto" рисует пикселизированный спрайт в Chromium, а в Firefox — согласно правилам стилей его консоли (производительность не измерялась), и переходит к полублокам ▀ в Safari, терминалах, текстовых копиях и на страницах с runtime = "server". Передайте renderMode="halfblock", чтобы везде рисовать полублоками.
Чтобы рисовать пиксели без React, импортируйте drawPixels из @textjs/core/experimental вместе с DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding и PixelRect. Его параметр encoding: "rgba" сохраняет более 256 цветов и плавную прозрачность для статичных изображений, а fallback рисует ваши ячейки везде, где спрайт нельзя отобразить. О версионировании экспериментальных экспортов см. Несовместимые изменения.