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

@@ -0,0 +1,141 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Clustering</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: 600px;
+        border: 1px solid lightgray;
+    }
+    p {
+        max-width:600px;
+    }
+    h4 {
+        margin-bottom:3px;
+    }
+  </style>
+</head>
+<body>
+<p>
+Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it.
+</p>
+<input type="button" onclick="clusterByCid()" value="Cluster all nodes with CID = 1"> <br />
+<input type="button" onclick="clusterByColor()" value="Cluster by color"> <br />
+<input type="button" onclick="clusterByConnection()" value="Cluster 'node 1' by connections"> <br />
+<input type="button" onclick="clusterOutliers()" value="Cluster outliers"> <br />
+<input type="button" onclick="clusterByHubsize()" value="Cluster by hubsize"> <br />
+<div id="mynetwork"></div>
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = [
+    {id: 1,  label: 'Node 1', color:'orange'},
+    {id: 2,  label: 'Node 2', color:'DarkViolet', font:{color:'white'}},
+    {id: 3,  label: 'Node 3', color:'orange'},
+    {id: 4,  label: 'Node 4', color:'DarkViolet', font:{color:'white'}},
+    {id: 5,  label: 'Node 5', color:'orange'},
+    {id: 6,  label: 'cid = 1', cid:1, color:'orange'},
+    {id: 7,  label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}},
+    {id: 8,  label: 'cid = 1', cid:1, color:'lime'},
+    {id: 9,  label: 'cid = 1', cid:1, color:'orange'},
+    {id: 10, label: 'cid = 1', cid:1, color:'lime'}
+  ];
+  // create an array with edges
+  var edges = [
+    {from: 1, to: 2},
+    {from: 1, to: 3},
+    {from: 10, to: 4},
+    {from: 2, to: 5},
+    {from: 6, to: 2},
+    {from: 7, to: 5},
+    {from: 8, to: 6},
+    {from: 9, to: 7},
+    {from: 10, to: 9}
+  ];
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {layout:{randomSeed:8}};
+  var network = new vis.Network(container, data, options);
+  network.on("selectNode", function(params) {
+      if (params.nodes.length == 1) {
+          if (network.isCluster(params.nodes[0]) == true) {
+              network.openCluster(params.nodes[0]);
+          }
+      }
+  });
+  function clusterByCid() {
+      network.setData(data);
+      var clusterOptionsByData = {
+          joinCondition:function(childOptions) {
+              return childOptions.cid == 1;
+          },
+          clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
+      };
+      network.cluster(clusterOptionsByData);
+  }
+  function clusterByColor() {
+      network.setData(data);
+      var colors = ['orange','lime','DarkViolet'];
+      var clusterOptionsByData;
+      for (var i = 0; i < colors.length; i++) {
+          var color = colors[i];
+          clusterOptionsByData = {
+              joinCondition: function (childOptions) {
+                  return childOptions.color.background == color; // the color is fully defined in the node.
+              },
+              processProperties: function (clusterOptions, childNodes, childEdges) {
+                  var totalMass = 0;
+                  for (var i = 0; i < childNodes.length; i++) {
+                      totalMass += childNodes[i].mass;
+                  }
+                  clusterOptions.mass = totalMass;
+                  return clusterOptions;
+              },
+              clusterNodeProperties: {id: 'cluster:' + color, borderWidth: 3, shape: 'database', color:color, label:'color:' + color}
+          };
+          network.cluster(clusterOptionsByData);
+      }
+  }
+  function clusterByConnection() {
+      network.setData(data);
+      network.clusterByConnection(1)
+  }
+  function clusterOutliers() {
+      network.setData(data);
+      network.clusterOutliers();
+  }
+  function clusterByHubsize() {
+      network.setData(data);
+      var clusterOptionsByData = {
+          processProperties: function(clusterOptions, childNodes) {
+            clusterOptions.label = "[" + childNodes.length + "]";
+            return clusterOptions;
+          },
+          clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}}
+      };
+      network.clusterByHubsize(undefined, clusterOptionsByData);
+  }
+</script>
+</body>
+</html>

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

@@ -0,0 +1,160 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Clustering</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: 600px;
+            border: 1px solid lightgray;
+        }
+        p {
+            max-width: 600px;
+        }
+        h4 {
+            margin-bottom: 3px;
+        }
+    </style>
+</head>
+<body>
+<p>
+    You can zoom in and out to cluster/decluster.
+</p>
+Stabilize when clustering:<input type="checkbox" id="stabilizeCheckbox">
+<div id="mynetwork"></div>
+<script type="text/javascript">
+    var clusterIndex = 0;
+    var clusters = [];
+    var lastClusterZoomLevel = 0;
+    var clusterFactor = 0.9;
+    // 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'},
+        {id: 6, label: 'Node 6'},
+        {id: 7, label: 'Node 7'},
+        {id: 8, label: 'Node 8'},
+        {id: 9, label: 'Node 9'},
+        {id: 10, label: 'Node 10'}
+    ];
+    // create an array with edges
+    var edges = [
+        {from: 1, to: 2},
+        {from: 1, to: 3},
+        {from: 10, to: 4},
+        {from: 2, to: 5},
+        {from: 6, to: 2},
+        {from: 7, to: 5},
+        {from: 8, to: 6},
+        {from: 9, to: 7},
+        {from: 10, to: 9}
+    ];
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    var options = {layout: {randomSeed: 8}, physics:{adaptiveTimestep:false}};
+    var network = new vis.Network(container, data, options);
+    // set the first initial zoom level
+    network.once('initRedraw', function() {
+        if (lastClusterZoomLevel === 0) {
+            lastClusterZoomLevel = network.getScale();
+        }
+    });
+    // we use the zoom event for our clustering
+    network.on('zoom', function (params) {
+        if (params.direction == '-') {
+            if (params.scale < lastClusterZoomLevel*clusterFactor) {
+                makeClusters(params.scale);
+                lastClusterZoomLevel = params.scale;
+            }
+        }
+        else {
+            openClusters(params.scale);
+        }
+    });
+    // if we click on a node, we want to open it up!
+    network.on("selectNode", function (params) {
+        if (params.nodes.length == 1) {
+            if (network.isCluster(params.nodes[0]) == true) {
+                network.openCluster(params.nodes[0])
+            }
+        }
+    });
+    // make the clusters
+    function makeClusters(scale) {
+        var clusterOptionsByData = {
+            processProperties: function (clusterOptions, childNodes) {
+                clusterIndex = clusterIndex + 1;
+                var childrenCount = 0;
+                for (var i = 0; i < childNodes.length; i++) {
+                    childrenCount += childNodes[i].childrenCount || 1;
+                }
+                clusterOptions.childrenCount = childrenCount;
+                clusterOptions.label = "# " + childrenCount + "";
+                clusterOptions.font = {size: childrenCount*5+30}
+                clusterOptions.id = 'cluster:' + clusterIndex;
+                clusters.push({id:'cluster:' + clusterIndex, scale:scale});
+                return clusterOptions;
+            },
+            clusterNodeProperties: {borderWidth: 3, shape: 'database', font: {size: 30}}
+        }
+        network.clusterOutliers(clusterOptionsByData);
+        if (document.getElementById('stabilizeCheckbox').checked === true) {
+            // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
+            network.setOptions({physics:{stabilization:{fit: false}}});
+            network.stabilize();
+        }
+    }
+    // open them back up!
+    function openClusters(scale) {
+        var newClusters = [];
+        var declustered = false;
+        for (var i = 0; i < clusters.length; i++) {
+            if (clusters[i].scale < scale) {
+                network.openCluster(clusters[i].id);
+                lastClusterZoomLevel = scale;
+                declustered = true;
+            }
+            else {
+                newClusters.push(clusters[i])
+            }
+        }
+        clusters = newClusters;
+        if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
+            // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
+            network.setOptions({physics:{stabilization:{fit: false}}});
+            network.stabilize();
+        }
+    }
+</script>
+</body>
+</html>

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

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cluster Test</title>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        #network_graph {
+            width: 1000px;
+            height: 800px;
+            border: 1px solid lightgray;
+        }
+    </style>
+</head>
+<body onload="draw()">
+    <p>
+        Clusters can contain other clusters, but clusters of a single node is only possible by adding
+        <pre>allowSingleNodeCluster: true</pre> to clusterNodeProperties
+        <br/> In this example repeatedly clicking on the node with open the Clusters.
+    </p>
+    <div id="network_graph"></div>
+    <div id="info"></div>
+    <script type="text/javascript">
+        var network;
+        var node_color = ['orange', 'green', 'red', 'yellow', 'cyan'];
+        var node_shape = ['star', 'database', 'diamond', 'square', 'triangle'];
+        var nodes = new vis.DataSet([{
+                id: 'x',
+                label: 'Node X'
+            },
+            {
+                id: 'y',
+                label: 'Node Y'
+            },
+        ]);
+        var network_options = {};
+        var edges = new vis.DataSet([{
+            from: 'x',
+            to: 'y'
+        }]);
+        var cluster_id = 1;
+        function draw() {
+            network = new vis.Network(
+                document.getElementById('network_graph'), {
+                    nodes: nodes,
+                    edges: edges
+                },
+                network_options
+            );
+            network.on('click', function (params) {
+                if (params.nodes.length == 1) {
+                    if (network.isCluster(params.nodes[0]) == true) {
+                        network.openCluster(params.nodes[0]);
+                    }
+                }
+            });
+            cluster();
+            cluster();
+            cluster();
+        }
+        function cluster() {
+            var clusterOptions = {
+                joinCondition: function (childOptions) {
+                    console.log(childOptions);
+                    return true;
+                },
+                clusterNodeProperties: {
+                    id: cluster_id,
+                    label: "Cluster " + cluster_id,
+                    color: node_color[cluster_id - 1],
+                    shape: node_shape[cluster_id - 1],
+                    allowSingleNodeCluster: true
+                }
+            };
+            cluster_id++;
+            network.cluster(clusterOptions);
+        }
+    </script>
+</body>
+</html>

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

@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Playing with Physics</title>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      float:left;
+      width: 600px;
+      height: 600px;
+      margin:5px;
+      border: 1px solid lightgray;
+    }
+    #config {
+      float:left;
+      width: 400px;
+      height: 600px;
+    }
+    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-network.min.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+    function draw() {
+      nodes = [];
+      edges = [];
+      // randomly create some nodes and edges
+      var data = getScaleFreeNetwork(25);
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var options = {
+        physics: {
+          stabilization: false
+        },
+        configure: true
+      };
+      network = new vis.Network(container, data, options);
+      network.on("configChange", function() {
+        // this will immediately fix the height of the configuration
+        // wrapper to prevent unecessary scrolls in chrome.
+        // see https://github.com/almende/vis/issues/1568
+        var div = container.getElementsByClassName('vis-configuration-wrapper')[0];
+        div.style["height"] = div.getBoundingClientRect().height + "px";
+      });
+    }
+  </script>
+</head>
+<body onload="draw();">
+<p>
+  The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown.
+  You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use
+  this in the network.
+</p>
+<p><b>Note:</b> The configurator is recreated in the dom tree on input change. This may cause undesired scrolls in your application. In order to avoid this, explicitly set the height of the configurator (see this example's source code).
+</p>
+<br />
+<div id="mynetwork"></div>
+<p id="selection"></p>
+</body>
+</html>