127 lines
4.8 KiB
TypeScript
127 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/shadcn/card';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@repo/shadcn/select';
|
|
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
|
|
import { SurveyStatisticsData } from '../schemas/statistics';
|
|
|
|
interface SurveyDetailsProps {
|
|
data: SurveyStatisticsData | undefined;
|
|
}
|
|
|
|
export function SurveyDetails({ data }: SurveyDetailsProps) {
|
|
const [selectedSurvey, setSelectedSurvey] = useState<string>('');
|
|
|
|
if (!data || !data.surveyDetails || data.surveyDetails.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<p className="text-center text-muted-foreground">No hay datos detallados disponibles</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Set default selected survey if none is selected
|
|
if (!selectedSurvey && data.surveyDetails.length > 0) {
|
|
setSelectedSurvey(data.surveyDetails?.[0]?.id.toString() ?? '');
|
|
}
|
|
|
|
const currentSurvey = data.surveyDetails.find(
|
|
(survey) => survey.id.toString() === selectedSurvey
|
|
);
|
|
|
|
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d', '#ffc658'];
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Detalles por Encuesta</CardTitle>
|
|
<CardDescription>Análisis detallado de respuestas por encuesta</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Select value={selectedSurvey} onValueChange={setSelectedSurvey}>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Selecciona una encuesta" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{data.surveyDetails.map((survey) => (
|
|
<SelectItem key={survey.id} value={survey.id.toString()}>
|
|
{survey.title}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{currentSurvey && (
|
|
<>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{currentSurvey.title}</CardTitle>
|
|
<CardDescription>{currentSurvey.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Total de respuestas:</span>
|
|
<span>{currentSurvey.totalResponses}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Audiencia objetivo:</span>
|
|
<span>{currentSurvey.targetAudience}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Fecha de creación:</span>
|
|
<span>{new Date(currentSurvey.createdAt).toLocaleDateString()}</span>
|
|
</div>
|
|
{currentSurvey.closingDate && (
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">Fecha de cierre:</span>
|
|
<span>{new Date(currentSurvey.closingDate).toLocaleDateString()}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{currentSurvey.questionStats && currentSurvey.questionStats.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Distribución de Respuestas</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={currentSurvey.questionStats}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={true}
|
|
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="count"
|
|
nameKey="label"
|
|
>
|
|
{currentSurvey.questionStats.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip formatter={(value, name) => [`${value}`, name]} />
|
|
{/* <Legend /> */}
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
} |