المخططات والمرئيات

تُرسم المخططات بعناصر الكتل. تستخدم الأشرطة ثمانية مستويات لكل خلية، وتستخدم الخطوط شبكة نقاط ⁦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>

مخططات خطية بمصفوفة نقاط مع محور ص ودليل.

يحزم 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 عبر لوحة رسم، لذا تحتاج الصور من مصادر مختلفة إلى 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 خلاياك الخاصة حيثما يتعذر عرض الكائن الرسومي. راجع التغييرات غير المتوافقة لمعرفة كيفية تحديد إصدارات الصادرات التجريبية.