Promedios
This commit is contained in:
parent
cf78a42a81
commit
db585a7354
|
|
@ -579,3 +579,5 @@ main .btn-send:hover {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -437,4 +437,5 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
function convertirFechaAFormatoISO(fecha) {
|
function convertirFechaAFormatoISO(fecha) {
|
||||||
const partes = fecha.split('-'); // Suponiendo que el input usa el formato DD-MM-YYYY
|
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
|
return `${partes[0]}-${partes[1]}-${partes[2]}`; // Retorna YYYY-MM-DD
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<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>
|
||||||
|
|
@ -85,52 +86,89 @@
|
||||||
<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>
|
|
||||||
<p>Traffic</p>
|
|
||||||
</div>
|
|
||||||
<i class='bx bx-trending-up icon' ></i>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="progress" data-value="40%"></span>
|
|
||||||
<span class="label">40%</span>
|
|
||||||
</div>
|
<div style="display: flex; gap: 20px; margin: 10px 0;">
|
||||||
<div class="card">
|
<!-- Campo: Edad -->
|
||||||
<div class="head">
|
<div style="flex: 1;">
|
||||||
<div>
|
<label class="form-label" for="id_rango_edad">Edad</label>
|
||||||
<h2>234</h2>
|
<select class="border rounded-pill shadow-sm form-select" id="id_rango_edad" required>
|
||||||
<p>Sales</p>
|
<option value="NULL">Seleccione una opción</option>
|
||||||
</div>
|
</select>
|
||||||
<i class='bx bx-trending-down icon down' ></i>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="progress" data-value="60%"></span>
|
|
||||||
<span class="label">60%</span>
|
<!-- Campo: Género -->
|
||||||
</div>
|
<div style="flex: 1;">
|
||||||
<div class="card">
|
<label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
|
||||||
<div class="head">
|
<select class="border rounded-pill shadow-sm form-select" id="id_genero" required="">
|
||||||
<div>
|
<option value="NULL">Seleccione una opción</option>
|
||||||
<h2>465</h2>
|
<option value="1">Masculino</option>
|
||||||
<p>Pageviews</p>
|
<option value="2">Femenino</option>
|
||||||
</div>
|
<option value="3">Prefiero no decir</option>
|
||||||
<i class='bx bx-trending-up icon' ></i>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<span class="progress" data-value="30%"></span>
|
|
||||||
<span class="label">30%</span>
|
<div style="flex: 1;">
|
||||||
</div>
|
<label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label>
|
||||||
<div class="card">
|
<select class="border rounded-pill shadow-sm form-select" id="id_examen" required="">
|
||||||
<div class="head">
|
<option value="NULL">Seleccione una opción</option>
|
||||||
<div>
|
</select>
|
||||||
<h2>235</h2>
|
|
||||||
<p>Visitors</p>
|
|
||||||
</div>
|
|
||||||
<i class='bx bx-trending-up icon' ></i>
|
|
||||||
</div>
|
</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">
|
||||||
|
|
@ -232,5 +270,7 @@
|
||||||
<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>
|
||||||
|
<script src="../js/formulario-candidato.js"></script>
|
||||||
|
<script src="../js/tarjetasPromedio.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue