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

Added option to change the visibility of a group (#2315) 

* Added group option to change the visibility of a group
* updated the groupsEditable example page to demo the use of this feature
* updated the timeline documentation to describe this option
codeClimate
Simon Morris 8 years ago
committed by Alexander Wunschik
parent
baa6f9fdb1
commit
e79d709df6
3 changed files with 43 additions and 7 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -0
      docs/timeline/index.html
  2. +24
    -2
      examples/timeline/groups/groupsEditable.html
  3. +13
    -5
      lib/timeline/Timeline.js

+ 6
- 0
docs/timeline/index.html View File

@ -455,6 +455,12 @@ var groups = [
The title can only contain plain text. The title can only contain plain text.
</td> </td>
</tr> </tr>
<tr>
<td>visible</td>
<td>Boolean</td>
<td>no</td>
<td>Provides a means to toggle the whether a group is displayed or not. Defaults to <code>true</code>.</td>
</tr>
</table> </table>

+ 24
- 2
examples/timeline/groups/groupsEditable.html View File

@ -28,7 +28,8 @@
</head> </head>
<body> <body>
<p> <p>
This example demonstrates editable groups (for now only reordering).
This example demonstrates editable groups (reordering and hiding).
<button onclick="showAllGroups()">Restore Hidden</button>
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
@ -55,7 +56,14 @@
{"content": "WEC", "id": "WEC", "value": 18, className:'endurance'}, {"content": "WEC", "id": "WEC", "value": 18, className:'endurance'},
{"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'} {"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'}
]); ]);
// function to make all groups visible again
function showAllGroups(){
groups.forEach(function(group){
groups.update({id: group.id, visible: true});
})
};
// create a dataset with items // create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April // note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([ var items = new vis.DataSet([
@ -299,6 +307,20 @@
a.value = b.value; a.value = b.value;
b.value = v; b.value = v;
}, },
groupTemplate: function(group){
var container = document.createElement('div');
var label = document.createElement('span');
label.innerHTML = group.content + ' ';
container.insertAdjacentElement('afterBegin',label);
var hide = document.createElement('button');
hide.innerHTML = 'hide';
hide.style.fontSize = 'small';
hide.addEventListener('click',function(){
groups.update({id: group.id, visible: false});
});
container.insertAdjacentElement('beforeEnd',hide);
return container;
},
orientation: 'both', orientation: 'both',
editable: true, editable: true,
groupEditable: true, groupEditable: true,

+ 13
- 5
lib/timeline/Timeline.js View File

@ -259,14 +259,22 @@ Timeline.prototype.setGroups = function(groups) {
if (!groups) { if (!groups) {
newDataSet = null; newDataSet = null;
} }
else if (groups instanceof DataSet || groups instanceof DataView) {
newDataSet = groups;
}
else { else {
// turn an array into a dataset
newDataSet = new DataSet(groups);
var filter = {
filter : function(group){
return group.visible !== false;
}
}
if (groups instanceof DataSet || groups instanceof DataView) {
newDataSet = new DataView(groups,filter);
}
else {
// turn an array into a dataset
newDataSet = new DataSet(groups.filter(filter));
}
} }
this.groupsData = newDataSet; this.groupsData = newDataSet;
this.itemSet.setGroups(newDataSet); this.itemSet.setGroups(newDataSet);
}; };

Write Preview
Loading…
Cancel
Save