mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-29 15:39:33 +00:00
43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
/*
|
|
(C) 2013-23 - ntop.org
|
|
*/
|
|
|
|
/*
|
|
Here a list of functions used to check, format data;
|
|
e.g. functions that check if a string is null or empty
|
|
*/
|
|
|
|
/* This function create a small heatmap, depending on the hours */
|
|
const createHeatmap = (data) => {
|
|
const squareLength = 7, squareHeight = 20;
|
|
const colors = ['#d3d3d3', '#28a745', '#f00', '#ffc107'];
|
|
let svg = `<svg width='${squareLength * data.length + data.length * 2}' height='20' viewBox='0 0 ${squareLength * data.length + data.length * 2} 20'>`;
|
|
const this_hour = new Date().getHours();
|
|
|
|
for (let x = 0; x < 24; x++) {
|
|
const $rect = $(document.createElementNS("http://www.w3.org/2000/svg", "rect"));
|
|
$rect.attr('x', x * (squareLength + 2)).attr('y', 0).attr('width', squareLength).attr('height', squareHeight);
|
|
const colorIndex = (data.length > 0) ? data[x] : 0;
|
|
$rect.attr('fill', colors[colorIndex]);
|
|
if (this_hour == x) {
|
|
$rect.attr('stroke', '#000'); /* Add stroke for the current hour */
|
|
$rect.attr('stroke-width', '2');
|
|
$rect.attr('stroke-dasharray', '2'); /* Make line dashed */
|
|
$rect.attr('opacity', '0.6');
|
|
}
|
|
svg = `${svg}${$rect[0].outerHTML}`;
|
|
}
|
|
svg = `${svg}</svg>`
|
|
return svg;
|
|
}
|
|
|
|
/* ******************************************************************** */
|
|
|
|
const visualizationUtils = function () {
|
|
return {
|
|
createHeatmap
|
|
};
|
|
}();
|
|
|
|
export default visualizationUtils;
|
|
|