356 lines
8.5 KiB
JavaScript
356 lines
8.5 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 } from './funcionesGraficos.js';
|
|
|
|
async function inicializarGrafico() {
|
|
const [femenino, masculino, noDefinido] = await obtenerDatosGeneros();
|
|
|
|
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: function (val) {
|
|
return val + " personas";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
chart.render();
|
|
}
|
|
|
|
inicializarGrafico();
|
|
|
|
async function inicializarGrafico2() {
|
|
const [edad1,edad2,edad3,edad4,edad5,edad6,edad7] = await obtenerDatosEdades();
|
|
|
|
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: function (val) {
|
|
return val + " Años";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
|
|
chart2.render();
|
|
}
|
|
|
|
inicializarGrafico2();
|
|
|
|
|
|
async function inicializarGrafico3() {
|
|
try {
|
|
const estados = await obtenerDatosEstados();
|
|
|
|
if (!Array.isArray(estados)) {
|
|
console.error("Error: 'estados' no es un array. Verifica la funcion obtenerDatosEstados");
|
|
return;
|
|
}
|
|
|
|
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), // categorias en el eje X
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + " personas";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
|
|
chart3.render();
|
|
} catch (error) {
|
|
console.error("Error al inicializar el gráfico 3:", error);
|
|
}
|
|
}
|
|
|
|
inicializarGrafico3();
|
|
|
|
async function inicializarGrafico4() {
|
|
try {
|
|
const examenes = await obtenerDatosExamenes();
|
|
|
|
if (!Array.isArray(examenes)) {
|
|
console.error("Error: 'examenes' no es un array. Verifica la función obtenerDatosExamenes");
|
|
return;
|
|
}
|
|
|
|
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), // categorías en el eje X
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + " examenes";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
|
|
chart4.render();
|
|
} catch (error) {
|
|
console.error("Error al inicializar el grafico 4:", error);
|
|
}
|
|
}
|
|
|
|
|
|
inicializarGrafico4(); |