चार्ट और विज़ुअल

चार्ट ब्लॉक एलिमेंट से बनते हैं। बार हर सेल में आठ स्तर इस्तेमाल करते हैं, और लाइन हर सेल में 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>

अपनी चौड़ाई को सबसे नए पॉइंट से भरता है। height का मान 1 से ऊपर होने पर भरा हुआ क्षेत्र रेंडर होता है।

<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 आपके अपने सेल पेंट करता है। प्रयोगात्मक एक्सपोर्ट की वर्शनिंग कैसे होती है, इसके लिए ब्रेकिंग बदलाव देखें।