diff options
| author | Simon Rettberg | 2018-03-12 14:20:00 +0100 |
|---|---|---|
| committer | Simon Rettberg | 2018-03-12 14:20:00 +0100 |
| commit | b44e819241cd2cfd3510bd59bbf6761a95f18c5a (patch) | |
| tree | 06d3e40a720a72031e75e1ad213afd31abc8269a /static | |
| parent | NanoHTTPD: Fix infinite loop (diff) | |
| download | dnbd3-status-b44e819241cd2cfd3510bd59bbf6761a95f18c5a.tar.gz dnbd3-status-b44e819241cd2cfd3510bd59bbf6761a95f18c5a.tar.xz dnbd3-status-b44e819241cd2cfd3510bd59bbf6761a95f18c5a.zip | |
Add clustering to nodes based on address
Diffstat (limited to 'static')
| -rw-r--r-- | static/status-dnbd3.html | 47 |
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); }) |