Charts

Un wrapper per Recharts — barre/linee/aree/torta/donut e un anello a progresso radiale, tutti a partire da semplici dati tabellari, nessuna configurazione manuale. Vedi anche HeatmapGrid, SimpleRadarChart e Sparkline per il resto della famiglia di grafici.

import { SimpleBarChart, SimpleLineChart, SimpleAreaChart, SimplePieChart, RadialProgressChart } from "@pompeitech/vesuvius-ui";

Barre

Una singola metrica è il caso comune — passa una chiave in categories:

Barre — multi-serie

Più di una chiave in categories renderizza una barra per serie, raggruppate fianco a fianco per ogni valore di index:

Barre — impilate

Stessi dati multi-serie, stacked — ogni valore di index ora ottiene una sola barra, con i segmenti impilati invece che raggruppati:

Linea

Area

Stessa idea di Barre — prima una singola serie:

Area — impilata

Area — minimale (nessuna griglia, nessun asse)

Per un grafico incorporato in una piccola card statistica invece che come figura autonoma — elimina completamente il chrome e lascia che la forma parli da sé, stessa idea di Sparkline ma con i meccanismi di asse/tooltip ancora disponibili se li riattivi:

Torta / donut

Prima una torta completa (innerRadius={0}, il default):

Torta — donut

Qualsiasi innerRadius diverso da zero (un numero in pixel, o una stringa percentuale relativa al raggio esterno) crea il buco:

Colori personalizzati

colors sovrascrive la sequenza predefinita --chart-1…--chart-5, una voce per categoria — qualsiasi colore CSS valido, incluso un altro token del design system:

Valori formattati

valueFormatter riformatta insieme le tacche dell'asse y e il valore del tooltip — passalo una volta, entrambi restano sincronizzati automaticamente:

Progresso radiale

Un anello a più segmenti — un widget "Project Health" (ripartizione on-track / at-risk / blocked), non un indicatore percentuale su 100.

7Total

On Track2
At Risk1
Blocked1
Dependency3

Composizioni personalizzate

Per qualsiasi cosa che i wrapper Simple* non coprano, componi direttamente i primitivi Recharts dentro ChartContainer — gestisce il collegamento variabile CSS → colore del grafico (config mappa una chiave dati a un token --color-<key>) che ChartTooltip/ChartLegend leggono.

import * as Recharts from "recharts";
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from "@pompeitech/vesuvius-ui";
 
const config = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  expenses: { label: "Expenses", color: "var(--chart-2)" },
} satisfies ChartConfig;
 
<ChartContainer config={config} className="h-72">
  <Recharts.ComposedChart data={data}>
    <Recharts.CartesianGrid vertical={false} />
    <Recharts.XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Recharts.Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
    <Recharts.Line dataKey="revenue" stroke="var(--color-revenue)" strokeWidth={2} dot={false} />
  </Recharts.ComposedChart>
</ChartContainer>

API

SimpleBarChart / SimpleLineChart / SimpleAreaChart condividono questa forma:

Prop	Tipo	Default	Descrizione
`data`	`Record<string, any>[]`		Obbligatorio.
`index`	`string`		Obbligatorio — chiave usata per le etichette dell'asse x.
`categories`	`string[]`		Obbligatorio — chiavi tracciate come serie. Più di una disegna più barre/linee/aree.
`colors`	`string[]`	i token `--chart-1`…`--chart-5` del tema	Un colore per categoria, in ordine.
`stacked`	`boolean`	`false`	Solo Bar/Area — impila le serie per ogni valore di `index` invece di raggrupparle fianco a fianco.
`showLegend`	`boolean`	`true`
`showGrid`	`boolean`	`true`
`showXAxis`	`boolean`	`true`
`showYAxis`	`boolean`	`true`
`valueFormatter`	`(value: number) => string`		Riformatta insieme le tacche dell'asse y e il valore del tooltip.

SimplePieChart

Prop	Tipo	Default	Descrizione
`data`	`Record<string, any>[]`		Obbligatorio.
`index`	`string`		Obbligatorio — chiave che contiene l'etichetta di ogni fetta.
`category`	`string`		Obbligatorio — chiave che contiene il valore di ogni fetta (singolare, a differenza delle `categories` degli altri grafici, dato che una torta ha esattamente una serie di valori).
`innerRadius`	`number \| string`	`0`	Diverso da zero crea un buco donut — un numero in pixel, o una stringa percentuale relativa al raggio esterno.
`colors`	`string[]`	i token `--chart-1`…`--chart-5` del tema	Un colore per fetta, nell'ordine dei dati.
`showLegend`	`boolean`	`true`
`valueFormatter`	`(value: number) => string`		Riformatta il valore del tooltip.

RadialProgressChart

Prop	Tipo	Descrizione
`data`	`{ label: string; value: number; color: string }[]`	Obbligatorio — una voce per segmento dell'anello; i segmenti sono proporzionali tra loro, non rispetto a un totale fisso del 100%, quindi è un widget di ripartizione, non un indicatore percentuale.

ChartContainer (per composizioni personalizzate)

Prop	Tipo	Descrizione
`config`	`ChartConfig` — `Record<string, { label: string; color: string }>`	Mappa ogni chiave dati a un'etichetta e un colore, esposti ai figli come custom property CSS `--color-<key>`.

ChartTooltip/ChartLegend sono sottili wrapper attorno a Tooltip/Legend di Recharts stessi che accettano ChartTooltipContent/ChartLegendContent (stilizzati per abbinarsi al kit) come loro content.

Accessibilità

L'output SVG di Recharts non ha un testo alternativo integrato — un grafico trasmette i suoi dati solo visivamente. Per qualsiasi cosa oltre a un accento decorativo, abbina il grafico a una Table/DataTable che presenti gli stessi valori come testo, o come minimo avvolgilo in un contenitore con un aria-label che riassuma cosa mostra.