|
|
@ -27,9 +27,11 @@ |
|
|
|
var LENGTH_MAIN = 350, |
|
|
|
LENGTH_SERVER = 150, |
|
|
|
LENGTH_SUB = 50, |
|
|
|
WIDTH_SCALE = 2, |
|
|
|
GREEN = 'green', |
|
|
|
RED = '#FA0A10', |
|
|
|
RED = '#C5000B', |
|
|
|
ORANGE = 'orange', |
|
|
|
//GRAY = '#666666', |
|
|
|
GRAY = 'gray', |
|
|
|
BLACK = '#2B1B17'; |
|
|
|
|
|
|
@ -44,13 +46,13 @@ |
|
|
|
nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10}); |
|
|
|
nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8}); |
|
|
|
nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6}); |
|
|
|
edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: 6, label: '0.71 mbps'}); |
|
|
|
edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: 4, label: '0.55 mbps'}); |
|
|
|
edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'}); |
|
|
|
edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'}); |
|
|
|
|
|
|
|
// group around 2 |
|
|
|
for (var i = 100; i <= 104; i++) { |
|
|
|
var value = 1; |
|
|
|
var width = 1; |
|
|
|
var width = WIDTH_SCALE * 2; |
|
|
|
var color = GRAY; |
|
|
|
var label = null; |
|
|
|
|
|
|
@ -67,37 +69,38 @@ |
|
|
|
edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label}); |
|
|
|
} |
|
|
|
nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1}); |
|
|
|
edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY}); |
|
|
|
edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE}); |
|
|
|
|
|
|
|
// group around 3 |
|
|
|
nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4}); |
|
|
|
edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: 2}); |
|
|
|
edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2}); |
|
|
|
for (var i = 230; i <= 231; i++ ) { |
|
|
|
nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2}); |
|
|
|
edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: 1}); |
|
|
|
edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE}); |
|
|
|
} |
|
|
|
|
|
|
|
// group around 1 |
|
|
|
nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10}); |
|
|
|
edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: 6, label: '0.92 mbps'}); |
|
|
|
edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'}); |
|
|
|
nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7}); |
|
|
|
edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: 3, label: '0.68 mbps'}); |
|
|
|
edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'}); |
|
|
|
nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3}); |
|
|
|
edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, label: '0.3 mbps'}); |
|
|
|
edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'}); |
|
|
|
|
|
|
|
nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10}); |
|
|
|
edges.push({from: 1, to: 204, length: 200, width: 3, label: '0.63 mbps'}); |
|
|
|
edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'}); |
|
|
|
|
|
|
|
|
|
|
|
// legend |
|
|
|
var mygraph = document.getElementById('mygraph'); |
|
|
|
var x = - mygraph.clientWidth / 2 + 50; |
|
|
|
var y = - mygraph.clientHeight / 2 + 20; |
|
|
|
nodes.push({id: 1000, x: x, y: y + 0, label: 'Internet', group: 'internet'}); |
|
|
|
nodes.push({id: 1001, x: x, y: y + 50, label: 'Switch', group: 'switch'}); |
|
|
|
nodes.push({id: 1002, x: x, y: y + 100, label: 'Server', group: 'server'}); |
|
|
|
nodes.push({id: 1003, x: x, y: y + 150, label: 'Computer', group: 'desktop'}); |
|
|
|
nodes.push({id: 1004, x: x, y: y + 200, label: 'Smartphone', group: 'mobile'}); |
|
|
|
var y = - mygraph.clientHeight / 2 + 50; |
|
|
|
var step = 70; |
|
|
|
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1}); |
|
|
|
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1}); |
|
|
|
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1}); |
|
|
|
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1}); |
|
|
|
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1}); |
|
|
|
|
|
|
|
// create a graph |
|
|
|
var container = document.getElementById('mygraph'); |
|
|
@ -108,8 +111,8 @@ |
|
|
|
var options = { |
|
|
|
stabilize: false, // stabilize positions before displaying |
|
|
|
nodes: { |
|
|
|
widthMin: 24, |
|
|
|
maxWidth: 64, |
|
|
|
radiusMin: 16, |
|
|
|
radiusMax: 32, |
|
|
|
fontColor: BLACK |
|
|
|
}, |
|
|
|
edges: { |
|
|
@ -118,23 +121,23 @@ |
|
|
|
groups: { |
|
|
|
'switch': { |
|
|
|
shape: 'triangle', |
|
|
|
color: vis.graph.Groups.DEFAULT[1] // yellow |
|
|
|
color: '#FF9900' // orange |
|
|
|
}, |
|
|
|
desktop: { |
|
|
|
shape: 'dot', |
|
|
|
color: vis.graph.Groups.DEFAULT[0] // blue |
|
|
|
color: "#2B7CE9" // blue |
|
|
|
}, |
|
|
|
mobile: { |
|
|
|
shape: 'dot', |
|
|
|
color: vis.graph.Groups.DEFAULT[4] // purple |
|
|
|
color: "#5A1E5C" // purple |
|
|
|
}, |
|
|
|
server: { |
|
|
|
shape: 'square', |
|
|
|
color: vis.graph.Groups.DEFAULT[2] // red |
|
|
|
color: "#C5000B" // red |
|
|
|
}, |
|
|
|
internet: { |
|
|
|
shape: 'square', |
|
|
|
color: vis.graph.Groups.DEFAULT[3] // green |
|
|
|
color: "#109618" // green |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|