jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

fixed subgroups and added sorting

v3_develop
Alex de Mulder 10 years ago
parent
5cd6a2c9a2
commit
8527e25c6d
5 changed files with 635 additions and 568 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +579
    -551
      dist/vis.js
  3. +8
    -0
      docs/timeline.html
  4. +15
    -13
      examples/timeline/30_subgroups.html
  5. +32
    -4
      lib/timeline/component/Group.js

+ 1
- 0
HISTORY.md View File

@ -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

+ 579
- 551
dist/vis.js
File diff suppressed because it is too large
View File


+ 8
- 0
docs/timeline.html View File

@ -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>

+ 15
- 13
examples/timeline/30_subgroups.html View File

@ -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');

+ 32
- 4
lib/timeline/component/Group.js View File

@ -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)) {

Write Preview
Loading…
Cancel
Save