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

@@ -0,0 +1,147 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Custom function label format example</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    #visualization {
+      box-sizing: border-box;
+      width: 100%;
+      height: 300px;
+    }
+  </style>
+  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.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" />
+</head>
+<body>
+  <p>
+    This example demonstrate using custom function label formats.
+  </p>
+  <div id="visualization"></div>
+  <script>
+    var now = moment().minutes(0).seconds(0).milliseconds(0);
+    var groupCount = 3;
+    var itemCount = 20;
+    // create a data set with groups
+    var names = ['John', 'Alston', 'Lee', 'Grant'];
+    var groups = new vis.DataSet();
+    for (var g = 0; g < groupCount; g++) {
+      groups.add({
+        id: g,
+        content: names[g]
+      });
+    }
+    // create a dataset with items
+    var items = new vis.DataSet();
+    for (var i = 0; i < itemCount; i++) {
+      var start = now.clone().add(Math.random() * 200, 'hours');
+      var group = Math.floor(Math.random() * groupCount);
+      items.add({
+        id: i,
+        group: group,
+        content: 'item ' + i +
+          ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
+        start: start,
+        type: 'box'
+      });
+    }
+    // create visualization
+    var container = document.getElementById('visualization');
+    var options = {
+      format: {
+        minorLabels: function (date, scale, step) {
+          var now = new Date();
+          var ago = now - date;
+          var divider;
+          switch (scale) {
+            case 'millisecond':
+              divider = 1;
+              break;
+            case 'second':
+              divider = 1000;
+              break;
+            case 'minute':
+              divider = 1000 * 60;
+              break;
+            case 'hour':
+              divider = 1000 * 60 * 60;
+              break;
+            case 'day':
+              divider = 1000 * 60 * 60 * 24;
+              break;
+            case 'weekday':
+              divider = 1000 * 60 * 60 * 24 * 7;
+              break;
+            case 'month':
+              divider = 1000 * 60 * 60 * 24 * 30;
+              break;
+            case 'year':
+              divider = 1000 * 60 * 60 * 24 * 365;
+              break;
+            default:
+              return new Date(date);
+          }
+          return (Math.round(ago * step / divider)) + " " + scale + "s ago"
+        },
+        majorLabels: function (date, scale, step) {
+          var now = new Date();
+          var ago = now - date;
+          var divider;
+          switch (scale) {
+            case 'millisecond':
+              divider = 1;
+              break;
+            case 'second':
+              divider = 1000;
+              break;
+            case 'minute':
+              divider = 1000 * 60;
+              break;
+            case 'hour':
+              divider = 1000 * 60 * 60;
+              break;
+            case 'day':
+              divider = 1000 * 60 * 60 * 24;
+              break;
+            case 'weekday':
+              divider = 1000 * 60 * 60 * 24 * 7;
+              break;
+            case 'month':
+              divider = 1000 * 60 * 60 * 24 * 30;
+              break;
+            case 'year':
+              divider = 1000 * 60 * 60 * 24 * 365;
+              break;
+            default:
+              return new Date(date);
+          }
+          return (Math.round(ago * step / divider)) + " " + scale + "s ago"
+        }
+      }
+    };
+    var timeline = new vis.Timeline(container);
+    timeline.setOptions(options);
+    timeline.setGroups(groups);
+    timeline.setItems(items);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/other/groupsPerformance.html ADDED

@@ -0,0 +1,124 @@
+<html>
+<head>
+  <title>Timeline | A lot of grouped data</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 {
+      color: #4D4D4D;
+      font: 10pt arial;
+    }
+  </style>
+</head>
+<body onresize="/*timeline.checkResize();*/">
+  <h1>Timeline grouping performance</h1>
+  <p>
+    Choose a number of items:
+    <a href="?count=100">100</a>,
+    <a href="?count=1000">1000</a>,
+    <a href="?count=10000">10000</a>,
+    <a href="?count=100000">100000</a>
+    <p>
+      <p>
+        Current number of items:
+        <span id='count'>100</span>
+      </p>
+      <div id="mytimeline"></div>
+      <script>
+        /**
+         * Get URL parameter
+         * http://www.netlobo.com/url_query_string_javascript.html
+         */
+        function gup(name) {
+          name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+          var regexS = "[\\?&]" + name + "=([^&#]*)";
+          var regex = new RegExp(regexS);
+          var results = regex.exec(window.location.href);
+          if (results == null)
+            return "";
+          else
+            return results[1];
+        }
+        // get selected item count from url parameter
+        var count = (Number(gup('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'
+          }
+        ]);
+        // create items
+        var items = new vis.DataSet();
+        var order = 1;
+        var truck = 1;
+        for (var j = 0; j < 4; j++) {
+          var date = new Date();
+          for (var i = 0; i < count / 4; 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);
+            items.add({
+              id: order,
+              group: truck,
+              start: start,
+              end: end,
+              content: 'Order ' + order
+            });
+            order++;
+          }
+          truck++;
+        }
+        // specify options
+        var options = {
+          stack: false,
+          start: new Date(),
+          end: new Date(1000 * 60 * 60 * 24 + (new Date()).valueOf()),
+          editable: true,
+          margin: {
+            item: 10, // minimal margin between items
+            axis: 5 // minimal margin between items and the axis
+          },
+          orientation: 'top'
+        };
+        // create a Timeline
+        var container = document.getElementById('mytimeline');
+        timeline = new vis.Timeline(container, null, options);
+        timeline.setGroups(groups);
+        timeline.setItems(items);
+        document.getElementById('count').innerHTML = count;
+      </script>
+</body>
+</html>

data/examples_for_vis/timeline/other/hidingPeriods.html ADDED

@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | Hiding periods</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>
+        It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights.
+    </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([{
+                id: 1,
+                content: 'item 1',
+                start: '2014-04-19'
+            },
+            {
+                id: 2,
+                content: 'item 2',
+                start: '2014-04-21'
+            },
+            {
+                id: 3,
+                content: 'item 3',
+                start: '2014-04-18'
+            },
+            {
+                id: 4,
+                content: 'item 4',
+                start: '2014-04-16',
+                end: '2014-04-24'
+            },
+            {
+                id: 5,
+                content: 'item 5',
+                start: '2014-04-26 12:00:00'
+            },
+            {
+                id: 6,
+                content: 'item 6',
+                start: '2014-04-27',
+                type: 'point'
+            }
+        ]);
+        // Configuration for the Timeline
+        var options = {
+            hiddenDates: [{
+                    start: '2014-03-21 00:00:00',
+                    end: '2014-03-28 00:00:00'
+                },
+                {
+                    start: '2013-10-26 00:00:00',
+                    end: '2013-10-28 00:00:00',
+                    repeat: 'weekly'
+                }, // daily weekly monthly yearly
+                {
+                    start: '2013-03-29 20:00:00',
+                    end: '2013-03-30 09:00:00',
+                    repeat: 'daily'
+                } // daily weekly monthly yearly
+            ],
+            start: '2014-04-17',
+            end: '2014-05-01',
+            height: '200px',
+            editable: true
+        };
+        // Create a Timeline
+        var timeline = new vis.Timeline(container, items, options);
+        timeline.addCustomTime("2014-04-18 13:00:00");
+    </script>
+</body>
+</html>

data/examples_for_vis/timeline/other/horizontalScroll.html ADDED

@@ -0,0 +1,77 @@
+<html>
+<head>
+  <title>Timeline | Horizontal Scroll Option</title>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <h1>Timeline horizontal scroll option</h1>
+  <div id="mytimeline"></div>
+  <script>
+    // create groups
+    var numberOfGroups = 25;
+    var groups = new vis.DataSet()
+    for (var i = 0; i < numberOfGroups; i++) {
+      groups.add({
+        id: i,
+        content: 'Truck&nbsp;' + i
+      })
+    }
+    // create items
+    var numberOfItems = 1000;
+    var items = new vis.DataSet();
+    var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
+    for (var truck = 0; truck < numberOfGroups; truck++) {
+      var date = new Date();
+      for (var order = 0; order < itemsPerGroup; order++) {
+        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);
+        items.add({
+          id: order + itemsPerGroup * truck,
+          group: truck,
+          start: start,
+          end: end,
+          content: 'Order ' + order
+        });
+      }
+    }
+    // specify options
+    var options = {
+      stack: true,
+      horizontalScroll: true,
+      zoomKey: 'ctrlKey',
+      maxHeight: 400,
+      start: new Date(),
+      end: new Date(1000 * 60 * 60 * 24 + (new Date()).valueOf()),
+      editable: true,
+      margin: {
+        item: 10, // minimal margin between items
+        axis: 5 // minimal margin between items and the axis
+      },
+      orientation: 'top'
+    };
+    // create a Timeline
+    var container = document.getElementById('mytimeline');
+    timeline = new vis.Timeline(container, items, groups, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/other/localization.html ADDED

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Localization</title>
+  <style type="text/css">
+    body,
+    html,
+    select {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.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" />
+</head>
+<body>
+  <p>
+    To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option
+    <code>{locale: STRING}</code>.
+  </p>
+  <p>
+    <label for="locale">Select a locale:</label>
+    <select id="locale">
+      <option value="en" selected>en</option>
+      <option value="it">it</option>
+      <option value="nl">nl</option>
+      <option value="de">de</option>
+    </select>
+  </p>
+  <div id="visualization"></div>
+  <script type="text/javascript">
+    var DAY = 24 * 60 * 60 * 1000;
+    // 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',
+        start: new Date(new Date().valueOf() - DAY)
+      },
+      {
+        id: 2,
+        content: 'item 2',
+        start: new Date(new Date().valueOf() + 2 * DAY)
+      }
+    ]);
+    // Configuration for the Timeline
+    var options = {
+      showCurrentTime: true
+    };
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, options);
+    timeline.addCustomTime(new Date());
+    timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
+    // update the locale when changing the select box value
+    var select = document.getElementById('locale');
+    select.onchange = function () {
+      timeline.setOptions({
+        locale: this.value
+      });
+    };
+    select.onchange();
+  </script>
+</body>
+</html>