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

@@ -0,0 +1,196 @@
+<html>
+<head>
+  <title>Timeline | A lot of grouped data</title>
+  <script src="../../../docs/js/jquery.min.js"></script>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    body {
+      color: #4D4D4D;
+      font: 10pt arial;
+    }
+  </style>
+</head>
+<body onresize="/*timeline.checkResize();*/">
+  <h1>Timeline vertical visibility</h1>
+  <button onclick="showVisibleItems()">Show current visible items</button>
+  <div>
+    <h2>visible items:</h2>
+    <h3 id="visibleItemsContainer"></h3>
+  </div>
+  <div id="mytimeline"></div>
+  <br>
+  <script>
+    function showVisibleItems() {
+      var a = timeline.getVisibleItems();
+      console.log(a);
+      document.getElementById("visibleItemsContainer").innerHTML = ""
+      document.getElementById("visibleItemsContainer").innerHTML += a;
+    };
+    // get selected item count from url parameter
+    var count = 1000;
+    // create groups
+    var groups = new vis.DataSet([{
+        id: 1,
+        content: 'Truck&nbsp;1'
+      },
+      {
+        id: 2,
+        content: 'Truck&nbsp;2'
+      },
+      {
+        id: 3,
+        content: 'Truck&nbsp;3'
+      },
+      {
+        id: 4,
+        content: 'Truck&nbsp;4'
+      },
+      {
+        id: 5,
+        content: 'Truck&nbsp;5'
+      },
+      {
+        id: 6,
+        content: 'Truck&nbsp;6'
+      },
+      {
+        id: 7,
+        content: 'Truck&nbsp;7'
+      },
+      {
+        id: 8,
+        content: 'Truck&nbsp;8'
+      },
+      {
+        id: 9,
+        content: 'Truck&nbsp;9'
+      },
+      {
+        id: 10,
+        content: 'Truck&nbsp;10'
+      },
+      {
+        id: 11,
+        content: 'Truck&nbsp;11'
+      },
+      {
+        id: 12,
+        content: 'Truck&nbsp;12'
+      },
+      {
+        id: 13,
+        content: 'Truck&nbsp;13'
+      },
+      {
+        id: 14,
+        content: 'Truck&nbsp;14'
+      },
+      {
+        id: 15,
+        content: 'Truck&nbsp;15'
+      },
+      {
+        id: 16,
+        content: 'Truck&nbsp;16'
+      },
+      {
+        id: 17,
+        content: 'Truck&nbsp;17'
+      },
+      {
+        id: 18,
+        content: 'Truck&nbsp;18'
+      },
+      {
+        id: 19,
+        content: 'Truck&nbsp;19'
+      },
+      {
+        id: 20,
+        content: 'Truck&nbsp;20'
+      },
+      {
+        id: 21,
+        content: 'Truck&nbsp;21'
+      },
+      {
+        id: 22,
+        content: 'Truck&nbsp;22'
+      },
+      {
+        id: 23,
+        content: 'Truck&nbsp;23'
+      },
+      {
+        id: 24,
+        content: 'Truck&nbsp;24'
+      },
+      {
+        id: 25,
+        content: 'Truck&nbsp;25'
+      },
+    ]);
+    // create items
+    var items = new vis.DataSet();
+    var types = ['box', 'point', 'range', 'background']
+    var order = 1;
+    var truck = 1;
+    for (var j = 0; j < 25; j++) {
+      var date = new Date();
+      for (var i = 0; i < count / 25; i++) {
+        date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
+        var start = new Date(date);
+        date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));
+        var end = new Date(date);
+        var type = types[Math.floor(4 * Math.random())]
+        items.add({
+          id: order,
+          group: truck,
+          start: start,
+          end: end,
+          type: type,
+          content: 'Order ' + order
+        });
+        order++;
+      }
+      truck++;
+    }
+    // specify options
+    var options = {
+      stack: true,
+      maxHeight: 400,
+      start: new Date(),
+      end: new Date(1000 * 60 * 60 * 24 + (new Date()).valueOf()),
+    };
+    // create a Timeline
+    var container = document.getElementById('mytimeline');
+    timeline = new vis.Timeline(container, null, options);
+    timeline.setGroups(groups);
+    timeline.setItems(items);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Animate window</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    input {
+      margin: 2px 0;
+    }
+  </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>This example demonstrates functions to programmatically adjust the visible window of the Timeline.</p>
+  <p>
+    <input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01">
+    <br>
+    <input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation">
+    <br>
+    <input type="button" id="moveTo" value="Move to 2014-02-01">
+    <br>
+    <input type="button" id="fit" value="Fit all items">
+    <br>
+    <input type="button" id="select" value="Select & focus items 5 and 6">
+    <br>
+    <input type="button" id="focus1" value="Focus item 2">
+    <br>
+    <input type="button" id="focus2" value="Focus items 5 and 6 (slow and linear animation)">
+    <br>
+    <input type="button" id="focus3" value="Focus current selection">
+    <br>
+  </p>
+  <div id="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 = {
+      start: '2014-01-10',
+      end: '2014-02-10',
+      editable: true,
+      showCurrentTime: true
+    };
+    var timeline = new vis.Timeline(container, items, options);
+    document.getElementById('window1').onclick = function () {
+      timeline.setWindow('2014-01-01', '2014-04-01');
+    };
+    document.getElementById('window2').onclick = function () {
+      timeline.setWindow('2014-01-01', '2014-04-01', {
+        animation: false
+      });
+    };
+    document.getElementById('fit').onclick = function () {
+      timeline.fit();
+    };
+    document.getElementById('select').onclick = function () {
+      timeline.setSelection([5, 6], {
+        focus: true
+      });
+    };
+    document.getElementById('focus1').onclick = function () {
+      timeline.focus(2);
+    };
+    document.getElementById('focus2').onclick = function () {
+      timeline.focus([5, 6], {
+        animation: {
+          duration: 3000,
+          easingFunction: 'linear'
+        }
+      }); // ms
+    };
+    document.getElementById('focus3').onclick = function () {
+      var selection = timeline.getSelection();
+      timeline.focus(selection);
+    };
+    document.getElementById('moveTo').onclick = function () {
+      timeline.moveTo('2014-02-01');
+    };
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Click to use</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    #main {
+      width: 728px;
+      margin: 0 auto;
+    }
+    .container {
+      margin: 10px;
+    }
+  </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>
+  <div id="main">
+    <h1>Timeline click to use</h1>
+    <p>
+      This example demonstrates how to use the
+      <code>clickToUse</code> option: before you can scroll and drag in the timeline, you first have to click in the timeline to
+      activate.
+    </p>
+  </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'
+      }
+    ]);
+    function createTimeline(main) {
+      var main = document.getElementById('main');
+      var container = document.createElement('div');
+      container.className = 'container';
+      main.appendChild(container);
+      var options = {
+        editable: true,
+        clickToUse: true
+      };
+      return new vis.Timeline(container, items, options);
+    }
+    var timelines = [];
+    for (var i = 0; i < 10; i++) {
+      timelines.push(createTimeline());
+    }
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,166 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Event listeners</title>
+  <style type="text/css">
+    body,
+    html {
+      font-family: sans-serif;
+    }
+  </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>
+    This example listens for events
+    <code>select</code>,
+    <code>click</code>,
+    <code>doubleClick</code>,
+    <code>rangechange</code>, and
+    <code>rangechanged</code> of the Timeline (other possible events:
+    <code>mouseDown</code>,
+    <code>mouseUp</code>,
+    <code>mouseOver</code>,
+    <code>mouseMove</code>), and listens for changes in the DataSet (
+    <code>add</code>,
+    <code>update</code>, or
+    <code>remove</code> items).
+  </p>
+  <div id="visualization"></div>
+  <p></p>
+  <div id="hoveredItem"></div>
+  <div id="log"></div>
+  <script type="text/javascript">
+    var items = new vis.DataSet([{
+        id: 1,
+        content: 'item 1',
+        start: '2013-04-20'
+      },
+      {
+        id: 2,
+        content: 'item 2',
+        start: '2013-04-14'
+      },
+      {
+        id: 3,
+        content: 'item 3',
+        start: '2013-04-18'
+      },
+      {
+        id: 4,
+        content: 'item 4',
+        start: '2013-04-16',
+        end: '2013-04-19'
+      },
+      {
+        id: 5,
+        content: 'item 5',
+        start: '2013-04-25'
+      },
+      {
+        id: 6,
+        content: 'item 6',
+        start: '2013-04-27'
+      }
+    ]);
+    var container = document.getElementById('visualization');
+    var options = {
+      editable: true,
+      onInitialDrawComplete: function () {
+        logEvent('Timeline initial draw completed', {});
+      },
+    };
+    var timeline = new vis.Timeline(container, items, options);
+    timeline.on('rangechange', function (properties) {
+      logEvent('rangechange', properties);
+    });
+    timeline.on('rangechanged', function (properties) {
+      logEvent('rangechanged', properties);
+    });
+    timeline.on('select', function (properties) {
+      logEvent('select', properties);
+    });
+    timeline.on('itemover', function (properties) {
+      logEvent('itemover', properties);
+      setHoveredItem(properties.item);
+    });
+    timeline.on('itemout', function (properties) {
+      logEvent('itemout', properties);
+      setHoveredItem('none');
+    });
+    timeline.on('click', function (properties) {
+      logEvent('click', properties);
+    });
+    timeline.on('doubleClick', function (properties) {
+      logEvent('doubleClick', properties);
+    });
+    timeline.on('contextmenu', function (properties) {
+      logEvent('contextmenu', properties);
+    });
+    timeline.on('mouseDown', function (properties) {
+      logEvent('mouseDown', properties);
+    });
+    timeline.on('mouseUp', function (properties) {
+      logEvent('mouseUp', properties);
+    });
+    // other possible events:
+    // timeline.on('mouseOver', function (properties) {
+    //   logEvent('mouseOver', properties);
+    // });
+    // timeline.on("mouseMove", function(properties) {
+    //   logEvent('mouseMove', properties);
+    // });
+    items.on('*', function (event, properties) {
+      logEvent(event, properties);
+    });
+    function stringifyObject(object) {
+      if (!object) return;
+      var replacer = function (key, value) {
+        if (value && value.tagName) {
+          return "DOM Element";
+        } else {
+          return value;
+        }
+      }
+      return JSON.stringify(object, replacer)
+    }
+    function logEvent(event, properties) {
+      var log = document.getElementById('log');
+      var msg = document.createElement('div');
+      msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
+        'properties=' + stringifyObject(properties);
+      log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
+    }
+    function setHoveredItem(id) {
+      var hoveredItem = document.getElementById('hoveredItem');
+      hoveredItem.innerHTML = 'hoveredItem=' + id;
+    }
+  </script>
+</body>
+</html>