Sparkline

Una minuscola linea di tendenza inline — SVG puro (min/max scalati automaticamente, nessun asse/tacca/tooltip), non una composizione Charts: a questa dimensione, i meccanismi di responsive-container/tooltip di Recharts sono puro overhead per "la linea sale o scende." Non renderizza nulla per meno di 2 punti. Si inserisce direttamente nella prop trend di StatCard o in ChartCard.

import { Sparkline } from "@pompeitech/vesuvius-ui";

Default

Riempita

In discesa

API

Sparkline

Prop	Tipo	Default	Descrizione
`data`	`number[]`		Obbligatorio. Non renderizza nulla per meno di 2 punti.
`width` / `height`	`number`	`100` / `32`	Dimensioni del viewport SVG — l'elemento stesso si ridimensiona comunque al proprio contenitore tramite `viewBox`, quindi larghezza/altezza in pixel influiscono principalmente sul rapporto d'aspetto.
`color`	`string`	`"currentColor"`	Imposta `text-*` su un wrapper (come in ogni esempio sopra) per tematizzarlo, invece di passare un valore colore letterale.
`filled`	`boolean`	`false`	Aggiunge un morbido riempimento a gradiente sotto la linea.

Accessibilità

SVG puramente decorativo senza un proprio testo alternativo — quando la tendenza che mostra trasporta un'informazione non disponibile altrove (non solo un accento visivo accanto a un numero che già indica la variazione), dai al suo wrapper un aria-label che riassuma la tendenza, oppure assicurati che il testo circostante (come il changePct di StatCard) la copra già.