VegaChart
Wrapper genérico e theme-aware para renderizar gráficos Vega-Lite / Vega.
Carregando...
Instalação
npx @kobana/ui add vega-chartDependências instaladas automaticamente: vega-embed, next-themes
Importação
import { VegaChart } from "@/components/kobana/vega-chart"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
spec | VisualizationSpec | — | Especificação Vega ou Vega-Lite a ser renderizada |
data | unknown[] | Record<string, unknown> | — | Dados injetados na spec. Array vira { values }; objeto é usado direto |
className | string | — | Classes adicionais aplicadas ao container responsivo |
theme | "light" | "dark" | "auto" | "auto" | Tema do gráfico. "auto" segue o tema da aplicação |
actions | boolean | false | Exibe o menu de ações do Vega (exportar/ver código) |
responsive | boolean | true | Ocupa 100% da largura, recalculando ao redimensionar |
config | Record<string, unknown> | — | Sobrescreve/estende o config do Vega aplicado por cima do tema |
onError | (error: unknown) => void | — | Callback disparado quando a renderização falha |
Uso
const spec = {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
mark: "bar",
encoding: {
x: { field: "label", type: "nominal" },
y: { field: "value", type: "quantitative" },
},
}
const data = [
{ label: "Jan", value: 42 },
{ label: "Fev", value: 58 },
{ label: "Mar", value: 35 },
]
<VegaChart spec={spec} data={data} />O VegaChart é totalmente genérico: aceita qualquer especificação Vega-Lite ou Vega, sem acoplamento a um domínio específico. Ele carrega o vega-embed sob demanda, aplica um tema coerente com o design system (claro/escuro) e ajusta a largura do gráfico ao container via ResizeObserver. Use a prop config para ajustes finos de cores e fontes.