estadisticas de osp expandida
This commit is contained in:
@@ -103,12 +103,20 @@ export function TrainingStatistics() {
|
||||
|
||||
const {
|
||||
totalOsps,
|
||||
totalProducers,
|
||||
// totalProducers,
|
||||
statusDistribution,
|
||||
activityDistribution,
|
||||
typeDistribution,
|
||||
stateDistribution,
|
||||
yearDistribution,
|
||||
ecoSectorDistribution,
|
||||
productiveSectorDistribution,
|
||||
centralActivityDistribution,
|
||||
mainActivityDistribution,
|
||||
structureTypeDistribution,
|
||||
isOpenSpaceDistribution,
|
||||
hasTransportDistribution,
|
||||
genderDistribution,
|
||||
} = data;
|
||||
|
||||
const COLORS = [
|
||||
@@ -230,7 +238,8 @@ export function TrainingStatistics() {
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
|
||||
{/* <Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Total de Productores
|
||||
@@ -242,7 +251,8 @@ export function TrainingStatistics() {
|
||||
Productores asociados
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Card> */}
|
||||
|
||||
|
||||
<Card className="col-span-full">
|
||||
<CardHeader>
|
||||
@@ -367,6 +377,223 @@ export function TrainingStatistics() {
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* ECO SECTOR DISTRIBUTION */}
|
||||
<Card className="col-span-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Sector Económico</CardTitle>
|
||||
<CardDescription>
|
||||
Distribución por sector económico
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={ecoSectorDistribution}
|
||||
layout="vertical"
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="name" type="category" width={150} />
|
||||
<Tooltip wrapperStyle={{ color: '#000' }} />
|
||||
<Legend />
|
||||
<Bar dataKey="value" fill="#0088FE" name="Cantidad" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* PRODUCTIVE SECTOR DISTRIBUTION */}
|
||||
<Card className="col-span-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Sector Productivo</CardTitle>
|
||||
<CardDescription>
|
||||
Distribución por sector productivo
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={productiveSectorDistribution}
|
||||
layout="vertical"
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="name" type="category" width={150} />
|
||||
<Tooltip wrapperStyle={{ color: '#000' }} />
|
||||
<Legend />
|
||||
<Bar dataKey="value" fill="#00C49F" name="Cantidad" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* CENTRAL PRODUCTIVE ACTIVITY DISTRIBUTION */}
|
||||
<Card className="col-span-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Actividad Central Productiva</CardTitle>
|
||||
<CardDescription>
|
||||
Distribución por actividad central productiva
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={centralActivityDistribution}
|
||||
layout="vertical"
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="name" type="category" width={150} />
|
||||
<Tooltip wrapperStyle={{ color: '#000' }} />
|
||||
<Legend />
|
||||
<Bar dataKey="value" fill="#FF8042" name="Cantidad" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* MAIN PRODUCTIVE ACTIVITY DISTRIBUTION */}
|
||||
<Card className="col-span-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Actividad Productiva Principal</CardTitle>
|
||||
<CardDescription>
|
||||
Distribución por actividad productiva principal
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={mainActivityDistribution}
|
||||
layout="vertical"
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="name" type="category" width={150} />
|
||||
<Tooltip wrapperStyle={{ color: '#000' }} />
|
||||
<Legend />
|
||||
<Bar dataKey="value" fill="#8884d8" name="Cantidad" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* STRUCTURE TYPE DISTRIBUTION */}
|
||||
<Card className="col-span-full lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle>Tipo de Estructura</CardTitle>
|
||||
<CardDescription>Distribución física</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={structureTypeDistribution}
|
||||
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="#82ca9d" name="Cantidad" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* GENDER DISTRIBUTION */}
|
||||
<Card className="col-span-full lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle>Distribución de Género</CardTitle>
|
||||
<CardDescription>Conteo total por género</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={genderDistribution}
|
||||
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="#8884d8" name="Personas" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* OPEN SPACE AND TRANSPORT (PIE CHARTS) */}
|
||||
<div className="col-span-full grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Espacio Abierto</CardTitle>
|
||||
<CardDescription>¿Poseen áreas libres?</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={isOpenSpaceDistribution}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={60}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
paddingAngle={5}
|
||||
dataKey="value"
|
||||
>
|
||||
{isOpenSpaceDistribution.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[(index + 2) % COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip wrapperStyle={{ color: '#000' }} />
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Transporte</CardTitle>
|
||||
<CardDescription>¿Tienen vehículo propio?</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={hasTransportDistribution}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={60}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
paddingAngle={5}
|
||||
dataKey="value"
|
||||
>
|
||||
{hasTransportDistribution.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[(index + 4) % COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip wrapperStyle={{ color: '#000' }} />
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,13 +10,21 @@ export const statisticsItemSchema = z.object({
|
||||
|
||||
export const trainingStatisticsSchema = z.object({
|
||||
totalOsps: z.number(),
|
||||
totalProducers: z.number(),
|
||||
// totalProducers: z.number(),
|
||||
totalProducts: z.number(),
|
||||
statusDistribution: z.array(statisticsItemSchema),
|
||||
activityDistribution: z.array(statisticsItemSchema),
|
||||
typeDistribution: z.array(statisticsItemSchema),
|
||||
stateDistribution: z.array(statisticsItemSchema),
|
||||
yearDistribution: z.array(statisticsItemSchema),
|
||||
ecoSectorDistribution: z.array(statisticsItemSchema),
|
||||
productiveSectorDistribution: z.array(statisticsItemSchema),
|
||||
centralActivityDistribution: z.array(statisticsItemSchema),
|
||||
mainActivityDistribution: z.array(statisticsItemSchema),
|
||||
structureTypeDistribution: z.array(statisticsItemSchema),
|
||||
isOpenSpaceDistribution: z.array(statisticsItemSchema),
|
||||
hasTransportDistribution: z.array(statisticsItemSchema),
|
||||
genderDistribution: z.array(statisticsItemSchema),
|
||||
});
|
||||
|
||||
export type TrainingStatisticsData = z.infer<typeof trainingStatisticsSchema>;
|
||||
|
||||
Reference in New Issue
Block a user