Graphiques et visuels
<LineChart>, <BarChart>, <Sparkline>, <ProgressBar>, <Gradient> et <Image>.
Les graphiques sont dessinés avec des éléments de bloc. Les barres utilisent huit niveaux par cellule, et les lignes une grille de 2×2 points par cellule.
<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>
Graphiques linéaires en matrice de points avec un axe des ordonnées et une légende.
| Prop | Description |
|---|---|
series | { data, label?, color? }[] |
data | Raccourci pour une seule série |
height | Lignes (par défaut 8) |
min / max | Bornes fixes (par défaut : les données) |
axis | Axe des ordonnées avec libellés min / max |
formatValue | Libellés de l’axe (par défaut 1.2k) |
marker | quadrant (par défaut) ou braille |
braille regroupe 2×4 points par cellule. Utilisez-le dans les terminaux : Menlo, la police de la console DevTools sur macOS, ne contient pas de braille, et les glyphes de remplacement sont plus larges qu’une cellule.
Les couleurs des séries sont par défaut accent, success, warning, info et danger.
<BarChart>
Barres horizontales avec libellés et valeurs alignés, avec une précision d’un huitième de cellule.
<BarChart data={regions} max={2000} formatValue={(v) => `${v} req/s`} /><Sparkline>
Remplit sa largeur avec les points les plus récents. Une valeur de height supérieure à 1 produit une aire remplie.
<Sparkline data={throughput} height={3} />sparkline(values) renvoie la même sparkline sous forme de chaîne de caractères.
<ProgressBar>
| Prop | Description |
|---|---|
value / max | Progression (à omettre pour une progression indéterminée) |
variant | block (continu) line thin |
width | Cellules (par défaut : toute la largeur) |
label | Texte au début |
formatValue | Texte à la fin (par défaut 42%) |
Les barres indéterminées défilent au rythme des frames du moteur de rendu et s’arrêtent lorsque la sortie est en pause.
<Gradient>
Interpolation des couleurs par cellule. Les chaînes sur plusieurs lignes partagent un même dégradé, ce qui convient à <AsciiFont>.
<Gradient colors={["#ff4d8d", "#3291ff"]} bold>▼ Text.js</Gradient><Gradient colors="dusk">{renderAsciiFont("SHIP").join("\n")}</Gradient>Dégradés nommés : geist dusk ocean mono ember.
<Image>
Les consoles de Chromium et Firefox dessinent l’image sous forme de sprite de pixels. Le pixel art (256 couleurs ou moins, sans pixels partiellement transparents) conserve jusqu’à 8 × 16 pixels par cellule, et les photos jusqu’à 4 × 8. Safari, les terminaux, les copies en texte brut et les pages avec runtime = "server" utilisent des demi-blocs ▀ : chaque cellule contient deux pixels, celui du haut au premier plan et celui du bas en arrière-plan. Passez renderMode="halfblock" pour dessiner des demi-blocs partout, comme le faisait <Image> en 1.3.
<Image src="/avatar.png" width={24} /><Image pixels={{ width, height, data }} height={8} fit="cover" />| Prop | Description |
|---|---|
src | URL de l’image (navigateur uniquement) |
pixels | RGBA brut sous la forme { width, height, data }, 4 octets par pixel dans l’ordre des lignes |
width / height | Largeur en cellules, hauteur en lignes. Passez l’une des deux pour conserver les proportions, ou aucune pour 1 × 2 pixels par cellule (src redimensionne à 256 × 256 px maximum) |
fit | contain (par défaut), cover ou fill |
alt | Texte affiché pendant le chargement de src ou en cas d’échec |
renderMode | auto (par défaut : sprite si pris en charge, demi-blocs ▀ ailleurs) ou halfblock |
<Image> accepte aussi les props de layout.
src charge les images via un canvas, les images d’une autre origine nécessitent donc CORS. pixels accepte du RGBA brut partout, y compris dans le terminal.
Une image est aussi dessinée en demi-blocs dans Chromium et Firefox lorsqu’elle ne peut pas former un seul sprite :
- Deux images côte à côte sur les mêmes lignes, comme dans une galerie.
- Une photo avec du texte à côté. Le pixel art à côté du texte reste un sprite.
- Une image rognée par une boîte
overflow="hidden", ou partiellement recouverte par une autre boîte. - Des pixels transparents sur du texte ou sur plusieurs couleurs d’arrière-plan.
<Pixels> (expérimental)
@textjs/react/experimental exporte <Pixels> pour les tampons de frame 0xRRGGBBAA en temps réel, comme ceux des jeux, des émulateurs et de la vidéo. Écrivez les pixels compactés directement dans source.data et incrémentez frame pour redessiner.
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} />| Prop | Description |
|---|---|
source | { width, height, data: Uint32Array } dans l’ordre 0xRRGGBBAA |
frame | Compteur de frames ; à incrémenter après modification de source.data |
width / height | Taille de la boîte en cellules et en lignes |
fit | contain (par défaut) ou fill |
pixelAspect | Largeur affichée divisée par la hauteur d’un pixel source (par défaut 1) |
palette | Palette PackedColor[] facultative servant à quantifier les couleurs |
sample | Filtre de repli en demi-blocs : nearest (par défaut) ou average |
renderMode | auto (par défaut : sprite si pris en charge, demi-blocs ▀ ailleurs) ou halfblock |
renderMode="auto" dessine un sprite pixellisé dans Chromium, et dans Firefox selon les règles de style de sa console (performances non mesurées), et utilise des demi-blocs ▀ en repli dans Safari, les terminaux, les copies en texte brut et les pages avec runtime = "server". Passez renderMode="halfblock" pour dessiner des demi-blocs partout.
Pour dessiner des pixels sans React, importez drawPixels depuis @textjs/core/experimental ainsi que DrawPixelsOptions, PixelSource, PixelFit, PixelSample, PixelRenderMode, PixelEncoding et PixelRect. Son option encoding: "rgba" conserve plus de 256 couleurs et les niveaux de transparence des images fixes, et fallback dessine vos propres cellules partout où le sprite ne peut pas être affiché. Consultez Changements incompatibles pour connaître les règles de versionnement des exports expérimentaux.