fixed subgroups and added sorting

9 years ago · 8527e25c6d
--- a/HISTORY.md
+++ b/HISTORY.md
@ -8,6 +8,7 @@ http://visjs.org

 - Fixed uneven stepsized with hidden dates.
 - Fixed multiple bugs with regards to hidden dates.
 - Fixed subgroups and added subgroup sorting. Subgroup labels will be in future releases.

 ## 2014-10-21, version 3.6.0

--- a/dist/vis.js
+++ b/dist/vis.js
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -347,6 +347,14 @@ var groups = [
      The title can only contain plain text.
    </td>
  </tr>
    <tr>
        <td>subgroupOrder</td>
        <td>String | Function</td>
        <td>none</td>
        <td>Order the subgroups by a field name or custom sort function.
            By default, groups are ordered by first-come, first-show.
        </td>
    </tr>
 </table>


--- a/examples/timeline/30_subgroups.html
+++ b/examples/timeline/30_subgroups.html
@ -25,7 +25,7 @@
 </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>
 <p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>

 <div id="visualization"></div>

@ -38,23 +38,25 @@
        type: { start: 'ISODate', end: 'ISODate' }
    });
    var groups = new vis.DataSet([{
        id: 'bar', content:'bar'
        id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}
    },{
        id: 'foo', content:'foo'
        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', content:'1',start: '2014-01-20', end: '2014-01-22', type: 'background', group:'foo'},
        {id: 'B', content:'1',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
        {id: 0, content: 'item 4', start: '2014-01-20', end: '2014-01-22',group:'foo'},
        {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: 'ab', content:'1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'banana'},
        {id: 'bb', content:'1',start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'banana'},
        {id: 1, content: '0', start: '2014-01-25 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'banana'},
        {id: 'aab', content:'1',start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'putty'},
        {id: 'bab', content:'1',start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'putty'},
        {id: 'bdab', content:'1',start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
        {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'putty'},
        {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', start: '2014-01-23 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
        {id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
        {id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
        {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},

        {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');
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@ -11,7 +11,8 @@ var RangeItem = require('./item/RangeItem');
 function Group (groupId, data, itemSet) {
  this.groupId = groupId;
  this.subgroups = {};
  this.visibleSubgroups = 0;
  this.subgroupIndex = 0;
  this.subgroupOrderer = data && data.subgroupOrder;
  this.itemSet = itemSet;

  this.dom = {};
@ -296,13 +297,14 @@ Group.prototype.add = function(item) {
  item.setParent(this);

  // add to
  var index = 0;
  if (item.data.subgroup !== undefined) {
    if (this.subgroups[item.data.subgroup] === undefined) {
      this.subgroups[item.data.subgroup] = {height:0, visible: false, index:index};
      index++;
      this.subgroups[item.data.subgroup] = {height:0, visible: false, index:this.subgroupIndex, items: []};
      this.subgroupIndex++;
    }
    this.subgroups[item.data.subgroup].items.push(item);
  }
  this.orderSubgroups();

  if (this.visibleItems.indexOf(item) == -1) {
    var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
@ -310,6 +312,32 @@ Group.prototype.add = function(item) {
  }
 };

 Group.prototype.orderSubgroups = function() {
  if (this.subgroupOrderer !== undefined) {
    var sortArray = [];
    if (typeof this.subgroupOrderer == 'string') {
      for (var subgroup in this.subgroups) {
        sortArray.push({subgroup: subgroup, sortField: this.subgroups[subgroup].items[0].data[this.subgroupOrderer]})
      }
      sortArray.sort(function (a, b) {
        return a.sortField - b.sortField;
      })
    }
    else if (typeof this.subgroupOrderer == 'function') {
      for (var subgroup in this.subgroups) {
        sortArray.push(this.subgroups[subgroup].items[0].data);
      }
      sortArray.sort(this.subgroupOrderer);
    }

    if (sortArray.length > 0) {
      for (var i = 0; i < sortArray.length; i++) {
        this.subgroups[sortArray[i].subgroup].index = i;
      }
    }
  }
 }

 Group.prototype.resetSubgroups = function() {
  for (var subgroup in this.subgroups) {
    if (this.subgroups.hasOwnProperty(subgroup)) {