תרשימים ותצוגות חזותיות

תרשימים מצוירים באמצעות תווי בלוקים. עמודות משתמשות בשמונה רמות לכל תא, וקווים משתמשים ברשת נקודות של ⁦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> מקבל גם מאפייני layout.

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 מצייר תאים מותאמים בכל מקום שבו אי אפשר להציג את הספרייט. לפרטים על ניהול גרסאות של ייצואים ניסיוניים, ראו שינויים שוברי תאימות.