Created
July 27, 2017 11:58
-
-
Save cyyeh/470baac6904ee558330fc6c8350d5b7a to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/duhaxod
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css" /> | |
| <link rel="stylesheet" href="index.css"> | |
| <style id="jsbin-css"> | |
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #rmm-network { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="rmm-network"></div> | |
| <script src="https://code.jquery.com/jquery-2.2.4.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script> | |
| <script id="jsbin-javascript"> | |
| (function(visDemo) { | |
| visDemo(window.jQuery, window, document); | |
| }(function($, window, document) { | |
| // get nodes information first | |
| var roles, accounts, groups, devices; | |
| var nodeArray = []; | |
| var nodes; | |
| var edgeArray = []; | |
| var temp = 0; | |
| var tempEdgeArrayLength; | |
| var edges; | |
| var networkData, networkContainer, networkOptions, network; | |
| var i, j, z; | |
| roles = [ | |
| { | |
| 'rid': 1, | |
| 'name': 'super admin' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'name': 'admin' | |
| }, | |
| { | |
| 'rid': 3, | |
| 'name': 'device admin' | |
| } | |
| ]; | |
| accounts = [ | |
| { | |
| 'rid': 1, | |
| 'aid': 1, | |
| 'name': 'account01' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'aid': 7, | |
| 'name': 'account02' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'aid': 8, | |
| 'name': 'account03' | |
| }, | |
| { | |
| 'rid': 3, | |
| 'aid': 10, | |
| 'name': 'account04' | |
| } | |
| ]; | |
| groups = [ | |
| { | |
| 'gid': 61, | |
| 'aid': 7, | |
| 'name': 'group01' | |
| }, | |
| { | |
| 'gid': 62, | |
| 'aid': 8, | |
| 'name': 'group02' | |
| }, | |
| { | |
| 'gid': 60, | |
| 'aid': 10, | |
| 'name': 'group03' | |
| }, | |
| { | |
| 'gid': 56, | |
| 'aid': 8, | |
| 'name': 'group04' | |
| }, | |
| { | |
| 'gid': 1, | |
| 'aid': 1, | |
| 'name': 'group05' | |
| } | |
| ]; | |
| devices = [ | |
| { | |
| 'did': 1, | |
| 'name': 'device01', | |
| 'gids': [ | |
| { | |
| 'gid': 61, | |
| 'name': 'group01', | |
| 'aid': 7 | |
| }, | |
| { | |
| 'gid': 62, | |
| 'name': 'group02', | |
| 'aid': 8 | |
| }, | |
| { | |
| 'gid': 60, | |
| 'name': 'group03', | |
| 'aid': 10 | |
| }, | |
| { | |
| 'gid': 56, | |
| 'name': 'group04', | |
| 'aid': 8 | |
| } | |
| ] | |
| }, | |
| { | |
| 'did': 2, | |
| 'name': 'device02', | |
| 'gids': [ | |
| { | |
| 'gid': 61, | |
| 'name': 'group03', | |
| 'aid': 7 | |
| }, | |
| { | |
| 'gid': 1, | |
| 'name': 'group02', | |
| 'aid': 60 | |
| } | |
| ] | |
| } | |
| ]; | |
| // create an array with nodes and edges | |
| // roles | |
| for (i = 0; i < roles.length; i++) { | |
| nodeArray.push({ | |
| id: 'rid_' + roles[i].rid, | |
| label: roles[i].name | |
| }); | |
| // generate edges from roleIds | |
| edgeArray.push({ | |
| from: 'rid_' + roles[i].rid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength = 0; | |
| // accounts | |
| for (i = 0; i < accounts.length; i++) { | |
| nodeArray.push({ | |
| id: 'aid_' + accounts[i].aid, | |
| label: accounts[i].name | |
| }); | |
| // generate edges to accountIds (from roleIds) | |
| for (j = tempEdgeArrayLength; j < tempEdgeArrayLength + roles.length; j++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === accounts[i].rid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'aid_' + accounts[i].aid; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'aid_' + accounts[i].aid | |
| }); | |
| } | |
| } | |
| } | |
| // generate edges from accountIds | |
| edgeArray.push({ | |
| from: 'aid_' + accounts[i].aid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength += roles.length + temp; | |
| temp = 0; | |
| // groups | |
| for (i = 0; i < groups.length; i++) { | |
| nodeArray.push({ | |
| id: 'gid_' + groups[i].gid, | |
| label: groups[i].name | |
| }); | |
| // generate edges to groupsIds (from accountIds) | |
| for (j = tempEdgeArrayLength - 1; j < tempEdgeArrayLength + accounts.length; j++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === groups[i].aid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'gid_' + groups[i].gid; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'gid_' + groups[i].gid | |
| }); | |
| } | |
| } | |
| } | |
| // generate edges from groupsIds | |
| edgeArray.push({ | |
| from: 'gid_' + groups[i].gid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength += accounts.length + temp; | |
| temp = 0; | |
| // devices | |
| for (i = 0; i < devices.length; i++) { | |
| nodeArray.push({ | |
| id: 'did_' + devices[i].did, | |
| label: devices[i].name | |
| }) | |
| // generate edges to deviceIds (from groupIds) | |
| for (j = tempEdgeArrayLength - 1; j < tempEdgeArrayLength + groups.length; j++) { | |
| for (z = 0; z < devices[i].gids.length; z++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === devices[i].gids[z].gid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'did_' + devices[i].did; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'did_' + devices[i].did | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| temp = 0; | |
| nodes = new vis.DataSet(nodeArray); | |
| edges = new vis.DataSet(edgeArray); | |
| networkContainer = document.getElementById('rmm-network'); | |
| networkData = { | |
| nodes: nodes, | |
| edges: edges | |
| }; | |
| networkOptions = {}; | |
| network = new vis.Network( | |
| networkContainer, networkData, networkOptions | |
| ); | |
| })); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">html, body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #rmm-network { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function(visDemo) { | |
| visDemo(window.jQuery, window, document); | |
| }(function($, window, document) { | |
| // get nodes information first | |
| var roles, accounts, groups, devices; | |
| var nodeArray = []; | |
| var nodes; | |
| var edgeArray = []; | |
| var temp = 0; | |
| var tempEdgeArrayLength; | |
| var edges; | |
| var networkData, networkContainer, networkOptions, network; | |
| var i, j, z; | |
| roles = [ | |
| { | |
| 'rid': 1, | |
| 'name': 'super admin' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'name': 'admin' | |
| }, | |
| { | |
| 'rid': 3, | |
| 'name': 'device admin' | |
| } | |
| ]; | |
| accounts = [ | |
| { | |
| 'rid': 1, | |
| 'aid': 1, | |
| 'name': 'account01' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'aid': 7, | |
| 'name': 'account02' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'aid': 8, | |
| 'name': 'account03' | |
| }, | |
| { | |
| 'rid': 3, | |
| 'aid': 10, | |
| 'name': 'account04' | |
| } | |
| ]; | |
| groups = [ | |
| { | |
| 'gid': 61, | |
| 'aid': 7, | |
| 'name': 'group01' | |
| }, | |
| { | |
| 'gid': 62, | |
| 'aid': 8, | |
| 'name': 'group02' | |
| }, | |
| { | |
| 'gid': 60, | |
| 'aid': 10, | |
| 'name': 'group03' | |
| }, | |
| { | |
| 'gid': 56, | |
| 'aid': 8, | |
| 'name': 'group04' | |
| }, | |
| { | |
| 'gid': 1, | |
| 'aid': 1, | |
| 'name': 'group05' | |
| } | |
| ]; | |
| devices = [ | |
| { | |
| 'did': 1, | |
| 'name': 'device01', | |
| 'gids': [ | |
| { | |
| 'gid': 61, | |
| 'name': 'group01', | |
| 'aid': 7 | |
| }, | |
| { | |
| 'gid': 62, | |
| 'name': 'group02', | |
| 'aid': 8 | |
| }, | |
| { | |
| 'gid': 60, | |
| 'name': 'group03', | |
| 'aid': 10 | |
| }, | |
| { | |
| 'gid': 56, | |
| 'name': 'group04', | |
| 'aid': 8 | |
| } | |
| ] | |
| }, | |
| { | |
| 'did': 2, | |
| 'name': 'device02', | |
| 'gids': [ | |
| { | |
| 'gid': 61, | |
| 'name': 'group03', | |
| 'aid': 7 | |
| }, | |
| { | |
| 'gid': 1, | |
| 'name': 'group02', | |
| 'aid': 60 | |
| } | |
| ] | |
| } | |
| ]; | |
| // create an array with nodes and edges | |
| // roles | |
| for (i = 0; i < roles.length; i++) { | |
| nodeArray.push({ | |
| id: 'rid_' + roles[i].rid, | |
| label: roles[i].name | |
| }); | |
| // generate edges from roleIds | |
| edgeArray.push({ | |
| from: 'rid_' + roles[i].rid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength = 0; | |
| // accounts | |
| for (i = 0; i < accounts.length; i++) { | |
| nodeArray.push({ | |
| id: 'aid_' + accounts[i].aid, | |
| label: accounts[i].name | |
| }); | |
| // generate edges to accountIds (from roleIds) | |
| for (j = tempEdgeArrayLength; j < tempEdgeArrayLength + roles.length; j++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === accounts[i].rid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'aid_' + accounts[i].aid; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'aid_' + accounts[i].aid | |
| }); | |
| } | |
| } | |
| } | |
| // generate edges from accountIds | |
| edgeArray.push({ | |
| from: 'aid_' + accounts[i].aid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength += roles.length + temp; | |
| temp = 0; | |
| // groups | |
| for (i = 0; i < groups.length; i++) { | |
| nodeArray.push({ | |
| id: 'gid_' + groups[i].gid, | |
| label: groups[i].name | |
| }); | |
| // generate edges to groupsIds (from accountIds) | |
| for (j = tempEdgeArrayLength - 1; j < tempEdgeArrayLength + accounts.length; j++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === groups[i].aid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'gid_' + groups[i].gid; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'gid_' + groups[i].gid | |
| }); | |
| } | |
| } | |
| } | |
| // generate edges from groupsIds | |
| edgeArray.push({ | |
| from: 'gid_' + groups[i].gid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength += accounts.length + temp; | |
| temp = 0; | |
| // devices | |
| for (i = 0; i < devices.length; i++) { | |
| nodeArray.push({ | |
| id: 'did_' + devices[i].did, | |
| label: devices[i].name | |
| }) | |
| // generate edges to deviceIds (from groupIds) | |
| for (j = tempEdgeArrayLength - 1; j < tempEdgeArrayLength + groups.length; j++) { | |
| for (z = 0; z < devices[i].gids.length; z++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === devices[i].gids[z].gid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'did_' + devices[i].did; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'did_' + devices[i].did | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| temp = 0; | |
| nodes = new vis.DataSet(nodeArray); | |
| edges = new vis.DataSet(edgeArray); | |
| networkContainer = document.getElementById('rmm-network'); | |
| networkData = { | |
| nodes: nodes, | |
| edges: edges | |
| }; | |
| networkOptions = {}; | |
| network = new vis.Network( | |
| networkContainer, networkData, networkOptions | |
| ); | |
| }));</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #rmm-network { | |
| height: 100%; | |
| width: 100%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(visDemo) { | |
| visDemo(window.jQuery, window, document); | |
| }(function($, window, document) { | |
| // get nodes information first | |
| var roles, accounts, groups, devices; | |
| var nodeArray = []; | |
| var nodes; | |
| var edgeArray = []; | |
| var temp = 0; | |
| var tempEdgeArrayLength; | |
| var edges; | |
| var networkData, networkContainer, networkOptions, network; | |
| var i, j, z; | |
| roles = [ | |
| { | |
| 'rid': 1, | |
| 'name': 'super admin' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'name': 'admin' | |
| }, | |
| { | |
| 'rid': 3, | |
| 'name': 'device admin' | |
| } | |
| ]; | |
| accounts = [ | |
| { | |
| 'rid': 1, | |
| 'aid': 1, | |
| 'name': 'account01' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'aid': 7, | |
| 'name': 'account02' | |
| }, | |
| { | |
| 'rid': 2, | |
| 'aid': 8, | |
| 'name': 'account03' | |
| }, | |
| { | |
| 'rid': 3, | |
| 'aid': 10, | |
| 'name': 'account04' | |
| } | |
| ]; | |
| groups = [ | |
| { | |
| 'gid': 61, | |
| 'aid': 7, | |
| 'name': 'group01' | |
| }, | |
| { | |
| 'gid': 62, | |
| 'aid': 8, | |
| 'name': 'group02' | |
| }, | |
| { | |
| 'gid': 60, | |
| 'aid': 10, | |
| 'name': 'group03' | |
| }, | |
| { | |
| 'gid': 56, | |
| 'aid': 8, | |
| 'name': 'group04' | |
| }, | |
| { | |
| 'gid': 1, | |
| 'aid': 1, | |
| 'name': 'group05' | |
| } | |
| ]; | |
| devices = [ | |
| { | |
| 'did': 1, | |
| 'name': 'device01', | |
| 'gids': [ | |
| { | |
| 'gid': 61, | |
| 'name': 'group01', | |
| 'aid': 7 | |
| }, | |
| { | |
| 'gid': 62, | |
| 'name': 'group02', | |
| 'aid': 8 | |
| }, | |
| { | |
| 'gid': 60, | |
| 'name': 'group03', | |
| 'aid': 10 | |
| }, | |
| { | |
| 'gid': 56, | |
| 'name': 'group04', | |
| 'aid': 8 | |
| } | |
| ] | |
| }, | |
| { | |
| 'did': 2, | |
| 'name': 'device02', | |
| 'gids': [ | |
| { | |
| 'gid': 61, | |
| 'name': 'group03', | |
| 'aid': 7 | |
| }, | |
| { | |
| 'gid': 1, | |
| 'name': 'group02', | |
| 'aid': 60 | |
| } | |
| ] | |
| } | |
| ]; | |
| // create an array with nodes and edges | |
| // roles | |
| for (i = 0; i < roles.length; i++) { | |
| nodeArray.push({ | |
| id: 'rid_' + roles[i].rid, | |
| label: roles[i].name | |
| }); | |
| // generate edges from roleIds | |
| edgeArray.push({ | |
| from: 'rid_' + roles[i].rid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength = 0; | |
| // accounts | |
| for (i = 0; i < accounts.length; i++) { | |
| nodeArray.push({ | |
| id: 'aid_' + accounts[i].aid, | |
| label: accounts[i].name | |
| }); | |
| // generate edges to accountIds (from roleIds) | |
| for (j = tempEdgeArrayLength; j < tempEdgeArrayLength + roles.length; j++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === accounts[i].rid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'aid_' + accounts[i].aid; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'aid_' + accounts[i].aid | |
| }); | |
| } | |
| } | |
| } | |
| // generate edges from accountIds | |
| edgeArray.push({ | |
| from: 'aid_' + accounts[i].aid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength += roles.length + temp; | |
| temp = 0; | |
| // groups | |
| for (i = 0; i < groups.length; i++) { | |
| nodeArray.push({ | |
| id: 'gid_' + groups[i].gid, | |
| label: groups[i].name | |
| }); | |
| // generate edges to groupsIds (from accountIds) | |
| for (j = tempEdgeArrayLength - 1; j < tempEdgeArrayLength + accounts.length; j++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === groups[i].aid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'gid_' + groups[i].gid; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'gid_' + groups[i].gid | |
| }); | |
| } | |
| } | |
| } | |
| // generate edges from groupsIds | |
| edgeArray.push({ | |
| from: 'gid_' + groups[i].gid, | |
| to: '' | |
| }); | |
| } | |
| tempEdgeArrayLength += accounts.length + temp; | |
| temp = 0; | |
| // devices | |
| for (i = 0; i < devices.length; i++) { | |
| nodeArray.push({ | |
| id: 'did_' + devices[i].did, | |
| label: devices[i].name | |
| }) | |
| // generate edges to deviceIds (from groupIds) | |
| for (j = tempEdgeArrayLength - 1; j < tempEdgeArrayLength + groups.length; j++) { | |
| for (z = 0; z < devices[i].gids.length; z++) { | |
| if (Number(edgeArray[j].from.split('_')[1]) === devices[i].gids[z].gid) { | |
| if (!edgeArray[j].to) | |
| edgeArray[j].to = 'did_' + devices[i].did; | |
| else { | |
| temp += 1; | |
| edgeArray.push({ | |
| from: edgeArray[j].from, | |
| to: 'did_' + devices[i].did | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| temp = 0; | |
| nodes = new vis.DataSet(nodeArray); | |
| edges = new vis.DataSet(edgeArray); | |
| networkContainer = document.getElementById('rmm-network'); | |
| networkData = { | |
| nodes: nodes, | |
| edges: edges | |
| }; | |
| networkOptions = {}; | |
| network = new vis.Network( | |
| networkContainer, networkData, networkOptions | |
| ); | |
| })); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment