diff --git a/css/inicio.css b/css/inicio.css index 85342ce..69046f3 100644 --- a/css/inicio.css +++ b/css/inicio.css @@ -579,3 +579,5 @@ main .btn-send:hover { display: none; } } + + diff --git a/js/inicio.js b/js/inicio.js index 28a7d30..ab1a042 100644 --- a/js/inicio.js +++ b/js/inicio.js @@ -437,4 +437,5 @@ document.addEventListener('DOMContentLoaded', () => { 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 -} \ No newline at end of file +} + diff --git a/js/tarjetasPromedio.js b/js/tarjetasPromedio.js new file mode 100644 index 0000000..ff7e93d --- /dev/null +++ b/js/tarjetasPromedio.js @@ -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); diff --git a/views/inicio.html b/views/inicio.html index a26c1ba..a762af1 100644 --- a/views/inicio.html +++ b/views/inicio.html @@ -5,6 +5,7 @@ + AdminSite @@ -85,52 +86,89 @@
  • /
  • Dashboard
    • -
    + + +
    -
    -

    1500

    -

    Traffic

    -
    - +
    - - 40% -
    -
    -
    -
    -

    234

    -

    Sales

    -
    - + + +
    + +
    + +
    - - 60% -
    -
    -
    -
    -

    465

    -

    Pageviews

    -
    - + + +
    + +
    - - 30% -
    -
    -
    -
    -

    235

    -

    Visitors

    -
    - + +
    + +
    - - 80% +
    + +
    +
    +

    Promedio de géneros:

    +
    +
    +
    +
    + +
    +

    0

    +

    Femenino

    +
    +
    +
    +
    + +
    +
    +
    + +
    +

    0

    +

    Masculino

    +
    +
    + +
    +
    + +
    +
    +
    + +
    +

    0

    +

    Prefiero no decirlo

    +
    +
    +
    +
    +
    +
    + +
    @@ -232,5 +270,7 @@ + + \ No newline at end of file