Charts

Visão Geral

Os componentes de Charts fornecem visualizações de dados prontas para uso em dashboards e demonstrações. Incluem 4 tipos de gráficos: barras, linhas, pizza e área.

Instalação

Os charts são baseados em Recharts e seguem o padrão do shadcn/ui.

pnpm add recharts

Importação

import {
  MockBarChart,
  MockLineChart,
  MockPieChart,
  MockAreaChart,
  demoBarData,
  demoLineData,
  demoPieData,
  demoAreaData,
} from '@/components/linear/mock-charts'

Componentes Disponíveis

MockBarChart

Gráfico de barras para visualização de métricas mensais ou categorias.

<MockBarChart className="h-40" />

Dados de demo:

export const demoBarData = [
  { name: "Jan", value: 186 },
  { name: "Fev", value: 305 },
  { name: "Mar", value: 237 },
  { name: "Abr", value: 173 },
  { name: "Mai", value: 209 },
  { name: "Jun", value: 284 },
]

MockLineChart

Gráfico de linhas para comparação de séries temporais (ex: tarefas criadas vs concluídas).

<MockLineChart className="h-40" />

Dados de demo:

export const demoLineData = [
  { name: "Seg", tarefas: 12, concluidas: 8 },
  { name: "Ter", tarefas: 19, concluidas: 15 },
  { name: "Qua", tarefas: 15, concluidas: 12 },
  { name: "Qui", tarefas: 22, concluidas: 18 },
  { name: "Sex", tarefas: 18, concluidas: 16 },
]

MockPieChart

Gráfico de pizza com legenda lateral para distribuição de status ou categorias.

<MockPieChart className="h-40" />

Dados de demo:

export const demoPieData = [
  { name: "Concluído", value: 47, fill: "#5B5BD6" },
  { name: "Em andamento", value: 23, fill: "#7C7CEB" },
  { name: "Pendente", value: 12, fill: "#A5A5F7" },
  { name: "Bloqueado", value: 5, fill: "#D4D4FC" },
]

MockAreaChart

Gráfico de área para visualização de atividade ao longo do tempo.

<MockAreaChart className="h-40" />

Dados de demo:

export const demoAreaData = [
  { name: "00:00", agentes: 2, tarefas: 5 },
  { name: "04:00", agentes: 1, tarefas: 3 },
  { name: "08:00", agentes: 5, tarefas: 12 },
  { name: "12:00", agentes: 8, tarefas: 24 },
  { name: "16:00", agentes: 6, tarefas: 18 },
  { name: "20:00", agentes: 4, tarefas: 10 },
]

Props

Todos os componentes de chart aceitam as mesmas props:

Prop	Tipo	Default	Descrição
`className`	`string`	—	Classes adicionais para estilização

Exemplo de Uso

Em um Grid de Métricas

import { MockBarChart, MockLineChart, MockPieChart, MockAreaChart } from '@/components/linear/mock-charts'

export function MetricsDashboard() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <div className="p-4 border rounded-lg">
        <MockBarChart />
      </div>
      <div className="p-4 border rounded-lg">
        <MockLineChart />
      </div>
      <div className="p-4 border rounded-lg">
        <MockPieChart />
      </div>
      <div className="p-4 border rounded-lg">
        <MockAreaChart />
      </div>
    </div>
  )
}

Com BentoCard

import { BentoCard } from '@/components/linear/bento-grid'
import { MockAreaChart } from '@/components/linear/mock-charts'

<BentoCard
  title="Atividade de Agentes"
  description="Monitoramento em tempo real da execução de tarefas"
  colSpan={2}
>
  <MockAreaChart className="mt-4" />
</BentoCard>

Estilização

Os gráficos usam a cor primária da kodda (#5B5BD6) e variantes mais claras para contraste. As cores são aplicadas via CSS variables quando possível.

Paleta de Cores

Uso	Cor
Primária	`#5B5BD6`
Secundária	`#7C7CEB`
Terciária	`#A5A5F7`
Quaternária	`#D4D4FC`
Sucesso	`#22C55E`

Features Visuais

Responsivo: Todos os gráficos usam ResponsiveContainer para adaptar ao container pai
Header informativo: Título, subtítulo e métricas resumidas
Legendas: Indicadores visuais de séries nos gráficos multi-série
Animações: Transições suaves nativas do Recharts
Dark mode: Cores adaptadas via CSS variables (hsl(var(--border)), etc.)

Componente Base (ChartContainer)

Para criar gráficos customizados, use o ChartContainer do shadcn/ui:

import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { BarChart, Bar, XAxis } from 'recharts'

const chartConfig = {
  value: {
    label: "Valor",
    color: "#5B5BD6",
  },
}

export function CustomChart() {
  return (
    <ChartContainer config={chartConfig} className="h-40 w-full">
      <BarChart data={myData}>
        <XAxis dataKey="name" />
        <Bar dataKey="value" fill="var(--color-value)" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  )
}

On this page