Mejora de filtro de graficos
This commit is contained in:
Hectorgh24
parent
f3f649ee88
commit
32cbd07cfb
|
|
@ -5,66 +5,58 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
$input = json_decode(file_get_contents('php://input'), true);
|
$input = json_decode(file_get_contents('php://input'), true);
|
||||||
$tipoConsulta = $input['tipoConsulta'] ?? '';
|
$tipoConsulta = $input['tipoConsulta'] ?? '';
|
||||||
|
|
||||||
$filtros = [
|
$graficos = new Graficos();
|
||||||
'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();
|
// Casos especiales para tarjetas de promedio
|
||||||
|
if (
|
||||||
|
$tipoConsulta === "Femenino" ||
|
||||||
|
$tipoConsulta === "Masculino" ||
|
||||||
|
$tipoConsulta === "Prefiero no decirlo"
|
||||||
|
) {
|
||||||
|
$cantidad = $graficos->obtenerCantidadPorGenero($tipoConsulta);
|
||||||
|
echo json_encode(["cantidad" => $cantidad]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
switch ($tipoConsulta) {
|
// Solo un filtro a la vez
|
||||||
case 'Femenino':
|
$filtros = [];
|
||||||
$cantidad = $graficos->obtenerGeneroFemenino($filtros);
|
if (!empty($input['id_rango_edad'])) $filtros['id_rango_edad'] = $input['id_rango_edad'];
|
||||||
break;
|
else if (!empty($input['id_genero'])) $filtros['id_genero'] = $input['id_genero'];
|
||||||
case 'Masculino':
|
else if (!empty($input['id_examen'])) $filtros['id_examen'] = $input['id_examen'];
|
||||||
$cantidad = $graficos->obtenerGeneroMasculino($filtros);
|
else if (!empty($input['fechaInicio']) && !empty($input['fechaFin'])) {
|
||||||
break;
|
$filtros['fechaInicio'] = $input['fechaInicio'];
|
||||||
case 'Prefiero no decirlo':
|
$filtros['fechaFin'] = $input['fechaFin'];
|
||||||
$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]);
|
switch ($tipoConsulta) {
|
||||||
|
case 'Generos':
|
||||||
|
$cantidad = $graficos->obtenerGeneros($filtros);
|
||||||
|
echo json_encode($cantidad);
|
||||||
|
exit;
|
||||||
|
case 'Edades':
|
||||||
|
$cantidad = $graficos->obtenerEdades($filtros);
|
||||||
|
echo json_encode($cantidad);
|
||||||
|
exit;
|
||||||
|
case 'Estados':
|
||||||
|
$cantidad = $graficos->obtenerEstados($filtros);
|
||||||
|
echo json_encode($cantidad);
|
||||||
|
exit;
|
||||||
|
case 'Examenes':
|
||||||
|
$cantidad = $graficos->obtenerExamenes($filtros);
|
||||||
|
echo json_encode($cantidad);
|
||||||
|
exit;
|
||||||
|
case 'Fechas':
|
||||||
|
$cantidad = $graficos->obtenerFechas($filtros);
|
||||||
|
echo json_encode($cantidad);
|
||||||
|
exit;
|
||||||
|
case 'ResumenGenero': // NUEVO
|
||||||
|
$cantidad = $graficos->obtenerResumenGenero($filtros);
|
||||||
|
echo json_encode($cantidad);
|
||||||
|
exit;
|
||||||
|
default:
|
||||||
|
echo json_encode([]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Graficos{
|
class Graficos{
|
||||||
|
|
@ -76,378 +68,116 @@ class Graficos{
|
||||||
$this->db = $this->Database->getInstance();
|
$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") {
|
// NUEVO: Para tarjetas de promedio
|
||||||
$sql .= " AND id_rango_edad = ?";
|
public function obtenerCantidadPorGenero($genero) {
|
||||||
$params[] = $filtros['id_rango_edad'];
|
$sql = "SELECT COUNT(*) as cantidad
|
||||||
$types .= "i";
|
FROM candidato c
|
||||||
}
|
INNER JOIN genero g ON c.id_genero = g.id_genero
|
||||||
if (!empty($filtros['id_examen']) && $filtros['id_examen'] !== "NULL") {
|
WHERE g.descripcion = ?";
|
||||||
$sql .= " AND id_examen = ?";
|
$query = $this->db->prepare($sql);
|
||||||
$params[] = $filtros['id_examen'];
|
$query->bind_param("s", $genero);
|
||||||
$types .= "i";
|
$query->execute();
|
||||||
}
|
$resultado = $query->get_result();
|
||||||
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
$row = $resultado->fetch_assoc();
|
||||||
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_salida) <= ?";
|
$query->close();
|
||||||
$params[] = $filtros['fechaInicio'];
|
return intval($row['cantidad']);
|
||||||
$params[] = $filtros['fechaFin'];
|
|
||||||
$types .= "ss";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$query = $this->db->prepare($sql);
|
// Gráfico de Géneros
|
||||||
if ($params) {
|
public function obtenerGeneros($filtros = []) {
|
||||||
$query->bind_param($types, ...$params);
|
$sql = "SELECT g.descripcion AS genero, COUNT(*) AS cantidad
|
||||||
}
|
FROM candidato c
|
||||||
$query->execute();
|
INNER JOIN genero g ON c.id_genero = g.id_genero
|
||||||
$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";
|
WHERE 1=1";
|
||||||
$params = [];
|
$params = [];
|
||||||
$types = "";
|
$types = "";
|
||||||
|
|
||||||
if (!empty($filtros['id_rango_edad']) && $filtros['id_rango_edad'] !== "NULL") {
|
if (!empty($filtros['id_genero'])) {
|
||||||
$sql .= " AND candidato.id_rango_edad = ?";
|
$sql .= " AND c.id_genero = ?";
|
||||||
$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'];
|
$params[] = $filtros['id_genero'];
|
||||||
$types .= "i";
|
$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'])) {
|
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
||||||
$sql .= " AND DATE(candidato.fecha_entrada) >= ? AND DATE(candidato.fecha_salida) <= ?";
|
$sql .= " AND DATE(c.fecha_entrada) >= ? AND DATE(c.fecha_entrada) <= ?";
|
||||||
$params[] = $filtros['fechaInicio'];
|
$params[] = $filtros['fechaInicio'];
|
||||||
$params[] = $filtros['fechaFin'];
|
$params[] = $filtros['fechaFin'];
|
||||||
$types .= "ss";
|
$types .= "ss";
|
||||||
}
|
}
|
||||||
|
$sql .= " GROUP BY g.descripcion ORDER BY g.descripcion";
|
||||||
$sql .= " GROUP BY estados.nombre ORDER BY estados.nombre";
|
|
||||||
|
|
||||||
$query = $this->db->prepare($sql);
|
$query = $this->db->prepare($sql);
|
||||||
if ($params) {
|
if ($params) $query->bind_param($types, ...$params);
|
||||||
$query->bind_param($types, ...$params);
|
$query->execute();
|
||||||
|
$resultado = $query->get_result();
|
||||||
|
|
||||||
|
$generos = [];
|
||||||
|
while ($data = $resultado->fetch_assoc()) {
|
||||||
|
$generos[] = $data;
|
||||||
}
|
}
|
||||||
|
$query->close();
|
||||||
|
return $generos;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gráfico de Edades
|
||||||
|
public function obtenerEdades($filtros = []) {
|
||||||
|
$sql = "SELECT r.descripcion AS rango_edad, COUNT(*) AS cantidad
|
||||||
|
FROM candidato c
|
||||||
|
INNER JOIN rango_edad r ON c.id_rango_edad = r.id_rango_edad
|
||||||
|
WHERE 1=1";
|
||||||
|
$params = [];
|
||||||
|
$types = "";
|
||||||
|
|
||||||
|
if (!empty($filtros['id_rango_edad'])) {
|
||||||
|
$sql .= " AND c.id_rango_edad = ?";
|
||||||
|
$params[] = $filtros['id_rango_edad'];
|
||||||
|
$types .= "i";
|
||||||
|
}
|
||||||
|
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
||||||
|
$sql .= " AND DATE(c.fecha_entrada) >= ? AND DATE(c.fecha_entrada) <= ?";
|
||||||
|
$params[] = $filtros['fechaInicio'];
|
||||||
|
$params[] = $filtros['fechaFin'];
|
||||||
|
$types .= "ss";
|
||||||
|
}
|
||||||
|
$sql .= " GROUP BY r.descripcion ORDER BY r.id_rango_edad";
|
||||||
|
|
||||||
|
$query = $this->db->prepare($sql);
|
||||||
|
if ($params) $query->bind_param($types, ...$params);
|
||||||
|
$query->execute();
|
||||||
|
$resultado = $query->get_result();
|
||||||
|
|
||||||
|
$edades = [];
|
||||||
|
while ($data = $resultado->fetch_assoc()) {
|
||||||
|
$edades[] = $data;
|
||||||
|
}
|
||||||
|
$query->close();
|
||||||
|
return $edades;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gráfico de Estados
|
||||||
|
public function obtenerEstados($filtros = []) {
|
||||||
|
$sql = "SELECT e.nombre AS estado, COUNT(*) AS cantidad
|
||||||
|
FROM info_candidatos i
|
||||||
|
INNER JOIN estados e ON i.id_estado = e.id
|
||||||
|
WHERE 1=1";
|
||||||
|
$params = [];
|
||||||
|
$types = "";
|
||||||
|
|
||||||
|
if (!empty($filtros['id_estado'])) {
|
||||||
|
$sql .= " AND i.id_estado = ?";
|
||||||
|
$params[] = $filtros['id_estado'];
|
||||||
|
$types .= "i";
|
||||||
|
}
|
||||||
|
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
||||||
|
$sql .= " AND DATE(i.fecha_entrada) >= ? AND DATE(i.fecha_entrada) <= ?";
|
||||||
|
$params[] = $filtros['fechaInicio'];
|
||||||
|
$params[] = $filtros['fechaFin'];
|
||||||
|
$types .= "ss";
|
||||||
|
}
|
||||||
|
$sql .= " GROUP BY e.nombre ORDER BY e.nombre";
|
||||||
|
|
||||||
|
$query = $this->db->prepare($sql);
|
||||||
|
if ($params) $query->bind_param($types, ...$params);
|
||||||
$query->execute();
|
$query->execute();
|
||||||
$resultado = $query->get_result();
|
$resultado = $query->get_result();
|
||||||
|
|
||||||
|
|
@ -457,44 +187,32 @@ public function obtenerEstados($filtros = []) {
|
||||||
}
|
}
|
||||||
$query->close();
|
$query->close();
|
||||||
return $estados;
|
return $estados;
|
||||||
}
|
}
|
||||||
|
|
||||||
public function obtenerExamenes($filtros = []) {
|
// Gráfico de Exámenes
|
||||||
$sql = "SELECT examen.nombre_examen AS examen, COUNT(*) AS cantidad
|
public function obtenerExamenes($filtros = []) {
|
||||||
FROM candidato
|
$sql = "SELECT ex.nombre_examen AS examen, COUNT(*) AS cantidad
|
||||||
LEFT JOIN examen ON candidato.id_examen = examen.id_examen
|
FROM candidato c
|
||||||
|
INNER JOIN examen ex ON c.id_examen = ex.id_examen
|
||||||
WHERE 1=1";
|
WHERE 1=1";
|
||||||
$params = [];
|
$params = [];
|
||||||
$types = "";
|
$types = "";
|
||||||
|
|
||||||
if (!empty($filtros['id_rango_edad']) && $filtros['id_rango_edad'] !== "NULL") {
|
if (!empty($filtros['id_examen'])) {
|
||||||
$sql .= " AND candidato.id_rango_edad = ?";
|
$sql .= " AND c.id_examen = ?";
|
||||||
$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'];
|
$params[] = $filtros['id_examen'];
|
||||||
$types .= "i";
|
$types .= "i";
|
||||||
}
|
}
|
||||||
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
||||||
$sql .= " AND DATE(candidato.fecha_entrada) >= ? AND DATE(candidato.fecha_salida) <= ?";
|
$sql .= " AND DATE(c.fecha_entrada) >= ? AND DATE(c.fecha_entrada) <= ?";
|
||||||
$params[] = $filtros['fechaInicio'];
|
$params[] = $filtros['fechaInicio'];
|
||||||
$params[] = $filtros['fechaFin'];
|
$params[] = $filtros['fechaFin'];
|
||||||
$types .= "ss";
|
$types .= "ss";
|
||||||
}
|
}
|
||||||
|
$sql .= " GROUP BY ex.nombre_examen ORDER BY ex.nombre_examen";
|
||||||
$sql .= " GROUP BY examen.nombre_examen ORDER BY examen.nombre_examen";
|
|
||||||
|
|
||||||
$query = $this->db->prepare($sql);
|
$query = $this->db->prepare($sql);
|
||||||
if ($params) {
|
if ($params) $query->bind_param($types, ...$params);
|
||||||
$query->bind_param($types, ...$params);
|
|
||||||
}
|
|
||||||
$query->execute();
|
$query->execute();
|
||||||
$resultado = $query->get_result();
|
$resultado = $query->get_result();
|
||||||
|
|
||||||
|
|
@ -504,22 +222,69 @@ public function obtenerExamenes($filtros = []) {
|
||||||
}
|
}
|
||||||
$query->close();
|
$query->close();
|
||||||
return $examenes;
|
return $examenes;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
// Gráfico de Fechas
|
||||||
|
public function obtenerFechas($filtros = []) {
|
||||||
public function obtenerFecha($fechaInicio, $fechaFin) {
|
|
||||||
$sql = "SELECT COUNT(*) AS cantidad
|
$sql = "SELECT COUNT(*) AS cantidad
|
||||||
FROM candidato
|
FROM candidato
|
||||||
WHERE DATE(fecha_entrada) >= ? AND DATE(fecha_entrada) <= ?";
|
WHERE 1=1";
|
||||||
|
$params = [];
|
||||||
|
$types = "";
|
||||||
|
|
||||||
|
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
||||||
|
$sql .= " AND DATE(fecha_entrada) >= ? AND DATE(fecha_entrada) <= ?";
|
||||||
|
$params[] = $filtros['fechaInicio'];
|
||||||
|
$params[] = $filtros['fechaFin'];
|
||||||
|
$types .= "ss";
|
||||||
|
}
|
||||||
|
|
||||||
$query = $this->db->prepare($sql);
|
$query = $this->db->prepare($sql);
|
||||||
$query->bind_param("ss", $fechaInicio, $fechaFin);
|
if ($params) $query->bind_param($types, ...$params);
|
||||||
$query->execute();
|
$query->execute();
|
||||||
$resultado = $query->get_result();
|
$resultado = $query->get_result();
|
||||||
|
|
||||||
$data = $resultado->fetch_assoc();
|
$fechas = [];
|
||||||
|
while ($data = $resultado->fetch_assoc()) {
|
||||||
|
$fechas[] = $data;
|
||||||
|
}
|
||||||
$query->close();
|
$query->close();
|
||||||
// Devuelve un array con un solo objeto para mantener compatibilidad con el frontend
|
return $fechas;
|
||||||
return [ [ 'cantidad' => $data['cantidad'], 'fechaInicio' => $fechaInicio, 'fechaFin' => $fechaFin ] ];
|
}
|
||||||
}
|
|
||||||
|
public function obtenerResumenGenero($filtros = []) {
|
||||||
|
$sql = "SELECT g.descripcion AS genero, COUNT(*) AS cantidad
|
||||||
|
FROM candidato c
|
||||||
|
INNER JOIN genero g ON c.id_genero = g.id_genero
|
||||||
|
WHERE 1=1";
|
||||||
|
$params = [];
|
||||||
|
$types = "";
|
||||||
|
|
||||||
|
if (!empty($filtros['id_genero'])) {
|
||||||
|
$sql .= " AND c.id_genero = ?";
|
||||||
|
$params[] = $filtros['id_genero'];
|
||||||
|
$types .= "i";
|
||||||
|
}
|
||||||
|
if (!empty($filtros['fechaInicio']) && !empty($filtros['fechaFin'])) {
|
||||||
|
$sql .= " AND DATE(c.fecha_entrada) >= ? AND DATE(c.fecha_entrada) <= ?";
|
||||||
|
$params[] = $filtros['fechaInicio'];
|
||||||
|
$params[] = $filtros['fechaFin'];
|
||||||
|
$types .= "ss";
|
||||||
|
}
|
||||||
|
$sql .= " GROUP BY g.descripcion ORDER BY g.descripcion";
|
||||||
|
|
||||||
|
$query = $this->db->prepare($sql);
|
||||||
|
if ($params) $query->bind_param($types, ...$params);
|
||||||
|
$query->execute();
|
||||||
|
$resultado = $query->get_result();
|
||||||
|
|
||||||
|
$generos = [];
|
||||||
|
while ($data = $resultado->fetch_assoc()) {
|
||||||
|
$generos[] = $data;
|
||||||
|
}
|
||||||
|
$query->close();
|
||||||
|
return $generos;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
@ -76,76 +76,89 @@ async function recuperarCantidadFecha(tipoConsulta, filtros = {}) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function obtenerDatosEdades(filtros = {}) {
|
let filtroActivo = null; // Puede ser 'id_rango_edad', 'id_genero', 'id_examen', 'fechas' o null
|
||||||
const edad1 = await recuperarCantidadEdad("Menor de 18 años", filtros);
|
|
||||||
const edad2 = await recuperarCantidadEdad("18 a 24 años", filtros);
|
function getFiltrosSeleccionados() {
|
||||||
const edad3 = await recuperarCantidadEdad("25 a 34 años", filtros);
|
const id_rango_edad = document.getElementById('id_rango_edad')?.value || "NULL";
|
||||||
const edad4 = await recuperarCantidadEdad("35 a 44 años", filtros);
|
const id_genero = document.getElementById('id_genero')?.value || "NULL";
|
||||||
const edad5 = await recuperarCantidadEdad("45 a 54 años", filtros);
|
const id_examen = document.getElementById('id_examen')?.value || "NULL";
|
||||||
const edad6 = await recuperarCantidadEdad("55 a 64 años", filtros);
|
const fechaInicio = document.getElementById('date1')?.value || "";
|
||||||
const edad7 = await recuperarCantidadEdad("65 años o más", filtros);
|
const fechaFin = document.getElementById('date2')?.value || "";
|
||||||
return [edad1, edad2, edad3, edad4, edad5, edad6, edad7];
|
|
||||||
|
if (filtroActivo === 'id_rango_edad' && id_rango_edad !== "NULL") {
|
||||||
|
return { id_rango_edad };
|
||||||
|
}
|
||||||
|
if (filtroActivo === 'id_genero' && id_genero !== "NULL") {
|
||||||
|
return { id_genero };
|
||||||
|
}
|
||||||
|
if (filtroActivo === 'id_examen' && id_examen !== "NULL") {
|
||||||
|
return { id_examen };
|
||||||
|
}
|
||||||
|
if (filtroActivo === 'fechas' && fechaInicio && fechaFin) {
|
||||||
|
return { fechaInicio, fechaFin };
|
||||||
|
}
|
||||||
|
return {}; // Sin filtros
|
||||||
|
}
|
||||||
|
|
||||||
|
function setFiltroActivo(tipo) {
|
||||||
|
filtroActivo = tipo;
|
||||||
|
}
|
||||||
|
function getFiltroActivo() {
|
||||||
|
return filtroActivo;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function obtenerDatosGeneros(filtros = {}) {
|
async function obtenerDatosGeneros(filtros = {}) {
|
||||||
const femenino = await recuperarCantidadGenero("Femenino", filtros);
|
const response = await fetch("../controllers/graficos.php", {
|
||||||
const masculino = await recuperarCantidadGenero("Masculino", filtros);
|
method: "POST",
|
||||||
const noDefinido = await recuperarCantidadGenero("Prefiero no decirlo", filtros);
|
headers: { "Content-Type": "application/json" },
|
||||||
return [femenino, masculino, noDefinido];
|
body: JSON.stringify({ tipoConsulta: "Generos", ...filtros }),
|
||||||
|
});
|
||||||
|
return await response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function obtenerDatosEdades(filtros = {}) {
|
||||||
|
const response = await fetch("../controllers/graficos.php", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ tipoConsulta: "Edades", ...filtros }),
|
||||||
|
});
|
||||||
|
return await response.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function obtenerDatosEstados(filtros = {}) {
|
async function obtenerDatosEstados(filtros = {}) {
|
||||||
try {
|
const response = await fetch("../controllers/graficos.php", {
|
||||||
const estados = await recuperarCantidadEstado("Estados", filtros);
|
method: "POST",
|
||||||
if (!Array.isArray(estados)) {
|
headers: { "Content-Type": "application/json" },
|
||||||
console.error("Error: 'estados' no es un array. Verifica la respuesta del backend");
|
body: JSON.stringify({ tipoConsulta: "Estados", ...filtros }),
|
||||||
return [];
|
});
|
||||||
}
|
return await response.json();
|
||||||
const estadosValidos = estados.filter(estado => estado.estado && estado.cantidad !== undefined);
|
|
||||||
return estadosValidos;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error al obtener datos de estados:", error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function obtenerDatosExamenes(filtros = {}) {
|
async function obtenerDatosExamenes(filtros = {}) {
|
||||||
try {
|
const response = await fetch("../controllers/graficos.php", {
|
||||||
const examenes = await recuperarCantidadExamen("Examenes", filtros);
|
method: "POST",
|
||||||
if (!Array.isArray(examenes)) {
|
headers: { "Content-Type": "application/json" },
|
||||||
console.error("Error: 'examenes' no es un array. Verifica la respuesta del backend");
|
body: JSON.stringify({ tipoConsulta: "Examenes", ...filtros }),
|
||||||
return [];
|
});
|
||||||
}
|
return await response.json();
|
||||||
const examenesValidos = examenes.filter(examen => examen.examen && examen.cantidad !== undefined);
|
|
||||||
return examenesValidos;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error al obtener datos de examenes:", error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function obtenerDatosFechas(filtros = {}) {
|
async function obtenerDatosFechas(filtros = {}) {
|
||||||
try {
|
const response = await fetch("../controllers/graficos.php", {
|
||||||
const fechas = await recuperarCantidadFecha("Fechas", filtros);
|
method: "POST",
|
||||||
if (!Array.isArray(fechas) || !fechas.length) {
|
headers: { "Content-Type": "application/json" },
|
||||||
return [];
|
body: JSON.stringify({ tipoConsulta: "Fechas", ...filtros }),
|
||||||
}
|
});
|
||||||
// Solo un objeto con la cantidad total
|
return await response.json();
|
||||||
return fechas;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error al obtener datos de fechas:", error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getFiltrosSeleccionados() {
|
async function obtenerResumenGenero(filtros = {}) {
|
||||||
return {
|
const response = await fetch("../controllers/graficos.php", {
|
||||||
id_rango_edad: document.getElementById('id_rango_edad')?.value || "NULL",
|
method: "POST",
|
||||||
id_genero: document.getElementById('id_genero')?.value || "NULL",
|
headers: { "Content-Type": "application/json" },
|
||||||
id_examen: document.getElementById('id_examen')?.value || "NULL",
|
body: JSON.stringify({ tipoConsulta: "ResumenGenero", ...filtros }),
|
||||||
fechaInicio: document.getElementById('date1')?.value || "",
|
});
|
||||||
fechaFin: document.getElementById('date2')?.value || ""
|
return await response.json();
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|
@ -154,5 +167,8 @@ export {
|
||||||
obtenerDatosEstados,
|
obtenerDatosEstados,
|
||||||
obtenerDatosExamenes,
|
obtenerDatosExamenes,
|
||||||
obtenerDatosFechas,
|
obtenerDatosFechas,
|
||||||
getFiltrosSeleccionados
|
getFiltrosSeleccionados,
|
||||||
|
setFiltroActivo,
|
||||||
|
getFiltroActivo,
|
||||||
|
obtenerResumenGenero // <-- Exporta la nueva función
|
||||||
};
|
};
|
||||||
360
js/inicio.js
360
js/inicio.js
|
|
@ -133,27 +133,30 @@ allMenu.forEach(item => {
|
||||||
|
|
||||||
|
|
||||||
window.addEventListener('click', function (e) {
|
window.addEventListener('click', function (e) {
|
||||||
if(e.target !== imgProfile) {
|
if (profile) {
|
||||||
if(e.target !== dropdownProfile) {
|
const imgProfile = profile.querySelector('img');
|
||||||
if(dropdownProfile.classList.contains('show')) {
|
const dropdownProfile = profile.querySelector('.profile-link');
|
||||||
dropdownProfile.classList.remove('show');
|
if (imgProfile && dropdownProfile) {
|
||||||
}
|
if (e.target !== imgProfile && e.target !== dropdownProfile) {
|
||||||
}
|
if (dropdownProfile.classList.contains('show')) {
|
||||||
}
|
dropdownProfile.classList.remove('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
allMenu.forEach(item=> {
|
allMenu.forEach(item => {
|
||||||
const icon = item.querySelector('.icon');
|
const icon = item.querySelector('.icon');
|
||||||
const menuLink = item.querySelector('.menu-link');
|
const menuLink = item.querySelector('.menu-link');
|
||||||
|
if (icon && menuLink) {
|
||||||
if(e.target !== icon) {
|
if (e.target !== icon && e.target !== menuLink) {
|
||||||
if(e.target !== menuLink) {
|
if (menuLink.classList.contains('show')) {
|
||||||
if (menuLink.classList.contains('show')) {
|
menuLink.classList.remove('show');
|
||||||
menuLink.classList.remove('show')
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
})
|
});
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -166,27 +169,122 @@ allProgress.forEach(item=> {
|
||||||
item.style.setProperty('--value', item.dataset.value)
|
item.style.setProperty('--value', item.dataset.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
obtenerDatosGeneros,
|
obtenerDatosGeneros,
|
||||||
obtenerDatosEdades,
|
obtenerDatosEdades,
|
||||||
obtenerDatosEstados,
|
obtenerDatosEstados,
|
||||||
obtenerDatosExamenes,
|
obtenerDatosExamenes,
|
||||||
obtenerDatosFechas,
|
obtenerDatosFechas,
|
||||||
getFiltrosSeleccionados
|
getFiltrosSeleccionados,
|
||||||
|
setFiltroActivo,
|
||||||
|
getFiltroActivo,
|
||||||
|
obtenerResumenGenero
|
||||||
} from './funcionesGraficos.js';
|
} from './funcionesGraficos.js';
|
||||||
|
|
||||||
// Variables globales para los graficos
|
|
||||||
let chartGenero = null;
|
let chartGenero = null;
|
||||||
let chartEdad = null;
|
let chartEdad = null;
|
||||||
let chartEstado = null;
|
let chartEstado = null;
|
||||||
let chartExamen = null;
|
let chartExamen = null;
|
||||||
let chartFecha = null;
|
let chartFecha = null;
|
||||||
|
|
||||||
// Controla si el filtro de fecha está activo
|
|
||||||
let filtroFechaActivo = false;
|
let filtroFechaActivo = false;
|
||||||
|
|
||||||
|
function deshabilitarFiltros(excepto = null) {
|
||||||
|
const combos = ['id_rango_edad', 'id_genero', 'id_examen'];
|
||||||
|
combos.forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) el.disabled = (excepto !== id);
|
||||||
|
});
|
||||||
|
const date1 = document.getElementById('date1');
|
||||||
|
const date2 = document.getElementById('date2');
|
||||||
|
const btnBuscar = document.getElementById('buscar');
|
||||||
|
if (date1) date1.disabled = (excepto !== 'fechas');
|
||||||
|
if (date2) date2.disabled = (excepto !== 'fechas');
|
||||||
|
if (btnBuscar) btnBuscar.disabled = (excepto !== 'fechas');
|
||||||
|
}
|
||||||
|
|
||||||
|
function habilitarTodosFiltros() {
|
||||||
|
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) el.disabled = false;
|
||||||
|
});
|
||||||
|
const date1 = document.getElementById('date1');
|
||||||
|
const date2 = document.getElementById('date2');
|
||||||
|
const btnBuscar = document.getElementById('buscar');
|
||||||
|
if (date1) date1.disabled = false;
|
||||||
|
if (date2) date2.disabled = false;
|
||||||
|
if (btnBuscar) btnBuscar.disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function inicializarGrafico(filtros) {
|
||||||
|
const datos = await obtenerDatosGeneros(filtros);
|
||||||
|
const series = datos.map(d => d.cantidad);
|
||||||
|
const categories = datos.map(d => d.genero);
|
||||||
|
const options = {
|
||||||
|
series: [{ name: 'Cantidad', data: series }],
|
||||||
|
chart: { height: 350, type: 'bar' },
|
||||||
|
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
|
||||||
|
dataLabels: { enabled: true },
|
||||||
|
xaxis: { categories },
|
||||||
|
tooltip: { y: { formatter: val => val + " personas" } }
|
||||||
|
};
|
||||||
|
if (chartGenero) chartGenero.destroy();
|
||||||
|
chartGenero = new ApexCharts(document.querySelector("#chart"), options);
|
||||||
|
chartGenero.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function inicializarGrafico2(filtros) {
|
||||||
|
const datos = await obtenerDatosEdades(filtros);
|
||||||
|
const series = datos.map(d => d.cantidad);
|
||||||
|
const categories = datos.map(d => d.rango_edad);
|
||||||
|
const options2 = {
|
||||||
|
series: [{ name: 'Cantidad', data: series }],
|
||||||
|
chart: { height: 350, type: 'bar' },
|
||||||
|
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
|
||||||
|
dataLabels: { enabled: true },
|
||||||
|
xaxis: { categories },
|
||||||
|
tooltip: { y: { formatter: val => val + " personas" } }
|
||||||
|
};
|
||||||
|
if (chartEdad) chartEdad.destroy();
|
||||||
|
chartEdad = new ApexCharts(document.querySelector("#chart2"), options2);
|
||||||
|
chartEdad.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function inicializarGrafico3(filtros) {
|
||||||
|
const datos = await obtenerDatosEstados(filtros);
|
||||||
|
const series = datos.map(d => d.cantidad);
|
||||||
|
const categories = datos.map(d => d.estado);
|
||||||
|
const options3 = {
|
||||||
|
series: [{ name: 'Cantidad', data: series }],
|
||||||
|
chart: { height: 350, type: 'bar' },
|
||||||
|
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
|
||||||
|
dataLabels: { enabled: true },
|
||||||
|
xaxis: { categories },
|
||||||
|
tooltip: { y: { formatter: val => val + " personas" } }
|
||||||
|
};
|
||||||
|
if (chartEstado) chartEstado.destroy();
|
||||||
|
chartEstado = new ApexCharts(document.querySelector("#chart3"), options3);
|
||||||
|
chartEstado.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function inicializarGrafico4(filtros) {
|
||||||
|
const datos = await obtenerDatosExamenes(filtros);
|
||||||
|
const series = datos.map(d => d.cantidad);
|
||||||
|
const categories = datos.map(d => d.examen);
|
||||||
|
const options4 = {
|
||||||
|
series: [{ name: 'Cantidad', data: series }],
|
||||||
|
chart: { height: 350, type: 'bar' },
|
||||||
|
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
|
||||||
|
dataLabels: { enabled: true },
|
||||||
|
xaxis: { categories },
|
||||||
|
tooltip: { y: { formatter: val => val + " examenes" } }
|
||||||
|
};
|
||||||
|
if (chartExamen) chartExamen.destroy();
|
||||||
|
chartExamen = new ApexCharts(document.querySelector("#chart4"), options4);
|
||||||
|
chartExamen.render();
|
||||||
|
}
|
||||||
|
|
||||||
async function inicializarGraficoFecha(filtros) {
|
async function inicializarGraficoFecha(filtros) {
|
||||||
// Solo dibujar si ambas fechas están presentes y el filtro está activo
|
|
||||||
if (!filtroFechaActivo || !filtros.fechaInicio || !filtros.fechaFin) {
|
if (!filtroFechaActivo || !filtros.fechaInicio || !filtros.fechaFin) {
|
||||||
if (chartFecha) {
|
if (chartFecha) {
|
||||||
chartFecha.destroy();
|
chartFecha.destroy();
|
||||||
|
|
@ -194,129 +292,30 @@ async function inicializarGraficoFecha(filtros) {
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const datos = await obtenerDatosFechas(filtros);
|
||||||
const fechas = await obtenerDatosFechas(filtros);
|
if (!datos.length) {
|
||||||
|
|
||||||
if (!fechas.length) {
|
|
||||||
if (chartFecha) {
|
if (chartFecha) {
|
||||||
chartFecha.destroy();
|
chartFecha.destroy();
|
||||||
chartFecha = null;
|
chartFecha = null;
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const cantidad = datos[0].cantidad;
|
||||||
// Solo un valor total
|
const label = `Del ${filtros.fechaInicio} al ${filtros.fechaFin}`;
|
||||||
const cantidad = fechas[0].cantidad;
|
|
||||||
const label = `Del ${fechas[0].fechaInicio} al ${fechas[0].fechaFin}`;
|
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
series: [{
|
series: [{ name: 'Candidatos', data: [cantidad] }],
|
||||||
name: 'Candidatos',
|
|
||||||
data: [cantidad]
|
|
||||||
}],
|
|
||||||
chart: { height: 350, type: 'bar' },
|
chart: { height: 350, type: 'bar' },
|
||||||
xaxis: { categories: [label] },
|
xaxis: { categories: [label] },
|
||||||
dataLabels: { enabled: true },
|
dataLabels: { enabled: true },
|
||||||
tooltip: { y: { formatter: val => val + " candidatos" } }
|
tooltip: { y: { formatter: val => val + " candidatos" } }
|
||||||
};
|
};
|
||||||
|
|
||||||
if (chartFecha) chartFecha.destroy();
|
if (chartFecha) chartFecha.destroy();
|
||||||
chartFecha = new ApexCharts(document.querySelector("#chart5"), options);
|
chartFecha = new ApexCharts(document.querySelector("#chart5"), options);
|
||||||
chartFecha.render();
|
chartFecha.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function inicializarGrafico(filtros) {
|
// ----------- AQUÍ VA LA FUNCIÓN PRINCIPAL DE ACTUALIZACIÓN -----------
|
||||||
const [femenino, masculino, noDefinido] = await obtenerDatosGeneros(filtros);
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
series: [
|
|
||||||
{ name: 'Femenino', data: [femenino] },
|
|
||||||
{ name: 'Masculino', data: [masculino] },
|
|
||||||
{ name: 'Prefiero no decirlo', data: [noDefinido] },
|
|
||||||
],
|
|
||||||
chart: { height: 350, type: 'bar' },
|
|
||||||
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
|
|
||||||
dataLabels: { enabled: false },
|
|
||||||
xaxis: { categories: ['Géneros'] },
|
|
||||||
tooltip: { y: { formatter: val => val + " personas" } }
|
|
||||||
};
|
|
||||||
|
|
||||||
if (chartGenero) chartGenero.destroy();
|
|
||||||
chartGenero = new ApexCharts(document.querySelector("#chart"), options);
|
|
||||||
chartGenero.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function inicializarGrafico2(filtros) {
|
|
||||||
const [edad1, edad2, edad3, edad4, edad5, edad6, edad7] = await obtenerDatosEdades(filtros);
|
|
||||||
|
|
||||||
const options2 = {
|
|
||||||
series: [
|
|
||||||
{ name: 'Menor de 18 años', data: [edad1] },
|
|
||||||
{ name: '18 a 24 años', data: [edad2] },
|
|
||||||
{ name: '25 a 34 años', data: [edad3] },
|
|
||||||
{ name: '35 a 44 años', data: [edad4] },
|
|
||||||
{ name: '45 a 54 años', data: [edad5] },
|
|
||||||
{ name: '55 a 64 años', data: [edad6] },
|
|
||||||
{ name: '65 años o más', data: [edad7] },
|
|
||||||
],
|
|
||||||
chart: { height: 350, type: 'bar' },
|
|
||||||
plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
|
|
||||||
dataLabels: { enabled: false },
|
|
||||||
xaxis: { categories: ['Edades'] },
|
|
||||||
tooltip: { y: { formatter: val => val + " Años" } }
|
|
||||||
};
|
|
||||||
|
|
||||||
if (chartEdad) chartEdad.destroy();
|
|
||||||
chartEdad = new ApexCharts(document.querySelector("#chart2"), options2);
|
|
||||||
chartEdad.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function inicializarGrafico3(filtros) {
|
|
||||||
const estados = await obtenerDatosEstados(filtros);
|
|
||||||
|
|
||||||
const seriesData = estados.map(estado => ({
|
|
||||||
name: estado.estado,
|
|
||||||
data: [estado.cantidad]
|
|
||||||
}));
|
|
||||||
|
|
||||||
const options3 = {
|
|
||||||
series: seriesData,
|
|
||||||
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 (chartEstado) chartEstado.destroy();
|
|
||||||
chartEstado = new ApexCharts(document.querySelector("#chart3"), options3);
|
|
||||||
chartEstado.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function inicializarGrafico4(filtros) {
|
|
||||||
const examenes = await obtenerDatosExamenes(filtros);
|
|
||||||
|
|
||||||
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) },
|
|
||||||
tooltip: { y: { formatter: val => val + " examenes" } }
|
|
||||||
};
|
|
||||||
|
|
||||||
if (chartExamen) chartExamen.destroy();
|
|
||||||
chartExamen = new ApexCharts(document.querySelector("#chart4"), options4);
|
|
||||||
chartExamen.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function actualizarTodosLosGraficos() {
|
async function actualizarTodosLosGraficos() {
|
||||||
// Si el filtro de fecha está activo, se pasan las fechas, si no, se limpian
|
|
||||||
let filtros = getFiltrosSeleccionados();
|
let filtros = getFiltrosSeleccionados();
|
||||||
if (!filtroFechaActivo) {
|
if (!filtroFechaActivo) {
|
||||||
filtros.fechaInicio = "";
|
filtros.fechaInicio = "";
|
||||||
|
|
@ -328,41 +327,114 @@ async function actualizarTodosLosGraficos() {
|
||||||
await inicializarGrafico4(filtros);
|
await inicializarGrafico4(filtros);
|
||||||
await inicializarGraficoFecha(filtros);
|
await inicializarGraficoFecha(filtros);
|
||||||
}
|
}
|
||||||
|
// ---------------------------------------------------------------------
|
||||||
|
|
||||||
|
async function actualizarTarjetasGenero() {
|
||||||
|
const filtros = getFiltrosSeleccionados();
|
||||||
|
const resumen = await obtenerResumenGenero(filtros);
|
||||||
|
// Limpia las tarjetas
|
||||||
|
document.getElementById('card-masculino').textContent = '0';
|
||||||
|
document.getElementById('card-femenino').textContent = '0';
|
||||||
|
document.getElementById('card-prefiero').textContent = '0';
|
||||||
|
// Actualiza según los datos
|
||||||
|
resumen.forEach(item => {
|
||||||
|
if (item.genero === 'Masculino') {
|
||||||
|
document.getElementById('card-masculino').textContent = item.cantidad;
|
||||||
|
} else if (item.genero === 'Femenino') {
|
||||||
|
document.getElementById('card-femenino').textContent = item.cantidad;
|
||||||
|
} else if (item.genero === 'Prefiero no decir') {
|
||||||
|
document.getElementById('card-prefiero').textContent = item.cantidad;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
// Agrega eventos a los combos si existen
|
// Solo un filtro a la vez
|
||||||
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
|
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
|
||||||
const el = document.getElementById(id);
|
const el = document.getElementById(id);
|
||||||
if (el) {
|
if (el) {
|
||||||
el.addEventListener('change', actualizarTodosLosGraficos);
|
el.addEventListener('change', () => {
|
||||||
|
if (el.value !== "NULL") {
|
||||||
|
setFiltroActivo(id);
|
||||||
|
filtroFechaActivo = false;
|
||||||
|
// Limpiar y deshabilitar los otros filtros
|
||||||
|
['id_rango_edad', 'id_genero', 'id_examen'].forEach(oid => {
|
||||||
|
if (oid !== id) {
|
||||||
|
const oel = document.getElementById(oid);
|
||||||
|
if (oel) oel.value = "NULL";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Limpiar fechas
|
||||||
|
const date1 = document.getElementById('date1');
|
||||||
|
const date2 = document.getElementById('date2');
|
||||||
|
if (date1) date1.value = '';
|
||||||
|
if (date2) date2.value = '';
|
||||||
|
deshabilitarFiltros(id);
|
||||||
|
actualizarTodosLosGraficos();
|
||||||
|
} else {
|
||||||
|
setFiltroActivo(null);
|
||||||
|
filtroFechaActivo = false;
|
||||||
|
habilitarTodosFiltros();
|
||||||
|
actualizarTodosLosGraficos();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Botón buscar para fechas
|
|
||||||
const btnBuscar = document.getElementById('buscar');
|
const btnBuscar = document.getElementById('buscar');
|
||||||
if (btnBuscar) {
|
if (btnBuscar) {
|
||||||
btnBuscar.addEventListener('click', () => {
|
btnBuscar.addEventListener('click', () => {
|
||||||
const date1 = document.getElementById('date1')?.value;
|
const date1 = document.getElementById('date1')?.value;
|
||||||
const date2 = document.getElementById('date2')?.value;
|
const date2 = document.getElementById('date2')?.value;
|
||||||
filtroFechaActivo = !!(date1 && date2);
|
if (date1 && date2) {
|
||||||
|
setFiltroActivo('fechas');
|
||||||
|
filtroFechaActivo = true;
|
||||||
|
// Limpiar y deshabilitar combos
|
||||||
|
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) el.value = "NULL";
|
||||||
|
});
|
||||||
|
deshabilitarFiltros('fechas');
|
||||||
|
} else {
|
||||||
|
filtroFechaActivo = false;
|
||||||
|
setFiltroActivo(null);
|
||||||
|
habilitarTodosFiltros();
|
||||||
|
}
|
||||||
actualizarTodosLosGraficos();
|
actualizarTodosLosGraficos();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Botón limpiar para quitar filtro de fecha
|
function limpiarTodo() {
|
||||||
|
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) {
|
||||||
|
el.value = "NULL";
|
||||||
|
el.disabled = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const date1 = document.getElementById('date1');
|
||||||
|
const date2 = document.getElementById('date2');
|
||||||
|
const btnBuscar = document.getElementById('buscar');
|
||||||
|
if (date1) { date1.value = ''; date1.disabled = false; }
|
||||||
|
if (date2) { date2.value = ''; date2.disabled = false; }
|
||||||
|
if (btnBuscar) btnBuscar.disabled = false;
|
||||||
|
filtroFechaActivo = false;
|
||||||
|
setFiltroActivo(null);
|
||||||
|
actualizarTodosLosGraficos();
|
||||||
|
}
|
||||||
|
|
||||||
const btnLimpiar = document.getElementById('limpiar');
|
const btnLimpiar = document.getElementById('limpiar');
|
||||||
if (btnLimpiar) {
|
if (btnLimpiar) {
|
||||||
btnLimpiar.addEventListener('click', () => {
|
btnLimpiar.addEventListener('click', limpiarTodo);
|
||||||
const date1 = document.getElementById('date1');
|
}
|
||||||
const date2 = document.getElementById('date2');
|
|
||||||
if (date1) date1.value = '';
|
const btnLimpiar2 = document.getElementById('limpiar2');
|
||||||
if (date2) date2.value = '';
|
if (btnLimpiar2) {
|
||||||
filtroFechaActivo = false;
|
btnLimpiar2.addEventListener('click', limpiarTodo);
|
||||||
actualizarTodosLosGraficos();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// SIEMPRE inicializa los gráficos al cargar la página
|
|
||||||
filtroFechaActivo = false;
|
filtroFechaActivo = false;
|
||||||
|
setFiltroActivo(null);
|
||||||
|
habilitarTodosFiltros();
|
||||||
actualizarTodosLosGraficos();
|
actualizarTodosLosGraficos();
|
||||||
});
|
});
|
||||||
|
|
@ -45,14 +45,13 @@ async function obtenerPromedioPorGenero() {
|
||||||
|
|
||||||
// Función para actualizar las tarjetas en el DOM
|
// Función para actualizar las tarjetas en el DOM
|
||||||
function actualizarTarjetas(promF, promM, promND) {
|
function actualizarTarjetas(promF, promM, promND) {
|
||||||
// Multiplicamos por 100 para mostrar el promedio como número decimal simple.
|
const femenino = document.querySelector("#card-femenino h2");
|
||||||
// Aquí simplemente mostramos el promedio como número decimal con 2 decimales
|
const masculino = document.querySelector("#card-masculino h2");
|
||||||
|
const prefiero = document.querySelector("#card-prefiero h2");
|
||||||
|
|
||||||
document.querySelector("#card-femenino h2").textContent = promF.toFixed(2)+ "%";;
|
if (femenino) femenino.textContent = (promF * 100).toFixed(2) + "%";
|
||||||
document.querySelector("#card-masculino h2").textContent = promM.toFixed(2) + "%";;
|
if (masculino) masculino.textContent = (promM * 100).toFixed(2) + "%";
|
||||||
document.querySelector("#card-nodefinido h2").textContent = promND.toFixed(2) + "%";;
|
if (prefiero) prefiero.textContent = (promND * 100).toFixed(2) + "%";
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ejecutar cuando el DOM esté listo
|
// Ejecutar cuando el DOM esté listo
|
||||||
|
|
|
||||||
|
|
@ -1,291 +1,267 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<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>
|
||||||
|
<!-- SIDEBAR -->
|
||||||
<!-- SIDEBAR -->
|
<section id="sidebar">
|
||||||
<section id="sidebar">
|
<a href="inicio.html" class="brand"><i class='bx bx-code-alt icon'></i> LANIA</a>
|
||||||
<a href="inicio.html" class="brand"><i class='bx bx-code-alt icon' ></i> LANIA</a>
|
<ul class="side-menu">
|
||||||
|
<li><a href="#" class="active"><i class='bx bxs-dashboard icon'></i> Dashboard</a></li>
|
||||||
|
<li class="divider" data-text="main">Main</li>
|
||||||
|
<li>
|
||||||
|
<a href="#"><i class='bx bxs-inbox icon'></i> Elements <i class='bx bx-chevron-right icon-right'></i></a>
|
||||||
|
<ul class="side-dropdown">
|
||||||
|
<li><a href="#">Alert</a></li>
|
||||||
|
<li><a href="#">Badges</a></li>
|
||||||
|
<li><a href="#">Breadcrumbs</a></li>
|
||||||
|
<li><a href="#">Button</a></li>
|
||||||
|
</ul>
|
||||||
|
</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 class="divider" data-text="tablas y formularios">Tablas y formularios</li>
|
||||||
|
<li><a href="#"><i class='bx bx-table icon'></i> Tablas</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#"><i class='bx bxs-notepad icon'></i> Formularios <i class='bx bx-chevron-right icon-right'></i></a>
|
||||||
|
<ul class="side-dropdown">
|
||||||
|
<li><a href="formulario-candidato.html">Registro de candidato</a></li>
|
||||||
|
<li><a href="formulario-datos-candidato.php">Datos de candidato</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
|
||||||
<ul class="side-menu">
|
<section id="content">
|
||||||
<li><a href="#" class="active"><i class='bx bxs-dashboard icon' ></i> Dashboard</a></li>
|
<nav>
|
||||||
<li class="divider" data-text="main">Main</li>
|
<i class='bx bx-menu toggle-sidebar'></i>
|
||||||
<li>
|
<form action="#">
|
||||||
<a href="#"><i class='bx bxs-inbox icon' ></i> Elements <i class='bx bx-chevron-right icon-right' ></i></a>
|
<div class="form-group">
|
||||||
<ul class="side-dropdown">
|
<input type="text" placeholder="Buscar...">
|
||||||
<li><a href="#">Alert</a></li>
|
<i class='bx bx-search icon'></i>
|
||||||
<li><a href="#">Badges</a></li>
|
</div>
|
||||||
<li><a href="#">Breadcrumbs</a></li>
|
</form>
|
||||||
<li><a href="#">Button</a></li>
|
<a href="#" class="nav-link">
|
||||||
</ul>
|
<i class='bx bxs-bell icon'></i>
|
||||||
</li>
|
<span class="badge">5</span>
|
||||||
<li><a href="#"><i class='bx bxs-chart icon' ></i> Charts</a></li>
|
</a>
|
||||||
<li><a href="#"><i class='bx bxs-widget icon' ></i> Widgets</a></li>
|
<a href="#" class="nav-link">
|
||||||
<li class="divider" data-text="tablas y formularios">Tablas y formularios</li>
|
<i class='bx bxs-message-square-dots icon'></i>
|
||||||
<li><a href="#"><i class='bx bx-table icon' ></i> Tablas</a></li>
|
<span class="badge">8</span>
|
||||||
<li>
|
</a>
|
||||||
<a href="#"><i class='bx bxs-notepad icon' ></i> Formularios <i class='bx bx-chevron-right icon-right' ></i></a>
|
<span class="divider"></span>
|
||||||
<ul class="side-dropdown">
|
<div class="profile">
|
||||||
<li><a href="formulario-candidato.html">Registro de candidato</a></li>
|
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
|
||||||
<li><a href="formulario-datos-candidato.php">Datos de candidato</a></li>
|
<ul class="profile-link">
|
||||||
</ul>
|
<li><a href="#"><i class='bx bxs-user-circle icon'></i> Profile</a></li>
|
||||||
</li>
|
<li><a href="#"><i class='bx bxs-cog'></i> Settings</a></li>
|
||||||
</ul>
|
<li><a href="#"><i class='bx bxs-log-out-circle'></i> Logout</a></li>
|
||||||
<!-- <div class="ads">
|
</ul>
|
||||||
<div class="wrapper">
|
</div>
|
||||||
<a href="#" class="btn-upgrade">Upgrade</a>
|
</nav>
|
||||||
<p>Become a <span>PRO</span> member and enjoy <span>All Features</span></p>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</section>
|
|
||||||
<!-- SIDEBAR -->
|
|
||||||
|
|
||||||
<!-- NAVBAR -->
|
<main>
|
||||||
<section id="content">
|
<h1 class="title">Dashboard</h1>
|
||||||
<!-- NAVBAR -->
|
<ul class="breadcrumbs">
|
||||||
<nav>
|
<li><a href="#">Home</a></li>
|
||||||
<i class='bx bx-menu toggle-sidebar' ></i>
|
<li class="divider">/</li>
|
||||||
<form action="#">
|
<li><a href="#" class="active">Dashboard</a></li>
|
||||||
<div class="form-group">
|
</ul>
|
||||||
<input type="text" placeholder="Buscar...">
|
|
||||||
<i class='bx bx-search icon' ></i>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<a href="#" class="nav-link">
|
|
||||||
<i class='bx bxs-bell icon' ></i>
|
|
||||||
<span class="badge">5</span>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="nav-link">
|
|
||||||
<i class='bx bxs-message-square-dots icon' ></i>
|
|
||||||
<span class="badge">8</span>
|
|
||||||
</a>
|
|
||||||
<span class="divider"></span>
|
|
||||||
<div class="profile">
|
|
||||||
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
|
|
||||||
<ul class="profile-link">
|
|
||||||
<li><a href="#"><i class='bx bxs-user-circle icon' ></i> Profile</a></li>
|
|
||||||
<li><a href="#"><i class='bx bxs-cog' ></i> Settings</a></li>
|
|
||||||
<li><a href="#"><i class='bx bxs-log-out-circle' ></i> Logout</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- NAVBAR -->
|
|
||||||
|
|
||||||
<!-- MAIN -->
|
<div class="select-data">
|
||||||
<main>
|
<div class="card">
|
||||||
<h1 class="title">Dashboard</h1>
|
<div class="head">
|
||||||
<ul class="breadcrumbs">
|
<i class='bx bx-trending-up icon'></i>
|
||||||
<li><a href="#">Home</a></li>
|
</div>
|
||||||
<li class="divider">/</li>
|
<div style="display: flex; gap: 20px; margin: 10px 0;">
|
||||||
<li><a href="#" class="active">Dashboard</a></li>
|
<!-- Campo: Edad -->
|
||||||
</ul>
|
<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>
|
||||||
|
<option value="1">18-24</option>
|
||||||
|
<option value="2">24-34</option>
|
||||||
|
<option value="3">35-44</option>
|
||||||
|
<option value="4">44-54</option>
|
||||||
|
<option value="5">55-64</option>
|
||||||
|
<option value="6">65 o más</option>
|
||||||
|
<option value="7">Menor de 18</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>
|
||||||
|
<!-- Campo: Examen -->
|
||||||
|
<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>
|
||||||
|
<option value="1">Amazon Web Services</option>
|
||||||
|
<option value="2">Cisco</option>
|
||||||
|
<option value="3">CompTIA</option>
|
||||||
|
<option value="4">Fortinet</option>
|
||||||
|
<option value="5">Google Cloud Platform</option>
|
||||||
|
<option value="6">IBM</option>
|
||||||
|
<option value="7">Juniper Networks</option>
|
||||||
|
<option value="8">Microsoft</option>
|
||||||
|
<option value="9">Oracle</option>
|
||||||
|
<option value="10">Otros</option>
|
||||||
|
<option value="11">Palo Alto Networks</option>
|
||||||
|
<option value="12">Red Hat</option>
|
||||||
|
<option value="13">Salesforce</option>
|
||||||
|
<option value="14">SAP</option>
|
||||||
|
<option value="15">VMware</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" id="limpiar2" class="btn btn-primary">Limpiar</button>
|
||||||
|
<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">
|
||||||
|
<h3>Resultado de registros en el rango de fecha ingresado</h3>
|
||||||
|
<div class="menu"></div>
|
||||||
|
</div>
|
||||||
|
<div class="chart">
|
||||||
|
<div id="chart5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--Añadido nuevo -->
|
<div>
|
||||||
<div class="select-data">
|
<br>
|
||||||
<div class="card">
|
<h3>Promedio de géneros:</h3>
|
||||||
<div class="head">
|
<div class="info-data">
|
||||||
<i class='bx bx-trending-up icon'></i>
|
<div class="card" id="card-femenino">
|
||||||
</div>
|
<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-prefiero">
|
||||||
|
<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 style="display: flex; gap: 20px; margin: 10px 0;">
|
<div class="content-data">
|
||||||
<!-- Campo: Edad -->
|
<div class="head">
|
||||||
<div style="flex: 1;">
|
<h3>Generos</h3>
|
||||||
<label class="form-label" for="id_rango_edad">Edad</label>
|
<div class="menu">
|
||||||
<select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||||
<option value="NULL">Seleccione una opción</option>
|
<ul class="menu-link">
|
||||||
<option value="1">18-24</option>
|
<li><a href="#">Edit</a></li>
|
||||||
<option value="2">24-34</option>
|
<li><a href="#">Save</a></li>
|
||||||
<option value="3">35-44</option>
|
<li><a href="#">Remove</a></li>
|
||||||
<option value="4">44-54</option>
|
</ul>
|
||||||
<option value="4">55-64</option>
|
</div>
|
||||||
<option value="5">65 o más</option>
|
</div>
|
||||||
<option value="6">Menor de 18</option>
|
<div class="chart">
|
||||||
</select>
|
<div id="chart"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-data">
|
||||||
|
<div class="head">
|
||||||
|
<h3>Edades</h3>
|
||||||
|
<div class="menu">
|
||||||
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||||
|
<ul class="menu-link">
|
||||||
|
<li><a href="#">Edit</a></li>
|
||||||
|
<li><a href="#">Save</a></li>
|
||||||
|
<li><a href="#">Remove</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart">
|
||||||
|
<div id="chart2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-data">
|
||||||
|
<div class="head">
|
||||||
|
<h3>Estados</h3>
|
||||||
|
<div class="menu">
|
||||||
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||||
|
<ul class="menu-link">
|
||||||
|
<li><a href="#">Edit</a></li>
|
||||||
|
<li><a href="#">Save</a></li>
|
||||||
|
<li><a href="#">Remove</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart">
|
||||||
|
<div id="chart3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-data">
|
||||||
|
<div class="head">
|
||||||
|
<h3>Examenes</h3>
|
||||||
|
<div class="menu">
|
||||||
|
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||||
|
<ul class="menu-link">
|
||||||
|
<li><a href="#">Edit</a></li>
|
||||||
|
<li><a href="#">Save</a></li>
|
||||||
|
<li><a href="#">Remove</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart">
|
||||||
|
<div id="chart4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Campo: Género -->
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||||
<div style="flex: 1;">
|
<script type="module" src="../js/inicio.js"></script>
|
||||||
<label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
|
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
|
||||||
<select class="border rounded-pill shadow-sm form-select" id="id_genero" required>
|
<script src="../js/tarjetasPromedio.js"></script>
|
||||||
<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>
|
|
||||||
<option value="1">Amazon Web Services</option>
|
|
||||||
<option value="2">Cisco</option>
|
|
||||||
<option value="3">CompTIA</option>
|
|
||||||
<option value="4">Fortinet</option>
|
|
||||||
<option value="5">Google Cloud Platform</option>
|
|
||||||
<option value="6">IBM</option>
|
|
||||||
<option value="7">Juniper Networks</option>
|
|
||||||
<option value="8">Microsoft</option>
|
|
||||||
<option value="9">Oracle</option>
|
|
||||||
<option value="10">Otros</option>
|
|
||||||
<option value="11">Palo Alto Networks</option>
|
|
||||||
<option value="12">Red Hat</option>
|
|
||||||
<option value="13">Salesforce</option>
|
|
||||||
<option value="14">SAP</option>
|
|
||||||
<option value="15">VMware</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
<h3>Resultado de registros en el rango de fecha ingresado</h3>
|
|
||||||
<div class="menu">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chart">
|
|
||||||
<div id="chart5"></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="content-data">
|
|
||||||
<div class="head">
|
|
||||||
<h3>Generos</h3>
|
|
||||||
<div class="menu">
|
|
||||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
||||||
<ul class="menu-link">
|
|
||||||
<li><a href="#">Edit</a></li>
|
|
||||||
<li><a href="#">Save</a></li>
|
|
||||||
<li><a href="#">Remove</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chart">
|
|
||||||
<div id="chart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-data">
|
|
||||||
<div class="head">
|
|
||||||
<h3>Edades</h3>
|
|
||||||
<div class="menu">
|
|
||||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
||||||
<ul class="menu-link">
|
|
||||||
<li><a href="#">Edit</a></li>
|
|
||||||
<li><a href="#">Save</a></li>
|
|
||||||
<li><a href="#">Remove</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chart">
|
|
||||||
<div id="chart2"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-data">
|
|
||||||
<div class="head">
|
|
||||||
<h3>Estados</h3>
|
|
||||||
<div class="menu">
|
|
||||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
||||||
<ul class="menu-link">
|
|
||||||
<li><a href="#">Edit</a></li>
|
|
||||||
<li><a href="#">Save</a></li>
|
|
||||||
<li><a href="#">Remove</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chart">
|
|
||||||
<div id="chart3"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-data">
|
|
||||||
<div class="head">
|
|
||||||
<h3>Examenes</h3>
|
|
||||||
<div class="menu">
|
|
||||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
|
||||||
<ul class="menu-link">
|
|
||||||
<li><a href="#">Edit</a></li>
|
|
||||||
<li><a href="#">Save</a></li>
|
|
||||||
<li><a href="#">Remove</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chart">
|
|
||||||
<div id="chart4"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- MAIN -->
|
|
||||||
</section>
|
|
||||||
<!-- NAVBAR -->
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
||||||
<script type="module" src="../js/inicio.js"></script>
|
|
||||||
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
|
|
||||||
<script src="../js/tarjetasPromedio.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue