Add ployly chart for net data
This commit is contained in:
parent
3dd89de38b
commit
794cc5b39b
|
@ -171,7 +171,7 @@ label.field-with-error {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.stats {
|
.stats {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
// Load netDiv.
|
||||||
|
const netDiv = document.getElementById("net-stats");
|
||||||
|
|
||||||
|
// Enter async context. Makes things easier.
|
||||||
|
(async function() {
|
||||||
|
// Fetch JSON
|
||||||
|
const netDataReq = await fetch("/net-in.json");
|
||||||
|
const netData = await netDataReq.json();
|
||||||
|
|
||||||
|
// Get list of entries
|
||||||
|
const legends = netData.meta.legend;
|
||||||
|
|
||||||
|
// Holds the plotly.JS data
|
||||||
|
const data = [];
|
||||||
|
|
||||||
|
// Create date objects for x-axis
|
||||||
|
const x = netData.data.map(a => new Date(a[0] * 1e3));
|
||||||
|
|
||||||
|
// Iterate through legends, fill up data.
|
||||||
|
for (let i = 0; i < legends.length; i++) {
|
||||||
|
const name = legends[i];
|
||||||
|
const y = netData.data.map(a => a[i+1]);
|
||||||
|
|
||||||
|
// Add data entry to array.
|
||||||
|
data.push({
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
name,
|
||||||
|
type: "bar",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format
|
||||||
|
const layout = {
|
||||||
|
barmode: "stack",
|
||||||
|
title: {
|
||||||
|
text: "Traffic In",
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: "Bytes/S",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create plot
|
||||||
|
Plotly.newPlot(netDiv, data, layout);
|
||||||
|
})()
|
|
@ -9,4 +9,10 @@
|
||||||
<a href="/vmstat-cpu.txt"><img class="stats" alt="CPU usage graph" src="/vmstat-cpu.png"></a>
|
<a href="/vmstat-cpu.txt"><img class="stats" alt="CPU usage graph" src="/vmstat-cpu.png"></a>
|
||||||
<a href="/vmstat-mem.txt"><img class="stats" alt="Memory usage graph" src="/vmstat-mem.png"></a>
|
<a href="/vmstat-mem.txt"><img class="stats" alt="Memory usage graph" src="/vmstat-mem.png"></a>
|
||||||
<img class="stats" alt="Traffic in graph" src="/net-in.png">
|
<img class="stats" alt="Traffic in graph" src="/net-in.png">
|
||||||
|
<noscript>If you'd like, there's also an interactive JavaScript
|
||||||
|
chart that uses Plotly. Network traffic is hard to see well in such
|
||||||
|
a small graph!</noscript>
|
||||||
|
<script src="/js/plotly-basic-2.27.1.min.js"></script>
|
||||||
|
<div class="stats" style="height: 400px;" id="net-stats"></div>
|
||||||
|
<script src="/js/net-plot.js"></script>
|
||||||
</article>
|
</article>
|
||||||
|
|
Loading…
Reference in New Issue