Text.js
ドキュメント/コンポーネント

チャートとビジュアル

<LineChart>、<BarChart>、<Sparkline>、<ProgressBar>、<Gradient>、<Image>。

チャートはブロック要素で描画します。棒にはセルあたり8段階、線にはセルあたり2×2のドットグリッドを使います。

ライブ72×14 · booting Turbolog…tsx
preview://charts:1
<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軸と凡例を備えたドットマトリックスの折れ線チャートです。

プロパティ説明
series{ data, label?, color? }[]
data単一系列の省略記法
height行数（デフォルトは 8）
min / max固定の上下限（デフォルトはデータに基づく）
axis最小値・最大値ラベル付きのY軸
formatValue軸ラベル（デフォルトは 1.2k）
markerquadrant（デフォルト）または braille

braille はセルあたり2×4のドットを詰め込みます。ターミナルで使ってください。macOSのDevToolsコンソールのフォントであるMenloには点字がなく、フォールバックのグリフはセルより幅が広いためです。

系列の色のデフォルトは accent、success、warning、info、danger です。

<BarChart>

ラベルと値を揃えた横棒チャートで、セルの8分の1の精度で描画します。

<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} />

<Sparkline>

最新のデータ点で幅全体を埋めます。height が 1 より大きい場合は、塗りつぶし領域を描画します。

<Sparkline data={throughput} height={3} />

sparkline(values) は同じスパークラインを文字列として返します。

<ProgressBar>

プロパティ説明
value / max進捗（不定の場合は省略）
variantblock（滑らか）line thin
widthセル数（デフォルトは利用可能な幅全体）
label先頭のテキスト
formatValue末尾のテキスト（デフォルトは 42%）

不定のバーはレンダラーのフレームのペースで移動し、出力が一時停止すると止まります。

<Gradient>

セルごとに色を補間します。複数行の文字列は1つのグラデーションを共有するため、<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色以下で、半透明のピクセルがないもの）は1セルあたり最大8 × 16ピクセル、写真は最大4 × 8ピクセルを保持します。Safari、ターミナル、プレーンテキストのコピー、runtime = "server" を指定したページでは、▀ 半ブロックを使います。各セルは2ピクセルを保持し、上側を前景色、下側を背景色で表示します。1.3の <Image> と同様に、すべての環境で半ブロックを描画するには、renderMode="halfblock" を渡します。

<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />
プロパティ説明
src画像URL（ブラウザーのみ）
pixels{ width, height, data } 形式の生のRGBAデータ、行順で1ピクセルあたり4バイト
width / heightセル単位の幅と行単位の高さ。縦横比を維持するには片方を指定、1セルあたり1 × 2ピクセルにするには両方とも省略（src は最大256 × 256 pxに拡大縮小）
fitcontain（デフォルト）、cover、または fill
altsrc の読み込み中または失敗時に表示するテキスト
renderModeauto（デフォルト：対応環境ではスプライト、それ以外では ▀ 半ブロック）、または halfblock

<Image> はレイアウト用のプロパティも受け取ります。

src はキャンバス経由で読み込むため、クロスオリジンの画像にはCORSが必要です。pixels はターミナルを含むどの環境でも生のRGBAを受け取ります。

画像を1つのスプライトにできない場合は、ChromiumとFirefoxでも半ブロックで描画します。

  • ギャラリーのように、同じ行に2つの画像を横に並べた場合。
  • 写真の横にテキストがある場合。テキストの横にあるピクセルアートはスプライトのままです。
  • overflow="hidden" のボックスで画像が切り取られている場合、または別のボックスで一部が覆われている場合。
  • 透明なピクセルがテキストや複数の背景色に重なっている場合。

<Pixels>（実験的）

@textjs/react/experimental は、ゲーム、エミュレーター、動画などのリアルタイムな 0xRRGGBBAA フレームバッファー向けに <Pixels> をエクスポートします。パックされたピクセルを 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} />
プロパティ説明
source0xRRGGBBAA 順の { width, height, data: Uint32Array }
frameフレームカウンター。source.data の変更後に加算
width / heightセル数と行数で指定するボックスのサイズ
fitcontain（デフォルト）または fill
pixelAspectソースの1ピクセルの表示幅を高さで割った値（デフォルトは 1）
palette色の量子化に使う任意の PackedColor[] パレット
sample半ブロックへのフォールバック時のフィルター：nearest（デフォルト）または average
renderModeauto（デフォルト：対応環境ではスプライト、それ以外では ▀ の半ブロック）または halfblock

renderMode="auto" はChromiumでピクセル化されたスプライトを描画し、Firefoxではコンソールのスタイル規則に従って描画します（ベンチマーク未実施）。Safari、ターミナル、プレーンテキストのコピー、runtime = "server" を指定したページでは、▀ 半ブロックにフォールバックします。すべての環境で半ブロックを描画するには、renderMode="halfblock" を渡します。

Reactを使わずにピクセルを描画するには、@textjs/core/experimental から drawPixels を、DrawPixelsOptions、PixelSource、PixelFit、PixelSample、PixelRenderMode、PixelEncoding、PixelRect とともにインポートします。encoding: "rgba" オプションは静止画像の256色を超える色と滑らかなアルファ値を保持し、fallback はスプライトを表示できない場所で独自のセルを描画します。実験的エクスポートのバージョン管理については、破壊的変更を参照してください。

GitHubでこのページを編集