نمودارها و عناصر بصری

نمودارها با عناصر بلوکی رسم می‌شوند. میله‌ها از هشت سطح در هر سلول و خط‌ها از شبکه‌ای با ⁦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 و راهنمای نمودار.

گزینهٔ 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) همان sparkline را به‌صورت رشته برمی‌گرداند.

#<ProgressBar>

نوارهای نامعین با آهنگ فریم رندرکننده حرکت می‌کنند و با توقف موقت خروجی متوقف می‌شوند.

#<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" />

کامپوننت <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} />

گزینهٔ 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 هرجا که نمایش اسپرایت ممکن نباشد، سلول‌های دلخواه شما را رسم می‌کند. برای آگاهی از نحوهٔ نسخه‌بندی خروجی‌های آزمایشی، تغییرات ناسازگار را ببینید.