estadisticas por estado, municipio y parroquia agregadas

This commit is contained in:
2026-04-16 17:08:14 -04:00
parent 548bb0cdb2
commit f9eef8ebd6
3 changed files with 125 additions and 24 deletions

View File

@@ -117,6 +117,8 @@ export function TrainingStatistics() {
isOpenSpaceDistribution,
hasTransportDistribution,
genderDistribution,
municipalityDistribution,
parishDistribution,
} = data;
const COLORS = [
@@ -279,28 +281,90 @@ export function TrainingStatistics() {
</CardContent>
</Card>
{/* State Distribution */}
{/* <Card className="col-span-full">
<CardHeader>
<CardTitle>Distribución por Estado</CardTitle>
<CardDescription>OSP registradas por estado</CardDescription>
</CardHeader>
<CardContent className="h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={stateDistribution}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip wrapperStyle={{ color: '#000' }} />
<Legend />
<Bar dataKey="value" fill="#00C49F" name="Cantidad" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card> */}
{/* Location Distribution (Dynamic) */}
<Card className="col-span-full">
<CardHeader>
<CardTitle>Distribución por Estado</CardTitle>
<CardDescription>OSP registradas por estado</CardDescription>
</CardHeader>
<CardContent className="h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={stateDistribution}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip wrapperStyle={{ color: '#000' }} />
<Legend />
<Bar dataKey="value" fill="#00C49F" name="Cantidad" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
{stateId > 0 ? (
<Card className="col-span-full">
<CardHeader>
<CardTitle>Distribución por Municipio</CardTitle>
<CardDescription>OSP registradas en este estado</CardDescription>
</CardHeader>
<CardContent className="h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={municipalityDistribution}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip wrapperStyle={{ color: '#000' }} />
<Legend />
<Bar dataKey="value" fill="#0088FE" name="Cantidad" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
) : (
<Card className="col-span-full">
<CardHeader>
<CardTitle>Distribución por Municipio</CardTitle>
<CardDescription>Seleccione un estado</CardDescription>
</CardHeader>
</Card>
)}
{municipalityId > 0 ? (
<Card className="col-span-full">
<CardHeader>
<CardTitle>Distribución por Parroquia</CardTitle>
<CardDescription>OSP registradas en este municipio</CardDescription>
</CardHeader>
<CardContent className="h-[400px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={parishDistribution}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip wrapperStyle={{ color: '#000' }} />
<Legend />
<Bar dataKey="value" fill="#FFBB28" name="Cantidad" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
) : (
<Card className="col-span-full">
<CardHeader>
<CardTitle>Distribución por Parroquia</CardTitle>
<CardDescription>Seleccione un municipio</CardDescription>
</CardHeader>
</Card>
)}
{/* Year Distribution */}
<Card className="col-span-full lg:col-span-1">
@@ -483,7 +547,7 @@ export function TrainingStatistics() {
</Card>
{/* STRUCTURE TYPE DISTRIBUTION */}
<Card className="col-span-full lg:col-span-1">
<Card className="col-span-full lg:col-span-2">
<CardHeader>
<CardTitle>Tipo de Estructura</CardTitle>
<CardDescription>Distribución física</CardDescription>