82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/shadcn/card';
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
import { SurveyStatisticsData } from '../schemas/statistics';
|
|
|
|
interface SurveyOverviewProps {
|
|
data: SurveyStatisticsData | undefined;
|
|
}
|
|
|
|
export function SurveyOverview({ data }: SurveyOverviewProps) {
|
|
if (!data) return null;
|
|
|
|
const { totalSurveys, totalResponses, completionRate, surveysByMonth } = data;
|
|
|
|
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total de Encuestas</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{totalSurveys}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Encuestas creadas en la plataforma
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total de Respuestas</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{totalResponses}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Respuestas recibidas en todas las encuestas
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
{/* <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Tasa de Completado</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{totalSurveys/totalResponses}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Porcentaje de encuestas completadas
|
|
</p>
|
|
</CardContent> */}
|
|
</Card>
|
|
|
|
<Card className="col-span-full">
|
|
<CardHeader>
|
|
<CardTitle>Encuestas por Mes</CardTitle>
|
|
<CardDescription>Distribución de encuestas creadas por mes</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="h-80">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={surveysByMonth}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="month" />
|
|
<YAxis />
|
|
<Tooltip wrapperStyle={{color: '#000', fontWeight: 'bold' }}/>
|
|
<Legend />
|
|
<Bar dataKey="count" fill="#8884d8" name="Encuestas" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |