Datos Estadísticos

Dashboard Certificados SEM

Panorama de Certificados de Inversión

Registro de certificados con valores asociados

Última actualización

Acumulativo

Certificados

Monto Total

Subtrámites

País de nacimiento

Top 10 solicitantes

Datos del Mes Anterior

Certificados

Monto Total

Subtrámites

${porcentajeTotal}%

${item.cantidad}

certificados registrados

${money(item.monto_total)}

Monto registrado

`; contenedor.insertAdjacentHTML( "beforeend", html ); } /************************************************************************** * MES ANTERIOR **************************************************************************/ function crearMesAnterior(tramitesMesAnterior){ const contenedor = document.getElementById("contenedorMesAnterior"); contenedor.innerHTML = ""; if(!tramitesMesAnterior) return; const total = tramitesMesAnterior.reduce(function(suma,item){ return suma + parseInt(item.cantidad || 0); },0); tramitesMesAnterior .sort((a,b)=>b.cantidad-a.cantidad) .forEach(function(item){ crearTarjeta( item, total, contenedor ); }); } /************************************************************************** * GRAFICO DE PAISES **************************************************************************/ function crearGrafico(paises){ if(chartPaises!=null){ chartPaises.destroy(); } paises = paises .sort(function(a,b){ return b.total-a.total; }) .slice(0,10); const labels = paises.map(function(item){ return item.Pais; }); const valores = paises.map(function(item){ return item.total; }); const canvas = document.getElementById("graficoPaises"); const ctx = canvas.getContext("2d"); const gradient = ctx.createLinearGradient( 0, 0, 500, 0 ); gradient.addColorStop(0,"#003B71"); gradient.addColorStop(.5,"#005AA7"); gradient.addColorStop(1,"#1E88E5"); chartPaises = new Chart(ctx,{ type:"bar", data:{ labels:labels, datasets:[{ label:"Solicitantes", data:valores, backgroundColor:gradient, borderRadius:8, borderSkipped:false, barThickness:24, hoverBackgroundColor:"#1565C0" }] }, options:{ responsive:true, maintainAspectRatio:false, indexAxis:"y", animation:{ duration:1200, easing:"easeOutQuart" }, layout:{ padding:{ top:10, bottom:10, left:20, right:20 } }, plugins:{ legend:{ display:false }, tooltip:{ backgroundColor:"#1F2937", padding:12, titleFont:{ size:14, weight:"bold" }, bodyFont:{ size:13 }, callbacks:{ label:function(context){ return context.raw.toLocaleString() + " solicitantes"; } } } }, scales:{ x:{ beginAtZero:true, grid:{ color:"#ECEFF3" }, ticks:{ precision:0, font:{ size:12 } }, title:{ display:true, text:"Cantidad de solicitantes", font:{ size:13, weight:"600" } } }, y:{ grid:{ display:false }, ticks:{ color:"#2B3645", font:{ size:14, weight:"600" } } } } } }); } /************************************************************************** * REDIMENSIONAR **************************************************************************/ window.addEventListener( "resize", function(){ if(chartPaises){ chartPaises.resize(); } } ); function capitalizar(texto) { return texto .toLocaleLowerCase('es') .replace(/\p{L}+/gu, palabra => palabra.charAt(0).toLocaleUpperCase('es') + palabra.slice(1) ); } function renderMesAnterior(tramites){ let total = 0; let monto = 0; let aprobados = 0; tramites.forEach(function(item){ total += parseInt(item.cantidad || 0); monto += parseFloat(item.monto_total || 0); aprobados += parseInt(item.Aprobado || 0); }); animateNumber( document.getElementById("kpiAnteriorTotal"), total ); document.getElementById("kpiAnteriorMonto").innerHTML = money(monto); animateNumber( document.getElementById("kpiAnteriorTramites"), tramites.length ); const contenedor = document.getElementById("contenedorMesAnterior"); contenedor.innerHTML = ""; tramites .sort((a,b)=>b.cantidad-a.cantidad) .forEach(function(item){ crearTarjeta( item, total, contenedor ); }); }