aboutsummaryrefslogtreecommitdiffstats
path: root/web/js/nms-draw-chart.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/js/nms-draw-chart.js')
-rw-r--r--web/js/nms-draw-chart.js186
1 files changed, 88 insertions, 98 deletions
diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js
index 4145a9a..ccdf220 100644
--- a/web/js/nms-draw-chart.js
+++ b/web/js/nms-draw-chart.js
@@ -14,7 +14,7 @@ function setNightModeChart(night) {
function drawLatency(canvas, sw, chart, callback) {
var q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 1h AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)');
var dataset = [];
-
+
$.getJSON( "/query?db=gondul&q="+q, function( results ) {
try {
results['results'][0]['series'].forEach(function(serie) {
@@ -67,8 +67,11 @@ function drawLatency(canvas, sw, chart, callback) {
responsive: true,
animation: false,
elements: {
+ point: {
+ radius: 0
+ },
line: {
- tension: 0.05
+ tension: 0.4
}
}
}
@@ -86,68 +89,52 @@ function drawSumOfPorts(canvas, sw) {
var megabit = kilobit * 1024;
var gigabit = megabit * 1024;
var terabit = gigabit * 1024;
-
- var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 30m AND "switch"=\''+sw+'\' GROUP BY time(90s),"interface" fill(null)');
+
+ var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 60m AND "switch"=\'' + sw + '\' GROUP BY time(90s),"interface" fill(null)');
var dataset = [];
-
- $.getJSON( "/query?db=gondul&q="+q, function( results ) {
- var bits_in = [];
- var bits_out = [];
-
- results['results'][0]['series'].forEach(function(serie) {
- // Bytes in
- serie['values'].forEach(function(element) {
- bits_in.push(element[1]);
- });
- // Bytes out
- serie['values'].forEach(function(element) {
- bits_out.push(element[2]);
+
+ $.getJSON("/query?db=gondul&q=" + q, function (results) {
+ var bits_in = {};
+ var bits_out = {};
+
+ results['results'][0]['series'].forEach(function (serie) {
+ serie['values'].forEach(function (element) {
+ var time = new Date(element[0]);
+ var timeStr = time.toISOString();
+ bits_in[timeStr] = (bits_in[timeStr] || 0) + element[1];
+ bits_out[timeStr] = (bits_out[timeStr] || 0) + element[2];
});
});
-
- var bits_in_size = bitToSize(Math.max.apply( Math, bits_in ));
- var bits_out_size = bitToSize(Math.max.apply( Math, bits_out ));
- var size = 0;
-
- if(bits_in_size >= bits_out_size) {
- size = bits_in_size;
- } else {
- size = bits_out_size;
- }
-
+
+ var max_bits_in = Math.max(...Object.values(bits_in));
+ var max_bits_out = Math.max(...Object.values(bits_out));
+ var size = bitToSize(Math.max(max_bits_in, max_bits_out));
+
var size_divider;
switch (size) {
case 0:
- size_divider = 1;
- break;
+ size_divider = 1;
+ break;
case 1:
- size_divider = kilobit;
- break;
+ size_divider = kilobit;
+ break;
case 2:
- size_divider = megabit;
- break;
+ size_divider = megabit;
+ break;
case 3:
- size_divider = gigabit;
- break;
+ size_divider = gigabit;
+ break;
case 4:
- size_divider = terabit;
- break;
+ size_divider = terabit;
+ break;
}
- results['results'][0]['series'].forEach(function(serie) {
- // Bytes in
- var data = [];
- serie['values'].forEach(function(element) {
- data.push({t: new Date(element[0]), y: element[1] / size_divider });
- });
- dataset.push({data: data, backgroundColor:'rgba(58,125,48,200)', label:'Traffic in (' + sizeToText(size)+')'});
- // Bytes out
- data = [];
- serie['values'].forEach(function(element) {
- data.push({t: new Date(element[0]), y: -Math.abs(element[2] / size_divider) });
- });
- dataset.push({data: data, backgroundColor:'rgba(84,84,142,225)', label:'Traffic out (' + sizeToText(size)+')'});
- });
-
+
+ var inData = Object.entries(bits_in).map(([t, y]) => ({ t: new Date(t), y: y / size_divider }));
+ var outData = Object.entries(bits_out).map(([t, y]) => ({ t: new Date(t), y: -Math.abs(y / size_divider) }));
+
+ dataset.push({ data: inData, backgroundColor: 'rgba(100,155,100,0.8)', label: 'Traffic in (' + sizeToText(size) + ')' });
+ dataset.push({ data: outData, backgroundColor: 'rgba(0,155,200,0.8)', label: 'Traffic out (' + sizeToText(size) + ')' });
+
// Draw the chart
var ctx = document.getElementById(canvas).getContext('2d');
var myChart = new Chart(ctx, {
@@ -160,7 +147,7 @@ function drawSumOfPorts(canvas, sw) {
display: false
},
scales: {
- xAxes:[{
+ xAxes: [{
type: 'time',
time: {
parser: "HH:mm",
@@ -175,15 +162,15 @@ function drawSumOfPorts(canvas, sw) {
}
}],
yAxes: [{
- stacked: true,
+ stacked: false,
ticks: {
- callback: function(label, index, labels) {
- return Math.abs(label)+' '+sizeToText(size);
+ callback: function (label, index, labels) {
+ return Math.abs(label) + ' ' + sizeToText(size);
}
},
scaleLabel: {
display: true,
- labelString: sw+' - All ports'
+ labelString: sw + ' - All ports'
}
}]
},
@@ -194,7 +181,7 @@ function drawSumOfPorts(canvas, sw) {
radius: 0
},
line: {
- tension: 0
+ tension: 0.4
}
}
}
@@ -204,75 +191,75 @@ function drawSumOfPorts(canvas, sw) {
function drawPort(canvas, sw, port) {
-
+
var kilobit = 1024;
var megabit = kilobit * 1024;
var gigabit = megabit * 1024;
var terabit = gigabit * 1024;
-
- var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 30m AND "switch"=\''+sw+'\' AND "interface"=\''+port+'\' GROUP BY time(30s) fill(null)');
+
+ var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 60m AND "switch"=\''+sw+'\' AND "interface"=\''+port+'\' GROUP BY time(30s) fill(null)');
var dataset = [];
-
+
$.getJSON( "/query?db=gondul&q="+q, function( results ) {
var serie = results['results'][0]['series'][0];
-
+
var bits_in = [];
var bits_out = [];
-
+
// Bytes in
serie['values'].forEach(function(element) {
bits_in.push(element[1]);
});
-
+
// Bytes out
serie['values'].forEach(function(element) {
bits_out.push(element[2]);
});
-
+
var bits_in_size = bitToSize(Math.max.apply( Math, bits_in ));
var bits_out_size = bitToSize(Math.max.apply( Math, bits_out ));
var size = 0;
-
+
if(bits_in_size >= bits_out_size) {
size = bits_in_size;
} else {
size = bits_out_size;
}
-
+
var size_divider;
switch (size) {
case 0:
- size_divider = 1;
- break;
+ size_divider = 1;
+ break;
case 1:
- size_divider = kilobit;
- break;
+ size_divider = kilobit;
+ break;
case 2:
- size_divider = megabit;
- break;
+ size_divider = megabit;
+ break;
case 3:
- size_divider = gigabit;
- break;
+ size_divider = gigabit;
+ break;
case 4:
- size_divider = terabit;
- break;
+ size_divider = terabit;
+ break;
}
-
+
// Bytes in
var data = [];
serie['values'].forEach(function(element) {
data.push({t: new Date(element[0]), y: element[1] / size_divider });
});
- dataset.push({data: data, backgroundColor:'rgba(58,125,48,200)', label:'Traffic in (' + sizeToText(size)+')'});
-
+ dataset.push({data: data, backgroundColor:'rgba(100,155,100,0.8)', label:'Traffic in (' + sizeToText(size)+')'});
+
// Bytes out
data = [];
serie['values'].forEach(function(element) {
data.push({t: new Date(element[0]), y: -Math.abs(element[2] / size_divider) });
});
- dataset.push({data: data, backgroundColor:'rgba(84,84,142,225)', label:'Traffic out (' + sizeToText(size)+')'});
-
-
+ dataset.push({data: data, backgroundColor:'rgba(0,155,200,0.8)', label:'Traffic out (' + sizeToText(size)+')'});
+
+
// Draw the chart
var ctx = document.getElementById(canvas).getContext('2d');
var myChart = new Chart(ctx, {
@@ -311,11 +298,14 @@ function drawPort(canvas, sw, port) {
responsive: true,
animation: false,
elements: {
+ point: {
+ radius: 0
+ },
line: {
- tension: 0
+ tension: 0.3
}
}
-
+
}
});
});
@@ -327,7 +317,7 @@ function bitToSize(bits) {
var megabit = kilobit * 1024;
var gigabit = megabit * 1024;
var terabit = gigabit * 1024;
-
+
if(bits >= 0 && bits < kilobit) {
return 0;
}
@@ -348,19 +338,19 @@ function bitToSize(bits) {
function sizeToText(size) {
switch(size) {
case 0:
- return 'bit/s';
- break;
+ return 'bit/s';
+ break;
case 1:
- return 'Kb/s';
- break;
+ return 'Kb/s';
+ break;
case 2:
- return 'Mb/s';
- break;
+ return 'Mb/s';
+ break;
case 3:
- return 'Gb/s';
- break;
+ return 'Gb/s';
+ break;
case 4:
- return 'Tb/s';
- break;
+ return 'Tb/s';
+ break;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-18 16:39:27 +0000