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

@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Item ordering</title>
+  <style type="text/css">
+    body,
+    html {
+      font-family: sans-serif;
+    }
+    p {
+      max-width: 800px;
+    }
+  </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>Item ordering</h1>
+  <p>
+    By default, the items displayed on the Timeline are unordered. They are stacked in the order that they where loaded. This
+    means that way items are stacked can change while moving and zooming the Timeline.
+  </p>
+  <p>
+    To display and stack the items in a controlled order, you can provide a custom sorting function via the configuration option
+    <code>order</code>.
+  </p>
+  <p>
+    WARNING: Custom ordering is only suitable for small amounts of items (up to a few hundred), as the Timeline has to render
+    <i>all</i> items once on load to determine their width and height.
+  </p>
+  <p>
+    <label for="ordering">
+      <input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label>
+  </p>
+  <div id="visualization"></div>
+  <script type="text/javascript">
+    // DOM element where the Timeline will be attached
+    var container = document.getElementById('visualization');
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet();
+    var date = vis.moment('2015-03-02');
+    for (var i = 0; i < 100; i++) {
+      date.add(Math.round(Math.random() * 2), 'hour');
+      items.add({
+        id: i,
+        content: 'Item ' + i,
+        start: date.clone(),
+        end: date.clone().add(4, 'hour')
+      });
+    }
+    function customOrder(a, b) {
+      // order by id
+      return a.id - b.id;
+    }
+    // Configuration for the Timeline
+    var options = {
+      order: customOrder,
+      editable: true,
+      margin: {
+        item: 0
+      }
+    };
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, options);
+    var ordering = document.getElementById('ordering');
+    ordering.onchange = function () {
+      timeline.setOptions({
+        order: ordering.checked ? customOrder : null
+      });
+    };
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/items/pointItems.html ADDED

@@ -0,0 +1,124 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Point items</title>
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+  </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>World War II timeline</h1>
+  <p>Source:
+    <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a>
+  </p>
+  <div id="mytimeline" style="background-color: #FAFAFA;"></div>
+  <div id="visualization"></div>
+  <script type="text/javascript">
+    var container = document.getElementById('visualization');
+    // note that months are zero-based in the JavaScript Date object
+    var items = new vis.DataSet([{
+        start: new Date(1939, 8, 1),
+        content: 'German Invasion of Poland'
+      },
+      {
+        start: new Date(1940, 4, 10),
+        content: 'Battle of France and the Low Countries'
+      },
+      {
+        start: new Date(1940, 7, 13),
+        content: 'Battle of Britain - RAF vs. Luftwaffe'
+      },
+      {
+        start: new Date(1941, 1, 14),
+        content: 'German Afrika Korps arrives in North Africa'
+      },
+      {
+        start: new Date(1941, 5, 22),
+        content: 'Third Reich Invades the USSR'
+      },
+      {
+        start: new Date(1941, 11, 7),
+        content: 'Japanese Attack Pearl Harbor'
+      },
+      {
+        start: new Date(1942, 5, 4),
+        content: 'Battle of Midway in the Pacific'
+      },
+      {
+        start: new Date(1942, 10, 8),
+        content: 'Americans open Second Front in North Africa'
+      },
+      {
+        start: new Date(1942, 10, 19),
+        content: 'Battle of Stalingrad in Russia'
+      },
+      {
+        start: new Date(1943, 6, 5),
+        content: 'Battle of Kursk - Last German Offensive on Eastern Front'
+      },
+      {
+        start: new Date(1943, 6, 10),
+        content: 'Anglo-American Landings in Sicily'
+      },
+      {
+        start: new Date(1944, 2, 8),
+        content: 'Japanese Attack British India'
+      },
+      {
+        start: new Date(1944, 5, 6),
+        content: 'D-Day - Allied Invasion of Normandy'
+      },
+      {
+        start: new Date(1944, 5, 22),
+        content: 'Destruction of Army Group Center in Byelorussia'
+      },
+      {
+        start: new Date(1944, 7, 1),
+        content: 'The Warsaw Uprising in Occupied Poland'
+      },
+      {
+        start: new Date(1944, 9, 20),
+        content: 'American Liberation of the Philippines'
+      },
+      {
+        start: new Date(1944, 11, 16),
+        content: 'Battle of the Bulge in the Ardennes'
+      },
+      {
+        start: new Date(1944, 1, 19),
+        content: 'American Landings on Iwo Jima'
+      },
+      {
+        start: new Date(1945, 3, 1),
+        content: 'US Invasion of Okinawa'
+      },
+      {
+        start: new Date(1945, 3, 16),
+        content: 'Battle of Berlin - End of the Third Reich'
+      }
+    ]);
+    var options = {
+      // Set global item type. Type can also be specified for items individually
+      // Available types: 'box' (default), 'point', 'range'
+      type: 'point',
+      showMajorLabels: false
+    };
+    var timeline = new vis.Timeline(container, items, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/items/rangeOverflowItem.html ADDED

@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Range overflow</title>
+  <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,
+    html {
+      font-family: sans-serif;
+    }
+    .vis-item .vis-item-overflow {
+      overflow: visible;
+    }
+  </style>
+</head>
+<body>
+  <p>
+    In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow
+    the box. This can be achieved by changing the overflow property of the contents to visible with css:
+  </p>
+  <pre>
+.vis-item .vis-item-overflow {
+  overflow: visible;
+}
+</pre>
+  <div id="visualization"></div>
+  <script type="text/javascript">
+    // DOM element where the Timeline will be attached
+    var container = document.getElementById('visualization');
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet([{
+        id: 1,
+        content: 'item 1 with overflowing text content',
+        start: '2014-04-20',
+        end: '2014-04-26'
+      },
+      {
+        id: 2,
+        content: 'item 2 with overflowing text content',
+        start: '2014-05-14',
+        end: '2014-05-18'
+      },
+      {
+        id: 3,
+        content: 'item 3 with overflowing text content',
+        start: '2014-06-18',
+        end: '2014-06-22'
+      },
+      {
+        id: 4,
+        content: 'item 4 with overflowing text content',
+        start: '2014-06-16',
+        end: '2014-06-17'
+      },
+      {
+        id: 5,
+        content: 'item 5 with overflowing text content',
+        start: '2014-06-25',
+        end: '2014-06-27'
+      },
+      {
+        id: 6,
+        content: 'item 6 with overflowing text content',
+        start: '2014-09-27',
+        end: '2014-09-28'
+      }
+    ]);
+    // Configuration for the Timeline
+    var options = {};
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/items/tooltip.html ADDED

@@ -0,0 +1,120 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Tooltips</title>
+  <style type="text/css">
+    body,
+    html {
+      font-family: sans-serif;
+      max-width: 800px;
+    }
+  </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>Tooltips</h1>
+  <p>
+    Setting the tooltip in various ways.
+  </p>
+  <div id="tooltips"></div>
+  <p>
+    The example below has the tooltip follow the mouse.
+  </p>
+  <div id="tooltips-follow"></div>
+  <p>
+    The example below has the tooltip overflow set to 'cap'. Compare this to the one above, to see how they differ. For the best
+    results, move the cursor to the top right, where the tool-tip is going to overflow out of the timeline.
+  </p>
+  <div id="tooltips-cap"></div>
+  <p>
+    Disable item tooltips.
+  </p>
+  <div id="tooltips-hide"></div>
+  <script type="text/javascript">
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet([{
+        id: 1,
+        content: 'Item 1',
+        start: '2016-01-01',
+        end: '2016-01-02',
+        title: 'Normal text'
+      },
+      {
+        id: 2,
+        content: 'Item 2',
+        start: '2016-01-02',
+        title: '<b>Bold</b>'
+      },
+      {
+        id: 3,
+        content: 'Item 3',
+        start: '2016-01-03',
+        type: 'point',
+        title: '<span style="color: red">Red</span> text'
+      },
+      {
+        id: 4,
+        content: '<h1>HTML</h1> Item',
+        start: '2016-01-03',
+        end: '2016-01-04',
+        title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'
+      }
+    ]);
+    // Options
+    var options = {};
+    // Timeline object
+    var timelineTooltips = new vis.Timeline(document.getElementById('tooltips'),
+      items, options
+    );
+    // Follow options
+    var follow_options = {
+      tooltip: {
+        followMouse: true
+      }
+    };
+    var timelineFollow = new vis.Timeline(document.getElementById('tooltips-follow'),
+      items, follow_options);
+    // Cap options
+    var cap_options = {
+      tooltip: {
+        followMouse: true,
+        overflowMethod: 'cap'
+      }
+    }
+    var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'),
+      items, cap_options);
+    // Hide options
+    var hide_options = {
+      showTooltips: false
+    }
+    var timelineHide = new vis.Timeline(document.getElementById('tooltips-hide'),
+      items, hide_options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/items/visibleFrameTemplateContent.html ADDED

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Dynamic Content</title>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    .progress-wrapper {
+      background: white;
+      width: 100%;
+      height: 18px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+    .progress {
+      height: 100%;
+      width: 60%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      background: #63ed63;
+    }
+    .progress-label {
+      position: absolute;
+      z-index: 1;
+    }
+  </style>
+</head>
+<body>
+<div id="myTimeline"></div>
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('myTimeline');
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
+    {id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
+    {id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
+    {id: 4, content: 'item 4 with visibleFrameTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFrameTemplate: '<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>'
+    }
+  ]);
+  // Configuration for the Timeline
+  var options = {
+    visibleFrameTemplate: function(item) {
+      if (item.visibleFrameTemplate) {
+        return item.visibleFrameTemplate;
+      }
+      var percentage = item.value * 100 + '%';
+      return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
+    }
+  };
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>