Guia de Charts

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/components/ui/chart";
import { Bar, BarChart, XAxis, YAxis } from "recharts";

const data = [
  { month: "Jan", problemas: 45, concluidos: 32, abertos: 13 },
  { month: "Fev", problemas: 52, concluidos: 41, abertos: 11 },
  { month: "Mar", problemas: 38, concluidos: 29, abertos: 9 },
  { month: "Abr", problemas: 61, concluidos: 48, abertos: 13 },
  { month: "Mai", problemas: 44, concluidos: 36, abertos: 8 },
  { month: "Jun", problemas: 57, concluidos: 45, abertos: 12 },
];

const chartConfig = {
  problemas: {
    label: "Problemas Totais",
    color: "var(--chart-1)",
  },
  concluidos: {
    label: "Problemas Resolvidos", 
    color: "var(--chart-2)",
  },
  abertos: {
    label: "Problemas Abertos",
    color: "var(--chart-3)",
  },
};

export function GraficoPRMensal() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Problemas por Mês</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-80">
          <BarChart data={data}>
            <XAxis dataKey="month" />
            <YAxis />
            <ChartTooltip content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Bar dataKey="problemas" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
            <Bar dataKey="concluidos" fill="var(--chart-2)" radius={[4, 4, 0, 0]} />
            <Bar dataKey="abertos" fill="var(--chart-3)" radius={[4, 4, 0, 0]} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/components/ui/chart";
import { PieChart, Pie, Cell } from "recharts";

const data = [
  { name: "Concluído", value: 231, fill: "var(--chart-concluido)" },
  { name: "Em Análise", value: 89, fill: "var(--chart-em-analise)" },
  { name: "Enviado", value: 45, fill: "var(--chart-enviado)" },
  { name: "Cancelado", value: 23, fill: "var(--chart-cancelado)" },
];

export function GraficoStatusProblemas() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Status dos Problemas</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={{}} className="mx-auto aspect-square max-h-[300px]">
          <PieChart>
            <ChartTooltip content={<ChartTooltipContent nameKey="name" />} />
            <Pie
              data={data}
              dataKey="value"
              nameKey="name"
              cx="50%"
              cy="50%"
              outerRadius={80}
            >
              {data.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.fill} />
              ))}
            </Pie>
            <ChartLegend content={<ChartLegendContent />} />
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/components/ui/chart";
import { AreaChart, Area, XAxis, YAxis } from "recharts";

const data = [
  { month: "Jan", crit: 15, moderate: 22, light: 28, prevent: 12 },
  { month: "Fev", crit: 12, moderate: 25, light: 31, prevent: 15 },
  { month: "Mar", crit: 18, moderate: 28, light: 25, prevent: 18 },
  { month: "Abr", crit: 10, moderate: 23, light: 34, prevent: 22 },
  { month: "Mai", crit: 14, moderate: 20, light: 29, prevent: 19 },
  { month: "Jun", crit: 8, moderate: 18, light: 32, prevent: 25 },
];

const chartConfig = {
  crit: { label: "Crítico", color: "var(--chart-crit)" },
  moderate: { label: "Moderado", color: "var(--chart-moderate)" },
  light: { label: "Leve", color: "var(--chart-light)" },
  prevent: { label: "Preventivo", color: "var(--chart-prevent)" },
};

export function GraficoProblemasPrograma() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Evolução de Problemas por Criticidade</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-80">
          <AreaChart data={data}>
            <XAxis dataKey="month" />
            <YAxis />
            <ChartTooltip content={<ChartTooltipContent />} />
            <Area 
              type="monotone" 
              dataKey="prevent" 
              stackId="1" 
              stroke="var(--chart-prevent)" 
              fill="var(--chart-prevent)" 
              fillOpacity={0.6}
            />
            <Area 
              type="monotone" 
              dataKey="light" 
              stackId="1" 
              stroke="var(--chart-light)" 
              fill="var(--chart-light)" 
              fillOpacity={0.6}
            />
            <Area 
              type="monotone" 
              dataKey="moderate" 
              stackId="1" 
              stroke="var(--chart-moderate)" 
              fill="var(--chart-moderate)" 
              fillOpacity={0.6}
            />
            <Area 
              type="monotone" 
              dataKey="crit" 
              stackId="1" 
              stroke="var(--chart-crit)" 
              fill="var(--chart-crit)" 
              fillOpacity={0.6}
            />
            <ChartLegend content={<ChartLegendContent />} />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

npm install recharts