implementation of visibleGroups with a proper example (almende#3674)

visjs · Jun 9, 2019 · 86a261d · 86a261d
1 parent f2caa52
commit 86a261d
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 0 deletions.
diff --git a/examples/timeline/groups/visibleGroups.html b/examples/timeline/groups/visibleGroups.html
@@ -0,0 +1,113 @@
+<html>
+
+<head>
+    <title>Timeline | A lot of grouped data</title>
+
+    <script src="../../../docs/js/jquery.min.js"></script>
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+
+    <style type="text/css">
+        body {
+            color: #4D4D4D;
+            font: 10pt arial;
+        }
+    </style>
+
+</head>
+
+<body>
+    <h1>Timeline visible Groups</h1>
+
+    <button onclick="showVisibleGroups()">Show current visible items</button>
+    <div>
+        <h2>visible groups:</h2>
+        <h3 id="visibleGroupsContainer"></h3>
+        <h2>(Scroll with the mouse and see the items being focus automatically on the timeline)</h2>
+    </div>
+
+    <div id="mytimeline"></div>
+    <br>
+
+    <script>
+        function showVisibleGroups() {
+            var a = timeline.getVisibleGroups();
+            document.getElementById("visibleGroupsContainer").innerHTML = ""
+            document.getElementById("visibleGroupsContainer").innerHTML += a;
+        };
+
+        var now = Date.now()
+
+        var options = {
+            stack: true,
+            maxHeight: 640,
+            horizontalScroll: false,
+            verticalScroll: true,
+            zoomKey: "ctrlKey",
+            start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
+            end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
+            orientation: {
+                axis: "both",
+                item: "top"
+            },
+        };
+        var groups = new vis.DataSet();
+        var items = new vis.DataSet();
+
+        var count = 300;
+
+        for (var i = 0; i < count; i++) {
+            var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7))
+            var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5))
+
+            groups.add({
+                id: i,
+                content: 'Task ' + i,
+                order: i
+            })
+
+            items.add({
+                id: i,
+                group: i,
+                start: start,
+                end: end,
+                type: 'range',
+                content: 'Item ' + i
+            });
+        }
+
+        // create a Timeline
+        var container = document.getElementById('mytimeline');
+        timeline = new vis.Timeline(container, null, options);
+        timeline.setGroups(groups);
+        timeline.setItems(items);
+
+        function debounce(func, wait = 100) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => {
+                    func.apply(this, args);
+                }, wait);
+            };
+        }
+
+        let groupFocus = (e) => {
+            let vGroups = timeline.getVisibleGroups()
+            let vItems = vGroups.reduce((res, groupId) => {
+                let group = timeline.itemSet.groups[groupId]
+                if (group.items) {
+                    res = res.concat(Object.keys(group.items))
+                }
+                return res
+            }, [])
+            timeline.focus(vItems)
+        }
+        this.timeline.on("scroll", debounce(groupFocus, 200))
+        // Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't
+        // this.timeline.on("scrollSide", debounce(groupFocus, 200))
+    </script>
+
+</body>
+
+</html>
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
@@ -664,6 +664,14 @@ Core.prototype.getVisibleItems = function() {
   return this.itemSet && this.itemSet.getVisibleItems() || [];
 };
 
+/**
+ * Get the id's of the currently visible groups.
+ * @returns {Array} The ids of the visible groups
+ */
+Core.prototype.getVisibleGroups = function() {
+  return this.itemSet && this.itemSet.getVisibleGroups() || [];
+};
+
 /**
  * Set Core window such that it fits all items
  * @param {Object} [options]  Available options:

diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
@@ -612,6 +612,25 @@ ItemSet.prototype.getVisibleItems = function() {
   return ids;
 };
 
+/**
+ * Get the id's of the currently visible groups.
+ * @returns {Array} The ids of the visible groups
+ */
+ItemSet.prototype.getVisibleGroups = function() {
+  var ids = [];
+
+  for (var groupId in this.groups) {
+    if (this.groups.hasOwnProperty(groupId)) {
+      var group = this.groups[groupId];
+      if (group.isVisible) {
+        ids.push(groupId)
+      }
+    }
+  }
+
+  return ids;
+};
+
 /**
  * Deselect a selected item
  * @param {string | number} id