sidebar with nodecounts
This commit is contained in:
parent
41410d53ab
commit
b6ea47573f
|
@ -49,6 +49,6 @@
|
||||||
fill: #C83771;
|
fill: #C83771;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend {
|
sidebar {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,6 +55,6 @@
|
||||||
fill: #C83771;
|
fill: #C83771;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend {
|
sidebar {
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
|
|
|
@ -131,16 +131,16 @@
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend {
|
sidebar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1em;
|
top: 1em;
|
||||||
right: 1.5em;
|
right: 1.5em;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
font-size: 9pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend ul {
|
#legend ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-size: 9pt;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend li {
|
#legend li {
|
||||||
|
@ -153,7 +153,7 @@
|
||||||
vertical-align: center;
|
vertical-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend h2 {
|
sidebar h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-size: 9pt;
|
font-size: 9pt;
|
||||||
}
|
}
|
||||||
|
|
|
@ -90,6 +90,20 @@ btns.append("button")
|
||||||
.text("VPN")
|
.text("VPN")
|
||||||
.on("click", update_graph)
|
.on("click", update_graph)
|
||||||
|
|
||||||
|
var meshinfo = d3.select("sidebar")
|
||||||
|
.insert("div", ":first-child")
|
||||||
|
|
||||||
|
meshinfo.append("h2").text("Mesh")
|
||||||
|
|
||||||
|
meshinfo.append("p")
|
||||||
|
.attr("id", "nodecount")
|
||||||
|
|
||||||
|
meshinfo.append("p")
|
||||||
|
.attr("id", "clientcount")
|
||||||
|
|
||||||
|
meshinfo.append("p")
|
||||||
|
.attr("id", "gatewaycount")
|
||||||
|
|
||||||
//cp.append("input")
|
//cp.append("input")
|
||||||
// .on("keyup", function(){show_node(this.value)})
|
// .on("keyup", function(){show_node(this.value)})
|
||||||
// .on("change", function(){show_node(this.value)})
|
// .on("change", function(){show_node(this.value)})
|
||||||
|
@ -310,6 +324,21 @@ function reload() {
|
||||||
|
|
||||||
updated_at.text(d3.time.format("%X")(new Date()))
|
updated_at.text(d3.time.format("%X")(new Date()))
|
||||||
|
|
||||||
|
d3.select("#nodecount")
|
||||||
|
.text((data.nodes.filter(function(d) {
|
||||||
|
return !d.flags.client
|
||||||
|
}).length) + " Knoten")
|
||||||
|
|
||||||
|
d3.select("#gatewaycount")
|
||||||
|
.text((data.nodes.filter(function(d) {
|
||||||
|
return d.flags.gateway
|
||||||
|
}).length) + " Gateways")
|
||||||
|
|
||||||
|
d3.select("#clientcount")
|
||||||
|
.text((data.nodes.filter(function(d) {
|
||||||
|
return d.flags.client
|
||||||
|
}).length) + " Clients")
|
||||||
|
|
||||||
update()
|
update()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,49 +22,51 @@
|
||||||
</ul>
|
</ul>
|
||||||
</header>
|
</header>
|
||||||
<div id="chart">
|
<div id="chart">
|
||||||
<div id="legend">
|
<sidebar>
|
||||||
<h2>Legende</h2>
|
<div id="legend">
|
||||||
<ul>
|
<h2>Legende</h2>
|
||||||
<li><svg width=30 height=20 class="node">
|
<ul>
|
||||||
<ellipse cx=15 cy=10 ry=8 rx=8 />
|
<li><svg width=30 height=20 class="node">
|
||||||
</svg>
|
<ellipse cx=15 cy=10 ry=8 rx=8 />
|
||||||
<label>Knoten</label>
|
</svg>
|
||||||
</li>
|
<label>Knoten</label>
|
||||||
<li><svg width=30 height=20 class="node">
|
</li>
|
||||||
<ellipse cx=15 cy=10 ry=8 rx=8 class="gateway"/>
|
<li><svg width=30 height=20 class="node">
|
||||||
</svg>
|
<ellipse cx=15 cy=10 ry=8 rx=8 class="gateway"/>
|
||||||
<label>Gateway</label>
|
</svg>
|
||||||
</li>
|
<label>Gateway</label>
|
||||||
<li><svg width=30 height=20 class="node">
|
</li>
|
||||||
<ellipse cx=15 cy=10 ry=4 rx=4 class="client"/>
|
<li><svg width=30 height=20 class="node">
|
||||||
</svg>
|
<ellipse cx=15 cy=10 ry=4 rx=4 class="client"/>
|
||||||
<label>Client</label>
|
</svg>
|
||||||
</li>
|
<label>Client</label>
|
||||||
<li><svg width=30 height=20 class="link">
|
</li>
|
||||||
<line x1="2" y1="10" x2="28" y2="10"/>
|
<li><svg width=30 height=20 class="link">
|
||||||
</svg>
|
<line x1="2" y1="10" x2="28" y2="10"/>
|
||||||
<label>Link</label>
|
</svg>
|
||||||
</li>
|
<label>Link</label>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li><svg width=30 height=20 class="link vpn">
|
<li><svg width=30 height=20 class="link vpn">
|
||||||
<line x1="2" y1="10" x2="28" y2="10"/>
|
<line x1="2" y1="10" x2="28" y2="10"/>
|
||||||
</svg>
|
</svg>
|
||||||
<label>VPN-Link</label>
|
<label>VPN-Link</label>
|
||||||
</li>
|
</li>
|
||||||
<li><svg width=30 height=20 class="node uplinks">
|
<li><svg width=30 height=20 class="node uplinks">
|
||||||
<g transform="translate(12,28)">
|
<g transform="translate(12,28)">
|
||||||
<line x1="2" y1="10" x2="28" y2="10" stroke="#000"/>
|
<line x1="2" y1="10" x2="28" y2="10" stroke="#000"/>
|
||||||
<path d="m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922
|
<path d="m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922
|
||||||
12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097
|
12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097
|
||||||
-3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426
|
-3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426
|
||||||
-1.1549641,10.561363 -10.3735326,10.701179 z"/>
|
-1.1549641,10.561363 -10.3735326,10.701179 z"/>
|
||||||
<text text-anchor="middle" y=-17>ℕ</text>
|
<text text-anchor="middle" y=-17>ℕ</text>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<label>Anzahl VPN-Links</label>
|
<label>Anzahl VPN-Links</label>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</sidebar>
|
||||||
</div>
|
</div>
|
||||||
<script src='force.js' type='text/javascript'></script>
|
<script src='force.js' type='text/javascript'></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue