چارٹس اور بصری عناصر

چارٹ بلاک ایلیمنٹس سے بنائے جاتے ہیں۔ بارز ہر سیل میں آٹھ سطحیں استعمال کرتی ہیں، اور لائنیں ہر سیل میں ⁦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⁩ نقطے رکھتا ہے۔ اسے ٹرمینلز میں استعمال کریں: macOS پر DevTools کونسول کے فونٹ Menlo میں بریل نہیں ہے، اور فال بیک گلفس ایک سیل سے زیادہ چوڑے ہیں۔

سیریز کے ڈیفالٹ رنگ accent، success، warning، info اور danger ہیں۔

#<BarChart>

سیدھ میں رکھے لیبلز اور قدروں کے ساتھ افقی بارز، ایک سیل کے آٹھویں حصے کی درستگی پر۔

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

#<Sparkline>

اپنی چوڑائی کو تازہ ترین پوائنٹس سے بھرتا ہے۔ 1 سے زیادہ height بھرا ہوا رقبہ رینڈر کرتی ہے۔

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

sparkline(values) یہی اسپارک لائن اسٹرنگ کی صورت میں لوٹاتا ہے۔

#<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 کینوس سے لوڈ ہوتا ہے، اس لیے کراس اوریجن تصاویر کو CORS درکار ہے۔ pixels ہر جگہ خام RGBA لیتا ہے، ٹرمینل میں بھی۔

⁦Chromium⁩ اور Firefox میں بھی تصویر نصف بلاکس کی صورت میں بنتی ہے جب وہ ایک اسپرائٹ نہ بن سکے:

• ایک ہی قطاروں میں ساتھ ساتھ دو تصاویر، جیسے گیلری میں۔
• ایک تصویر جس کے ساتھ متن ہو۔ متن کے ساتھ پکسل آرٹ اسپرائٹ ہی رہتا ہے۔
• 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} />

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 آپ کے اپنے سیلز پینٹ کرتا ہے۔ تجرباتی ایکسپورٹس کی ورژن بندی کے طریقے کے لیے مطابقت توڑنے والی تبدیلیاں دیکھیں۔