Chart Card

Il pattern "numero in evidenza sopra un grafico" usato nelle dashboard di amministrazione — icona in un box + etichetta, una cifra grande in grassetto, un badge di tendenza, una didascalia, poi qualsiasi grafico sotto. Si abbina alla famiglia di grafici o a Sparkline come children.

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

Default

Ricavi totali

276.000,00 €+12%rispetto al mese scorso

Ricavi totali (ultimi 6 mesi)

API

ChartCard

Prop	Tipo	Descrizione
`icon`	`LucideIcon`	Icona in un box opzionale accanto all'etichetta.
`label`	`string`
`value`	`ReactNode`	La cifra in evidenza.
`changePct`	`number`	Renderizza un badge di tendenza — verde+su per positivo, rosso+giù per negativo.
`changeLabel`	`string`	Testo dopo la percentuale, ad es. `"vs last month"`.
`caption`	`ReactNode`	Piccola riga attenuata sotto il valore.
`action`	`ReactNode`	Slot in alto a destra — una legenda, un selettore di periodo.
`children`	`ReactNode`	Il grafico stesso — qualsiasi componente grafico (`Sparkline`, `Charts`) dimensionato per riempire il proprio contenitore.

Più ogni prop nativa di <div> sulla radice.