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/timeline/interaction/limitMoveAndZoom.html ADDED

@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Limit move and zoom</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <p>
+    The visible range is limited in this demo:
+  </p>
+  <ul>
+    <li>minimum visible date is limited to 2012-01-01 using option
+      <code>min</code>
+    </li>
+    <li>maximum visible date is limited to 2013-01-01 (excluded) using option
+      <code>max</code>
+    </li>
+    <li>visible zoom interval is limited to a minimum of 24 hours using option
+      <code>zoomMin</code>
+    </li>
+    <li>visible zoom interval is limited to a maximum of about 3 months using option
+      <code>zoomMax</code>
+    </li>
+  </ul>
+  <div id="visualization"></div>
+  <script>
+    // create some items
+    // note that months are zero-based in the JavaScript Date object, so month 4 is May
+    var items = new vis.DataSet([{
+        'start': new Date(2012, 4, 25),
+        'content': 'First'
+      },
+      {
+        'start': new Date(2012, 4, 26),
+        'content': 'Last'
+      }
+    ]);
+    // create visualization
+    var container = document.getElementById('visualization');
+    var options = {
+      height: '300px',
+      min: new Date(2012, 0, 1), // lower limit of visible range
+      max: new Date(2013, 0, 1), // upper limit of visible range
+      zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
+      zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
+    };
+    // create the timeline
+    var timeline = new vis.Timeline(container);
+    timeline.setOptions(options);
+    timeline.setItems(items);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/interaction/navigationMenu.html ADDED

@@ -0,0 +1,121 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | navigation menu</title>
+    <style type="text/css">
+        body,
+        html,
+        input {
+            font-family: sans-serif;
+            font-size: 12pt;
+        }
+        #visualization {
+            position: relative;
+        }
+        .menu {
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin: 10px;
+            z-index: 9999;
+        }
+    </style>
+    <script src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <p>
+        Create your own navigation menu by creating an overlay with buttons to zoom and move.
+    </p>
+    <div id="visualization">
+        <div class="menu">
+            <input type="button" id="zoomIn" value="Zoom in" />
+            <input type="button" id="zoomOut" value="Zoom out" />
+            <input type="button" id="moveLeft" value="Move left" />
+            <input type="button" id="moveRight" value="Move right" />
+            <input type="button" id="toggleRollingMode" value="toggleRollingMode" />
+        </div>
+    </div>
+    <script type="text/javascript">
+        // create a timeline with some data
+        var container = document.getElementById('visualization');
+        var items = new vis.DataSet([{
+                id: 1,
+                content: 'item 1',
+                start: '2014-04-20'
+            },
+            {
+                id: 2,
+                content: 'item 2',
+                start: '2014-04-14'
+            },
+            {
+                id: 3,
+                content: 'item 3',
+                start: '2014-04-18'
+            },
+            {
+                id: 4,
+                content: 'item 4',
+                start: '2014-04-16',
+                end: '2014-04-19'
+            },
+            {
+                id: 5,
+                content: 'item 5',
+                start: '2014-04-25'
+            },
+            {
+                id: 6,
+                content: 'item 6',
+                start: '2014-04-27',
+                type: 'point'
+            }
+        ]);
+        var options = {};
+        var timeline = new vis.Timeline(container, items, options);
+        /**
+         * Move the timeline a given percentage to left or right
+         * @param {Number} percentage   For example 0.1 (left) or -0.1 (right)
+         */
+        function move(percentage) {
+            var range = timeline.getWindow();
+            var interval = range.end - range.start;
+            timeline.setWindow({
+                start: range.start.valueOf() - interval * percentage,
+                end: range.end.valueOf() - interval * percentage
+            });
+        }
+        // attach events to the navigation buttons
+        document.getElementById('zoomIn').onclick = function () {
+            timeline.zoomIn(0.2);
+        };
+        document.getElementById('zoomOut').onclick = function () {
+            timeline.zoomOut(0.2);
+        };
+        document.getElementById('moveLeft').onclick = function () {
+            move(0.2);
+        };
+        document.getElementById('moveRight').onclick = function () {
+            move(-0.2);
+        };
+        document.getElementById('toggleRollingMode').onclick = function () {
+            timeline.toggleRollingMode()
+        };
+    </script>
+</body>
+</html>

data/examples_for_vis/timeline/interaction/rollingMode.html ADDED

@@ -0,0 +1,50 @@
+<html>
+<head>
+  <title>Timeline | rolling mode Option</title>
+  <meta charset="utf-8">
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <h1>
+    <i id="icon">&#9974;</i>Timeline rolling mode option</h1>
+  <div id="mytimeline"></div>
+  <script>
+    var container = document.getElementById('mytimeline');
+    var items = new vis.DataSet();
+    for (var i = 10; i >= 0; i--) {
+      items.add({
+        id: i,
+        content: "item " + i,
+        start: new Date(new Date().getTime() + i * 100000)
+      });
+    }
+    // Configuration for the Timeline
+    // specify options
+    var options = {
+      start: new Date(),
+      end: new Date(new Date().getTime() + 1000000),
+      rollingMode: {
+        follow: true,
+        offset: 0.5
+      }
+    };
+    // create a Timeline
+    timeline = new vis.Timeline(container, items, null, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/interaction/setSelection.html ADDED

@@ -0,0 +1,223 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Select items</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <h1>Set selection</h1>
+  <p style="max-width: 600px;">
+    Enter one or multiple ids of items, then press select to select the items. This demo uses the function
+    <code>Timeline.setSelection(ids)</code>. Optionally, the window can be moved to the selected items.
+  </p>
+  <p>
+    Select item(s):
+    <input type="text" id="selection" value="5, 6">
+    <input type="button" id="select" value="Select">
+    <br>
+    <label>
+      <input type="checkbox" id="focus" checked> Focus on selection</label>
+  </p>
+  <div id="visualization"></div>
+  <br/>
+  <p>If the height of the timeline is limited some items may be vertically offscreen. This demo uses
+    <code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that focusing on an item will cause the timeline to
+    scroll vertically to the item that is being focused on. You can use the buttons below select a random item either above
+    or below the currently selected item.
+  </p>
+  <button id="prevFocus">Select Item Above</button>
+  <button id="nextFocus">Select Item Below</button>
+  <br/>
+  <p>If focusing on multiple items only the first item will be scrolled to. Try entering several ids and hitting
+    <em>select</em>.</p>
+  <p>
+    Select item(s):
+    <input type="text" id="selectionVertical" value="g1_5, g2_3">
+    <input type="button" id="selectVertical" value="Select">
+    <br>
+  </p>
+  <div id="vertical-visualization"></div>
+  <script>
+    // create a dataset with items
+    // we specify the type of the fields `start` and `end` here to be strings
+    // containing an ISO date. The fields will be outputted as ISO dates
+    // automatically getting data from the DataSet via items.get().
+    var items = new vis.DataSet({
+      type: {
+        start: 'ISODate',
+        end: 'ISODate'
+      }
+    });
+    // add items to the DataSet
+    items.add([{
+        id: 1,
+        content: 'item 1<br>start',
+        start: '2014-01-23'
+      },
+      {
+        id: 2,
+        content: 'item 2',
+        start: '2014-01-18'
+      },
+      {
+        id: 3,
+        content: 'item 3',
+        start: '2014-01-21'
+      },
+      {
+        id: 4,
+        content: 'item 4',
+        start: '2014-01-19',
+        end: '2014-01-24'
+      },
+      {
+        id: 5,
+        content: 'item 5',
+        start: '2014-01-28',
+        type: 'point'
+      },
+      {
+        id: 6,
+        content: 'item 6',
+        start: '2014-01-26'
+      }
+    ]);
+    var container = document.getElementById('visualization');
+    var options = {
+      editable: true
+    };
+    var timeline = new vis.Timeline(container, items, options);
+    var selection = document.getElementById('selection');
+    var select = document.getElementById('select');
+    var focus = document.getElementById('focus');
+    select.onclick = function () {
+      var ids = selection.value.split(',').map(function (value) {
+        return value.trim();
+      });
+      timeline.setSelection(ids, {
+        focus: focus.checked
+      });
+    };
+    function getRandomInt(min, max) {
+      min = Math.ceil(min);
+      max = Math.floor(max);
+      return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
+    };
+    // Vertical scroll example
+    var groups = [];
+    var items = [];
+    var groupItems = {};
+    for (var g = 0; g < 10; g++) {
+      groups.push({
+        id: g,
+        content: "Group " + g
+      });
+      groupItems[g] = [];
+      for (var i = 0; i < 30; i++) {
+        items.push({
+          id: "g" + g + "_" + i,
+          content: "g" + g + "_" + i,
+          group: g,
+          start: "2014-" + (g + 1) + "-" + getRandomInt(1, 20)
+        });
+        groupItems[g].push(items[items.length - 1]);
+      }
+    }
+    var container2 = document.getElementById('vertical-visualization');
+    var options = {
+      editable: false,
+      stack: true,
+      height: 300,
+      verticalScroll: true,
+      groupOrder: 'id'
+    };
+    var timeline2 = new vis.Timeline(container2, items, groups, options);
+    var groupIndex = 0;
+    var itemIndex = 0;
+    var moveToItem = function (direction) {
+      itemIndex += direction;
+      groupIndex += direction;
+      if (groupIndex < 0) {
+        groupIndex = groups.length - 1;
+      } else if (groupIndex >= groups.length) {
+        groupIndex = 0;
+      }
+      var items = groupItems[groupIndex];
+      if (itemIndex < 0) {
+        itemIndex = items.length - 1;
+      } else if (itemIndex >= items.length) {
+        itemIndex = 0;
+      }
+      var id = items[itemIndex].id;
+      timeline2.setSelection(id, {
+        focus: true
+      });
+    }
+    var nextFocus = document.getElementById('nextFocus');
+    var prevFocus = document.getElementById('prevFocus');
+    var selectionVertical = document.getElementById('selectionVertical');
+    var selectVertical = document.getElementById('selectVertical');
+    selectVertical.onclick = function () {
+      var ids = selectionVertical.value.split(',').map(function (value) {
+        return value.trim();
+      });
+      timeline2.setSelection(ids, {
+        focus: focus.checked
+      });
+    };
+    nextFocus.onclick = function () {
+      moveToItem(1);
+    };
+    prevFocus.onclick = function () {
+      moveToItem(-1);
+    };
+    // Set the initial focus
+    setTimeout(function () {
+      moveToItem(0);
+    }, 500);
+  </script>
+</body>
+</html>