IntenseWebs/LibreQoS
3
0
Fork 0
mirror of https://github.com/LibreQoE/LibreQoS.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improved circuit queue graph labelling

Browse Source
This commit is contained in:
Herbert Wolverson 2023-03-22 17:55:12 +00:00
parent 7326163918
commit 4f574cd668
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/rust/lqos_node_manager/static/circuit_queue.html
View File

@ -147,7 +147,7 @@
<div class="col-sm-6">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title"><i class="fa fa-bar-chart"></i> Tin 1 (Bulk)</h5>
<h5 class="card-title"><i class="fa fa-truck"></i> Tin 1 (Bulk)</h5>
<div id="tinTp_0" class="graph150"></div>
<div id="tinMd_0" class="graph150"></div>
</div>
@ -156,7 +156,7 @@
<div class="col-sm-6">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title"><i class="fa fa-bar-chart"></i> Tin 2 (Best Effort)</h5>
<h5 class="card-title"><i class="fa fa-balance-scale"></i> Tin 2 (Best Effort)</h5>
<div id="tinTp_1" class="graph150"></div>
<div id="tinMd_1" class="graph150"></div>
</div>
@ -167,7 +167,7 @@
<div class="col-sm-6">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title"><i class="fa fa-bar-chart"></i> Tin 3 (Video)</h5>
<h5 class="card-title"><i class="fa fa-television"></i> Tin 3 (Video)</h5>
<div id="tinTp_2" class="graph150"></div>
<div id="tinMd_2" class="graph150"></div>
</div>
@ -176,7 +176,7 @@
<div class="col-sm-6">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title"><i class="fa fa-bar-chart"></i> Tin 4 (Voice)</h5>
<h5 class="card-title"><i class="fa fa-phone"></i> Tin 4 (Voice)</h5>
<div id="tinTp_3" class="graph150"></div>
<div id="tinMd_3" class="graph150"></div>
</div>
@ -329,7 +329,7 @@
{x: entries.x[0], y:entries.y[0].reverse(), name: 'Download', type: 'scatter'},
{x: entries.x[1], y:entries.y[1].reverse(), name: 'Upload', type: 'scatter'},
];
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true }, xaxis: {automargin: true, title: "Time since now (seconds)"} });
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Bits" }, xaxis: {automargin: true, title: "Time since now"} });
// Try to hide zeroes
for (let i=0; i<entries.y[2].length; i++) {
@ -339,15 +339,18 @@
if (entries.y[5][i] == 0) entries.y[5][i] = null;
}
let mdx = zip(entries.x[2], entries.x[4]);
let drop = zip(entries.y[2].reverse(), entries.y[4].reverse());
let mark = zip(entries.y[3].reverse(), entries.y[4].reverse());
graph = document.getElementById("tinMd_" + tin);
graph_data = [
{x: entries.x[2], y:entries.y[2].reverse(), name: 'Down Drops', mode: 'markers', marker: { size: 4 }},
{x: entries.x[3], y:entries.y[3].reverse(), name: 'Down Marks', mode: 'markers', marker: { size: 4 }},
{x: entries.x[4], y:entries.y[4].reverse(), name: 'Up Drops', mode: 'markers', marker: { size: 4 }},
{x: entries.x[5], y:entries.y[5].reverse(), name: 'Up Marks', mode: 'markers', marker: { size: 4 }},
{x: mdx, y:drop, name: 'Drops', mode: 'markers', marker: { size: 4 }},
{x: mdx, y:mark, name: 'Marks', mode: 'markers', marker: { size: 4 }},
//{x: entries.x[4], y:entries.y[4].reverse(), name: 'Up Drops', mode: 'markers', marker: { size: 4 }},
//{x: entries.x[5], y:entries.y[5].reverse(), name: 'Up Marks', mode: 'markers', marker: { size: 4 }},
];
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true }, xaxis: {automargin: true, title: "Time since now (seconds)"} });
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Packets" }, xaxis: {automargin: true, title: "Time since now"} });
backlogX1.push(entries.x[6]);
backlogX2.push(entries.x[7]);