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

@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Background areas</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    .vis-item.vis-background.negative {
+      background-color: rgba(255, 0, 0, 0.2);
+    }
+  </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 the item type "background", see "Period A" and "Period B". The background areas can be styled
+    with css.</p>
+  <div id="visualization"></div>
+  <script>
+    var items = new vis.DataSet([{
+        id: 'A',
+        content: 'Period A',
+        start: '2014-01-16',
+        end: '2014-01-22',
+        type: 'background'
+      },
+      {
+        id: 'B',
+        content: 'Period B',
+        start: '2014-01-25',
+        end: '2014-01-30',
+        type: 'background',
+        className: 'negative'
+      },
+      {
+        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
+    };
+    var timeline = new vis.Timeline(container, items, options);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Background areas with groups</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>This example demonstrates the item type "background" when using groups.</p>
+  <ul>
+    <li>Background items having a group are displayed in that group</li>
+    <li>Background items without a group are spread over the whole timeline</li>
+    <li>Background items with a non-existing group are not displayed</li>
+  </ul>
+  <div id="visualization"></div>
+  <script>
+    var items = new vis.DataSet([{
+        id: 'A',
+        content: 'Period A',
+        start: '2014-01-16',
+        end: '2014-01-22',
+        type: 'background',
+        group: 1
+      },
+      {
+        id: 'B',
+        content: 'Period B',
+        start: '2014-01-23',
+        end: '2014-01-26',
+        type: 'background',
+        group: 2
+      },
+      {
+        id: 'C',
+        content: 'Period C',
+        start: '2014-01-27',
+        end: '2014-02-03',
+        type: 'background'
+      }, // no group
+      {
+        id: 'D',
+        content: 'Period D',
+        start: '2014-01-14',
+        end: '2014-01-20',
+        type: 'background',
+        group: 'non-existing'
+      },
+      {
+        id: 1,
+        content: 'item 1<br>start',
+        start: '2014-01-30',
+        group: 1
+      },
+      {
+        id: 2,
+        content: 'item 2',
+        start: '2014-01-18',
+        group: 1
+      },
+      {
+        id: 3,
+        content: 'item 3',
+        start: '2014-01-21',
+        group: 2
+      },
+      {
+        id: 4,
+        content: 'item 4',
+        start: '2014-01-17',
+        end: '2014-01-21',
+        group: 2
+      },
+      {
+        id: 5,
+        content: 'item 5',
+        start: '2014-01-28',
+        type: 'point',
+        group: 2
+      },
+      {
+        id: 6,
+        content: 'item 6',
+        start: '2014-01-25',
+        group: 2
+      }
+    ]);
+    var groups = new vis.DataSet([{
+        id: 1,
+        content: 'Group 1'
+      },
+      {
+        id: 2,
+        content: 'Group 2'
+      }
+    ]);
+    var container = document.getElementById('visualization');
+    var options = {
+      start: '2014-01-10',
+      end: '2014-02-10',
+      editable: true
+    };
+    var timeline = new vis.Timeline(container, items, groups, options);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,136 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | expected vs actual times items</title>
+    <script src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis.css" rel="stylesheet" type="text/css" />
+    <style>
+        body,
+        html {
+            font-family: arial, sans-serif;
+            font-size: 11pt;
+        }
+        .vis-item.expected {
+            background-color: transparent;
+            border-style: dashed !important;
+            z-index: 0;
+        }
+        .vis-item.vis-selected {
+            opacity: 0.6;
+        }
+        .vis-item.vis-background.marker {
+            border-left: 2px solid green;
+        }
+    </style>
+</head>
+<body>
+    <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'
+            }
+        });
+        var groups = new vis.DataSet([{
+            id: 'group1',
+            content: 'group1'
+        }]);
+        // add items to the DataSet
+        items.add([
+            // group 1
+            {
+                id: 'background1',
+                start: '2014-01-21',
+                end: '2014-01-22',
+                type: 'background',
+                group: 'group1'
+            },
+            // subgroup 1
+            {
+                id: 1,
+                content: 'item 1 (expected time)',
+                className: 'expected',
+                start: '2014-01-23T12:00:00',
+                end: '2014-01-26T12:00:00',
+                group: 'group1',
+                subgroup: 'sg_1'
+            },
+            {
+                id: 2,
+                content: 'item 1 (actual time)',
+                start: '2014-01-24T12:00:00',
+                end: '2014-01-27T12:00:00',
+                group: 'group1',
+                subgroup: 'sg_1'
+            },
+            // subgroup 2
+            {
+                id: 3,
+                content: 'item 2 (expected time)',
+                className: 'expected',
+                start: '2014-01-13T12:00:00',
+                end: '2014-01-16T12:00:00',
+                group: 'group1',
+                subgroup: 'sg_2'
+            },
+            {
+                id: 4,
+                content: 'item 2 (actual time)',
+                start: '2014-01-14T12:00:00',
+                end: '2014-01-17T12:00:00',
+                group: 'group1',
+                subgroup: 'sg_2'
+            },
+            // subgroup 3
+            {
+                id: 5,
+                content: 'item 3 (expected time)',
+                className: 'expected',
+                start: '2014-01-17T12:00:00',
+                end: '2014-01-19T12:00:00',
+                group: 'group1',
+                subgroup: 'sg_3'
+            },
+            {
+                id: 6,
+                content: 'item 3 (actual time)',
+                start: '2014-01-17T12:00:00',
+                end: '2014-01-18T12:00:00',
+                group: 'group1',
+                subgroup: 'sg_3'
+            }
+        ]);
+        var container = document.getElementById('visualization');
+        var options = {
+            start: '2014-01-10',
+            end: '2014-02-10',
+            editable: true,
+            stack: false,
+            stackSubgroups: false
+        };
+        var timeline = new vis.Timeline(container, items, groups, options);
+    </script>
+</body>
+</html>

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

@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | HTML data</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    span {
+      color: red;
+    }
+    span.large {
+      font-size: 200%;
+    }
+  </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>
+    Load HTML contents in the Timeline in various ways.
+  </p>
+  <div id="visualization"></div>
+  <script>
+    // create a couple of HTML items in various ways
+    var item1 = document.createElement('div');
+    item1.appendChild(document.createTextNode('item 1'));
+    var item2 = document.createElement('div');
+    item2.innerHTML = '<span>item 2</span>';
+    var item3 = document.createElement('div');
+    var span3 = document.createElement('span');
+    span3.className = 'large';
+    span3.appendChild(document.createTextNode('item 3'));
+    item3.appendChild(span3);
+    var item4 = 'item <span class="large">4</span>';
+    var item5 = document.createElement('div');
+    item5.appendChild(document.createTextNode('item 5'));
+    item5.appendChild(document.createElement('br'));
+    var img5 = document.createElement('img');
+    img5.src = '../resources/img/attachment-icon.png';
+    img5.style.width = '48px';
+    img5.style.height = '48px';
+    item5.appendChild(img5);
+    var item6 = 'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">';
+    var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';
+    // create data and a Timeline
+    var container = document.getElementById('visualization');
+    var items = new vis.DataSet([{
+        id: 1,
+        content: item1,
+        start: '2013-04-20'
+      },
+      {
+        id: 2,
+        content: item2,
+        start: '2013-04-14'
+      },
+      {
+        id: 3,
+        content: item3,
+        start: '2013-04-18'
+      },
+      {
+        id: 4,
+        content: item4,
+        start: '2013-04-16',
+        end: '2013-04-19'
+      },
+      {
+        id: 5,
+        content: item5,
+        start: '2013-04-25'
+      },
+      {
+        id: 6,
+        content: item6,
+        start: '2013-04-27'
+      },
+      {
+        id: 7,
+        content: item7,
+        start: '2013-04-21'
+      }
+    ]);
+    var options = {};
+    var timeline = new vis.Timeline(container, items, options);
+  </script>
+</body>
+</html>