78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/shadcn/card';
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
|
|
import { SurveyStatisticsData } from '../schemas/statistics';
|
|
|
|
interface SurveyResponsesProps {
|
|
data: SurveyStatisticsData | undefined;
|
|
}
|
|
|
|
export function SurveyResponses({ data }: SurveyResponsesProps) {
|
|
if (!data) return null;
|
|
|
|
const { responsesByAudience, responseDistribution } = data;
|
|
|
|
const COLORS = ['#0088FE', '#8884d8', '#00C49F', '#FFBB28', '#FF8042'];
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card className="col-span-1">
|
|
<CardHeader>
|
|
<CardTitle>Respuestas por Audiencia</CardTitle>
|
|
<CardDescription>Distribución de respuestas según el tipo de audiencia</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={responsesByAudience}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={true}
|
|
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{responsesByAudience.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip formatter={(value, name) => [`${value} respuestas`, name]} />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="col-span-1">
|
|
<CardHeader>
|
|
<CardTitle>Distribución de Respuestas</CardTitle>
|
|
<CardDescription>Cantidad de respuestas por encuesta</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={responseDistribution}
|
|
layout="vertical"
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis type="number" />
|
|
<YAxis dataKey="title" type="category" width={150} tick={{ fontSize: 12 }} />
|
|
<Tooltip wrapperStyle={{color: '#000', fontWeight: 'bold' }}/>
|
|
<Legend />
|
|
<Bar dataKey="responses" fill="#8884d8" name="Respuestas" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |