public/misp-topcontrib
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

agregar demo

Browse source
This commit is contained in:
Eduardo Riveros 2024-11-27 18:00:49 -03:00
parent 4d53e6bea6
commit 5bb6197c9e
3 changed files with 119 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
demo/index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<h1>Número de IoC reportados por día, por institución</h1>
<canvas id="ioc_dia"></canvas>
<h1>Número de IoC reportados durante el año, por institución</h1>
<canvas id="ioc_anio"></canvas>
</body>
<script type="text/javascript" src="js/chart.umd.js"></script>
<script type="text/javascript" src="js/misp_stats.js"></script>
</html>

16
demo/js/chart.umd.js Normal file
View file

File diff suppressed because one or more lines are too long

87
demo/js/misp_stats.js Normal file
View file

@ -0,0 +1,87 @@
function crearConfiguracion(tipo_grafico, etiquetas, datos, eje_y) {
return config = {
type: tipo_grafico,
data: {
labels: etiquetas,
datasets: datos
},
options: {
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
display: true,
title: {
display: true
}
},
y: {
display: true,
title: {
display: true,
text: eje_y
},
min: 0,
}
}
},
};
}
function procesarDatosDiarios(datos) {
let resultado = {
instituciones: {},
fechas: [],
};
let conjunto_fechas = new Set();
datos.forEach(stat => {
if (!(stat.organizacion in resultado.instituciones)) {
resultado.instituciones[stat.organizacion] = {};
}
resultado.instituciones[stat.organizacion][stat.fecha_creado] = stat.cantidad_ioc;
conjunto_fechas.add(stat.fecha_creado);
});
resultado.fechas = Array.from(conjunto_fechas).sort();
return resultado;
}
function procesarDatosSemanales(datos) {
return {
etiquetas: datos.map(dato => dato.organizacion),
datos: [
{
label: "Número de IOC",
data: datos.map(dato => dato.cantidad_total_ioc),
}
]
}
}
(function () {
fetch("https://mispstats.csirt.gob.cl/api/stats/")
.then(response => response.json())
.then(procesarDatosDiarios)
.then(resultado => {
const datos = Object.keys(resultado.instituciones).map(nombre => {
let datos = resultado.instituciones[nombre];
let data_array = resultado.fechas.map(fecha => fecha in datos ? datos[fecha] : null);
return {
label: nombre,
data: data_array,
tension: 0.5
}
})
const config = crearConfiguracion("line", resultado.fechas, datos, "Número de IoC reportados por institución cada día");
const ioc_dia = new Chart(document.querySelector('#ioc_dia'), config);
});
fetch("https://mispstats.csirt.gob.cl/api/stats/cantidad_por_organizacion/")
.then(respuesta => respuesta.json())
.then(procesarDatosSemanales)
.then(resultado => {
const config = crearConfiguracion("bar", resultado.etiquetas, resultado.datos, "Número de IoC reportados por institución este año");
const ioc_anio = new Chart(document.querySelector('#ioc_anio'), config);
});
})();