362 lines
9.9 KiB
JavaScript
362 lines
9.9 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 COLLAPSE
|
|
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
|
|
const allSideDivider = document.querySelectorAll('#sidebar .divider');
|
|
|
|
if(sidebar.classList.contains('hide')) {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
} else {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
|
|
toggleSidebar.addEventListener('click', function () {
|
|
sidebar.classList.toggle('hide');
|
|
|
|
if(sidebar.classList.contains('hide')) {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
} else {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
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;
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
// PROFILE DROPDOWN
|
|
const profile = document.querySelector('nav .profile');
|
|
const imgProfile = profile.querySelector('img');
|
|
const dropdownProfile = profile.querySelector('.profile-link');
|
|
|
|
imgProfile.addEventListener('click', function () {
|
|
dropdownProfile.classList.toggle('show');
|
|
})
|
|
|
|
|
|
|
|
|
|
// MENU
|
|
const allMenu = document.querySelectorAll('main .content-data .head .menu');
|
|
|
|
allMenu.forEach(item=> {
|
|
const icon = item.querySelector('.icon');
|
|
const menuLink = item.querySelector('.menu-link');
|
|
|
|
icon.addEventListener('click', function () {
|
|
menuLink.classList.toggle('show');
|
|
})
|
|
})
|
|
|
|
|
|
|
|
window.addEventListener('click', function (e) {
|
|
if(e.target !== imgProfile) {
|
|
if(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(e.target !== icon) {
|
|
if(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
|
|
} from './funcionesGraficos.js';
|
|
|
|
// Variables globales para los graficos
|
|
let chartGenero = null;
|
|
let chartEdad = null;
|
|
let chartEstado = null;
|
|
let chartExamen = null;
|
|
let chartFecha = null;
|
|
|
|
// Controla si el filtro de fecha está activo
|
|
let filtroFechaActivo = false;
|
|
|
|
async function inicializarGraficoFecha(filtros) {
|
|
// Solo dibujar si ambas fechas están presentes y el filtro está activo
|
|
if (!filtroFechaActivo || !filtros.fechaInicio || !filtros.fechaFin) {
|
|
if (chartFecha) {
|
|
chartFecha.destroy();
|
|
chartFecha = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
const fechas = await obtenerDatosFechas(filtros);
|
|
|
|
if (!fechas.length) {
|
|
if (chartFecha) {
|
|
chartFecha.destroy();
|
|
chartFecha = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Solo un valor total
|
|
const cantidad = fechas[0].cantidad;
|
|
const label = `Del ${fechas[0].fechaInicio} al ${fechas[0].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();
|
|
}
|
|
|
|
async function inicializarGrafico(filtros) {
|
|
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() {
|
|
// Si el filtro de fecha está activo, se pasan las fechas, si no, se limpian
|
|
let filtros = getFiltrosSeleccionados();
|
|
if (!filtroFechaActivo) {
|
|
filtros.fechaInicio = "";
|
|
filtros.fechaFin = "";
|
|
}
|
|
await inicializarGrafico(filtros);
|
|
await inicializarGrafico2(filtros);
|
|
await inicializarGrafico3(filtros);
|
|
await inicializarGrafico4(filtros);
|
|
await inicializarGraficoFecha(filtros);
|
|
}
|
|
|
|
// Espera a que el DOM esté listo antes de agregar eventos
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Solo combos, NO fechas
|
|
['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.addEventListener('change', actualizarTodosLosGraficos);
|
|
});
|
|
|
|
// Botón buscar para fechas
|
|
const btnBuscar = document.getElementById('buscar');
|
|
if (btnBuscar) {
|
|
btnBuscar.addEventListener('click', () => {
|
|
const date1 = document.getElementById('date1').value;
|
|
const date2 = document.getElementById('date2').value;
|
|
// Solo activa el filtro si ambas fechas están presentes
|
|
filtroFechaActivo = !!(date1 && date2);
|
|
actualizarTodosLosGraficos();
|
|
});
|
|
}
|
|
|
|
// Botón limpiar para quitar filtro de fecha
|
|
const btnLimpiar = document.getElementById('limpiar');
|
|
if (btnLimpiar) {
|
|
btnLimpiar.addEventListener('click', () => {
|
|
document.getElementById('date1').value = '';
|
|
document.getElementById('date2').value = '';
|
|
filtroFechaActivo = false;
|
|
actualizarTodosLosGraficos();
|
|
});
|
|
}
|
|
|
|
filtroFechaActivo = false;
|
|
actualizarTodosLosGraficos();
|
|
}); |