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

@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Groups ordering</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    #visualization {
+      box-sizing: border-box;
+      width: 100%;
+      height: 300px;
+    }
+  </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 custom ordering of groups.
+  </p>
+  <div id="visualization"></div>
+  <script>
+    var groups = new vis.DataSet([{
+        id: 0,
+        content: 'First',
+        value: 1
+      },
+      {
+        id: 1,
+        content: 'Third',
+        value: 3
+      },
+      {
+        id: 2,
+        content: 'Second',
+        value: 2
+      }
+    ]);
+    // create a dataset with items
+    // note that months are zero-based in the JavaScript Date object, so month 3 is April
+    var items = new vis.DataSet([{
+        id: 0,
+        group: 0,
+        content: 'item 0',
+        start: new Date(2014, 3, 17),
+        end: new Date(2014, 3, 21)
+      },
+      {
+        id: 1,
+        group: 0,
+        content: 'item 1',
+        start: new Date(2014, 3, 19),
+        end: new Date(2014, 3, 20)
+      },
+      {
+        id: 2,
+        group: 1,
+        content: 'item 2',
+        start: new Date(2014, 3, 16),
+        end: new Date(2014, 3, 24)
+      },
+      {
+        id: 3,
+        group: 1,
+        content: 'item 3',
+        start: new Date(2014, 3, 23),
+        end: new Date(2014, 3, 24)
+      },
+      {
+        id: 4,
+        group: 1,
+        content: 'item 4',
+        start: new Date(2014, 3, 22),
+        end: new Date(2014, 3, 26)
+      },
+      {
+        id: 5,
+        group: 2,
+        content: 'item 5',
+        start: new Date(2014, 3, 24),
+        end: new Date(2014, 3, 27)
+      }
+    ]);
+    // create visualization
+    var container = document.getElementById('visualization');
+    var options = {
+      // option groupOrder can be a property name or a sort function
+      // the sort function must compare two groups and return a value
+      //     > 0 when a > b
+      //     < 0 when a < b
+      //       0 when a == b
+      groupOrder: function (a, b) {
+        return a.value - b.value;
+      },
+      editable: true
+    };
+    var timeline = new vis.Timeline(container);
+    timeline.setOptions(options);
+    timeline.setGroups(groups);
+    timeline.setItems(items);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/groups/nestedGroups.html ADDED

@@ -0,0 +1,113 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Nested Groups 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="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<p>
+  This example demonstrate using groups. Note that a DataSet is used for both
+  items and groups, allowing to dynamically add, update or remove both items
+  and groups via the DataSet.
+</p>
+<div id="visualization"></div>
+<script>
+  var now = moment().minutes(0).seconds(0).milliseconds(0);
+  var itemCount = 60;
+  // create a data set with groups
+  var groups = new vis.DataSet();
+  groups.add([
+    {
+      id: 1,
+      content: "Lee",
+      nestedGroups: [11,12,13]
+    },
+    {
+      id: 2,
+      content: "invisible group",
+      visible: false
+    },
+    {
+      id: 3,
+      content: "John",
+      nestedGroups: [14],
+      showNested: false
+    },
+    {
+      id: 4,
+      content: "Alson"
+    },
+  ]);
+  groups.add([
+    {
+      id: 11,
+      content: "cook",
+    },
+    {
+      id: 12,
+      content: "shop",
+    },
+    {
+      id: 13,
+      content: "clean house",
+    },
+    {
+      id: 14,
+      content: "wash dishes",
+    }
+  ]);
+  // create a dataset with items
+  var items = new vis.DataSet();
+  var groupIds = groups.getIds();
+    var types = [ 'box', 'point', 'range', 'background']
+  for (var i = 0; i < itemCount; i++) {
+    var start = now.clone().add(Math.random() * 200, 'hours');
+    var end = start.clone().add(2, 'hours');
+    var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
+    var type = types[Math.floor(4 * Math.random())]
+    items.add({
+      id: i,
+      group: randomGroupId,
+      content: 'item ' + i,
+      start: start,
+      end: end,
+      type: type
+    });
+  }
+  // create visualization
+  var container = document.getElementById('visualization');
+  var options = {
+    groupOrder: 'content'  // groupOrder can be a property name or a sorting function
+  };
+  var timeline = new vis.Timeline(container, items, groups, options);
+</script>
+</body>
+</html>

data/examples_for_vis/timeline/groups/subgroups.html ADDED

@@ -0,0 +1,326 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | Subgroups</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.vis-background.negative {
+            background-color: rgba(255, 0, 0, 0.2);
+        }
+        .vis-item.vis-background.positive {
+            background-color: rgba(105, 255, 98, 0.20);
+        }
+        .vis-item.vis-background.marker {
+            border-left: 2px solid green;
+        }
+        table {
+            border: 1px solid gray;
+        }
+        td {
+            text-align: center
+        }
+        code {
+            padding: 2px 4px;
+            font-size: 90%;
+            color: #c7254e;
+            background-color: #f9f2f4;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <p>This example shows the workings of the subgroups. Subgroups can be stacked on each other, and the items within each subgroup
+        can be stacked.</p>
+    <p>When stacking is on for the whole timeline, all items in the timeline will be stacked with respect to each other
+        <em>unless</em> the
+        <code>stackSubgroups</code> option is set to
+        <code>true</code>
+        and at least one subgroup has stacking enabled. In that case the subgroups will be stacked with respect to each other and
+        the elements in each subgroup will be stacked based on the individual stacking settings for each subgroup.
+    </p>
+    <table>
+        <thead>
+            <tr>
+                <th>Option</th>
+                <th>Status</th>
+                <th>Toggle</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Stacking</td>
+                <td id="stackingStatus">false</td>
+                <td>
+                    <button onclick="toggleStacking()">Toggle</button>
+                </td>
+            </tr>
+            <tr>
+                <td>stackSubgroups</td>
+                <td id="stackSubgroupsStatus">true</td>
+                <td>
+                    <button onclick="toggleStackSubgroups()">Toggle</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Stack Subgroup 0</td>
+                <td id="stacksg_1">false</td>
+                <td>
+                    <button onclick="toggleSubgroupStack('sg_1')">Toggle</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Stack Subgroup 1</td>
+                <td id="stacksg_2">false</td>
+                <td>
+                    <button onclick="toggleSubgroupStack('sg_2')">Toggle</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Stack Subgroup 2</td>
+                <td id="stacksg_3">false</td>
+                <td>
+                    <button onclick="toggleSubgroupStack('sg_3')">Toggle</button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <br/>
+    <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: 'bar',
+            content: 'bar',
+            subgroupOrder: function (a, b) {
+                return a.subgroupOrder - b.subgroupOrder;
+            },
+            subgroupStack: {
+                'sg_1': false,
+                'sg_2': false,
+                'sg_3': false
+            }
+        }, {
+            id: 'foo',
+            content: 'foo',
+            subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
+        }]);
+        // add items to the DataSet
+        items.add([{
+                id: 'A',
+                start: '2014-01-20',
+                end: '2014-01-22',
+                type: 'background',
+                group: 'foo'
+            },
+            {
+                id: 'B',
+                start: '2014-01-22',
+                end: '2014-01-23',
+                type: 'background',
+                group: 'foo',
+                className: 'negative'
+            },
+            {
+                id: 0,
+                content: 'no subgroup',
+                start: '2014-01-20',
+                end: '2014-01-22',
+                group: 'foo'
+            },
+            {
+                id: 'SG_1_1',
+                start: '2014-01-25',
+                end: '2014-01-27',
+                type: 'background',
+                group: 'bar',
+                subgroup: 'sg_1',
+                subgroupOrder: 0
+            },
+            {
+                id: 'SG_1_2',
+                start: '2014-01-26',
+                end: '2014-01-27',
+                type: 'background',
+                className: 'positive',
+                group: 'bar',
+                subgroup: 'sg_1',
+                subgroupOrder: 0
+            },
+            {
+                id: 1,
+                content: 'subgroup0_1',
+                start: '2014-01-23T12:00:00',
+                end: '2014-01-26T12:00:00',
+                group: 'bar',
+                subgroup: 'sg_1',
+                subgroupOrder: 0
+            },
+            {
+                id: 2,
+                content: 'subgroup0_2',
+                start: '2014-01-22T12:00:01',
+                end: '2014-01-25T12:00:00',
+                group: 'bar',
+                subgroup: 'sg_1',
+                subgroupOrder: 0
+            },
+            {
+                id: 'SG_2_1',
+                start: '2014-02-01',
+                end: '2014-02-02',
+                type: 'background',
+                group: 'bar',
+                subgroup: 'sg_2',
+                subgroupOrder: 1
+            },
+            {
+                id: 'SG_2_2',
+                start: '2014-02-2',
+                end: '2014-02-03',
+                type: 'background',
+                className: 'negative',
+                group: 'bar',
+                subgroup: 'sg_2',
+                subgroupOrder: 1
+            },
+            {
+                id: 3,
+                content: 'subgroup1_1',
+                start: '2014-01-27T02:00:00',
+                end: '2014-01-29',
+                group: 'bar',
+                subgroup: 'sg_2',
+                subgroupOrder: 1
+            },
+            {
+                id: 4,
+                content: 'subgroup1_2',
+                start: '2014-01-28',
+                end: '2014-02-02',
+                group: 'bar',
+                subgroup: 'sg_2',
+                subgroupOrder: 1
+            },
+            {
+                id: 'SG_3_1',
+                start: '2014-01-23',
+                end: '2014-01-25',
+                type: 'background',
+                group: 'bar',
+                subgroup: 'sg_3',
+                subgroupOrder: 2,
+                content: "a"
+            },
+            {
+                id: 'SG_3_2',
+                start: '2014-01-26',
+                end: '2014-01-28',
+                type: 'background',
+                className: 'positive',
+                group: 'bar',
+                subgroup: 'sg_3',
+                subgroupOrder: 2,
+                content: "b"
+            },
+            {
+                id: 5,
+                content: 'subgroup2_1',
+                start: '2014-01-23T12:00:00',
+                end: '2014-01-26T12:00:00',
+                group: 'bar',
+                subgroup: 'sg_3',
+                subgroupOrder: 2
+            },
+            {
+                id: 6,
+                content: 'subgroup2_2',
+                start: '2014-01-26T12:00:01',
+                end: '2014-01-29T12:00:00',
+                group: 'bar',
+                subgroup: 'sg_3',
+                subgroupOrder: 2
+            },
+            {
+                id: 'background',
+                start: '2014-01-29',
+                end: '2014-01-30',
+                type: 'background',
+                className: 'negative',
+                group: 'bar'
+            },
+            {
+                id: 'background_all',
+                start: '2014-01-31',
+                end: '2014-02-02',
+                type: 'background',
+                className: 'positive'
+            },
+        ]);
+        var container = document.getElementById('visualization');
+        var stackingStatus = document.getElementById('stackingStatus');
+        var stackSubgroupsStatus = document.getElementById('stackSubgroupsStatus');
+        var options = {
+            // orientation:'top'
+            start: '2014-01-10',
+            end: '2014-02-10',
+            editable: true,
+            stack: false,
+            stackSubgroups: true
+        };
+        var timeline = new vis.Timeline(container, items, groups, options);
+        function toggleStacking() {
+            options.stack = !options.stack;
+            stackingStatus.innerHTML = options.stack.toString();
+            timeline.setOptions(options);
+        }
+        function toggleStackSubgroups() {
+            options.stackSubgroups = !options.stackSubgroups;
+            stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
+            timeline.setOptions(options);
+        }
+        function toggleSubgroupStack(subgroup) {
+            groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[subgroup];
+            document.getElementById('stack' + subgroup).innerHTML = groups.get("bar").subgroupStack[subgroup].toString();
+            timeline.setGroups(groups);
+        }
+    </script>
+</body>
+</html>