implementation of visibleGroups with a proper example (#3674)

7 years ago · c7054d71aa
--- 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>
--- 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:
--- 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