RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/network/layout/hierarchicalLayout.html ADDED

@@ -0,0 +1,114 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Hierarchical layout</title>
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
+    <script type="text/javascript" src="../exampleUtil.js"></script>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css"/>
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+        function destroy() {
+            if (network !== null) {
+                network.destroy();
+                network = null;
+            }
+        }
+        function draw() {
+            destroy();
+            // randomly create some nodes and edges
+            var nodeCount = document.getElementById('nodeCount').value;
+            var data = getScaleFreeNetwork(nodeCount)
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var directionInput = document.getElementById("direction").value;
+            var options = {
+                layout: {
+                    hierarchical: {
+                        direction: directionInput
+                    }
+                }
+            };
+            network = new vis.Network(container, data, options);
+            // add event listeners
+            network.on('select', function (params) {
+                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+            });
+        }
+    </script>
+</head>
+<body onload="draw();">
+<h2>Hierarchical Layout - Scale-Free-Network</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
+    In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
+</div>
+<br/>
+<form onsubmit="draw(); return false;">
+    <label for="nodeCount">Number of nodes:</label>
+    <input id="nodeCount" type="text" value="25" style="width: 50px;">
+    <input type="submit" value="Go">
+</form>
+<p>
+    <input type="button" id="btn-UD" value="Up-Down">
+    <input type="button" id="btn-DU" value="Down-Up">
+    <input type="button" id="btn-LR" value="Left-Right">
+    <input type="button" id="btn-RL" value="Right-Left">
+    <input type="hidden" id='direction' value="UD">
+</p>
+<script language="javascript">
+    var directionInput = document.getElementById("direction");
+    var btnUD = document.getElementById("btn-UD");
+    btnUD.onclick = function () {
+        directionInput.value = "UD";
+        draw();
+    }
+    var btnDU = document.getElementById("btn-DU");
+    btnDU.onclick = function () {
+        directionInput.value = "DU";
+        draw();
+    };
+    var btnLR = document.getElementById("btn-LR");
+    btnLR.onclick = function () {
+        directionInput.value = "LR";
+        draw();
+    };
+    var btnRL = document.getElementById("btn-RL");
+    btnRL.onclick = function () {
+        directionInput.value = "RL";
+        draw();
+    };
+</script>
+<br>
+<div id="mynetwork"></div>
+<p id="selection"></p>
+</body>
+</html>

data/examples_for_vis/network/layout/hierarchicalLayoutBigUserDefined.html ADDED

@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Hierarchical layout</title>
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css"/>
+    <script type="text/javascript">
+        var network = null;
+        function p(data) {
+            var container = document.getElementById('mynetwork');
+            var options = {
+                layout: {
+                    hierarchical: {},
+                },
+            };
+            console.log("starting layout");
+            network = new vis.Network(container, data, options);
+            console.log("layout complete");
+        }
+    </script>
+</head>
+<body>
+<h2>Hierarchical Layout</h2>
+<div id="mynetwork"></div>
+<script type="text/javascript" src="./demo.jsonp"></script>
+</body>
+</html>

data/examples_for_vis/network/layout/hierarchicalLayoutMethods.html ADDED

@@ -0,0 +1,108 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Hierarchical layout difference</title>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      width: 800px;
+      height: 500px;
+      border: 1px solid lightgray;
+    }
+  </style>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript">
+    var network = null;
+    var layoutMethod = "directed";
+    function destroy() {
+      if (network !== null) {
+        network.destroy();
+        network = null;
+      }
+    }
+    function draw() {
+      destroy();
+      var nodes = [];
+      var edges = [];
+      // randomly create some nodes and edges
+      for (var i = 0; i < 19; i++) {
+        nodes.push({id: i, label: String(i)});
+      }
+      edges.push({from: 0, to: 1});
+      edges.push({from: 0, to: 6});
+      edges.push({from: 0, to: 13});
+      edges.push({from: 0, to: 11});
+      edges.push({from: 1, to: 2});
+      edges.push({from: 2, to: 3});
+      edges.push({from: 2, to: 4});
+      edges.push({from: 3, to: 5});
+      edges.push({from: 1, to: 10});
+      edges.push({from: 1, to: 7});
+      edges.push({from: 2, to: 8});
+      edges.push({from: 2, to: 9});
+      edges.push({from: 3, to: 14});
+      edges.push({from: 1, to: 12});
+      edges.push({from: 16, to: 15});
+      edges.push({from: 15, to: 17});
+      edges.push({from: 18, to: 17});
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        layout: {
+          hierarchical: {
+            sortMethod: layoutMethod
+          }
+        },
+        edges: {
+          smooth: true,
+          arrows: {to : true }
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+</head>
+<body onload="draw();">
+<h2>Hierarchical layout difference</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+  This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node.
+  The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges.
+  Try switching between the methods with the dropdown box below.
+</div>
+Layout method:
+<select id="layout">
+  <option value="hubsize">hubsize</option>
+  <option value="directed">directed</option>
+</select><br/>
+<br />
+<div id="mynetwork"></div>
+<p id="selection"></p>
+<script language="JavaScript">
+  var dropdown = document.getElementById("layout");
+  dropdown.onchange = function() {
+    layoutMethod = dropdown.value;
+    draw();
+  }
+</script>
+</body>
+</html>

data/examples_for_vis/network/layout/hierarchicalLayoutUserdefined.html ADDED

@@ -0,0 +1,152 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Hierarchical Layout, userDefined</title>
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css"/>
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+        var directionInput = document.getElementById("direction");
+        function destroy() {
+            if (network !== null) {
+                network.destroy();
+                network = null;
+            }
+        }
+        function draw() {
+            destroy();
+            nodes = [];
+            edges = [];
+            var connectionCount = [];
+            // randomly create some nodes and edges
+            for (var i = 0; i < 15; i++) {
+                nodes.push({id: i, label: String(i)});
+            }
+            edges.push({from: 0, to: 1});
+            edges.push({from: 0, to: 6});
+            edges.push({from: 0, to: 13});
+            edges.push({from: 0, to: 11});
+            edges.push({from: 1, to: 2});
+            edges.push({from: 2, to: 3});
+            edges.push({from: 2, to: 4});
+            edges.push({from: 3, to: 5});
+            edges.push({from: 1, to: 10});
+            edges.push({from: 1, to: 7});
+            edges.push({from: 2, to: 8});
+            edges.push({from: 2, to: 9});
+            edges.push({from: 3, to: 14});
+            edges.push({from: 1, to: 12});
+            nodes[0]["level"] = 0;
+            nodes[1]["level"] = 1;
+            nodes[2]["level"] = 3;
+            nodes[3]["level"] = 4;
+            nodes[4]["level"] = 4;
+            nodes[5]["level"] = 5;
+            nodes[6]["level"] = 1;
+            nodes[7]["level"] = 2;
+            nodes[8]["level"] = 4;
+            nodes[9]["level"] = 4;
+            nodes[10]["level"] = 2;
+            nodes[11]["level"] = 1;
+            nodes[12]["level"] = 2;
+            nodes[13]["level"] = 1;
+            nodes[14]["level"] = 5;
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                edges: {
+                    smooth: {
+                        type: 'cubicBezier',
+                        forceDirection: (directionInput.value == "UD" || directionInput.value == "DU") ? 'vertical' : 'horizontal',
+                        roundness: 0.4
+                    }
+                },
+                layout: {
+                    hierarchical: {
+                        direction: directionInput.value
+                    }
+                },
+                physics:false
+            };
+            network = new vis.Network(container, data, options);
+            // add event listeners
+            network.on('select', function (params) {
+                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+            });
+        }
+    </script>
+</head>
+<body onload="draw();">
+<h2>Hierarchical Layout - User-defined</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for
+    all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
+    If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
+</div>
+<p>
+    <input type="button" id="btn-UD" value="Up-Down">
+    <input type="button" id="btn-DU" value="Down-Up">
+    <input type="button" id="btn-LR" value="Left-Right">
+    <input type="button" id="btn-RL" value="Right-Left">
+    <input type="hidden" id='direction' value="UD">
+</p>
+<div id="mynetwork"></div>
+<p id="selection"></p>
+<script language="JavaScript">
+    var directionInput = document.getElementById("direction");
+    var btnUD = document.getElementById("btn-UD");
+    btnUD.onclick = function () {
+        directionInput.value = "UD";
+        draw();
+    };
+    var btnDU = document.getElementById("btn-DU");
+    btnDU.onclick = function () {
+        directionInput.value = "DU";
+        draw();
+    };
+    var btnLR = document.getElementById("btn-LR");
+    btnLR.onclick = function () {
+        directionInput.value = "LR";
+        draw();
+    };
+    var btnRL = document.getElementById("btn-RL");
+    btnRL.onclick = function () {
+        directionInput.value = "RL";
+        draw();
+    };
+</script>
+</body>
+</html>

data/examples_for_vis/network/layout/hierarchicalLayoutWithoutPhysics.html ADDED

@@ -0,0 +1,111 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Hierarchical Layout without Physics</title>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <script type="text/javascript" src="../datasources/largeHierarchicalDataset.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        #network {
+            width: 1000px;
+            height: 400px;
+            border: 1px solid lightgray;
+        }
+        td {
+            vertical-align: top;
+        }
+        table {
+            width: 800px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Hierarchical Layout without Physics</h1>
+    The hierarchical layout can now be controlled without the use of physics. This is much quicker. The options for this are:
+    <br />
+    <br />
+    <table>
+        <tr>
+            <td width="150px">
+                <code>levelSeparation</code>
+            </td>
+            <td width="400px">Distance between levels.</td>
+        </tr>
+        <tr>
+            <td>
+                <code>nodeSpacing</code>
+            </td>
+            <td>Minimum distance between nodes on the free axis.</td>
+        </tr>
+        <tr>
+            <td>
+                <code>treeSpacing</code>
+            </td>
+            <td>Distance between different trees (independent networks).</td>
+        </tr>
+        <tr>
+            <td>
+                <code>blockShifting</code>
+            </td>
+            <td>Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for
+                whitespace and will shift it's branch along with it for as far as it can, respecting the nodeSpacing on any
+                level.</td>
+        </tr>
+        <tr>
+            <td>
+                <code>edgeMinimization</code>
+            </td>
+            <td>Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will
+                usually speed up the layout process. Each node will try to move along its free axis to reduce the total length
+                of it's edges.</td>
+        </tr>
+        <tr>
+            <td>
+                <code>parentCentralization</code>
+            </td>
+            <td>When true, the parents nodes will be centered again after the the layout algorithm has been finished.</td>
+        </tr>
+    </table>
+    <br />
+    <br /> Play with the settings below the network and see how the layout changes!
+    <div id="network"></div>
+    <script>
+        var data = {
+            nodes: nodes,
+            edges: edges
+        };
+        // create a network
+        var container = document.getElementById('network');
+        var options = {
+            layout: {
+                hierarchical: {
+                    direction: "UD",
+                    sortMethod: "directed"
+                }
+            },
+            interaction: {
+                dragNodes: false
+            },
+            physics: {
+                enabled: false
+            },
+            configure: {
+                filter: function (option, path) {
+                    if (path.indexOf('hierarchical') !== -1) {
+                        return true;
+                    }
+                    return false;
+                },
+                showButton: false
+            }
+        };
+        var network = new vis.Network(container, data, options);
+    </script>
+</body>
+</html>