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/other/navigation.html ADDED

@@ -0,0 +1,135 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Navigation</title>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    table.legend_table {
+      border-collapse: collapse;
+    }
+    table.legend_table td,
+    table.legend_table th {
+      border: 1px solid #d3d3d3;
+      padding: 10px;
+    }
+    table.legend_table td {
+      text-align: center;
+      width:110px;
+    }
+  </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();
+      // create an array with nodes
+      var nodes = [
+        {id: 1, label: 'Node 1'},
+        {id: 2, label: 'Node 2'},
+        {id: 3, label: 'Node 3'},
+        {id: 4, label: 'Node 4'},
+        {id: 5, label: 'Node 5'}
+      ];
+      // create an array with edges
+      var edges = new vis.DataSet([
+        {from: 1, to: 3},
+        {from: 1, to: 2},
+        {from: 2, to: 4},
+        {from: 2, to: 5}
+      ]);
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        interaction: {
+          navigationButtons: true,
+          keyboard: true
+        }
+      };
+      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>Navigation controls and keyboad navigation</h2>
+<div style="width: 800px; font-size:14px; text-align: justify;">
+  This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
+  <table class="legend_table">
+    <tr>
+      <th>Icons: </th>
+      <td><img src="../../../dist/img/network/upArrow.png" />     </td>
+      <td><img src="../../../dist/img/network/downArrow.png" />   </td>
+      <td><img src="../../../dist/img/network/leftArrow.png" />   </td>
+      <td><img src="../../../dist/img/network/rightArrow.png" />  </td>
+      <td><img src="../../../dist/img/network/plus.png" />        </td>
+      <td><img src="../../../dist/img/network/minus.png" />       </td>
+      <td><img src="../../../dist/img/network/zoomExtends.png" /> </td>
+    </tr>
+    <tr>
+      <th>Keyboard shortcuts:</th>
+      <td><div>Up arrow</div></td>
+      <td><div>Down arrow</div></td>
+      <td><div>Left arrow</div></td>
+      <td><div>Right arrow</div></td>
+      <td><div>=<br />[<br />Page up</div></td>
+      <td><div>-<br />]<br />Page down</div></td>
+      <td><div>None</div></td>
+    </tr>
+    <tr>
+      <th>Description:</th>
+      <td>Move up</td>
+      <td>Move down</td>
+      <td>Move left</td>
+      <td>Move right</td>
+      <td>Zoom in</td>
+      <td>Zoom out</td>
+      <td>Zoom extent</td>
+    </tr>
+  </table>
+  <br />
+  Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
+  Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, <b>vis.css</b> or <b>vis-network.min.css</b> must be included.</u>
+    The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
+</div>
+<div id="mynetwork"></div>
+<p id="selection"></p>
+</body>
+</html>

data/examples_for_vis/network/other/onLoadAnimation.html ADDED

@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Network | On Load Animation</title>
+  <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" />
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+<body>
+  <h2>Vis.js network onLoad animation</h2>
+  <p>easeIn functions accelerate from zero velocity.</p>
+  <p>easeOut functions decelerate to zero velocity.</p>
+  <p>easeInOut functions accelerate from zero till halfway then after the halfway point they decrease until zero.</p>
+  <div>
+  Onload Animation Easing Function -
+    <select id="easingFunction">
+	  <option value="linear">linear</option>
+	  <option value="easeInQuad">easeInQuad</option>
+	  <option value="easeOutQuad">easeOutQuad</option>
+	  <option value="easeInOutQuad">easeInOutQuad</option>
+	  <option value="easeInCubic">easeInCubic</option>
+	  <option value="easeOutCubic">easeOutCubic</option>
+	  <option value="easeInOutCubic">easeInOutCubic</option>
+	  <option value="easeInQuart">easeInQuart</option>
+	  <option value="easeOutQuart">easeOutQuart</option>
+	  <option value="easeInOutQuart">easeInOutQuart</option>
+	  <option value="easeInQuint">easeInQuint</option>
+	  <option value="easeOutQuint">easeOutQuint</option>
+	  <option value="easeInOutQuint">easeInOutQuint</option>
+    </select>
+    <button onClick="createNetwork(document.getElementById('easingFunction').value);">Demo Easing Function</button>
+  </div>
+  <p>For more information on easing functions check out <a href="http://easings.net/">easings.net</a></p>
+  <div id="mynetwork"></div>
+  <script type="text/javascript">
+  document.getElementById("easingFunction").selectedIndex = 0;
+  function createNetwork(easingType) {
+    var nodes = new vis.DataSet([
+      {id: 1, label: 'Node 1'},
+      {id: 2, label: 'Node 2'},
+      {id: 3, label: 'Node 3'},
+      {id: 4, label: 'Node 4'},
+      {id: 5, label: 'Node 5'}
+    ]);
+    var edges = new vis.DataSet([
+      {from: 1, to: 3},
+      {from: 1, to: 2},
+      {from: 2, to: 4},
+      {from: 2, to: 5}
+    ]);
+    var container = document.getElementById('mynetwork');
+    var data = {
+      nodes: nodes,
+      edges: edges
+    };
+    var options = {};
+    var network = new vis.Network(container, data, options);
+    network.once("beforeDrawing", function() {
+      network.focus(2, {
+        scale: 12
+      });
+    });
+    network.once("afterDrawing", function() {
+      network.fit({
+        animation: {
+          duration: 3000,
+          easingFunction: easingType
+        }
+      });
+    });
+  }
+  createNetwork("linear");
+  </script>
+</body>
+</html>

data/examples_for_vis/network/other/performance.html ADDED

@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Random nodes</title>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    #message {
+      color:darkred;
+      max-width:600px;
+      font-size:16px;
+      cursor:pointer;
+      text-decoration: underline;
+    }
+  </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;
+    var setSmooth = false;
+    function destroy() {
+      if (network !== null) {
+        network.destroy();
+        network = null;
+      }
+    }
+    function draw() {
+      destroy();
+      var nodeCount = document.getElementById('nodeCount').value;
+      if (nodeCount > 100) {
+        document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
+      }
+      else if (setSmooth === false) {
+        document.getElementById("message").innerHTML = '';
+      }
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = getScaleFreeNetwork(nodeCount);
+      var options = {
+        physics: { stabilization: false }
+      };
+      network = new vis.Network(container, data, options);
+    }
+    function disableSmoothCurves() {
+      setSmooth = true;
+      network.setOptions({edges:{smooth:{type:'continuous'}}});
+      document.getElementById("message").innerHTML = '<a onclick="enableSmoothCurves()">Click here to reenable the dynamic smooth curves.</a>';
+    }
+    function enableSmoothCurves() {
+      setSmooth = false;
+      document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
+      network.setOptions({edges:{smooth:{type:'dynamic'}}});
+    }
+  </script>
+</head>
+<body onload="draw();">
+<p>
+  Generate a random network with nodes and edges.
+</p>
+<p>
+  <form onsubmit="draw(); return false;">
+  <label for="nodeCount">Number of nodes:</label>
+  <input id="nodeCount" type="text" value="25" style="width: 50px;">
+  <input type="button" value="Go" onclick="draw()">
+</form>
+</p>
+<span id="message"></span>
+<div id="mynetwork"></div>
+</body>
+</html>

data/examples_for_vis/network/other/saveAndLoad.html ADDED

@@ -0,0 +1,202 @@
+<!doctype html>
+<html>
+<head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <title>Network | Saving and loading networks</title>
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+        #network {
+            float: left;
+            width: 600px;
+            height: 600px;
+            margin: 5px;
+            border: 1px solid lightgray;
+        }
+        #config {
+            float: left;
+            width: 400px;
+            height: 600px;
+        }
+        #input_output {
+            height: 10%;
+            width: 15%;
+        }
+        p {
+            font-size: 16px;
+            max-width: 700px;
+        }
+    </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.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <p>
+        In this example, the network data can be exported to JSON and imported back into the network. Try this out by exporting the
+        network to JSON, clearing the network and then importing it again. The nodes will all appear in the same position
+        as they were before the network was destroyed.
+    </p>
+    <div id="network"></div>
+    <div>
+        <textarea id=input_output></textarea>
+        <input type="button" id="import_button" onclick="importNetwork()" value="import"></input>
+        <input type="button" id="export_button" onclick="exportNetwork()" value="export"></input>
+        <input type="button" id="destroy_button" onclick="destroyNetwork()" value="destroy"></input>
+    </div>
+    <script type="text/javascript">
+        var network;
+        var container;
+        var exportArea;
+        var importButton;
+        var exportButton;
+        function init() {
+            container = document.getElementById('network');
+            exportArea = document.getElementById('input_output');
+            importButton = document.getElementById('import_button');
+            exportButton = document.getElementById('export_button');
+            draw();
+        }
+        function addConnections(elem, index) {
+            // need to replace this with a tree of the network, then get child direct children of the element
+            elem.connections = network.getConnectedNodes(index);
+        }
+        function destroyNetwork() {
+            network.destroy();
+        }
+        function clearOutputArea() {
+            exportArea.value = "";
+        }
+        function draw() {
+            // create a network of nodes
+            var data = getScaleFreeNetwork(5);
+            network = new vis.Network(container, data, {
+                manipulation: {
+                    enabled: true
+                }
+            });
+            clearOutputArea();
+        }
+        function exportNetwork() {
+            clearOutputArea();
+            var nodes = objectToArray(network.getPositions());
+            nodes.forEach(addConnections);
+            // pretty print node data
+            var exportValue = JSON.stringify(nodes, undefined, 2);
+            exportArea.value = exportValue;
+            resizeExportArea();
+        }
+        function importNetwork() {
+            var inputValue = exportArea.value;
+            var inputData = JSON.parse(inputValue);
+            var data = {
+                nodes: getNodeData(inputData),
+                edges: getEdgeData(inputData)
+            }
+            network = new vis.Network(container, data, {});
+            resizeExportArea();
+        }
+        function getNodeData(data) {
+            var networkNodes = [];
+            data.forEach(function (elem, index, array) {
+                networkNodes.push({
+                    id: elem.id,
+                    label: elem.id,
+                    x: elem.x,
+                    y: elem.y
+                });
+            });
+            return new vis.DataSet(networkNodes);
+        }
+        function getNodeById(data, id) {
+            for (var n = 0; n < data.length; n++) {
+                if (data[n].id == id) { // double equals since id can be numeric or string
+                    return data[n];
+                }
+            };
+            throw 'Can not find id \'' + id + '\' in data';
+        }
+        function getEdgeData(data) {
+            var networkEdges = [];
+            data.forEach(function (node) {
+                // add the connection
+                node.connections.forEach(function (connId, cIndex, conns) {
+                    networkEdges.push({
+                        from: node.id,
+                        to: connId
+                    });
+                    let cNode = getNodeById(data, connId);
+                    var elementConnections = cNode.connections;
+                    // remove the connection from the other node to prevent duplicate connections
+                    var duplicateIndex = elementConnections.findIndex(function (connection) {
+                        return connection == node.id; // double equals since id can be numeric or string
+                    });
+                    if (duplicateIndex != -1) {
+                        elementConnections.splice(duplicateIndex, 1);
+                    };
+                });
+            });
+            return new vis.DataSet(networkEdges);
+        }
+        function objectToArray(obj) {
+            return Object.keys(obj).map(function (key) {
+                obj[key].id = key;
+                return obj[key];
+            });
+        }
+        function resizeExportArea() {
+            exportArea.style.height = (1 + exportArea.scrollHeight) + "px";
+        }
+        init();
+    </script>
+</body>
+</html>