383 lines
13 KiB
JavaScript
383 lines
13 KiB
JavaScript
// SIDEBAR DROPDOWN
|
|
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
if(!this.classList.contains('active')) {
|
|
allDropdown.forEach(i=> {
|
|
const aLink = i.parentElement.querySelector('a:first-child');
|
|
|
|
aLink.classList.remove('active');
|
|
i.classList.remove('show');
|
|
})
|
|
}
|
|
|
|
this.classList.toggle('active');
|
|
item.classList.toggle('show');
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
sidebar.addEventListener('mouseleave', function () {
|
|
if(this.classList.contains('hide')) {
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
sidebar.addEventListener('mouseenter', function () {
|
|
if(this.classList.contains('hide')) {
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
// MENU
|
|
const allMenu = document.querySelectorAll('main .content-data .head .menu');
|
|
|
|
allMenu.forEach(item => {
|
|
const icon = item.querySelector('.icon');
|
|
const menuLink = item.querySelector('.menu-link');
|
|
|
|
// Solo agrega el evento si ambos existen
|
|
if (icon && menuLink) {
|
|
icon.addEventListener('click', function () {
|
|
menuLink.classList.toggle('show');
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
window.addEventListener('click', function (e) {
|
|
if (profile) {
|
|
const imgProfile = profile.querySelector('img');
|
|
const dropdownProfile = profile.querySelector('.profile-link');
|
|
if (imgProfile && dropdownProfile) {
|
|
if (e.target !== imgProfile && e.target !== dropdownProfile) {
|
|
if (dropdownProfile.classList.contains('show')) {
|
|
dropdownProfile.classList.remove('show');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
allMenu.forEach(item => {
|
|
const icon = item.querySelector('.icon');
|
|
const menuLink = item.querySelector('.menu-link');
|
|
if (icon && menuLink) {
|
|
if (e.target !== icon && e.target !== menuLink) {
|
|
if (menuLink.classList.contains('show')) {
|
|
menuLink.classList.remove('show');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// PROGRESSBAR
|
|
const allProgress = document.querySelectorAll('main .card .progress');
|
|
|
|
allProgress.forEach(item=> {
|
|
item.style.setProperty('--value', item.dataset.value)
|
|
})
|
|
|
|
|
|
import {
|
|
obtenerDatosGeneros,
|
|
obtenerDatosEdades,
|
|
obtenerDatosEstados,
|
|
obtenerDatosExamenes,
|
|
obtenerDatosFechas,
|
|
getFiltrosSeleccionados,
|
|
setFiltroActivo,
|
|
getFiltroActivo,
|
|
obtenerResumenGenero
|
|
} from './funcionesGraficos.js';
|
|
|
|
let chartGenero = null;
|
|
let chartEdad = null;
|
|
let chartEstado = null;
|
|
let chartExamen = null;
|
|
let chartFecha = null;
|
|
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) {
|
|
if (!filtroFechaActivo || !filtros.fechaInicio || !filtros.fechaFin) {
|
|
if (chartFecha) {
|
|
chartFecha.destroy();
|
|
chartFecha = null;
|
|
}
|
|
return;
|
|
}
|
|
const datos = await obtenerDatosFechas(filtros);
|
|
if (!datos.length) {
|
|
if (chartFecha) {
|
|
chartFecha.destroy();
|
|
chartFecha = null;
|
|
}
|
|
return;
|
|
}
|
|
const cantidad = datos[0].cantidad;
|
|
const label = `Del ${filtros.fechaInicio} al ${filtros.fechaFin}`;
|
|
const options = {
|
|
series: [{ name: 'Candidatos', data: [cantidad] }],
|
|
chart: { height: 350, type: 'bar' },
|
|
xaxis: { categories: [label] },
|
|
dataLabels: { enabled: true },
|
|
tooltip: { y: { formatter: val => val + " candidatos" } }
|
|
};
|
|
if (chartFecha) chartFecha.destroy();
|
|
chartFecha = new ApexCharts(document.querySelector("#chart5"), options);
|
|
chartFecha.render();
|
|
}
|
|
|
|
// ----------- AQUÍ VA LA FUNCIÓN PRINCIPAL DE ACTUALIZACIÓN -----------
|
|
async function actualizarTodosLosGraficos() {
|
|
let filtros = getFiltrosSeleccionados();
|
|
if (!filtroFechaActivo) {
|
|
filtros.fechaInicio = "";
|
|
filtros.fechaFin = "";
|
|
}
|
|
await inicializarGrafico(filtros);
|
|
await inicializarGrafico2(filtros);
|
|
await inicializarGrafico3(filtros);
|
|
await inicializarGrafico4(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', () => {
|
|
// Solo un filtro a la vez
|
|
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) {
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
const btnBuscar = document.getElementById('buscar');
|
|
if (btnBuscar) {
|
|
btnBuscar.addEventListener('click', () => {
|
|
const date1 = document.getElementById('date1')?.value;
|
|
const date2 = document.getElementById('date2')?.value;
|
|
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();
|
|
});
|
|
}
|
|
|
|
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');
|
|
if (btnLimpiar) {
|
|
btnLimpiar.addEventListener('click', limpiarTodo);
|
|
}
|
|
|
|
const btnLimpiar2 = document.getElementById('limpiar2');
|
|
if (btnLimpiar2) {
|
|
btnLimpiar2.addEventListener('click', limpiarTodo);
|
|
}
|
|
|
|
filtroFechaActivo = false;
|
|
setFiltroActivo(null);
|
|
habilitarTodosFiltros();
|
|
actualizarTodosLosGraficos();
|
|
}); |