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

Promedios

This commit is contained in:
Ohana Monserrath Gutierrez Hernandez 2025-05-16 22:17:40 -06:00
parent cf78a42a81
commit db585a7354
4 changed files with 141 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/inicio.css
View File

@ -579,3 +579,5 @@ main .btn-send:hover {
display: none;
}
}

1
js/inicio.js
View File

@ -438,3 +438,4 @@ function convertirFechaAFormatoISO(fecha) {
const partes = fecha.split('-'); // Suponiendo que el input usa el formato DD-MM-YYYY
return `${partes[0]}-${partes[1]}-${partes[2]}`; // Retorna YYYY-MM-DD
}

59
js/tarjetasPromedio.js Normal file
View File

@ -0,0 +1,59 @@
async function recuperarCantidadGenero(tipoConsulta) {
try {
const response = await fetch("../controllers/graficos.php", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ tipoConsulta }),
});
const data = await response.json();
return data.cantidad || 0;
} catch (error) {
console.error("Error al recuperar datos:", error);
return 0;
}
}
async function obtenerPromedioPorGenero() {
// Obtener conteos de cada género
const femenino = await recuperarCantidadGenero("Femenino");
const masculino = await recuperarCantidadGenero("Masculino");
const noDefinido = await recuperarCantidadGenero("Prefiero no decirlo");
// Suma total de personas
const total = femenino + masculino + noDefinido;
// Evitar división por cero
if (total === 0) {
actualizarTarjetas(0, 0, 0);
return;
}
// Calcular el promedio (cantidad / total de registros)
// Aquí promedio es la proporción simple de cada género dentro del total
const promedioFemenino = femenino / total;
const promedioMasculino = masculino / total;
const promedioNoDefinido = noDefinido / total;
// Actualizar las tarjetas con los valores calculados
actualizarTarjetas(promedioFemenino, promedioMasculino, promedioNoDefinido);
}
// Función para actualizar las tarjetas en el DOM
function actualizarTarjetas(promF, promM, promND) {
// Multiplicamos por 100 para mostrar el promedio como número decimal simple.
// Aquí simplemente mostramos el promedio como número decimal con 2 decimales
document.querySelector("#card-femenino h2").textContent = promF.toFixed(2)+ "%";;
document.querySelector("#card-masculino h2").textContent = promM.toFixed(2) + "%";;
document.querySelector("#card-nodefinido h2").textContent = promND.toFixed(2) + "%";;
}
// Ejecutar cuando el DOM esté listo
document.addEventListener("DOMContentLoaded", obtenerPromedioPorGenero);

102
views/inicio.html
View File

@ -5,6 +5,7 @@
<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 rel="stylesheet" href="../css/inicio.css">
<title>AdminSite</title>
</head>
<body>
@ -85,52 +86,89 @@
<li class="divider">/</li>
<li><a href="#" class="active">Dashboard</a></li>
</ul>
<!--Añadido nuevo -->
<div class="select-data">
<div class="card">
<div class="head">
<i class='bx bx-trending-up icon'></i>
</div>
<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>
</div>
<div>
<br>
<h3>Promedio de géneros:</h3>
<div class="info-data">
<div class="card">
<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>1500</h2>
<p>Traffic</p>
<h2>0</h2>
<p>Femenino</p>
</div>
<i class='bx bx-trending-up icon' ></i>
</div>
<span class="progress" data-value="40%"></span>
<span class="label">40%</span>
</div>
<div class="card">
</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>234</h2>
<p>Sales</p>
<h2>0</h2>
<p>Masculino</p>
</div>
<i class='bx bx-trending-down icon down' ></i>
</div>
<span class="progress" data-value="60%"></span>
<span class="label">60%</span>
</div>
<div class="card">
</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>465</h2>
<p>Pageviews</p>
</div>
<i class='bx bx-trending-up icon' ></i>
</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>
<h2>0</h2>
<p>Prefiero no decirlo</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="data">
<div class="content-data">
<div class="head">
@ -232,5 +270,7 @@
<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/formulario-candidato.js"></script>
<script src="../js/tarjetasPromedio.js"></script>
</body>
</html>