christian.julian
/
LANIA_Proyecto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Archivos de filtro de graficos

This commit is contained in:
Hectorgh24 2025-05-27 13:45:31 -06:00
parent e77ed0dfd4
commit d528fab969
4 changed files with 875 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

526
controllers/graficos.php Normal file
View File

@ -0,0 +1,526 @@
<?php
require_once '../config/Database.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = json_decode(file_get_contents('php://input'), true);
$tipoConsulta = $input['tipoConsulta'] ?? '';
$filtros = [
'id_rango_edad' => $input['id_rango_edad'] ?? null,
'id_genero' => $input['id_genero'] ?? null,
'id_examen' => $input['id_examen'] ?? null,
'fechaInicio' => $input['fechaInicio'] ?? null,
'fechaFin' => $input['fechaFin'] ?? null,
];
$graficos = new Graficos();
switch ($tipoConsulta) {
case 'Femenino':
$cantidad = $graficos->obtenerGeneroFemenino($filtros);
break;
case 'Masculino':
$cantidad = $graficos->obtenerGeneroMasculino($filtros);
break;
case 'Prefiero no decirlo':
$cantidad = $graficos->obtenerGeneroNoDefinido($filtros);
break;
case 'Menor de 18 años':
$cantidad = $graficos->obtenerEdadMenor18($filtros);
break;
case '18 a 24 años':
$cantidad = $graficos->obtenerEdad1824($filtros);
break;
case '25 a 34 años':
$cantidad = $graficos->obtenerEdad2434($filtros);
break;
case '35 a 44 años':
$cantidad = $graficos->obtenerEdad3544($filtros);
break;
case '45 a 54 años':
$cantidad = $graficos->obtenerEdad4554($filtros);
break;
case '55 a 64 años':
$cantidad = $graficos->obtenerEdad5564($filtros);
break;
case '65 años o más':
$cantidad = $graficos->obtenerEdad65oMas($filtros);
break;
case 'Estados':
$cantidad = $graficos->obtenerEstados($filtros);
echo json_encode($cantidad);
exit;
case 'Examenes':
$cantidad = $graficos->obtenerExamenes($filtros);
echo json_encode($cantidad);
exit;
case 'Fechas':
$fechaInicio = $input['fechaInicio'] ?? '';
$fechaFin = $input['fechaFin'] ?? '';
$cantidad = $graficos->obtenerFecha($fechaInicio, $fechaFin);
echo json_encode($cantidad);
exit;
default:
$cantidad = 0;
}
echo json_encode(['cantidad' => $cantidad]);
}
class Graficos{
private $Database;
protected $db;
public function __construct() {
$this->Database = new Database();
$this->db = $this->Database->getInstance();
}
public function obtenerGeneroFemenino($filtros = []) {
$sql = "SELECT COUNT(*) AS Femenino FROM candidato WHERE id_genero = 2";
$params = [];
$types = "";
if (!empty($filtros['id_rango_edad']) && $filtros['id_rango_edad'] !== "NULL") {
$sql .= " AND id_rango_edad = ?";
$params[] = $filtros['id_rango_edad'];
$types .= "i";
}
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['Femenino'];
}
$query->close();
return $output;
}
public function obtenerGeneroMasculino($filtros = []) {
$sql = "SELECT COUNT(*) AS Masculino FROM candidato WHERE id_genero = 1";
$params = [];
$types = "";
if (!empty($filtros['id_rango_edad']) && $filtros['id_rango_edad'] !== "NULL") {
$sql .= " AND id_rango_edad = ?";
$params[] = $filtros['id_rango_edad'];
$types .= "i";
}
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['Masculino'];
}
$query->close();
return $output;
}
public function obtenerGeneroNoDefinido($filtros = []) {
$sql = "SELECT COUNT(*) AS NoDefinido FROM candidato WHERE id_genero = 3";
$params = [];
$types = "";
if (!empty($filtros['id_rango_edad']) && $filtros['id_rango_edad'] !== "NULL") {
$sql .= " AND id_rango_edad = ?";
$params[] = $filtros['id_rango_edad'];
$types .= "i";
}
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['NoDefinido'];
}
$query->close();
return $output;
}
public function obtenerEdadMenor18($filtros = []) {
$sql = "SELECT COUNT(*) AS menorEdad FROM candidato WHERE id_rango_edad = 1";
$params = [];
$types = "";
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['menorEdad'];
}
$query->close();
return $output;
}
public function obtenerEdad1824($filtros = []) {
$sql = "SELECT COUNT(*) AS edad1824 FROM candidato WHERE id_rango_edad = 2";
$params = [];
$types = "";
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['edad1824'];
}
$query->close();
return $output;
}
public function obtenerEdad2434($filtros = []) {
$sql = "SELECT COUNT(*) AS edad2434 FROM candidato WHERE id_rango_edad = 3";
$params = [];
$types = "";
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['edad2434'];
}
$query->close();
return $output;
}
public function obtenerEdad3544($filtros = []) {
$sql = "SELECT COUNT(*) AS edad3544 FROM candidato WHERE id_rango_edad = 4";
$params = [];
$types = "";
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['edad3544'];
}
$query->close();
return $output;
}
public function obtenerEdad4554($filtros = []) {
$sql = "SELECT COUNT(*) AS edad4554 FROM candidato WHERE id_rango_edad = 5";
$params = [];
$types = "";
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['edad4554'];
}
$query->close();
return $output;
}
public function obtenerEdad5564($filtros = []) {
$sql = "SELECT COUNT(*) AS edad5564 FROM candidato WHERE id_rango_edad = 6";
$params = [];
$types = "";
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['edad5564'];
}
$query->close();
return $output;
}
public function obtenerEdad65oMas($filtros = []) {
$sql = "SELECT COUNT(*) AS edad65oMas FROM candidato WHERE id_rango_edad = 7";
$params = [];
$types = "";
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$output = "0";
if ($resultado->num_rows > 0) {
$data = $resultado->fetch_assoc();
$output = $data['edad65oMas'];
}
$query->close();
return $output;
}
public function obtenerEstados($filtros = []) {
$sql = "SELECT estados.nombre AS estado, COUNT(*) AS cantidad
FROM candidato
INNER JOIN info_candidatos ON candidato.id_candidato = info_candidatos.id_candidato
INNER JOIN estados ON info_candidatos.id_estado = estados.id
WHERE 1=1";
$params = [];
$types = "";
if (!empty($filtros['id_rango_edad']) && $filtros['id_rango_edad'] !== "NULL") {
$sql .= " AND candidato.id_rango_edad = ?";
$params[] = $filtros['id_rango_edad'];
$types .= "i";
}
if (!empty($filtros['id_genero']) && $filtros['id_genero'] !== "NULL") {
$sql .= " AND candidato.id_genero = ?";
$params[] = $filtros['id_genero'];
$types .= "i";
}
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND candidato.id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(candidato.fecha_entrada) >= ? AND DATE(candidato.fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$sql .= " GROUP BY estados.nombre ORDER BY estados.nombre";
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$estados = [];
while ($data = $resultado->fetch_assoc()) {
$estados[] = $data;
}
$query->close();
return $estados;
}
public function obtenerExamenes($filtros = []) {
$sql = "SELECT examen.nombre_examen AS examen, COUNT(*) AS cantidad
FROM candidato
LEFT JOIN examen ON candidato.id_examen = examen.id_examen
WHERE 1=1";
$params = [];
$types = "";
if (!empty($filtros['id_rango_edad']) && $filtros['id_rango_edad'] !== "NULL") {
$sql .= " AND candidato.id_rango_edad = ?";
$params[] = $filtros['id_rango_edad'];
$types .= "i";
}
if (!empty($filtros['id_genero']) && $filtros['id_genero'] !== "NULL") {
$sql .= " AND candidato.id_genero = ?";
$params[] = $filtros['id_genero'];
$types .= "i";
}
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
$sql .= " AND candidato.id_examen = ?";
$params[] = $filtros['id_examen'];
$types .= "i";
}
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
$sql .= " AND DATE(candidato.fecha_entrada) >= ? AND DATE(candidato.fecha_salida) <= ?";
$params[] = $filtros['fechaInicio'];
$params[] = $filtros['fechaFin'];
$types .= "ss";
}
$sql .= " GROUP BY examen.nombre_examen ORDER BY examen.nombre_examen";
$query = $this->db->prepare($sql);
if ($params) {
$query->bind_param($types, ...$params);
}
$query->execute();
$resultado = $query->get_result();
$examenes = [];
while ($data = $resultado->fetch_assoc()) {
$examenes[] = $data;
}
$query->close();
return $examenes;
}
public function obtenerFecha($fechaInicio, $fechaFin) {
$sql = "SELECT COUNT(*) AS cantidad
FROM candidato
WHERE DATE(fecha_entrada) >= ? AND DATE(fecha_entrada) <= ?";
$query = $this->db->prepare($sql);
$query->bind_param("ss", $fechaInicio, $fechaFin);
$query->execute();
$resultado = $query->get_result();
$data = $resultado->fetch_assoc();
$query->close();
// Devuelve un array con un solo objeto para mantener compatibilidad con el frontend
return [ [ 'cantidad' => $data['cantidad'], 'fechaInicio' => $fechaInicio, 'fechaFin' => $fechaFin ] ];
}
}
?>

147
inicio.html
View File

@ -4,7 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'> <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="css/inicio.css"> <link rel="stylesheet" href="../css/inicio.css">
<title>AdminSite</title> <title>AdminSite</title>
</head> </head>
<body> <body>
@ -27,13 +28,13 @@
</li> </li>
<li><a href="#"><i class='bx bxs-chart icon' ></i> Charts</a></li> <li><a href="#"><i class='bx bxs-chart icon' ></i> Charts</a></li>
<li><a href="#"><i class='bx bxs-widget icon' ></i> Widgets</a></li> <li><a href="#"><i class='bx bxs-widget icon' ></i> Widgets</a></li>
<li class="divider" data-text="table and forms">Table and forms</li> <li class="divider" data-text="tablas y formularios">Tablas y formularios</li>
<li><a href="#"><i class='bx bx-table icon' ></i> Tables</a></li> <li><a href="#"><i class='bx bx-table icon' ></i> Tablas</a></li>
<li> <li>
<a href="#"><i class='bx bxs-notepad icon' ></i> Formularios <i class='bx bx-chevron-right icon-right' ></i></a> <a href="#"><i class='bx bxs-notepad icon' ></i> Formularios <i class='bx bx-chevron-right icon-right' ></i></a>
<ul class="side-dropdown"> <ul class="side-dropdown">
<li><a href="form_datos_basicos.html">Datos Básicos</a></li> <li><a href="formulario-candidato.html">Registro de candidato</a></li>
<li><a href="form_datos_extendidos.html">Datos Extendidos</a></li> <li><a href="formulario-datos-candidato.php">Datos de candidato</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -85,52 +86,109 @@
<li class="divider">/</li> <li class="divider">/</li>
<li><a href="#" class="active">Dashboard</a></li> <li><a href="#" class="active">Dashboard</a></li>
</ul> </ul>
<div class="info-data">
<!--Añadido nuevo -->
<div class="select-data">
<div class="card"> <div class="card">
<div class="head"> <div class="head">
<div> <i class='bx bx-trending-up icon'></i>
<h2>1500</h2> </div>
<p>Traffic</p>
</div>
<i class='bx bx-trending-up icon' ></i> <div style="display: flex; gap: 20px; margin: 10px 0;">
<!-- Campo: Edad -->
<div style="flex: 1;">
<label class="form-label" for="id_rango_edad">Edad</label>
<select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
<option value="NULL">Seleccione una opción</option>
</select>
</div>
<!-- Campo: Género -->
<div style="flex: 1;">
<label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
<select class="border rounded-pill shadow-sm form-select" id="id_genero" required="">
<option value="NULL">Seleccione una opción</option>
<option value="1">Masculino</option>
<option value="2">Femenino</option>
<option value="3">Prefiero no decir</option>
</select>
</div>
<div style="flex: 1;">
<label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label>
<select class="border rounded-pill shadow-sm form-select" id="id_examen" required="">
<option value="NULL">Seleccione una opción</option>
</select>
</div> </div>
<span class="progress" data-value="40%"></span>
<span class="label">40%</span>
</div> </div>
<div class="card">
<h2>Fecha</h2>
<h3>Ingresa una fecha de inicio:</h3>
<br>
<input type="date" id="date1" name="date1">
<h3>Ingresa una fecha de final:</h3>
<input type="date" id="date2" name="date2">
<br>
<button type="button" id="buscar">Buscar</button>
<button type="button" id="limpiar">Limpiar</button>
<br>
<div class="content-data">
<div class="head"> <div class="head">
<div> <h3>Resultado de registros en el rango de fecha ingresado</h3>
<h2>234</h2> <div class="menu">
<p>Sales</p>
</div> </div>
<i class='bx bx-trending-down icon down' ></i>
</div> </div>
<span class="progress" data-value="60%"></span> <div class="chart">
<span class="label">60%</span> <div id="chart5"></div>
</div>
<div class="card">
<div class="head">
<div>
<h2>465</h2>
<p>Pageviews</p>
</div>
<i class='bx bx-trending-up icon' ></i>
</div> </div>
<span class="progress" data-value="30%"></span>
<span class="label">30%</span>
</div>
<div class="card">
<div class="head">
<div>
<h2>235</h2>
<p>Visitors</p>
</div>
<i class='bx bx-trending-up icon' ></i>
</div>
<span class="progress" data-value="80%"></span>
<span class="label">80%</span>
</div> </div>
</div> </div>
<div>
<br>
<h3>Promedio de géneros:</h3>
<div class="info-data">
<div class="card" id="card-femenino">
<div class="head">
<div style="display: flex; align-items: center; gap: 8px;">
<i class='bx bx-female' style="font-size: 24px; color: #e91e63;"></i>
<div>
<h2>0</h2>
<p>Femenino</p>
</div>
</div>
</div>
</div>
<div class="card" id="card-masculino">
<div class="head">
<div style="display: flex; align-items: center; gap: 8px;">
<i class='bx bx-male' style="font-size: 24px; color: #2196f3;"></i>
<div>
<h2>0</h2>
<p>Masculino</p>
</div>
</div>
</div>
</div>
<div class="card" id="card-nodefinido">
<div class="head">
<div style="display: flex; align-items: center; gap: 8px;">
<i class='bx bx-male' style="font-size: 24px; color: black;"></i>
<div>
<h2>0</h2>
<p>Prefiero no decirlo</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="data"> <div class="data">
<div class="content-data"> <div class="content-data">
<div class="head"> <div class="head">
@ -197,19 +255,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</main> </main>
<!-- MAIN --> <!-- MAIN -->
</section> </section>
<!-- NAVBAR --> <!-- NAVBAR -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="module" src="js/inicio.js"></script> <script type="module" src="../js/inicio.js"></script>
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script> <script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
<<<<<<< HEAD:views/inicio.html
<script src="../js/formulario-candidato.js"></script> <script src="../js/formulario-candidato.js"></script>
<script src="../js/tarjetasPromedio.js"></script> <script src="../js/tarjetasPromedio.js"></script>
=======
>>>>>>> parent of a8e2895 (archivos de merge desde la rama recuperar-cambios):inicio.html
</body> </body>
</html> </html>

155
js/funcionesGraficos.js
View File

@ -1,78 +1,58 @@
async function recuperarCantidadGenero(tipoConsulta) { async function recuperarCantidadGenero(tipoConsulta, filtros = {}) {
try { try {
const response = await fetch("./php/graficos.php", { const response = await fetch("../controllers/graficos.php", {
method: "POST", method: "POST",
headers: { headers: { "Content-Type": "application/json" },
"Content-Type": "application/json", body: JSON.stringify({ tipoConsulta, ...filtros }),
},
body: JSON.stringify({ tipoConsulta }),
}); });
const data = await response.json(); const data = await response.json();
return data.cantidad || 0; return data.cantidad || 0;
} catch (error) { } catch (error) {
console.error("Error al recuperar datos:", error); console.error("Error al recuperar datos:", error);
return 0; return 0;
} }
} }
async function recuperarCantidadEdad(tipoConsulta) { async function recuperarCantidadEdad(tipoConsulta, filtros = {}) {
try { try {
const response = await fetch("./php/graficos.php", { const response = await fetch("../controllers/graficos.php", {
method: "POST", method: "POST",
headers: { headers: { "Content-Type": "application/json" },
"Content-Type": "application/json", body: JSON.stringify({ tipoConsulta, ...filtros }),
},
body: JSON.stringify({ tipoConsulta }),
}); });
const data = await response.json(); const data = await response.json();
return data.cantidad || 0; return data.cantidad || 0;
} catch (error) { } catch (error) {
console.error("Error al recuperar datos:", error); console.error("Error al recuperar datos:", error);
return 0; return 0;
} }
} }
async function recuperarCantidadEstado(tipoConsulta) { async function recuperarCantidadEstado(tipoConsulta, filtros = {}) {
try { try {
const response = await fetch("./php/graficos.php", { const response = await fetch("../controllers/graficos.php", {
method: "POST", method: "POST",
headers: { headers: { "Content-Type": "application/json" },
"Content-Type": "application/json", body: JSON.stringify({ tipoConsulta, ...filtros }),
},
body: JSON.stringify({ tipoConsulta }),
}); });
const data = await response.json(); const data = await response.json();
if (!Array.isArray(data)) throw new Error("La respuesta del backend no es un array.");
if (!Array.isArray(data)) { return data;
throw new Error("La respuesta del backend no es un array.");
}
return data;
} catch (error) { } catch (error) {
console.error("Error al recuperar datos de estados:", error); console.error("Error al recuperar datos de estados:", error);
return []; return [];
} }
} }
async function recuperarCantidadExamen(tipoConsulta) { async function recuperarCantidadExamen(tipoConsulta, filtros = {}) {
try { try {
const response = await fetch("./php/graficos.php", { const response = await fetch("../controllers/graficos.php", {
method: "POST", method: "POST",
headers: { headers: { "Content-Type": "application/json" },
"Content-Type": "application/json", body: JSON.stringify({ tipoConsulta, ...filtros }),
},
body: JSON.stringify({ tipoConsulta }),
}); });
const data = await response.json(); const data = await response.json();
if (!Array.isArray(data)) throw new Error("La respuesta del backend no es un array");
if (!Array.isArray(data)) {
throw new Error("La respuesta del backend no es un array");
}
return data; return data;
} catch (error) { } catch (error) {
console.error("Error al recuperar datos de examenes:", error); console.error("Error al recuperar datos de examenes:", error);
@ -80,64 +60,99 @@ async function recuperarCantidadExamen(tipoConsulta) {
} }
} }
async function recuperarCantidadFecha(tipoConsulta, filtros = {}) {
async function obtenerDatosEdades() { try {
const edad1 = await recuperarCantidadEdad("Menor de 18 años"); const response = await fetch("../controllers/graficos.php", {
const edad2 = await recuperarCantidadEdad("18 a 24 años"); method: "POST",
const edad3 = await recuperarCantidadEdad("25 a 34 años"); headers: { "Content-Type": "application/json" },
const edad4 = await recuperarCantidadEdad("35 a 44 años"); body: JSON.stringify({ tipoConsulta, ...filtros }),
const edad5 = await recuperarCantidadEdad("45 a 54 años"); });
const edad6 = await recuperarCantidadEdad("55 a 64 años"); const data = await response.json();
const edad7 = await recuperarCantidadEdad("65 años o más"); if (!Array.isArray(data)) throw new Error("La respuesta del backend no es un array.");
return data;
return [edad1, edad2, edad3, edad4, edad5, edad6]; } catch (error) {
console.error("Error al recuperar datos de fechas:", error);
return [];
}
} }
async function obtenerDatosEdades(filtros = {}) {
const edad1 = await recuperarCantidadEdad("Menor de 18 años", filtros);
const edad2 = await recuperarCantidadEdad("18 a 24 años", filtros);
const edad3 = await recuperarCantidadEdad("25 a 34 años", filtros);
const edad4 = await recuperarCantidadEdad("35 a 44 años", filtros);
const edad5 = await recuperarCantidadEdad("45 a 54 años", filtros);
const edad6 = await recuperarCantidadEdad("55 a 64 años", filtros);
const edad7 = await recuperarCantidadEdad("65 años o más", filtros);
return [edad1, edad2, edad3, edad4, edad5, edad6, edad7];
}
async function obtenerDatosGeneros() { async function obtenerDatosGeneros(filtros = {}) {
const femenino = await recuperarCantidadGenero("Femenino"); const femenino = await recuperarCantidadGenero("Femenino", filtros);
const masculino = await recuperarCantidadGenero("Masculino"); const masculino = await recuperarCantidadGenero("Masculino", filtros);
const noDefinido = await recuperarCantidadGenero("Prefiero no decirlo"); const noDefinido = await recuperarCantidadGenero("Prefiero no decirlo", filtros);
return [femenino, masculino, noDefinido]; return [femenino, masculino, noDefinido];
} }
async function obtenerDatosEstados() { async function obtenerDatosEstados(filtros = {}) {
try { try {
const estados = await recuperarCantidadEstado("Estados"); const estados = await recuperarCantidadEstado("Estados", filtros);
if (!Array.isArray(estados)) { if (!Array.isArray(estados)) {
console.error("Error: 'estados' no es un array. Verifica la respuesta del backend"); console.error("Error: 'estados' no es un array. Verifica la respuesta del backend");
return []; return [];
} }
const estadosValidos = estados.filter(estado => estado.estado && estado.cantidad !== undefined); const estadosValidos = estados.filter(estado => estado.estado && estado.cantidad !== undefined);
return estadosValidos;
return estadosValidos;
} catch (error) { } catch (error) {
console.error("Error al obtener datos de estados:", error); console.error("Error al obtener datos de estados:", error);
return []; return [];
} }
} }
async function obtenerDatosExamenes() { async function obtenerDatosExamenes(filtros = {}) {
try { try {
const examenes = await recuperarCantidadExamen("Examenes"); const examenes = await recuperarCantidadExamen("Examenes", filtros);
if (!Array.isArray(examenes)) { if (!Array.isArray(examenes)) {
console.error("Error: 'examenes' no es un array. Verifica la respuesta del backend"); console.error("Error: 'examenes' no es un array. Verifica la respuesta del backend");
return []; return [];
} }
const examenesValidos = examenes.filter(examen => examen.examen && examen.cantidad !== undefined); const examenesValidos = examenes.filter(examen => examen.examen && examen.cantidad !== undefined);
return examenesValidos;
return examenesValidos;
} catch (error) { } catch (error) {
console.error("Error al obtener datos de examenes:", error); console.error("Error al obtener datos de examenes:", error);
return []; return [];
} }
} }
async function obtenerDatosFechas(filtros = {}) {
try {
const fechas = await recuperarCantidadFecha("Fechas", filtros);
if (!Array.isArray(fechas) || !fechas.length) {
return [];
}
// Solo un objeto con la cantidad total
return fechas;
} catch (error) {
console.error("Error al obtener datos de fechas:", error);
return [];
}
}
function getFiltrosSeleccionados() {
return {
id_rango_edad: document.getElementById('id_rango_edad')?.value || "NULL",
id_genero: document.getElementById('id_genero')?.value || "NULL",
id_examen: document.getElementById('id_examen')?.value || "NULL",
fechaInicio: document.getElementById('date1')?.value || "",
fechaFin: document.getElementById('date2')?.value || ""
};
}
export { obtenerDatosGeneros, obtenerDatosEdades, obtenerDatosEstados, obtenerDatosExamenes }; export {
obtenerDatosGeneros,
obtenerDatosEdades,
obtenerDatosEstados,
obtenerDatosExamenes,
obtenerDatosFechas,
getFiltrosSeleccionados
};

320
js/inicio.js
View File

@ -163,10 +163,67 @@ allProgress.forEach(item=> {
import { obtenerDatosGeneros, obtenerDatosEdades, obtenerDatosEstados,obtenerDatosExamenes } from './funcionesGraficos.js'; import {
obtenerDatosGeneros,
obtenerDatosEdades,
obtenerDatosEstados,
obtenerDatosExamenes,
obtenerDatosFechas,
getFiltrosSeleccionados
} from './funcionesGraficos.js';
async function inicializarGrafico() { // Variables globales para los graficos
const [femenino, masculino, noDefinido] = await obtenerDatosGeneros(); let chartGenero = null;
let chartEdad = null;
let chartEstado = null;
let chartExamen = null;
let chartFecha = null;
// Controla si el filtro de fecha está activo
let filtroFechaActivo = false;
async function inicializarGraficoFecha(filtros) {
// Solo dibujar si ambas fechas están presentes y el filtro está activo
if (!filtroFechaActivo || !filtros.fechaInicio || !filtros.fechaFin) {
if (chartFecha) {
chartFecha.destroy();
chartFecha = null;
}
return;
}
const fechas = await obtenerDatosFechas(filtros);
if (!fechas.length) {
if (chartFecha) {
chartFecha.destroy();
chartFecha = null;
}
return;
}
// Solo un valor total
const cantidad = fechas[0].cantidad;
const label = `Del ${fechas[0].fechaInicio} al ${fechas[0].fechaFin}`;
const options = {
series: [{
name: 'Candidatos',
data: [cantidad]
}],
chart: { height: 350, type: 'bar' },
xaxis: { categories: [label] },
dataLabels: { enabled: true },
tooltip: { y: { formatter: val => val + " candidatos" } }
};
if (chartFecha) chartFecha.destroy();
chartFecha = new ApexCharts(document.querySelector("#chart5"), options);
chartFecha.render();
}
async function inicializarGrafico(filtros) {
const [femenino, masculino, noDefinido] = await obtenerDatosGeneros(filtros);
const options = { const options = {
series: [ series: [
@ -174,183 +231,132 @@ async function inicializarGrafico() {
{ name: 'Masculino', data: [masculino] }, { name: 'Masculino', data: [masculino] },
{ name: 'Prefiero no decirlo', data: [noDefinido] }, { name: 'Prefiero no decirlo', data: [noDefinido] },
], ],
chart: { chart: { height: 350, type: 'bar' },
height: 350, plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
type: 'bar', dataLabels: { enabled: false },
}, xaxis: { categories: ['Géneros'] },
plotOptions: { tooltip: { y: { formatter: val => val + " personas" } }
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 5,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ['Géneros'],
},
tooltip: {
y: {
formatter: function (val) {
return val + " personas";
},
},
},
}; };
const chart = new ApexCharts(document.querySelector("#chart"), options); if (chartGenero) chartGenero.destroy();
chart.render(); chartGenero = new ApexCharts(document.querySelector("#chart"), options);
chartGenero.render();
} }
inicializarGrafico(); async function inicializarGrafico2(filtros) {
const [edad1, edad2, edad3, edad4, edad5, edad6, edad7] = await obtenerDatosEdades(filtros);
async function inicializarGrafico2() {
const [edad1,edad2,edad3,edad4,edad5,edad6,edad7] = await obtenerDatosEdades();
const options2 = { const options2 = {
series: [ series: [
{ name: 'Menor de 18 años', data: [edad1] }, { name: 'Menor de 18 años', data: [edad1] },
{ name: '18 a 24 años', data: [edad2] }, { name: '18 a 24 años', data: [edad2] },
{ name: '25 a 34 años', data: [edad3] }, { name: '25 a 34 años', data: [edad3] },
{ name: '35 a 44 años', data: [edad4] }, { name: '35 a 44 años', data: [edad4] },
{ name: '45 a 54 años', data: [edad5] }, { name: '45 a 54 años', data: [edad5] },
{ name: '55 a 64 años', data: [edad6] }, { name: '55 a 64 años', data: [edad6] },
{ name: '65 años o más', data: [edad7] }, { name: '65 años o más', data: [edad7] },
], ],
chart: { chart: { height: 350, type: 'bar' },
height: 350, plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
type: 'bar', dataLabels: { enabled: false },
}, xaxis: { categories: ['Edades'] },
plotOptions: { tooltip: { y: { formatter: val => val + " Años" } }
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 5,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ['Edades'],
},
tooltip: {
y: {
formatter: function (val) {
return val + " Años";
},
},
},
}; };
const chart2 = new ApexCharts(document.querySelector("#chart2"), options2); if (chartEdad) chartEdad.destroy();
chart2.render(); chartEdad = new ApexCharts(document.querySelector("#chart2"), options2);
chartEdad.render();
} }
inicializarGrafico2(); async function inicializarGrafico3(filtros) {
const estados = await obtenerDatosEstados(filtros);
const seriesData = estados.map(estado => ({
name: estado.estado,
data: [estado.cantidad]
}));
async function inicializarGrafico3() { const options3 = {
try { series: seriesData,
const estados = await obtenerDatosEstados(); chart: { height: 350, type: 'bar' },
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
dataLabels: { enabled: false },
xaxis: { categories: estados.map(estado => estado.estado) },
tooltip: { y: { formatter: val => val + " personas" } }
};
if (!Array.isArray(estados)) { if (chartEstado) chartEstado.destroy();
console.error("Error: 'estados' no es un array. Verifica la funcion obtenerDatosEstados"); chartEstado = new ApexCharts(document.querySelector("#chart3"), options3);
return; chartEstado.render();
} }
const seriesData = estados.map(estado => ({ async function inicializarGrafico4(filtros) {
name: estado.estado, const examenes = await obtenerDatosExamenes(filtros);
data: [estado.cantidad]
}));
const options3 = { const seriesData = examenes.map(examen => ({
series: seriesData, name: examen.examen,
chart: { data: [examen.cantidad]
height: 350, }));
type: 'bar',
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 5,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: estados.map(estado => estado.estado), // categorias en el eje X
},
tooltip: {
y: {
formatter: function (val) {
return val + " personas";
},
},
},
};
const chart3 = new ApexCharts(document.querySelector("#chart3"), options3); const options4 = {
chart3.render(); series: seriesData,
} catch (error) { chart: { height: 350, type: 'bar' },
console.error("Error al inicializar el gráfico 3:", error); plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
dataLabels: { enabled: false },
xaxis: { categories: examenes.map(examen => examen.examen) },
tooltip: { y: { formatter: val => val + " examenes" } }
};
if (chartExamen) chartExamen.destroy();
chartExamen = new ApexCharts(document.querySelector("#chart4"), options4);
chartExamen.render();
}
async function actualizarTodosLosGraficos() {
// Si el filtro de fecha está activo, se pasan las fechas, si no, se limpian
let filtros = getFiltrosSeleccionados();
if (!filtroFechaActivo) {
filtros.fechaInicio = "";
filtros.fechaFin = "";
} }
await inicializarGrafico(filtros);
await inicializarGrafico2(filtros);
await inicializarGrafico3(filtros);
await inicializarGrafico4(filtros);
await inicializarGraficoFecha(filtros);
} }
inicializarGrafico3(); // Espera a que el DOM esté listo antes de agregar eventos
document.addEventListener('DOMContentLoaded', () => {
// Solo combos, NO fechas
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
const el = document.getElementById(id);
if (el) el.addEventListener('change', actualizarTodosLosGraficos);
});
async function inicializarGrafico4() { // Botón buscar para fechas
try { const btnBuscar = document.getElementById('buscar');
const examenes = await obtenerDatosExamenes(); if (btnBuscar) {
btnBuscar.addEventListener('click', () => {
if (!Array.isArray(examenes)) { const date1 = document.getElementById('date1').value;
console.error("Error: 'examenes' no es un array. Verifica la función obtenerDatosExamenes"); const date2 = document.getElementById('date2').value;
return; // Solo activa el filtro si ambas fechas están presentes
} filtroFechaActivo = !!(date1 && date2);
actualizarTodosLosGraficos();
const seriesData = examenes.map(examen => ({ });
name: examen.examen,
data: [examen.cantidad]
}));
const options4 = {
series: seriesData,
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 5,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: examenes.map(examen => examen.examen), // categorías en el eje X
},
tooltip: {
y: {
formatter: function (val) {
return val + " examenes";
},
},
},
};
const chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
chart4.render();
} catch (error) {
console.error("Error al inicializar el grafico 4:", error);
} }
}
// Botón limpiar para quitar filtro de fecha
const btnLimpiar = document.getElementById('limpiar');
if (btnLimpiar) {
btnLimpiar.addEventListener('click', () => {
document.getElementById('date1').value = '';
document.getElementById('date2').value = '';
filtroFechaActivo = false;
actualizarTodosLosGraficos();
});
}
inicializarGrafico4(); filtroFechaActivo = false;
actualizarTodosLosGraficos();
});