summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSimon Rettberg2018-03-12 14:20:00 +0100
committerSimon Rettberg2018-03-12 14:20:00 +0100
commitb44e819241cd2cfd3510bd59bbf6761a95f18c5a (patch)
tree06d3e40a720a72031e75e1ad213afd31abc8269a
parentNanoHTTPD: Fix infinite loop (diff)
downloaddnbd3-status-b44e819241cd2cfd3510bd59bbf6761a95f18c5a.tar.gz
dnbd3-status-b44e819241cd2cfd3510bd59bbf6761a95f18c5a.tar.xz
dnbd3-status-b44e819241cd2cfd3510bd59bbf6761a95f18c5a.zip
Add clustering to nodes based on address
-rw-r--r--static/status-dnbd3.html47
1 files changed, 38 insertions, 9 deletions
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 6afbd80..0fe1a09 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -16,7 +16,7 @@
</head>
<body>
<div id="graph"></div>
-<div id="statistics"> </div>
+<div id="statistics"><div id="debug"></div></div>
<div> <canvas id="traffic" width="100%" height="150"></canvas></div>
</body>
<script type="text/javascript">
@@ -90,7 +90,17 @@ function myGraph(el) {
// Add node, if it doesn't exist
if (!node) {
- nodes.push(node = {"id": id, "title": title, "x": w/2, "y":h/2, "cluster":getCluster(title)});
+ var len = Math.min(5, nodes.length);
+ var nx = 0, ny = 0, i;
+ if (len > 0) {
+ for (i = 0; i < len; ++i) {
+ nx += nodes[i].x;
+ ny += nodes[i].y;
+ }
+ nx /= len;
+ ny /= len;
+ }
+ nodes.push(node = {"id": id, "title": title, "x": nx, "y":ny, "cluster":getCluster(title)});
changed = true;
} else if (!node.isServer && servers[title]) {
node.isServer = true;
@@ -403,6 +413,7 @@ function myGraph(el) {
force.start();
}
+ var lastScale = false;
// Render function
function renderTick(e) {
var k = 1 * e.alpha;
@@ -425,20 +436,38 @@ function myGraph(el) {
if (links[i].target.y > uy) uy = links[i].target.y;
}
var width = (ux - lx), height = (uy - ly);
- var scale;
+ var desiredScale;
var offX = 0, offY = 0;
if ( (width / w) > (height / h) ) {
- scale = (w - 40) / width;
- offY = (h - (height * scale + 20)) / 2;
+ desiredScale = (w - 40) / width;
} else {
- scale = (h - 40) / height;
- offX = (w - (width * scale + 20)) / 2;
+ desiredScale = (h - 40) / height;
}
+ if (lastScale === false) lastScale = desiredScale;
+ var absDiff = Math.abs(desiredScale - lastScale);
+
+ var newScale = desiredScale;
+ if (false) {
+ newScale = desiredScale;
+ } else if (desiredScale < lastScale) {
+ newScale = Math.min(lastScale * 0.99, lastScale - absDiff * 0.001);
+ if (newScale < desiredScale) newScale = desiredScale;
+ } else if (desiredScale > lastScale) {
+ newScale = Math.max(lastScale * 1.01, lastScale + absDiff * 0.001);
+ if (newScale > desiredScale) newScale = desiredScale;
+ }
+ lastScale = newScale;
+ if ( (width / w) > (height / h) ) {
+ offY = (h - (height * newScale + 20)) / 2;
+ } else {
+ offX = (w - (width * newScale + 20)) / 2;
+ }
+
var fixX = function(x) {
- return (x - lx) * scale + 20 + offX;
+ return (x - lx) * newScale + 20 + offX;
}
var fixY = function(y) {
- return (y - ly) * scale + 20 + offY;
+ return (y - ly) * newScale + 20 + offY;
}
svgLinks.attr("x1", function(d) { return fixX(d.source.x); })
.attr("y1", function(d) { return fixY(d.source.y); })