galads/icehrm
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Changes for v22.0.0.OS

Browse Source
This commit is contained in:
Thilina Hasantha
2018-04-28 03:04:36 +02:00
parent d105ee3512
commit 8ebf28fbcb
471 changed files with 160244 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/bower_components/vis/examples/timeline/basicUsage.html vendored Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
A basic timeline. You can move and zoom the timeline, and select items.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

148
web/bower_components/vis/examples/timeline/dataHandling/dataSerialization.html vendored Normal file
View File

@@ -0,0 +1,148 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Data serialization</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
textarea {
width: 800px;
height: 200px;
}
.buttons {
margin: 20px 0;
}
.buttons input {
padding: 10px;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Serialization and deserialization</h1>
<p>This example shows how to serialize and deserialize JSON data, and load this in the Timeline via a DataSet. Serialization and deserialization is needed when loading or saving data from a server.</p>
<textarea id="data">
[
{
"id": 1,
"content": "item 1",
"start": "2014-01-01T01:00:00"
},
{
"id": 2,
"content": "item 2",
"start": "2014-01-01T02:00:00"
},
{
"id": 3,
"content": "item 3",
"start": "2014-01-01T03:00:00"
},
{
"id": 4,
"content": "item 4",
"start": "2014-01-01T04:00:00",
"end": "2014-01-01T04:30:00"
},
{
"id": 5,
"content": "item 5",
"start": "2014-01-01T05:00:00",
"type": "point"
},
{
"id": 6,
"content": "item 6",
"start": "2014-01-01T06:00:00"
}
]
</textarea>
<div class="buttons">
<input type="button" id="load" value="&darr; Load" title="Load data from textarea into the Timeline">
<input type="button" id="save" value="&uarr; Save" title="Save data from the Timeline into the textarea">
</div>
<div id="visualization"></div>
<script>
var txtData = document.getElementById('data');
var btnLoad = document.getElementById('load');
var btnSave = document.getElementById('save');
// Create an empty DataSet.
// This DataSet is used for two way data binding with the Timeline.
var items = new vis.DataSet();
// create a timeline
var container = document.getElementById('visualization');
var options = {
editable: true
};
var timeline = new vis.Timeline(container, items, options);
function loadData () {
// get and deserialize the data
var data = JSON.parse(txtData.value);
// update the data in the DataSet
//
// Note: when retrieving updated data from a server instead of a complete
// new set of data, one can simply update the existing data like:
//
// items.update(data);
//
// Existing items will then be updated, and new items will be added.
items.clear();
items.add(data);
// adjust the timeline window such that we see the loaded data
timeline.fit();
}
btnLoad.onclick = loadData;
function saveData() {
// get the data from the DataSet
//
// Note that we specify the output type of the fields start and end
// as "ISODate", which is safely serializable. Other serializable types
// are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!).
//
// Alternatively, it is possible to configure the DataSet to convert
// the output automatically to ISODates like:
//
// var options = {
// type: {start: 'ISODate', end: 'ISODate'}
// };
// var items = new vis.DataSet(options);
// // now items.get() will automatically convert start and end to ISO dates.
//
var data = items.get({
type: {
start: 'ISODate',
end: 'ISODate'
}
});
// serialize the data and put it in the textarea
txtData.value = JSON.stringify(data, null, 2);
}
btnSave.onclick = saveData;
// load the initial data
loadData();
</script>
</body>
</html>

58
web/bower_components/vis/examples/timeline/dataHandling/loadExternalData.html vendored Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | External data</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<!-- Load jquery for ajax support -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This demo shows how to load external data via an ajax call.
</p>
<div id="visualization"></div>
<div id="loading">loading...</div>
<script type="text/javascript">
// load data via an ajax request. When the data is in, load the timeline
$.ajax({
url: '../resources/data/basic.json',
success: function (data) {
// hide the "loading..." message
document.getElementById('loading').style.display = 'none';
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(data);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
},
error: function (err) {
console.log('Error', err);
if (err.status === 0) {
alert('Failed to load data/basic.json.\nPlease run this example on a server.');
}
else {
alert('Failed to load data/basic.json.');
}
}
});
</script>
</body>
</html>

55
web/bower_components/vis/examples/timeline/editing/customSnappingOfItems.html vendored Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom snapping</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
When moving the items in on the Timeline below, they will snap to full hours,
independent of being zoomed in or out.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'A', start: '2015-02-09T04:00:00'},
{id: 2, content: 'B', start: '2015-02-09T14:00:00'},
{id: 3, content: 'C', start: '2015-02-09T16:00:00'},
{id: 4, content: 'D', start: '2015-02-09T17:00:00'},
{id: 5, content: 'E', start: '2015-02-10T03:00:00'}
]);
// Configuration for the Timeline
var options = {
editable: true,
// always snap to full hours, independent of the scale
snap: function (date, scale, step) {
var hour = 60 * 60 * 1000;
return Math.round(date / hour) * hour;
}
// to configure no snapping at all:
//
// snap: null
//
// or let the snap function return the date unchanged:
//
// snap: function (date, scale, step) {
// return date;
// }
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

77
web/bower_components/vis/examples/timeline/editing/editingItems.html vendored Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Manipulation example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
// log changes to the console
items.on('*', function (event, properties) {
console.log(event, properties.items);
});
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
height: '300px',
// allow selecting multiple items using ctrl+click, shift+click, or hold.
multiselect: true,
// allow manipulation of items
editable: true,
/* alternatively, enable/disable individual actions:
editable: {
add: true,
updateTime: true,
updateGroup: true,
remove: true
},
*/
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

141
web/bower_components/vis/examples/timeline/editing/editingItemsCallbacks.html vendored Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Manipulation callbacks</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script>
<link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="max-width: 800px;">
This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.
</p>
<div id="visualization"></div>
<p></p>
<div id="log"></div>
<script type="text/javascript">
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
{id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
{id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
{id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
{id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
{id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
]);
var min = new Date(2013, 3, 1); // 1 april
var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
var container = document.getElementById('visualization');
var options = {
editable: true,
onAdd: function (item, callback) {
prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
if (value) {
item.content = value;
callback(item); // send back adjusted new item
}
else {
callback(null); // cancel item creation
}
});
},
onMove: function (item, callback) {
var title = 'Do you really want to move the item to\n' +
'start: ' + item.start + '\n' +
'end: ' + item.end + '?';
prettyConfirm('Move item', title, function (ok) {
if (ok) {
callback(item); // send back item as confirmation (can be changed)
}
else {
callback(null); // cancel editing item
}
});
},
onMoving: function (item, callback) {
if (item.start < min) item.start = min;
if (item.start > max) item.start = max;
if (item.end > max) item.end = max;
callback(item); // send back the (possibly) changed item
},
onUpdate: function (item, callback) {
prettyPrompt('Update item', 'Edit items text:', item.content, function (value) {
if (value) {
item.content = value;
callback(item); // send back adjusted item
}
else {
callback(null); // cancel updating the item
}
});
},
onRemove: function (item, callback) {
prettyConfirm('Remove item', 'Do you really want to remove item ' + item.content + '?', function (ok) {
if (ok) {
callback(item); // confirm deletion
}
else {
callback(null); // cancel deletion
}
});
}
};
var timeline = new vis.Timeline(container, items, options);
items.on('*', function (event, properties) {
logEvent(event, properties);
});
function logEvent(event, properties) {
var log = document.getElementById('log');
var msg = document.createElement('div');
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
'properties=' + JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function prettyConfirm(title, text, callback) {
swal({
title: title,
text: text,
type: 'warning',
showCancelButton: true,
confirmButtonColor: "#DD6B55"
}, callback);
}
function prettyPrompt(title, text, inputValue, callback) {
swal({
title: title,
text: text,
type: 'input',
showCancelButton: true,
inputValue: inputValue
}, callback);
}
</script>
</body>
</html>

63
web/bower_components/vis/examples/timeline/editing/individualEditableItems.html vendored Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Individual editable items</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Specify individual items to be editable or readonly.</p>
<div id="visualization"></div>
<script>
// create groups to highlight groupUpdate
var groups = new vis.DataSet([
{id: 1, content: 'Group 1'},
{id: 2, content: 'Group 2'}
]);
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Edit Time Only', editable: { updateTime: true, updateGroup: false, remove: false }, start: '2010-08-28', group: 1},
{id: 6, content: 'Edit Group Only', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2010-08-29', group: 2},
{id: 7, content: 'Remove Only', editable: { updateTime: false, updateGroup: false, remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
]);
var container = document.getElementById('visualization');
var options = {
editable: true // default for all items
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

38
web/bower_components/vis/examples/timeline/editing/itemsAlwaysDraggable.html vendored Normal file
View File

@@ -0,0 +1,38 @@
<html>
<head>
<title>Timeline | itemsAlwaysDraggable Option</title>
<meta charset="utf-8">
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>The <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When <code>itemsAlwaysDraggable.range</code> is set to <code>true</code>, the range can be changed without selection as well.</p>
<div id="mytimeline"></div>
<script>
var container = document.getElementById('mytimeline'),
items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
var start = new Date(new Date().getTime() + i * 100000);
items.add({
id: i,
content: "item " + i,
start: start,
end: new Date(start.getTime() + 100000)
});
}
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
editable: true,
itemsAlwaysDraggable: {
item: true,
range: true
}
};
var timeline = new vis.Timeline(container, items, null, options);
</script>
</body>
</html>

99
web/bower_components/vis/examples/timeline/editing/overrideEditingItems.html vendored Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Individual editable items</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable</p>
<div id="visualization"></div>
<p>
<form>
Timeline.editable = {</br>
<input name="add" type="checkbox" checked>add</input></br>
<input name="remove" type="checkbox" checked>remove</input></br>
<input name="updateGroup" type="checkbox">updateGroup</input></br>
<input name="updateTime" type="checkbox" checked>updateTime</input><br>
<input name="overrideItems" type="checkbox">overrideItems</input><br>
}
</form>
</p>
<script>
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Editable', editable: true, start: '2010-08-28', group: 1},
{id: 6, content: 'Read-only', editable: false, start: '2010-08-29', group: 2},
{id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00', group: 2},
{id: 9, content: 'Default', start: '2010-09-04', group: 1},
{id: 10, content: 'Default', start: '2010-08-24', group: 2}
]);
var groups = [
{
id: 1,
content: 'group 1'
},
{
id: 2,
content: 'group 2'
}
]
var container = document.getElementById('visualization');
var options = {
editable: {
add: true,
remove: true,
updateGroup: false,
updateTime: true,
overrideItems: false
} // default for all items
};
var timeline = new vis.Timeline(container, items, groups, options);
var updateEditOptions = function(e){
var changedOption = e.target.name;
var options = { editable: { } };
options.editable[changedOption] = e.target.checked;
timeline.setOptions(options);
};
var cbs = document.getElementsByTagName("input");
[].forEach.call(cbs, function(cb){
cb.onchange = updateEditOptions;
});
</script>
</body>
</html>

131
web/bower_components/vis/examples/timeline/editing/tooltipOnItemChange.html vendored Normal file
View File

@@ -0,0 +1,131 @@
<html>
<head>
<title>Timeline | Tooltip on item onUpdateTime Option</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.vis-item .vis-onUpdateTime-tooltip {
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Timeline Tooltip on item onUpdateTime Option</h1>
<h2>With <code>tooltipOnItemUpdateTime: true</code>
</h2>
<div id="mytimeline1"></div>
<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code>
</h2>
<div id="mytimeline2"></div>
<h2>With groups</h2>
<div id="mytimeline3"></div>
<script>
// create items
var numberOfItems = 10;
var items = new vis.DataSet();
var types = [ 'box', 'point', 'range']
for (var order = 0; order < numberOfItems; order++) {
var date = vis.moment();
date.add(Math.round(Math.random() * 2), 'hour');
items.add({
id: order,
type: types[Math.floor(3 * Math.random())],
content: 'Item ' + order,
start: date.clone().add(order + 1, 'hour'),
end: date.clone().add(order + 3, 'hour')
});
}
// specify options
var options = {
multiselect: true,
maxHeight: 400,
start: new Date((new Date()).valueOf() - 10000000),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true
};
var options1 = jQuery.extend(options, {
tooltipOnItemUpdateTime: true
})
var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, null, options1);
var options2 = jQuery.extend(options, {
orientation: 'top',
tooltipOnItemUpdateTime: {
template: function(item) {
return 'html template for tooltip with <b>item.start</b>: ' + item.start;
}
}
})
var container2 = document.getElementById('mytimeline2');
timeline2 = new vis.Timeline(container2, items, null, options2);
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck&nbsp;' + i
})
}
// create items for groups
var numberOfItems = 1000;
var itemsWithGroups = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
itemsWithGroups.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
}
}
var options3 = jQuery.extend(options, {
orientation: 'top',
tooltipOnItemUpdateTime: true
})
var container3 = document.getElementById('mytimeline3');
timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);
</script>
</body>
</html>

90
web/bower_components/vis/examples/timeline/editing/updateDataOnEvent.html vendored Normal file
View File

@@ -0,0 +1,90 @@
<html>
<head>
<title>Timeline | Update data on event</title>
<style type="text/css">
body {
font: 11pt verdana;
}
.vis.timeline .item.past {
filter: alpha(opacity=50);
opacity: 0.5;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="width: 600px;">
When the custom time bar is shown, the user can drag this bar to a specific
time. The Timeline sends an event that the custom time is changed, after
which the contents of the timeline can be changed according to the specified
time in past or future.
</p>
<div id="customTime">&nbsp;</div>
<p></p>
<div id="mytimeline"></div>
<script>
// create a data set
var data = new vis.DataSet([
{
id: 1,
start: new Date((new Date()).getTime() - 60 * 1000),
end: new Date(),
content: 'Dynamic event'
}
]);
// specify options
var options = {
showCurrentTime: true
};
// create a timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, data, options);
timeline.addCustomTime(new Date());
// add event listener
timeline.on('timechange', function (event) {
document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
var item = data.get(1);
if (event.time > item.start) {
item.end = new Date(event.time);
var now = new Date();
if (event.time < now) {
item.content = "Dynamic event (past)";
item.className = 'past';
}
else if (event.time > now) {
item.content = "Dynamic event (future)";
item.className = 'future';
}
else {
item.content = "Dynamic event (now)";
item.className = 'now';
}
data.update(item);
}
});
// set a custom range from -2 minute to +3 minutes current time
var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
var end = new Date((new Date()).getTime() + 3 * 60 * 1000);
timeline.setWindow(start, end, {animation: false});
</script>
</body>
</html>

74
web/bower_components/vis/examples/timeline/groups/groups.html vendored Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Group example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items
and groups via the DataSet.
</p>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, 'hours');
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
groupOrder: 'content' // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

338
web/bower_components/vis/examples/timeline/groups/groupsEditable.html vendored Normal file
View File

@@ -0,0 +1,338 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Editable Groups</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
.vis-item.openwheel { background-color: #B0E2FF; }
.vis-item.rally { background-color: #EAEAEA; }
.vis-item.motorcycle { background-color: #FA8072; }
.vis-item.touringcar { background-color: #B4EEB4; }
.vis-item.endurance { background-color: #FFFFCC; }
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<!-- -->
</head>
<body>
<p>
This example demonstrates editable groups (reordering and hiding).
<button onclick="showAllGroups()">Restore Hidden</button>
</p>
<div id="visualization"></div>
<script>
// http://motocal.com/
var groups = new vis.DataSet([
{"content": "Formula E", "id": "Formula E", "value": 1, className:'openwheel'},
{"content": "WRC", "id": "WRC", "value": 2, className:'rally'},
{"content": "MotoGP", "id": "MotoGP", "value": 3, className:'motorcycle'},
{"content": "V8SC", "id": "V8SC", "value": 4, className:'touringcars'},
{"content": "WTCC", "id": "WTCC", "value": 5, className:'touringcars'},
{"content": "F1", "id": "F1", "value": 6, className:'openwheel'},
{"content": "SBK", "id": "SBK", "value": 7, className:'motorcycle'},
{"content": "IndyCar", "id": "IndyCar", "value": 8, className:'openwheel'},
{"content": "MotoAmerica", "id": "MotoAmerica", "value": 9, className:'motorcycle'},
{"content": "SGP", "id": "SGP", "value": 10, className:'rally'},
{"content": "EWC", "id": "EWC", "value": 11, className:'endurance'},
{"content": "BSB", "id": "BSB", "value": 12, className:'motorcycle'},
{"content": "DTM", "id": "DTM", "value": 13, className:'touringcars'},
{"content": "BTCC", "id": "BTCC", "value": 14, className:'touringcars'},
{"content": "WorldRX", "id": "WorldRX", "value": 15, className:'rally'},
{"content": "WSR", "id": "WSR", "value": 16, className:'openwheel'},
{"content": "Roads", "id": "Roads", "value": 17, className:'motorcycle'},
{"content": "WEC", "id": "WEC", "value": 18, className:'endurance'},
{"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
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{start: new Date(2015, 0, 10), end: new Date(2015, 0, 11), group:"Formula E", className:"openwheel", content:"Argentina",id:"531@motocal.net"},
{start: new Date(2015, 0, 22), end: new Date(2015, 0, 26), group:"WRC", className:"rally", content:"Rallye Monte-Carlo",id:"591@motocal.net"},
{start: new Date(2015, 1, 4), end: new Date(2015, 1, 8), group:"MotoGP", className:"motorcycle", content:"Sepang MotoGP Test 1",id:"578@motocal.net"},
{start: new Date(2015, 1, 12), end: new Date(2015, 1, 16), group:"WRC", className:"rally", content:"Rally Sweden",id:"592@motocal.net"},
{start: new Date(2015, 1, 20), end: new Date(2015, 1, 23), group:"SBK", className:"motorcycle", content:"Australia",id:"616@motocal.net"},
{start: new Date(2015, 1, 23), end: new Date(2015, 1, 27), group:"MotoGP", className:"motorcycle", content:"Sepang MotoGP Test 2",id:"579@motocal.net"},
{start: new Date(2015, 1, 26), end: new Date(2015, 2, 2), group:"V8SC", className:"touringcar", content:"Clipsal 500 Adelaide",id:"659@motocal.net"},
{start: new Date(2015, 2, 5), end: new Date(2015, 2, 9), group:"WRC", className:"rally", content:"Rally Guanajuato Mexico",id:"593@motocal.net"},
{start: new Date(2015, 2, 6), end: new Date(2015, 2, 9), group:"WTCC", className:"touringcar", content:"Argentina",id:"717@motocal.net"},
{start: new Date(2015, 2, 12), end: new Date(2015, 2, 16), group:"V8SC", className:"touringcar", content:"Australian Grand Prix",id:"660@motocal.net"},
{start: new Date(2015, 2, 13), end: new Date(2015, 2, 16), group:"F1", className:"openwheel", content:"Australia",id:"630@motocal.net"},
{start: new Date(2015, 2, 14), end: new Date(2015, 2, 15), group:"Formula E", className:"openwheel", content:"Miami, USA",id:"534@motocal.net"},
{start: new Date(2015, 2, 14), end: new Date(2015, 2, 17), group:"MotoGP", className:"motorcycle", content:"Qatar MotoGP Test",id:"577@motocal.net"},
{start: new Date(2015, 2, 20), end: new Date(2015, 2, 23), group:"SBK", className:"motorcycle", content:"Thailand",id:"617@motocal.net"},
{start: new Date(2015, 2, 27), end: new Date(2015, 2, 30), group:"F1", className:"openwheel", content:"Malaysia",id:"631@motocal.net"},
{start: new Date(2015, 2, 27), end: new Date(2015, 2, 30), group:"V8SC", className:"touringcar", content:"Tasmania SuperSprint",id:"661@motocal.net"},
{start: new Date(2015, 2, 27), end: new Date(2015, 2, 30), group:"IndyCar", className:"openwheel", content:"Grand Prix of St. Petersburg",id:"752@motocal.net"},
{start: new Date(2015, 3, 4), end: new Date(2015, 3, 7), group:"BSB", className:"motorcycle", content:"Round 1",id:"604@motocal.net"},
{start: new Date(2015, 3, 4), end: new Date(2015, 3, 6), group:"BTCC", className:"touringcar", content:"Rounds 1, 2 & 3",id:"581@motocal.net"},
{start: new Date(2015, 3, 4), end: new Date(2015, 3, 5), group:"Formula E", className:"openwheel", content:"Long Beach, USA",id:"535@motocal.net"},
{start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"IndyCar", className:"openwheel", content:"Indy Grand Prix of Louisiana",id:"753@motocal.net"},
{start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"MotoAmerica", className:"motorcycle", content:"COTA",id:"705@motocal.net"},
{start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"SBK", className:"motorcycle", content:"Aragon",id:"618@motocal.net"},
{start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"MotoGP", className:"motorcycle", content:"Americas",id:"540@motocal.net"},
{start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"F1", className:"openwheel", content:"China",id:"632@motocal.net"},
{start: new Date(2015, 3, 12), end: new Date(2015, 3, 13), group:"WEC", className:"endurance", content:"6 Hours of Silverstone",id:"674@motocal.net"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"BSB", className:"motorcycle", content:"Round 2",id:"605@motocal.net"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"F1", className:"openwheel", content:"Bahrain",id:"633@motocal.net"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"IndyCar", className:"openwheel", content:"Grand Prix of Long Beach",id:"754@motocal.net"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"MotoAmerica", className:"motorcycle", content:"Road Atlanta",id:"706@motocal.net"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"SBK", className:"motorcycle", content:"Netherlands",id:"619@motocal.net"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"WTCC", className:"touringcar", content:"Morocco",id:"718@motocal.net"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"MotoGP", className:"motorcycle", content:"Argentina",id:"559@motocal.net"},
{start: new Date(2015, 3, 18), end: new Date(2015, 3, 19), group:"SGP", className:"rally", content:"Warsaw",id:"729@motocal.net"},
{start: new Date(2015, 3, 18), end: new Date(2015, 3, 20), group:"EWC", className:"endurance", content:"24 Heures Moto Le Mans",id:"701@motocal.net"},
{start: new Date(2015, 3, 18), end: new Date(2015, 3, 20), group:"BTCC", className:"touringcar", content:"Rounds 4, 5 & 6",id:"582@motocal.net"},
{start: new Date(2015, 3, 23), end: new Date(2015, 3, 27), group:"WRC", className:"rally", content:"Rally Argentina",id:"595@motocal.net"},
{start: new Date(2015, 3, 24), end: new Date(2015, 3, 27), group:"WorldRX", className:"rally", content:"Portugal",id:"686@motocal.net"},
{start: new Date(2015, 3, 24), end: new Date(2015, 3, 27), group:"IndyCar", className:"openwheel", content:"Indy Grand Prix of Alabama",id:"755@motocal.net"},
{start: new Date(2015, 3, 25), end: new Date(2015, 3, 27), group:"WSR", className:"openwheel", content:"Spain",id:"742@motocal.net"},
{start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"MotoGP", className:"motorcycle", content:"Spain",id:"542@motocal.net"},
{start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"WorldRX", className:"rally", content:"Hockenheim",id:"768@motocal.net"},
{start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"DTM", className:"touringcar", content:"Hockenheim",id:"650@motocal.net"},
{start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"WTCC", className:"touringcar", content:"Hungary",id:"719@motocal.net"},
{start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"V8SC", className:"touringcar", content:"Perth SuperSprint",id:"662@motocal.net"},
{start: new Date(2015, 4, 2), end: new Date(2015, 4, 5), group:"BSB", className:"motorcycle", content:"Round 3",id:"606@motocal.net"},
{start: new Date(2015, 4, 2), end: new Date(2015, 4, 3), group:"WEC", className:"endurance", content:"6 Hours of Spa-Francorchamps",id:"675@motocal.net"},
{start: new Date(2015, 4, 7), end: new Date(2015, 4, 10), group:"IndyCar", className:"openwheel", content:"Grand Prix of Indianapolis",id:"756@motocal.net"},
{start: new Date(2015, 4, 8), end: new Date(2015, 4, 11), group:"F1", className:"openwheel", content:"Spain",id:"634@motocal.net"},
{start: new Date(2015, 4, 8), end: new Date(2015, 4, 11), group:"SBK", className:"motorcycle", content:"Italy",id:"620@motocal.net"},
{start: new Date(2015, 4, 9), end: new Date(2015, 4, 10), group:"Formula E", className:"openwheel", content:"Monaco",id:"536@motocal.net"},
{start: new Date(2015, 4, 9), end: new Date(2015, 4, 11), group:"BTCC", className:"touringcar", content:"Rounds 7, 8 & 9",id:"583@motocal.net"},
{start: new Date(2015, 4, 10), end: new Date(2015, 4, 17), group:"Roads", className:"motorcycle", content:"North West 200",id:"682@motocal.net"},
{start: new Date(2015, 4, 15), end: new Date(2015, 4, 17), group:"WTCC", className:"touringcar", content:"Germany",id:"720@motocal.net"},
{start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"WorldRX", className:"rally", content:"Belgium",id:"687@motocal.net"},
{start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"V8SC", className:"touringcar", content:"Winton SuperSprint",id:"663@motocal.net"},
{start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"MotoGP", className:"motorcycle", content:"France",id:"543@motocal.net"},
{start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"MotoAmerica", className:"motorcycle", content:"VIR",id:"707@motocal.net"},
{start: new Date(2015, 4, 16), end: new Date(2015, 4, 17), group:"SGP", className:"rally", content:"Tampere",id:"730@motocal.net"},
{start: new Date(2015, 4, 21), end: new Date(2015, 4, 25), group:"WRC", className:"rally", content:"Rally de Portugal",id:"594@motocal.net"},
{start: new Date(2015, 4, 21), end: new Date(2015, 4, 25), group:"F1", className:"openwheel", content:"Monaco",id:"635@motocal.net"},
{start: new Date(2015, 4, 22), end: new Date(2015, 4, 25), group:"WorldRX", className:"rally", content:"Great Britain",id:"688@motocal.net"},
{start: new Date(2015, 4, 22), end: new Date(2015, 4, 25), group:"SBK", className:"motorcycle", content:"UK",id:"621@motocal.net"},
{start: new Date(2015, 4, 22), end: new Date(2015, 4, 25), group:"IndyCar", className:"openwheel", content:"Indianapolis 500",id:"757@motocal.net"},
{start: new Date(2015, 4, 23), end: new Date(2015, 4, 24), group:"SGP", className:"rally", content:"Prague",id:"731@motocal.net"},
{start: new Date(2015, 4, 23), end: new Date(2015, 4, 24), group:"Formula E", className:"openwheel", content:"Germany",id:"537@motocal.net"},
{start: new Date(2015, 4, 24), end: new Date(2015, 4, 25), group:"WSR", className:"openwheel", content:"Monaco",id:"743@motocal.net"},
{start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"MotoAmerica", className:"motorcycle", content:"Road America",id:"708@motocal.net"},
{start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"IndyCar", className:"openwheel", content:"Dual in Detroit",id:"758@motocal.net"},
{start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"MotoGP", className:"motorcycle", content:"Italy",id:"562@motocal.net"},
{start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"DTM", className:"touringcar", content:"Lausitzring",id:"651@motocal.net"},
{start: new Date(2015, 4, 30), end: new Date(2015, 5, 13), group:"Roads", className:"motorcycle", content:"Isle of Man TT",id:"683@motocal.net"},
{start: new Date(2015, 4, 30), end: new Date(2015, 5, 1), group:"WSR", className:"openwheel", content:"Belgium",id:"745@motocal.net"},
{start: new Date(2015, 5, 4), end: new Date(2015, 5, 7), group:"IndyCar", className:"openwheel", content:"Firestone 600",id:"759@motocal.net"},
{start: new Date(2015, 5, 5), end: new Date(2015, 5, 8), group:"SBK", className:"motorcycle", content:"Portugal",id:"622@motocal.net"},
{start: new Date(2015, 5, 5), end: new Date(2015, 5, 8), group:"F1", className:"openwheel", content:"Canada",id:"636@motocal.net"},
{start: new Date(2015, 5, 5), end: new Date(2015, 5, 8), group:"WTCC", className:"touringcar", content:"Russia",id:"721@motocal.net"},
{start: new Date(2015, 5, 6), end: new Date(2015, 5, 7), group:"Formula E", className:"openwheel", content:"Russia",id:"716@motocal.net"},
{start: new Date(2015, 5, 6), end: new Date(2015, 5, 8), group:"BTCC", className:"touringcar", content:"Rounds 10, 11 & 12",id:"584@motocal.net"},
{start: new Date(2015, 5, 11), end: new Date(2015, 5, 15), group:"WRC", className:"rally", content:"Rally d'Italia Sardegna",id:"596@motocal.net"},
{start: new Date(2015, 5, 12), end: new Date(2015, 5, 15), group:"MotoGP", className:"motorcycle", content:"Catalunya",id:"545@motocal.net"},
{start: new Date(2015, 5, 12), end: new Date(2015, 5, 15), group:"IndyCar", className:"openwheel", content:"Indy Toronto",id:"760@motocal.net"},
{start: new Date(2015, 5, 12), end: new Date(2015, 5, 15), group:"MotoAmerica", className:"motorcycle", content:"Barber",id:"709@motocal.net"},
{start: new Date(2015, 5, 13), end: new Date(2015, 5, 15), group:"WSR", className:"openwheel", content:"Hungary",id:"746@motocal.net"},
{start: new Date(2015, 5, 13), end: new Date(2015, 5, 15), group:"WEC", className:"endurance", content:"24 Heures du Mans",id:"676@motocal.net"},
{start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"V8SC", className:"touringcar", content:"Skycity Triple Crown",id:"664@motocal.net"},
{start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"WTCC", className:"touringcar", content:"Slovakia",id:"722@motocal.net"},
{start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"SBK", className:"motorcycle", content:"Riviera di Rimini",id:"623@motocal.net"},
{start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"BSB", className:"motorcycle", content:"Round 4",id:"607@motocal.net"},
{start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"F1", className:"openwheel", content:"Austria",id:"637@motocal.net"},
{start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"WorldRX", className:"rally", content:"Germany",id:"689@motocal.net"},
{start: new Date(2015, 5, 25), end: new Date(2015, 5, 28), group:"MotoGP", className:"motorcycle", content:"Netherlands",id:"546@motocal.net"},
{start: new Date(2015, 5, 25), end: new Date(2015, 5, 28), group:"IndyCar", className:"openwheel", content:"MAVTV 500",id:"761@motocal.net"},
{start: new Date(2015, 5, 26), end: new Date(2015, 5, 29), group:"WTCC", className:"touringcar", content:"France",id:"723@motocal.net"},
{start: new Date(2015, 5, 26), end: new Date(2015, 5, 29), group:"DTM", className:"touringcar", content:"Norisring",id:"652@motocal.net"},
{start: new Date(2015, 5, 26), end: new Date(2015, 5, 29), group:"MotoAmerica", className:"motorcycle", content:"Miller",id:"710@motocal.net"},
{start: new Date(2015, 5, 27), end: new Date(2015, 5, 29), group:"BTCC", className:"touringcar", content:"Rounds 13, 14 & 15",id:"585@motocal.net"},
{start: new Date(2015, 5, 27), end: new Date(2015, 5, 29), group:"Formula E", className:"openwheel", content:"United Kingdom",id:"538@motocal.net"},
{start: new Date(2015, 6, 2), end: new Date(2015, 6, 6), group:"WRC", className:"rally", content:"Rally Poland",id:"597@motocal.net"},
{start: new Date(2015, 6, 3), end: new Date(2015, 6, 6), group:"F1", className:"openwheel", content:"Britain",id:"638@motocal.net"},
{start: new Date(2015, 6, 3), end: new Date(2015, 6, 6), group:"WorldRX", className:"rally", content:"Sweden",id:"690@motocal.net"},
{start: new Date(2015, 6, 3), end: new Date(2015, 6, 6), group:"BSB", className:"motorcycle", content:"Round 5",id:"608@motocal.net"},
{start: new Date(2015, 6, 4), end: new Date(2015, 6, 5), group:"SGP", className:"rally", content:"Cardiff",id:"732@motocal.net"},
{start: new Date(2015, 6, 6), end: new Date(2015, 6, 10), group:"Roads", className:"motorcycle", content:"Southern 100",id:"714@motocal.net"},
{start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"MotoGP", className:"motorcycle", content:"Germany",id:"565@motocal.net"},
{start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"DTM", className:"touringcar", content:"Zandvoort",id:"653@motocal.net"},
{start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"IndyCar", className:"openwheel", content:"Wisconsin 250",id:"763@motocal.net"},
{start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"V8SC", className:"touringcar", content:"Townsville 400",id:"665@motocal.net"},
{start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"WTCC", className:"touringcar", content:"Portugal",id:"724@motocal.net"},
{start: new Date(2015, 6, 11), end: new Date(2015, 6, 13), group:"WSR", className:"openwheel", content:"Austria",id:"747@motocal.net"},
{start: new Date(2015, 6, 16), end: new Date(2015, 6, 19), group:"IndyCar", className:"openwheel", content:"Iowa Corn Indy 300",id:"764@motocal.net"},
{start: new Date(2015, 6, 17), end: new Date(2015, 6, 20), group:"SBK", className:"motorcycle", content:"USA",id:"625@motocal.net"},
{start: new Date(2015, 6, 17), end: new Date(2015, 6, 20), group:"BSB", className:"motorcycle", content:"Round 6",id:"609@motocal.net"},
{start: new Date(2015, 6, 17), end: new Date(2015, 6, 20), group:"MotoAmerica", className:"motorcycle", content:"Mazda Raceway",id:"711@motocal.net"},
{start: new Date(2015, 6, 18), end: new Date(2015, 6, 19), group:"SGP", className:"rally", content:"Daugavpils",id:"733@motocal.net"},
{start: new Date(2015, 6, 24), end: new Date(2015, 6, 27), group:"F1", className:"openwheel", content:"Hungary",id:"640@motocal.net"},
{start: new Date(2015, 6, 25), end: new Date(2015, 6, 26), group:"SGP", className:"rally", content:"Målilla",id:"734@motocal.net"},
{start: new Date(2015, 6, 26), end: new Date(2015, 6, 27), group:"EWC", className:"endurance", content:"Suzuka 8 Hours",id:"702@motocal.net"},
{start: new Date(2015, 6, 30), end: new Date(2015, 7, 3), group:"WRC", className:"rally", content:"Rally Finland",id:"598@motocal.net"},
{start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"BSB", className:"motorcycle", content:"Round 7",id:"610@motocal.net"},
{start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"V8SC", className:"touringcar", content:"Ipswich SuperSprint",id:"666@motocal.net"},
{start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"DTM", className:"touringcar", content:"Spielberg",id:"654@motocal.net"},
{start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"IndyCar", className:"openwheel", content:"Honda Indy 200",id:"765@motocal.net"},
{start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"SBK", className:"motorcycle", content:"Malaysia",id:"626@motocal.net"},
{start: new Date(2015, 7, 3), end: new Date(2015, 7, 9), group:"Roads", className:"motorcycle", content:"Ulster Grand Prix",id:"684@motocal.net"},
{start: new Date(2015, 7, 7), end: new Date(2015, 7, 9), group:"WorldRX", className:"rally", content:"Canada",id:"691@motocal.net"},
{start: new Date(2015, 7, 7), end: new Date(2015, 7, 10), group:"MotoAmerica", className:"motorcycle", content:"INDY",id:"712@motocal.net"},
{start: new Date(2015, 7, 7), end: new Date(2015, 7, 10), group:"MotoGP", className:"motorcycle", content:"Indianapolis",id:"548@motocal.net"},
{start: new Date(2015, 7, 8), end: new Date(2015, 7, 10), group:"BTCC", className:"touringcar", content:"Rounds 16, 17 & 18",id:"586@motocal.net"},
{start: new Date(2015, 7, 8), end: new Date(2015, 7, 9), group:"SGP", className:"rally", content:"Horsens",id:"735@motocal.net"},
{start: new Date(2015, 7, 10), end: new Date(2015, 7, 12), group:"Formula E", className:"openwheel", content:"Pre-season test 1",id:"769@motocal.net"},
{start: new Date(2015, 7, 14), end: new Date(2015, 7, 17), group:"MotoGP", className:"motorcycle", content:"Czech Republic",id:"549@motocal.net"},
{start: new Date(2015, 7, 17), end: new Date(2015, 7, 19), group:"Formula E", className:"openwheel", content:"Pre-season test 2",id:"770@motocal.net"},
{start: new Date(2015, 7, 20), end: new Date(2015, 7, 24), group:"WRC", className:"rally", content:"Rallye Deutschland",id:"599@motocal.net"},
{start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"IndyCar", className:"openwheel", content:"Pocono IndyCar 500",id:"766@motocal.net"},
{start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"BSB", className:"motorcycle", content:"Round 8",id:"611@motocal.net"},
{start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"WorldRX", className:"rally", content:"Norway",id:"692@motocal.net"},
{start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"F1", className:"openwheel", content:"Belgium",id:"641@motocal.net"},
{start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"V8SC", className:"touringcar", content:"Sydney Motorsport Park SuperSprint",id:"667@motocal.net"},
{start: new Date(2015, 7, 22), end: new Date(2015, 7, 23), group:"EWC", className:"endurance", content:"Oschersleben 8 Hours",id:"703@motocal.net"},
{start: new Date(2015, 7, 22), end: new Date(2015, 8, 5), group:"Roads", className:"motorcycle", content:"Classic TT & Manx GP",id:"715@motocal.net"},
{start: new Date(2015, 7, 22), end: new Date(2015, 7, 24), group:"BTCC", className:"touringcar", content:"Rounds 19, 20 & 21",id:"587@motocal.net"},
{start: new Date(2015, 7, 24), end: new Date(2015, 7, 26), group:"Formula E", className:"openwheel", content:"Pre-season test 3",id:"771@motocal.net"},
{start: new Date(2015, 7, 28), end: new Date(2015, 7, 31), group:"DTM", className:"touringcar", content:"Moscow Raceway",id:"655@motocal.net"},
{start: new Date(2015, 7, 28), end: new Date(2015, 7, 31), group:"IndyCar", className:"openwheel", content:"Grand Prix of Sonoma",id:"767@motocal.net"},
{start: new Date(2015, 7, 28), end: new Date(2015, 7, 31), group:"MotoGP", className:"motorcycle", content:"Great Britain",id:"568@motocal.net"},
{start: new Date(2015, 7, 29), end: new Date(2015, 7, 30), group:"SGP", className:"rally", content:"Gorzów",id:"737@motocal.net"},
{start: new Date(2015, 7, 30), end: new Date(2015, 7, 31), group:"WEC", className:"endurance", content:"6 Hours of N&uuml;rburgring",id:"677@motocal.net"},
{start: new Date(2015, 8, 4), end: new Date(2015, 8, 7), group:"BSB", className:"motorcycle", content:"Round 9",id:"612@motocal.net"},
{start: new Date(2015, 8, 4), end: new Date(2015, 8, 7), group:"WorldRX", className:"rally", content:"France",id:"693@motocal.net"},
{start: new Date(2015, 8, 4), end: new Date(2015, 8, 7), group:"F1", className:"openwheel", content:"Italy",id:"642@motocal.net"},
{start: new Date(2015, 8, 5), end: new Date(2015, 8, 7), group:"WSR", className:"openwheel", content:"United Kingdom",id:"748@motocal.net"},
{start: new Date(2015, 8, 5), end: new Date(2015, 8, 7), group:"BTCC", className:"touringcar", content:"Rounds 22, 23 & 24",id:"588@motocal.net"},
{start: new Date(2015, 8, 10), end: new Date(2015, 8, 14), group:"WRC", className:"rally", content:"Rally Australia",id:"600@motocal.net"},
{start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"V8SC", className:"touringcar", content:"Sandown 500",id:"668@motocal.net"},
{start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"MotoAmerica", className:"motorcycle", content:"New Jersey",id:"713@motocal.net"},
{start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"MotoGP", className:"motorcycle", content:"San Marino",id:"551@motocal.net"},
{start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"WTCC", className:"touringcar", content:"Japan",id:"725@motocal.net"},
{start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"DTM", className:"touringcar", content:"Oschersleben",id:"656@motocal.net"},
{start: new Date(2015, 8, 12), end: new Date(2015, 8, 14), group:"WSR", className:"openwheel", content:"Germany",id:"749@motocal.net"},
{start: new Date(2015, 8, 12), end: new Date(2015, 8, 13), group:"SGP", className:"rally", content:"Krško",id:"738@motocal.net"},
{start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"SBK", className:"motorcycle", content:"Spain",id:"627@motocal.net"},
{start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"BSB", className:"motorcycle", content:"Round 10",id:"613@motocal.net"},
{start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"F1", className:"openwheel", content:"Singapore",id:"643@motocal.net"},
{start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"WorldRX", className:"rally", content:"Barcelona",id:"694@motocal.net"},
{start: new Date(2015, 8, 19), end: new Date(2015, 8, 20), group:"WEC", className:"endurance", content:"6 Hours of Circuit of the Americas",id:"678@motocal.net"},
{start: new Date(2015, 8, 19), end: new Date(2015, 8, 21), group:"EWC", className:"endurance", content:"Bol d’Or",id:"704@motocal.net"},
{start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"MotoGP", className:"motorcycle", content:"Aragon",id:"570@motocal.net"},
{start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"DTM", className:"touringcar", content:"N&uuml;rburgring",id:"657@motocal.net"},
{start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"WTCC", className:"touringcar", content:"China",id:"726@motocal.net"},
{start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"F1", className:"openwheel", content:"Japan",id:"644@motocal.net"},
{start: new Date(2015, 8, 26), end: new Date(2015, 8, 28), group:"BTCC", className:"touringcar", content:"Rounds 25, 26 & 27",id:"589@motocal.net"},
{start: new Date(2015, 8, 26), end: new Date(2015, 8, 27), group:"SGP", className:"rally", content:"Stockholm",id:"739@motocal.net"},
{start: new Date(2015, 8, 26), end: new Date(2015, 8, 28), group:"WSR", className:"openwheel", content:"France",id:"750@motocal.net"},
{start: new Date(2015, 9, 1), end: new Date(2015, 9, 5), group:"WRC", className:"rally", content:"Rallye de France",id:"601@motocal.net"},
{start: new Date(2015, 9, 2), end: new Date(2015, 9, 5), group:"SBK", className:"motorcycle", content:"France",id:"628@motocal.net"},
{start: new Date(2015, 9, 2), end: new Date(2015, 9, 5), group:"BSB", className:"motorcycle", content:"Round 11",id:"614@motocal.net"},
{start: new Date(2015, 9, 2), end: new Date(2015, 9, 5), group:"WorldRX", className:"rally", content:"Turkey",id:"695@motocal.net"},
{start: new Date(2015, 9, 3), end: new Date(2015, 9, 4), group:"SGP", className:"rally", content:"Toruń",id:"740@motocal.net"},
{start: new Date(2015, 9, 8), end: new Date(2015, 9, 12), group:"V8SC", className:"touringcar", content:"Bathurst 1000",id:"669@motocal.net"},
{start: new Date(2015, 9, 9), end: new Date(2015, 9, 12), group:"F1", className:"openwheel", content:"Russia",id:"645@motocal.net"},
{start: new Date(2015, 9, 9), end: new Date(2015, 9, 12), group:"MotoGP", className:"motorcycle", content:"Japan",id:"553@motocal.net"},
{start: new Date(2015, 9, 10), end: new Date(2015, 9, 12), group:"BTCC", className:"touringcar", content:"Rounds 28, 29 & 30",id:"590@motocal.net"},
{start: new Date(2015, 9, 11), end: new Date(2015, 9, 12), group:"WEC", className:"endurance", content:"6 Hours of Fuji",id:"679@motocal.net"},
{start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"WorldRX", className:"rally", content:"Italy",id:"696@motocal.net"},
{start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"MotoGP", className:"motorcycle", content:"Australia",id:"572@motocal.net"},
{start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"DTM", className:"touringcar", content:"Hockenheim",id:"658@motocal.net"},
{start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"BSB", className:"motorcycle", content:"Round 12",id:"615@motocal.net"},
{start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"SBK", className:"motorcycle", content:"Qatar",id:"629@motocal.net"},
{start: new Date(2015, 9, 17), end: new Date(2015, 9, 19), group:"WSR", className:"openwheel", content:"Spain",id:"751@motocal.net"},
{start: new Date(2015, 9, 22), end: new Date(2015, 9, 26), group:"WRC", className:"rally", content:"Rally de Espana",id:"602@motocal.net"},
{start: new Date(2015, 9, 23), end: new Date(2015, 9, 26), group:"V8SC", className:"touringcar", content:"Gold Coast 600",id:"670@motocal.net"},
{start: new Date(2015, 9, 23), end: new Date(2015, 9, 26), group:"MotoGP", className:"motorcycle", content:"Malaysia",id:"573@motocal.net"},
{start: new Date(2015, 9, 23), end: new Date(2015, 9, 26), group:"F1", className:"openwheel", content:"United States",id:"646@motocal.net"},
{start: new Date(2015, 9, 24), end: new Date(2015, 9, 25), group:"SGP", className:"rally", content:"Melbourne",id:"741@motocal.net"},
{start: new Date(2015, 9, 30), end: new Date(2015, 10, 2), group:"F1", className:"openwheel", content:"Mexico",id:"647@motocal.net"},
{start: new Date(2015, 9, 30), end: new Date(2015, 10, 2), group:"WTCC", className:"touringcar", content:"Thailand",id:"727@motocal.net"},
{start: new Date(2015, 10, 1), end: new Date(2015, 10, 2), group:"WEC", className:"endurance", content:"6 Hours of Shanghai",id:"680@motocal.net"},
{start: new Date(2015, 10, 6), end: new Date(2015, 10, 9), group:"MotoGP", className:"motorcycle", content:"Valencia",id:"556@motocal.net"},
{start: new Date(2015, 10, 6), end: new Date(2015, 10, 9), group:"V8SC", className:"touringcar", content:"ITM 500 Auckland",id:"671@motocal.net"},
{start: new Date(2015, 10, 12), end: new Date(2015, 10, 16), group:"WRC", className:"rally", content:"Wales Rally GB",id:"603@motocal.net"},
{start: new Date(2015, 10, 13), end: new Date(2015, 10, 16), group:"F1", className:"openwheel", content:"Brazil",id:"648@motocal.net"},
{start: new Date(2015, 10, 19), end: new Date(2015, 10, 23), group:"Roads", className:"motorcycle", content:"Macau Grand Prix",id:"685@motocal.net"},
{start: new Date(2015, 10, 20), end: new Date(2015, 10, 23), group:"WTCC", className:"touringcar", content:"Qatar",id:"728@motocal.net"},
{start: new Date(2015, 10, 20), end: new Date(2015, 10, 23), group:"V8SC", className:"touringcar", content:"Phillip Island SuperSprint",id:"672@motocal.net"},
{start: new Date(2015, 10, 21), end: new Date(2015, 10, 22), group:"WEC", className:"endurance", content:"6 Hours of Bahrain",id:"681@motocal.net"},
{start: new Date(2015, 10, 27), end: new Date(2015, 10, 30), group:"WorldRX", className:"rally", content:"Argentina",id:"700@motocal.net"},
{start: new Date(2015, 10, 27), end: new Date(2015, 10, 30), group:"F1", className:"openwheel", content:"Abu Dhabi",id:"649@motocal.net"},
{start: new Date(2015, 11, 4), end: new Date(2015, 11, 7), group:"V8SC", className:"touringcar", content:"Sydney 500",id:"673@motocal.net"},
{start: new Date(2015, 2, 9), end: new Date(2015, 2, 11), group:"GP2", className:"openwheel", content:"Yas Marina Test",id:"1@gp2series.com"},
{start: new Date(2015, 3, 1), end: new Date(2015, 3, 3), group:"GP2", className:"openwheel", content:"Sakhir Test",id:"2@gp2series.com"},
{start: new Date(2015, 3, 17), end: new Date(2015, 3, 19), group:"GP2", className:"openwheel", content:"Sakhir, Bahrain",id:"3@gp2series.com"},
{start: new Date(2015, 4, 8), end: new Date(2015, 4, 10), group:"GP2", className:"openwheel", content:"Barcelona, Spain",id:"4@gp2series.com"},
{start: new Date(2015, 4, 21), end: new Date(2015, 4, 23), group:"GP2", className:"openwheel", content:"Monte Carlo, Monaco",id:"5@gp2series.com"},
{start: new Date(2015, 5, 19), end: new Date(2015, 5, 21), group:"GP2", className:"openwheel", content:"Spielber, Austria",id:"6@gp2series.com"},
{start: new Date(2015, 6, 3), end: new Date(2015, 6, 5), group:"GP2", className:"openwheel", content:"Silverstone, Great-Britain",id:"7@gp2series.com"},
{start: new Date(2015, 6, 24), end: new Date(2015, 6, 26), group:"GP2", className:"openwheel", content:"Budapest, Hungary",id:"8@gp2series.com"},
{start: new Date(2015, 7, 21), end: new Date(2015, 7, 23), group:"GP2", className:"openwheel", content:"Spa-Francorchamps, Belgium",id:"9@gp2series.com"},
{start: new Date(2015, 8, 4), end: new Date(2015, 8, 6), group:"GP2", className:"openwheel", content:"Monza, Italy",id:"10@gp2series.com"},
{start: new Date(2015, 9, 9), end: new Date(2015, 9, 11), group:"GP2", className:"openwheel", content:"Sochi, Russia",id:"11@gp2series.com"},
{start: new Date(2015, 10, 27), end: new Date(2015, 10, 29), group:"GP2", className:"openwheel", content:"Yas Marina, UAE",id:"12@gp2series.com"},
])
// create visualization
var container = document.getElementById('visualization');
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
groupOrderSwap: function (a, b, groups) {
var v = a.value;
a.value = b.value;
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',
editable: true,
groupEditable: true,
start: new Date(2015, 6, 1),
end: new Date(2015, 10, 1)
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

68
web/bower_components/vis/examples/timeline/groups/groupsOrdering.html vendored Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Groups ordering</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrates custom ordering of groups.
</p>
<div id="visualization"></div>
<script>
var groups = new vis.DataSet([
{id: 0, content: 'First', value: 1},
{id: 1, content: 'Third', value: 3},
{id: 2, content: 'Second', value: 2}
]);
// create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
]);
// create visualization
var container = document.getElementById('visualization');
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
editable: true
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

113
web/bower_components/vis/examples/timeline/groups/nestedGroups.html vendored Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Nested Groups example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items
and groups via the DataSet.
</p>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var itemCount = 60;
// create a data set with groups
var groups = new vis.DataSet();
groups.add([
{
id: 1,
content: "Lee",
nestedGroups: [11,12,13]
},
{
id: 2,
content: "invisible group",
visible: false
},
{
id: 3,
content: "John",
nestedGroups: [14],
showNested: false
},
{
id: 4,
content: "Alson"
},
]);
groups.add([
{
id: 11,
content: "cook",
},
{
id: 12,
content: "shop",
},
{
id: 13,
content: "clean house",
},
{
id: 14,
content: "wash dishes",
}
]);
// create a dataset with items
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = [ 'box', 'point', 'range', 'background']
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, 'hours');
var end = start.clone().add(2, 'hours');
var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
var type = types[Math.floor(4 * Math.random())]
items.add({
id: i,
group: randomGroupId,
content: 'item ' + i,
start: start,
end: end,
type: type
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
groupOrder: 'content' // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

161
web/bower_components/vis/examples/timeline/groups/subgroups.html vendored Normal file
View File

@@ -0,0 +1,161 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Subgroups</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.20);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
</style>
</head>
<body>
<p>This example shows the workings of the subgroups. Subgroups can be stacked on each other, and the items within each subgroup can be stacked.</p>
<p>When stacking is on for the whole timeline, all items in the timeline will be stacked with respect to each other <em>unless</em> the <code>stackSubgroups</code> option is set to <code>true</code>
and at least one subgroup has stacking enabled. In that case the subgroups will be stacked with respect to each other and the elements in each subgroup will be stacked based on the individual
stacking settings for each subgroup.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr >
<td>Stacking</td>
<td id="stackingStatus">false</td>
<td><button onclick="toggleStacking()">Toggle</button></td>
</tr>
<tr>
<td>stackSubgroups</td>
<td id="stackSubgroupsStatus">true</td>
<td><button onclick="toggleStackSubgroups()">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 0</td>
<td id="stacksg_1">false</td>
<td><button onclick="toggleSubgroupStack('sg_1')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 1</td>
<td id="stacksg_2">false</td>
<td><button onclick="toggleSubgroupStack('sg_2')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 2</td>
<td id="stacksg_3">false</td>
<td><button onclick="toggleSubgroupStack('sg_3')">Toggle</button></td>
</tr>
</tbody>
</table>
<br/>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
var groups = new vis.DataSet([{
id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}, subgroupStack: {'sg_1': false, 'sg_2': false, 'sg_3': false }
},{
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',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: '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_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 2, content: 'subgroup0_2', start: '2014-01-22T12:00:01', end: '2014-01-25T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_2_1', start: '2014-02-01', end: '2014-02-02', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'SG_2_2', start: '2014-02-2', end: '2014-02-03', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 3, content: 'subgroup1_1', start: '2014-01-27T02:00:00', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 4, content: 'subgroup1_2', start: '2014-01-28', end: '2014-02-02',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'SG_3_1',start: '2014-01-23', end: '2014-01-25', type: 'background', group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"a"},
{id: 'SG_3_2', start: '2014-01-26', end: '2014-01-28', type: 'background', className: 'positive',group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"b"},
{id: 5, content: 'subgroup2_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
{id: 6, content: 'subgroup2_2', start: '2014-01-26T12:00:01', end: '2014-01-29T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
{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');
var stackingStatus = document.getElementById('stackingStatus');
var stackSubgroupsStatus = document.getElementById('stackSubgroupsStatus');
var options = {
// orientation:'top'
start: '2014-01-10',
end: '2014-02-10',
editable: true,
stack: false,
stackSubgroups: true
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleStacking() {
options.stack = !options.stack;
stackingStatus.innerHTML = options.stack.toString();
timeline.setOptions(options);
}
function toggleStackSubgroups() {
options.stackSubgroups = !options.stackSubgroups;
stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
timeline.setOptions(options);
}
function toggleSubgroupStack(subgroup) {
groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[subgroup];
document.getElementById('stack' + subgroup).innerHTML = groups.get("bar").subgroupStack[subgroup].toString();
timeline.setGroups(groups);
}
</script>
</body>
</html>

120
web/bower_components/vis/examples/timeline/groups/verticalItemsHide.html vendored Normal file
View File

@@ -0,0 +1,120 @@
<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 onresize="/*timeline.checkResize();*/">
<h1>Timeline vertical visibility</h1>
<button onclick="showVisibleItems()">Show current visible items</button>
<div>
<h2>visible items:</h2>
<h3 id="visibleItemsContainer"></h3>
</div>
<div id="mytimeline"></div>
<br>
<script>
function showVisibleItems() {
var a = timeline.getVisibleItems();
console.log(a);
document.getElementById("visibleItemsContainer").innerHTML = ""
document.getElementById("visibleItemsContainer").innerHTML += a;
};
// get selected item count from url parameter
var count = 1000;
// create groups
var groups = new vis.DataSet([
{id: 1, content: 'Truck&nbsp;1'},
{id: 2, content: 'Truck&nbsp;2'},
{id: 3, content: 'Truck&nbsp;3'},
{id: 4, content: 'Truck&nbsp;4'},
{id: 5, content: 'Truck&nbsp;5'},
{id: 6, content: 'Truck&nbsp;6'},
{id: 7, content: 'Truck&nbsp;7'},
{id: 8, content: 'Truck&nbsp;8'},
{id: 9, content: 'Truck&nbsp;9'},
{id: 10, content: 'Truck&nbsp;10'},
{id: 11, content: 'Truck&nbsp;11'},
{id: 12, content: 'Truck&nbsp;12'},
{id: 13, content: 'Truck&nbsp;13'},
{id: 14, content: 'Truck&nbsp;14'},
{id: 15, content: 'Truck&nbsp;15'},
{id: 16, content: 'Truck&nbsp;16'},
{id: 17, content: 'Truck&nbsp;17'},
{id: 18, content: 'Truck&nbsp;18'},
{id: 19, content: 'Truck&nbsp;19'},
{id: 20, content: 'Truck&nbsp;20'},
{id: 21, content: 'Truck&nbsp;21'},
{id: 22, content: 'Truck&nbsp;22'},
{id: 23, content: 'Truck&nbsp;23'},
{id: 24, content: 'Truck&nbsp;24'},
{id: 25, content: 'Truck&nbsp;25'},
]);
// create items
var items = new vis.DataSet();
var types = [ 'box', 'point', 'range', 'background']
var order = 1;
var truck = 1;
for (var j = 0; j < 25; j++) {
var date = new Date();
for (var i = 0; i < count/25; i++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
var type = types[Math.floor(4 * Math.random())]
items.add({
id: order,
group: truck,
start: start,
end: end,
type: type,
content: 'Order ' + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: true,
maxHeight: 400,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
};
// create a Timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

96
web/bower_components/vis/examples/timeline/interaction/animateWindow.html vendored Normal file
View File

@@ -0,0 +1,96 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Animate window</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
input {
margin: 2px 0;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This example demonstrates functions to programmatically adjust the visible window of the Timeline.</p>
<p>
<input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
<input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation"><br>
<input type="button" id="moveTo" value="Move to 2014-02-01"><br>
<input type="button" id="fit" value="Fit all items"><br>
<input type="button" id="select" value="Select & focus items 5 and 6"><br>
<input type="button" id="focus1" value="Focus item 2"><br>
<input type="button" id="focus2" value="Focus items 5 and 6 (slow and linear animation)"><br>
<input type="button" id="focus3" value="Focus current selection"><br>
</p>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true,
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
document.getElementById('window1').onclick = function() {
timeline.setWindow('2014-01-01', '2014-04-01');
};
document.getElementById('window2').onclick = function() {
timeline.setWindow('2014-01-01', '2014-04-01', {animation: false});
};
document.getElementById('fit').onclick = function() {
timeline.fit();
};
document.getElementById('select').onclick = function() {
timeline.setSelection([5, 6], {
focus: true
});
};
document.getElementById('focus1').onclick = function() {
timeline.focus(2);
};
document.getElementById('focus2').onclick = function() {
timeline.focus([5, 6], {animation: {duration: 3000, easingFunction: 'linear'}}); // ms
};
document.getElementById('focus3').onclick = function() {
var selection = timeline.getSelection();
timeline.focus(selection);
};
document.getElementById('moveTo').onclick = function() {
timeline.moveTo('2014-02-01');
};
</script>
</body>
</html>

73
web/bower_components/vis/examples/timeline/interaction/clickToUse.html vendored Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Click to use</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#main {
width: 728px;
margin: 0 auto;
}
.container {
margin: 10px;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<h1>Timeline click to use</h1>
<p>
This example demonstrates how to use the <code>clickToUse</code> option: before you can scroll and drag in the timeline, you first have to click in the timeline to activate.
</p>
</div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
function createTimeline(main) {
var main = document.getElementById('main');
var container = document.createElement('div');
container.className = 'container';
main.appendChild(container);
var options = {
editable: true,
clickToUse: true
};
return new vis.Timeline(container, items, options);
}
var timelines = [];
for (var i = 0; i < 10; i++) {
timelines.push(createTimeline());
}
</script>
</body>
</html>

125
web/bower_components/vis/examples/timeline/interaction/eventListeners.html vendored Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Event listeners</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example listens for events <code>select</code>, <code>click</code>, <code>doubleClick</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline (other possible events: <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>, <code>mouseMove</code>), and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
</p>
<div id="visualization"></div>
<p></p>
<div id="hoveredItem"></div>
<div id="log"></div>
<script type="text/javascript">
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
]);
var container = document.getElementById('visualization');
var options = {
editable: true,
onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
};
var timeline = new vis.Timeline(container, items, options);
timeline.on('rangechange', function (properties) {
logEvent('rangechange', properties);
});
timeline.on('rangechanged', function (properties) {
logEvent('rangechanged', properties);
});
timeline.on('select', function (properties) {
logEvent('select', properties);
});
timeline.on('itemover', function (properties) {
logEvent('itemover', properties);
setHoveredItem(properties.item);
});
timeline.on('itemout', function (properties) {
logEvent('itemout', properties);
setHoveredItem('none');
});
timeline.on('click', function (properties) {
logEvent('click', properties);
});
timeline.on('doubleClick', function (properties) {
logEvent('doubleClick', properties);
});
timeline.on('contextmenu', function (properties) {
logEvent('contextmenu', properties);
});
timeline.on('mouseDown', function (properties) {
logEvent('mouseDown', properties);
});
timeline.on('mouseUp', function (properties) {
logEvent('mouseUp', properties);
});
// other possible events:
// timeline.on('mouseOver', function (properties) {
// logEvent('mouseOver', properties);
// });
// timeline.on("mouseMove", function(properties) {
// logEvent('mouseMove', properties);
// });
items.on('*', function (event, properties) {
logEvent(event, properties);
});
function stringifyObject (object) {
if (!object) return;
var replacer = function(key, value) {
if (value && value.tagName) {
return "DOM Element";
} else {
return value;
}
}
return JSON.stringify(object, replacer)
}
function logEvent(event, properties) {
var log = document.getElementById('log');
var msg = document.createElement('div');
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
'properties=' + stringifyObject(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function setHoveredItem(id) {
var hoveredItem = document.getElementById('hoveredItem');
hoveredItem.innerHTML = 'hoveredItem=' + id;
}
</script>
</body>
</html>

53
web/bower_components/vis/examples/timeline/interaction/limitMoveAndZoom.html vendored Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Limit move and zoom</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
The visible range is limited in this demo:
</p>
<ul>
<li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
<li>maximum visible date is limited to 2013-01-01 (excluded) using option <code>max</code></li>
<li>visible zoom interval is limited to a minimum of 24 hours using option <code>zoomMin</code></li>
<li>visible zoom interval is limited to a maximum of about 3 months using option <code>zoomMax</code></li>
</ul>
<div id="visualization"></div>
<script>
// create some items
// note that months are zero-based in the JavaScript Date object, so month 4 is May
var items = new vis.DataSet([
{'start': new Date(2012, 4, 25), 'content': 'First'},
{'start': new Date(2012, 4, 26), 'content': 'Last'}
]);
// create visualization
var container = document.getElementById('visualization');
var options = {
height: '300px',
min: new Date(2012, 0, 1), // lower limit of visible range
max: new Date(2013, 0, 1), // upper limit of visible range
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
};
// create the timeline
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setItems(items);
</script>
</body>
</html>

83
web/bower_components/vis/examples/timeline/interaction/navigationMenu.html vendored Executable file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | navigation menu</title>
<style type="text/css">
body, html, input {
font-family: sans-serif;
font-size: 12pt;
}
#visualization {
position: relative;
}
.menu {
position: absolute;
top: 0;
right: 0;
margin: 10px;
z-index: 9999;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
Create your own navigation menu by creating an overlay with buttons to zoom and move.
</p>
<div id="visualization">
<div class="menu">
<input type="button" id="zoomIn" value="Zoom in"/>
<input type="button" id="zoomOut" value="Zoom out"/>
<input type="button" id="moveLeft" value="Move left"/>
<input type="button" id="moveRight" value="Move right"/>
<input type="button" id="toggleRollingMode" value="toggleRollingMode"/>
</div>
</div>
<script type="text/javascript">
// create a timeline with some data
var container = document.getElementById('visualization');
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);
var options = {};
var timeline = new vis.Timeline(container, items, options);
/**
* Move the timeline a given percentage to left or right
* @param {Number} percentage For example 0.1 (left) or -0.1 (right)
*/
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('toggleRollingMode').onclick = function () { timeline.toggleRollingMode() };
</script>
</body>
</html>

48
web/bower_components/vis/examples/timeline/interaction/rollingMode.html vendored Normal file
View File

@@ -0,0 +1,48 @@
<html>
<head>
<title>Timeline | rolling mode Option</title>
<meta charset="utf-8">
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1><i id="icon">&#9974;</i>Timeline rolling mode option</h1>
<div id="mytimeline"></div>
<script>
var container = document.getElementById('mytimeline');
var items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
items.add({
id: i,
content: "item " + i,
start: new Date(new Date().getTime() + i*100000)
});
}
// Configuration for the Timeline
// specify options
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
rollingMode: {
follow: true,
offset: 0.5
}
};
// create a Timeline
timeline = new vis.Timeline(container, items, null, options);
</script>
</body>
</html>

174
web/bower_components/vis/examples/timeline/interaction/setSelection.html vendored Normal file
View File

@@ -0,0 +1,174 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Select items</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Set selection</h1>
<p style="max-width: 600px;">
Enter one or multiple ids of items, then press select to select the items. This demo uses the function <code>Timeline.setSelection(ids)</code>. Optionally, the window can be moved to the selected items.
</p>
<p>
Select item(s): <input type="text" id="selection" value="5, 6"><input type="button" id="select" value="Select"><br>
<label><input type="checkbox" id="focus" checked> Focus on selection</label>
</p>
<div id="visualization"></div>
<br/>
<p>If the height of the timeline is limited some items may be vertically offscreen. This demo uses <code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that focusing on an item will
cause the timeline to scroll vertically to the item that is being focused on. You can use the buttons below select a random item either above or below the currently selected item.
</p>
<button id="prevFocus">Select Item Above</button>
<button id="nextFocus">Select Item Below</button>
<br/>
<p>If focusing on multiple items only the first item will be scrolled to. Try entering several ids and hitting <em>select</em>.</p>
<p>
Select item(s): <input type="text" id="selectionVertical" value="g1_5, g2_3"><input type="button" id="selectVertical" value="Select"><br>
</p>
<div id="vertical-visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
var container = document.getElementById('visualization');
var options = {
editable: true
};
var timeline = new vis.Timeline(container, items, options);
var selection = document.getElementById('selection');
var select = document.getElementById('select');
var focus = document.getElementById('focus');
select.onclick = function () {
var ids = selection.value.split(',').map(function (value) {
return value.trim();
});
timeline.setSelection(ids, {focus: focus.checked});
};
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
};
// Vertical scroll example
var groups = [];
var items = [];
var groupItems = {};
for (var g = 0; g < 10; g++) {
groups.push({
id: g,
content: "Group " + g
});
groupItems[g] = [];
for (var i = 0; i < 30; i++) {
items.push({
id: "g" + g + "_" + i,
content: "g" + g + "_" + i,
group: g,
start: "2014-" + (g + 1) + "-" + getRandomInt(1, 20)
});
groupItems[g].push(items[items.length - 1]);
}
}
var container2 = document.getElementById('vertical-visualization');
var options = {
editable: false,
stack: true,
height: 300,
verticalScroll: true,
groupOrder: 'id'
};
var timeline2 = new vis.Timeline(container2, items, groups, options);
var groupIndex = 0;
var itemIndex = 0;
var moveToItem = function(direction) {
itemIndex += direction;
groupIndex += direction;
if (groupIndex < 0) {
groupIndex = groups.length - 1;
} else if (groupIndex >= groups.length) {
groupIndex = 0;
}
var items = groupItems[groupIndex];
if (itemIndex < 0) {
itemIndex = items.length - 1;
} else if (itemIndex >= items.length) {
itemIndex = 0;
}
var id = items[itemIndex].id;
timeline2.setSelection(id, {focus: true});
}
var nextFocus = document.getElementById('nextFocus');
var prevFocus = document.getElementById('prevFocus');
var selectionVertical = document.getElementById('selectionVertical');
var selectVertical = document.getElementById('selectVertical');
selectVertical.onclick = function () {
var ids = selectionVertical.value.split(',').map(function (value) {
return value.trim();
});
timeline2.setSelection(ids, {focus: focus.checked});
};
nextFocus.onclick = function() {
moveToItem(1);
};
prevFocus.onclick = function() {
moveToItem(-1);
};
// Set the initial focus
setTimeout(function() {
moveToItem(0);
}, 500);
</script>
</body>
</html>

50
web/bower_components/vis/examples/timeline/items/backgroundAreas.html vendored Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Background areas</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</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>
<div id="visualization"></div>
<script>
var items = new vis.DataSet([
{id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
{id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

57
web/bower_components/vis/examples/timeline/items/backgroundAreasWithGroups.html vendored Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Background areas with groups</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This example demonstrates the item type "background" when using groups.</p>
<ul>
<li>Background items having a group are displayed in that group</li>
<li>Background items without a group are spread over the whole timeline</li>
<li>Background items with a non-existing group are not displayed</li>
</ul>
<div id="visualization"></div>
<script>
var items = new vis.DataSet([
{id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background', group: 1},
{id: 'B', content: 'Period B', start: '2014-01-23', end: '2014-01-26', type: 'background', group: 2},
{id: 'C', content: 'Period C', start: '2014-01-27', end: '2014-02-03', type: 'background'}, // no group
{id: 'D', content: 'Period D', start: '2014-01-14', end: '2014-01-20', type: 'background', group: 'non-existing'},
{id: 1, content: 'item 1<br>start', start: '2014-01-30', group: 1},
{id: 2, content: 'item 2', start: '2014-01-18', group: 1},
{id: 3, content: 'item 3', start: '2014-01-21', group: 2},
{id: 4, content: 'item 4', start: '2014-01-17', end: '2014-01-21', group: 2},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point', group: 2},
{id: 6, content: 'item 6', start: '2014-01-25', group: 2}
]);
var groups = new vis.DataSet([
{id: 1, content: 'Group 1'},
{id: 2, content: 'Group 2'}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

130
web/bower_components/vis/examples/timeline/items/expectedVsActualTimesItems.html vendored Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | expected vs actual times items</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis-item.expected {
background-color: transparent;
border-style: dashed!important;
z-index: 0;
}
.vis-item.vis-selected {
opacity: 0.6;
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
var groups = new vis.DataSet([
{
id: 'group1',
content:'group1'
}
]);
// add items to the DataSet
items.add([
// group 1
{
id: 'background1',
start: '2014-01-21',
end: '2014-01-22',
type: 'background',
group:'group1'
},
// subgroup 1
{
id: 1,
content: 'item 1 (expected time)',
className: 'expected',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group:'group1',
subgroup:'sg_1'
},
{
id: 2,
content: 'item 1 (actual time)',
start: '2014-01-24T12:00:00',
end: '2014-01-27T12:00:00',
group:'group1',
subgroup:'sg_1'
},
// subgroup 2
{
id: 3,
content: 'item 2 (expected time)',
className: 'expected',
start: '2014-01-13T12:00:00',
end: '2014-01-16T12:00:00',
group:'group1',
subgroup:'sg_2'
},
{
id: 4,
content: 'item 2 (actual time)',
start: '2014-01-14T12:00:00',
end: '2014-01-17T12:00:00',
group:'group1',
subgroup:'sg_2'
},
// subgroup 3
{
id: 5,
content: 'item 3 (expected time)',
className: 'expected',
start: '2014-01-17T12:00:00',
end: '2014-01-19T12:00:00',
group:'group1',
subgroup:'sg_3'
},
{
id: 6,
content: 'item 3 (actual time)',
start: '2014-01-17T12:00:00',
end: '2014-01-18T12:00:00',
group:'group1',
subgroup:'sg_3'
}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true,
stack: false,
stackSubgroups: false
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

75
web/bower_components/vis/examples/timeline/items/htmlContents.html vendored Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | HTML data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
Load HTML contents in the Timeline in various ways.
</p>
<div id="visualization"></div>
<script>
// create a couple of HTML items in various ways
var item1 = document.createElement('div');
item1.appendChild(document.createTextNode('item 1'));
var item2 = document.createElement('div');
item2.innerHTML = '<span>item 2</span>';
var item3 = document.createElement('div');
var span3 = document.createElement('span');
span3.className = 'large';
span3.appendChild(document.createTextNode('item 3'));
item3.appendChild(span3);
var item4 = 'item <span class="large">4</span>';
var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
img5.src = '../resources/img/attachment-icon.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);
var item6 = 'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">';
var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';
// create data and a Timeline
var container = document.getElementById('visualization');
var items = new vis.DataSet([
{id: 1, content: item1, start: '2013-04-20'},
{id: 2, content: item2, start: '2013-04-14'},
{id: 3, content: item3, start: '2013-04-18'},
{id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: item5, start: '2013-04-25'},
{id: 6, content: item6, start: '2013-04-27'},
{id: 7, content: item7, start: '2013-04-21'}
]);
var options = {};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

82
web/bower_components/vis/examples/timeline/items/itemOrdering.html vendored Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Item ordering</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
p {
max-width: 800px;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Item ordering</h1>
<p>
By default, the items displayed on the Timeline are unordered. They are
stacked in the order that they where loaded. This means that way items are
stacked can change while moving and zooming the Timeline.
</p>
<p>
To display and stack the items in a controlled order, you can provide a
custom sorting function via the configuration option <code>order</code>.
</p>
<p>
WARNING: Custom ordering is only suitable for small amounts of items (up to a few
hundred), as the Timeline has to render <i>all</i> items once on load to
determine their width and height.
</p>
<p>
<label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label>
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet();
var date = vis.moment('2015-03-02');
for (var i = 0; i < 100; i++) {
date.add(Math.round(Math.random() * 2), 'hour');
items.add({
id: i,
content: 'Item ' + i,
start: date.clone(),
end: date.clone().add(4, 'hour')
});
}
function customOrder (a, b) {
// order by id
return a.id - b.id;
}
// Configuration for the Timeline
var options = {
order: customOrder,
editable: true,
margin: {item: 0}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var ordering = document.getElementById('ordering');
ordering.onchange = function () {
timeline.setOptions({
order: ordering.checked ? customOrder: null
});
};
</script>
</body>
</html>

60
web/bower_components/vis/examples/timeline/items/pointItems.html vendored Executable file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Point items</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>World War II timeline</h1>
<p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p>
<div id="mytimeline" style="background-color: #FAFAFA;"></div>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{start: new Date(1939,8,1), content: 'German Invasion of Poland'},
{start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'},
{start: new Date(1940,7,13), content: 'Battle of Britain - RAF vs. Luftwaffe'},
{start: new Date(1941,1,14), content: 'German Afrika Korps arrives in North Africa'},
{start: new Date(1941,5,22), content: 'Third Reich Invades the USSR'},
{start: new Date(1941,11,7), content: 'Japanese Attack Pearl Harbor'},
{start: new Date(1942,5,4), content: 'Battle of Midway in the Pacific'},
{start: new Date(1942,10,8), content: 'Americans open Second Front in North Africa'},
{start: new Date(1942,10,19),content: 'Battle of Stalingrad in Russia'},
{start: new Date(1943,6,5), content: 'Battle of Kursk - Last German Offensive on Eastern Front'},
{start: new Date(1943,6,10), content: 'Anglo-American Landings in Sicily'},
{start: new Date(1944,2,8), content: 'Japanese Attack British India'},
{start: new Date(1944,5,6), content: 'D-Day - Allied Invasion of Normandy'},
{start: new Date(1944,5,22), content: 'Destruction of Army Group Center in Byelorussia'},
{start: new Date(1944,7,1), content: 'The Warsaw Uprising in Occupied Poland'},
{start: new Date(1944,9,20), content: 'American Liberation of the Philippines'},
{start: new Date(1944,11,16),content: 'Battle of the Bulge in the Ardennes'},
{start: new Date(1944,1,19), content: 'American Landings on Iwo Jima'},
{start: new Date(1945,3,1), content: 'US Invasion of Okinawa'},
{start: new Date(1945,3,16), content: 'Battle of Berlin - End of the Third Reich'}
]);
var options = {
// Set global item type. Type can also be specified for items individually
// Available types: 'box' (default), 'point', 'range'
type: 'point',
showMajorLabels: false
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

54
web/bower_components/vis/examples/timeline/items/rangeOverflowItem.html vendored Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Range overflow</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.vis-item .vis-item-overflow {
overflow: visible;
}
</style>
</head>
<body>
<p>
In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
</p>
<pre>
.vis-item .vis-item-overflow {
overflow: visible;
}
</pre>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1 with overflowing text content', start: '2014-04-20', end: '2014-04-26'},
{id: 2, content: 'item 2 with overflowing text content', start: '2014-05-14', end: '2014-05-18'},
{id: 3, content: 'item 3 with overflowing text content', start: '2014-06-18', end: '2014-06-22'},
{id: 4, content: 'item 4 with overflowing text content', start: '2014-06-16', end: '2014-06-17'},
{id: 5, content: 'item 5 with overflowing text content', start: '2014-06-25', end: '2014-06-27'},
{id: 6, content: 'item 6 with overflowing text content', start: '2014-09-27', end: '2014-09-28'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

99
web/bower_components/vis/examples/timeline/items/tooltip.html vendored Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Tooltips</title>
<style type="text/css">
body, html {
font-family: sans-serif;
max-width: 800px;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tooltips</h1>
<p>
Setting the tooltip in various ways.
</p>
<div id="tooltips"></div>
<p>
The example below has the tooltip follow the mouse.
</p>
<div id="tooltips-follow"></div>
<p>
The example below has the tooltip overflow set to 'cap'. Compare this to the one above,
to see how they differ. For the best results, move the cursor to the top right,
where the tool-tip is going to overflow out of the timeline.
</p>
<div id="tooltips-cap"></div>
<p>
Disable item tooltips.
</p>
<div id="tooltips-hide"></div>
<script type="text/javascript">
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'Item 1', start: '2016-01-01', end: '2016-01-02',
title: 'Normal text'},
{id: 2, content: 'Item 2', start: '2016-01-02', title: '<b>Bold</b>'},
{id: 3, content: 'Item 3', start: '2016-01-03', type: 'point',
title: '<span style="color: red">Red</span> text'},
{id: 4, content: '<h1>HTML</h1> Item', start: '2016-01-03', end: '2016-01-04',
title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'}
]);
// Options
var options = {};
// Timeline object
var timelineTooltips = new vis.Timeline(document.getElementById('tooltips'),
items, options
);
// Follow options
var follow_options = {
tooltip: {
followMouse: true
}
};
var timelineFollow = new vis.Timeline(document.getElementById('tooltips-follow'),
items, follow_options);
// Cap options
var cap_options = {
tooltip: {
followMouse: true,
overflowMethod: 'cap'
}
}
var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'),
items, cap_options);
// Hide options
var hide_options = {
showTooltips: false
}
var timelineHide = new vis.Timeline(document.getElementById('tooltips-hide'),
items, hide_options);
</script>
</body>
</html>

67
web/bower_components/vis/examples/timeline/items/visibleFrameTemplateContent.html vendored Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Dynamic Content</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.progress-wrapper {
background: white;
width: 100%;
height: 18px;
text-align: center;
position: relative;
overflow: hidden;
}
.progress {
height: 100%;
width: 60%;
position: absolute;
left: 0px;
top: 0px;
background: #63ed63;
}
.progress-label {
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div id="myTimeline"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('myTimeline');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
{id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
{id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
{id: 4, content: 'item 4 with visibleFrameTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFrameTemplate: '<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>'
}
]);
// Configuration for the Timeline
var options = {
visibleFrameTemplate: function(item) {
if (item.visibleFrameTemplate) {
return item.visibleFrameTemplate;
}
var percentage = item.value * 100 + '%';
return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

89
web/bower_components/vis/examples/timeline/other/customTimeBars.html vendored Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Show current and custom time bars</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
The Timeline has functions to add multiple custom time bars which can be dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID">
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar">
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID">
</p>
<p>
<code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p><br>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
// Set first time bar
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate, 't1');
document.getElementById('add').onclick = function () {
try {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
document.getElementById('barId').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById('remove').onclick = function () {
try {
timeline.removeCustomTime(document.getElementById('barIndex').value);
document.getElementById('barIndex').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};
timeline.on('timechange', function (properties) {
document.getElementById('timechangeBar').innerHTML = properties.id;
document.getElementById('timechangeEvent').innerHTML = properties.time;
});
timeline.on('timechanged', function (properties) {
document.getElementById('timechangedBar').innerHTML = properties.id;
document.getElementById('timechangedEvent').innerHTML = properties.time;
});
</script>
</body>
</html>

95
web/bower_components/vis/examples/timeline/other/customTimeBarsTooltip.html vendored Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Show current and custom time bars</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<p>
The Timeline has functions to add multiple custom time bars which can be dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID">
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar">
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID">
</p>
<p>
<code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p><br>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
// Set first time bar
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate, 't1');
timeline.setCustomTimeTitle(function(time){
return "I'm t1!";
}, "t1");
document.getElementById('add').onclick = function () {
try {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
timeline.setCustomTimeTitle(function(time){
return "I'm "+barId+"!";
}, barId);
document.getElementById('barId').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById('remove').onclick = function () {
try {
timeline.removeCustomTime(document.getElementById('barIndex').value);
document.getElementById('barIndex').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};
timeline.on('timechange', function (properties) {
document.getElementById('timechangeBar').innerHTML = properties.id;
document.getElementById('timechangeEvent').innerHTML = properties.time;
});
timeline.on('timechanged', function (properties) {
document.getElementById('timechangedBar').innerHTML = properties.id;
document.getElementById('timechangedEvent').innerHTML = properties.time;
});
</script>
</body>
</html>

44
web/bower_components/vis/examples/timeline/other/dataAttributes.html vendored Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
In this example all items get an HTML attribute attached: each item gets an attribute <code>data-id</code>, and items 1 and 6 have an additional attribute <code>data-tooltip</code>.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point', tooltip: 'This is item 6'}
]);
// Configuration for the Timeline
var options = {dataAttributes: ['tooltip', 'id']};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

44
web/bower_components/vis/examples/timeline/other/dataAttributesAll.html vendored Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
In this example all items get HTML attributes attached: each item gets <code>data-?</code> attributes for each field defined on the JS object.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point', tooltip: 'This is item 6'}
]);
// Configuration for the Timeline
var options = {dataAttributes: 'all'};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

191
web/bower_components/vis/examples/timeline/other/drag&drop.html vendored Normal file
View File

@@ -0,0 +1,191 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>Timeline | Drag & Drop</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
li.item {
list-style: none;
width: 150px;
color: #1A1A1A;
background-color: #D5DDF6;
border: 1px solid #97B0F8;
border-radius: 2px;
margin-bottom: 5px;
padding: 5px 12px;
}
li.item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}
li.object-item {
list-style: none;
width: 150px;
color: #1A1A1A;
background-color: #D5DDF6;
border: 1px solid #97B0F8;
border-radius: 2px;
margin-bottom: 5px;
padding: 5px 12px;
}
li.object-item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}
.items-panel {
display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<h1>Timeline Drag & Drop Example</h1>
<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p>
<div id="mytimeline" ></div>
<div class='items-panel'>
<div class='side'>
<h3>Items:</h3>
<ul class="items">
<li draggable="true" class="item">
item 1 - box
</li>
<li draggable="true" class="item">
item 2 - point
</li>
<li draggable="true" class="item">
item 3 - range
</li>
<li draggable="true" class="item">
item 3 - range - fixed times - <br>
(start: now, end: now + 10 min)
</li>
</ul>
</div>
<div class='side'>
<h3>Object with "target:'item'":</h3>
<li draggable="true" class="object-item">
object with target:'item'
</li>
</div>
</div>
<script>
// create groups
var numberOfGroups = 3;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck&nbsp;' + i
})
}
// create items
var numberOfItems = 10;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
}
}
// specify options
var options = {
stack: true,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
orientation: 'top',
onDropObjectOnItem: function(objectData, item, callback) {
if (!item) { return; }
alert('dropped object with content: "' + objectData.content + '" to item: "' + item.content + '"');
}
};
// create a Timeline
var container = document.getElementById('mytimeline');
timeline1 = new vis.Timeline(container, items, groups, options);
function handleDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = 'move';
var itemType = event.target.innerHTML.split('-')[1].trim();
var item = {
id: new Date(),
type: itemType,
content: event.target.innerHTML.split('-')[0].trim()
};
var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
if (isFixedTimes) {
item.start = new Date();
item.end = new Date(1000*60*10 + (new Date()).valueOf());
}
event.dataTransfer.setData("text", JSON.stringify(item));
}
function handleObjectItemDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = 'move';
var objectItem = {
content: 'objectItemData',
target: 'item'
};
event.dataTransfer.setData("text", JSON.stringify(objectItem));
}
var items = document.querySelectorAll('.items .item');
var objectItems = document.querySelectorAll('.object-item');
for (var i = items.length - 1; i >= 0; i--) {
var item = items[i];
item.addEventListener('dragstart', handleDragStart.bind(this), false);
}
for (var i = objectItems.length - 1; i >= 0; i--) {
var objectItem = objectItems[i];
objectItem.addEventListener('dragstart', handleObjectItemDragStart.bind(this), false);
}
</script>
</body>
</html>

141
web/bower_components/vis/examples/timeline/other/functionLabelFormats.html vendored Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom function label format example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrate using custom function label formats.
</p>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, 'hours');
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
format: {
minorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case 'millisecond':
divider = 1;
break;
case 'second':
divider = 1000;
break;
case 'minute':
divider = 1000 * 60;
break;
case 'hour':
divider = 1000 * 60 * 60;
break;
case 'day':
divider = 1000 * 60 * 60 * 24;
break;
case 'weekday':
divider = 1000 * 60 * 60 * 24 * 7;
break;
case 'month':
divider = 1000 * 60 * 60 * 24 * 30;
break;
case 'year':
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return (Math.round(ago * step / divider)) + " " + scale + "s ago"
},
majorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case 'millisecond':
divider = 1;
break;
case 'second':
divider = 1000;
break;
case 'minute':
divider = 1000 * 60;
break;
case 'hour':
divider = 1000 * 60 * 60;
break;
case 'day':
divider = 1000 * 60 * 60 * 24;
break;
case 'weekday':
divider = 1000 * 60 * 60 * 24 * 7;
break;
case 'month':
divider = 1000 * 60 * 60 * 24 * 30;
break;
case 'year':
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return (Math.round(ago * step / divider)) + " " + scale + "s ago"
}
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

110
web/bower_components/vis/examples/timeline/other/groupsPerformance.html vendored Normal file
View File

@@ -0,0 +1,110 @@
<html>
<head>
<title>Timeline | A lot of grouped data</title>
<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 onresize="/*timeline.checkResize();*/">
<h1>Timeline grouping performance</h1>
<p>
Choose a number of items:
<a href="?count=100">100</a>,
<a href="?count=1000">1000</a>,
<a href="?count=10000">10000</a>,
<a href="?count=100000">100000</a>
<p>
<p>
Current number of items: <span id='count'>100</span>
</p>
<div id="mytimeline"></div>
<script>
/**
* Get URL parameter
* http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name ) {
name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
// get selected item count from url parameter
var count = (Number(gup('count')) || 1000);
// create groups
var groups = new vis.DataSet([
{id: 1, content: 'Truck&nbsp;1'},
{id: 2, content: 'Truck&nbsp;2'},
{id: 3, content: 'Truck&nbsp;3'},
{id: 4, content: 'Truck&nbsp;4'}
]);
// create items
var items = new vis.DataSet();
var order = 1;
var truck = 1;
for (var j = 0; j < 4; j++) {
var date = new Date();
for (var i = 0; i < count/4; i++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: false,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: 'top'
};
// create a Timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
document.getElementById('count').innerHTML = count;
</script>
</body>
</html>

53
web/bower_components/vis/examples/timeline/other/hidingPeriods.html vendored Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Hiding periods</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>
It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-19'},
{id: 2, content: 'item 2', start: '2014-04-21'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-24'},
{id: 5, content: 'item 5', start: '2014-04-26 12:00:00'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);
// Configuration for the Timeline
var options = {
hiddenDates: [
{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'},
{start: '2013-10-26 00:00:00', end: '2013-10-28 00:00:00', repeat: 'weekly'}, // daily weekly monthly yearly
{start: '2013-03-29 20:00:00', end: '2013-03-30 09:00:00', repeat: 'daily'} // daily weekly monthly yearly
],
start: '2014-04-17',
end: '2014-05-01',
height: '200px',
editable: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime("2014-04-18 13:00:00");
</script>
</body>
</html>

77
web/bower_components/vis/examples/timeline/other/horizontalScroll.html vendored Normal file
View File

@@ -0,0 +1,77 @@
<html>
<head>
<title>Timeline | Horizontal Scroll Option</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Timeline horizontal scroll option</h1>
<div id="mytimeline"></div>
<script>
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck&nbsp;' + i
})
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
}
}
// specify options
var options = {
stack: true,
horizontalScroll: true,
zoomKey: 'ctrlKey',
maxHeight: 400,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: 'top'
};
// create a Timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

68
web/bower_components/vis/examples/timeline/other/localization.html vendored Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Localization</title>
<style type="text/css">
body, html, select {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="it">it</option>
<option value="nl">nl</option>
<option value="de">de</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var DAY = 24 * 60 * 60 * 1000;
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
{id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
]);
// Configuration for the Timeline
var options = {
showCurrentTime: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime(new Date());
timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>

65
web/bower_components/vis/examples/timeline/other/performance.html vendored Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | performance</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
Test the performance with a lot of items. The Timeline can load hundreds of thousands of items, but the performance of rendering them in the browser is limited. Rendering typically runs smooth for up to a few hundreds of items at once (you can set a <code>zoomMax</code> to prevent the user from zooming out too far).
</p>
<p>
<label for="count">Number of items</label>
<input id="count" value="10000">
<input id="draw" type="button" value="draw">
</p>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({
type: {start: 'ISODate', end: 'ISODate' }
});
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
var start = now;
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: start + 24*3600*1000 * i}); // much much faster than now.clone add days
}
items.clear();
items.add(newData);
}
createData();
document.getElementById('draw').onclick = createData;
var container = document.getElementById('visualization');
var options = {
editable: true,
start: now.clone().add(-3, 'days'),
end: now.clone().add(11, 'days'),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

17
web/bower_components/vis/examples/timeline/other/requirejs/requirejs_example.html vendored Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline require.js demo</title>
<script data-main="scripts/main" src="scripts/require.js"></script>
<link href="../../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example shows how to load the vis.js library using require.js.
</p>
<div id="visualization"></div>
</body>
</html>

19
web/bower_components/vis/examples/timeline/other/requirejs/scripts/main.js vendored Normal file
View File

@@ -0,0 +1,19 @@
require.config({
paths: {
vis: '../../../../../dist/vis'
}
});
require(['vis'], function (vis) {
var container = document.getElementById('visualization');
var data = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
]);
var options = {};
var timeline = new vis.Timeline(container, data, options);
});

35
web/bower_components/vis/examples/timeline/other/requirejs/scripts/require.js vendored Normal file
View File

@@ -0,0 +1,35 @@
/*
RequireJS 2.1.2 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
Available via the MIT or new BSD license.
see: http://github.com/jrburke/requirejs for details
*/
var requirejs,require,define;
(function(Y){function H(b){return"[object Function]"===L.call(b)}function I(b){return"[object Array]"===L.call(b)}function x(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function M(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function r(b,c){return da.call(b,c)}function i(b,c){return r(b,c)&&b[c]}function E(b,c){for(var d in b)if(r(b,d)&&c(b[d],d))break}function Q(b,c,d,i){c&&E(c,function(c,h){if(d||!r(b,h))i&&"string"!==typeof c?(b[h]||(b[h]={}),Q(b[h],
c,d,i)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function Z(b){if(!b)return b;var c=Y;x(b.split("."),function(b){c=c[b]});return c}function J(b,c,d,i){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=i;d&&(c.originalError=d);return c}function ea(b){function c(a,g,v){var e,n,b,c,d,j,f,h=g&&g.split("/");e=h;var l=m.map,k=l&&l["*"];if(a&&"."===a.charAt(0))if(g){e=i(m.pkgs,g)?h=[g]:h.slice(0,h.length-1);g=a=e.concat(a.split("/"));
for(e=0;g[e];e+=1)if(n=g[e],"."===n)g.splice(e,1),e-=1;else if(".."===n)if(1===e&&(".."===g[2]||".."===g[0]))break;else 0<e&&(g.splice(e-1,2),e-=2);e=i(m.pkgs,g=a[0]);a=a.join("/");e&&a===g+"/"+e.main&&(a=g)}else 0===a.indexOf("./")&&(a=a.substring(2));if(v&&(h||k)&&l){g=a.split("/");for(e=g.length;0<e;e-=1){b=g.slice(0,e).join("/");if(h)for(n=h.length;0<n;n-=1)if(v=i(l,h.slice(0,n).join("/")))if(v=i(v,b)){c=v;d=e;break}if(c)break;!j&&(k&&i(k,b))&&(j=i(k,b),f=e)}!c&&j&&(c=j,d=f);c&&(g.splice(0,d,
c),a=g.join("/"))}return a}function d(a){z&&x(document.getElementsByTagName("script"),function(g){if(g.getAttribute("data-requiremodule")===a&&g.getAttribute("data-requirecontext")===j.contextName)return g.parentNode.removeChild(g),!0})}function y(a){var g=i(m.paths,a);if(g&&I(g)&&1<g.length)return d(a),g.shift(),j.require.undef(a),j.require([a]),!0}function f(a){var g,b=a?a.indexOf("!"):-1;-1<b&&(g=a.substring(0,b),a=a.substring(b+1,a.length));return[g,a]}function h(a,g,b,e){var n,u,d=null,h=g?g.name:
null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(L+=1));a=f(a);d=a[0];a=a[1];d&&(d=c(d,h,e),u=i(p,d));a&&(d?k=u&&u.normalize?u.normalize(a,function(a){return c(a,h,e)}):c(a,h,e):(k=c(a,h,e),a=f(k),d=a[0],k=a[1],b=!0,n=j.nameToUrl(k)));b=d&&!u&&!b?"_unnormalized"+(M+=1):"";return{prefix:d,name:k,parentMap:g,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(d?d+"!"+k:k)+b}}function q(a){var g=a.id,b=i(k,g);b||(b=k[g]=new j.Module(a));return b}function s(a,g,b){var e=a.id,n=i(k,e);if(r(p,e)&&(!n||n.defineEmitComplete))"defined"===
g&&b(p[e]);else q(a).on(g,b)}function C(a,g){var b=a.requireModules,e=!1;if(g)g(a);else if(x(b,function(g){if(g=i(k,g))g.error=a,g.events.error&&(e=!0,g.emit("error",a))}),!e)l.onError(a)}function w(){R.length&&(fa.apply(F,[F.length-1,0].concat(R)),R=[])}function A(a,g,b){var e=a.map.id;a.error?a.emit("error",a.error):(g[e]=!0,x(a.depMaps,function(e,c){var d=e.id,h=i(k,d);h&&(!a.depMatched[c]&&!b[d])&&(i(g,d)?(a.defineDep(c,p[d]),a.check()):A(h,g,b))}),b[e]=!0)}function B(){var a,g,b,e,n=(b=1E3*m.waitSeconds)&&
j.startTime+b<(new Date).getTime(),c=[],h=[],f=!1,l=!0;if(!T){T=!0;E(k,function(b){a=b.map;g=a.id;if(b.enabled&&(a.isDefine||h.push(b),!b.error))if(!b.inited&&n)y(g)?f=e=!0:(c.push(g),d(g));else if(!b.inited&&(b.fetched&&a.isDefine)&&(f=!0,!a.prefix))return l=!1});if(n&&c.length)return b=J("timeout","Load timeout for modules: "+c,null,c),b.contextName=j.contextName,C(b);l&&x(h,function(a){A(a,{},{})});if((!n||e)&&f)if((z||$)&&!U)U=setTimeout(function(){U=0;B()},50);T=!1}}function D(a){r(p,a[0])||
q(h(a[0],null,!0)).init(a[1],a[2])}function G(a){var a=a.currentTarget||a.srcElement,b=j.onScriptLoad;a.detachEvent&&!V?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=j.onScriptError;(!a.detachEvent||V)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function K(){var a;for(w();F.length;){a=F.shift();if(null===a[0])return C(J("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));D(a)}}var T,W,j,N,U,m={waitSeconds:7,
baseUrl:"./",paths:{},pkgs:{},shim:{},map:{},config:{}},k={},X={},F=[],p={},S={},L=1,M=1;N={require:function(a){return a.require?a.require:a.require=j.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m.config&&i(m.config,a.map.id)||{}},exports:p[a.map.id]}}};W=function(a){this.events=i(X,a.id)||{};this.map=a;this.shim=
i(m.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};W.prototype={init:function(a,b,c,e){e=e||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;this.ignore=e.ignore;e.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=
b)},fetch:function(){if(!this.fetched){this.fetched=!0;j.startTime=(new Date).getTime();var a=this.map;if(this.shim)j.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=this.map.url;S[a]||(S[a]=!0,j.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var e=this.exports,n=this.factory;
if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(H(n)){if(this.events.error)try{e=j.execCb(c,n,b,e)}catch(d){a=d}else e=j.execCb(c,n,b,e);this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==this.exports?e=b.exports:void 0===e&&this.usingExports&&(e=this.exports));if(a)return a.requireMap=this.map,a.requireModules=[this.map.id],a.requireType="define",C(this.error=a)}else e=n;this.exports=e;if(this.map.isDefine&&
!this.ignore&&(p[c]=e,l.onResourceLoad))l.onResourceLoad(j,this.map,this.depMaps);delete k[c];this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=h(a.prefix);this.depMaps.push(d);s(d,"defined",t(this,function(e){var n,d;d=this.map.name;var v=this.map.parentMap?this.map.parentMap.name:null,f=j.makeRequire(a.parentMap,{enableBuildCallback:!0,
skipMap:!0});if(this.map.unnormalized){if(e.normalize&&(d=e.normalize(d,function(a){return c(a,v,!0)})||""),e=h(a.prefix+"!"+d,this.map.parentMap),s(e,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=i(k,e.id)){this.depMaps.push(e);if(this.events.error)d.on("error",t(this,function(a){this.emit("error",a)}));d.enable()}}else n=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),n.error=t(this,function(a){this.inited=!0;this.error=
a;a.requireModules=[b];E(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&delete k[a.map.id]});C(a)}),n.fromText=t(this,function(e,c){var d=a.name,u=h(d),v=O;c&&(e=c);v&&(O=!1);q(u);r(m.config,b)&&(m.config[d]=m.config[b]);try{l.exec(e)}catch(k){throw Error("fromText eval for "+d+" failed: "+k);}v&&(O=!0);this.depMaps.push(u);j.completeLoad(d);f([d],n)}),e.load(a.name,f,n,m)}));j.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){this.enabling=this.enabled=!0;x(this.depMaps,t(this,function(a,
b){var c,e;if("string"===typeof a){a=h(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=i(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",t(this,function(a){this.defineDep(b,a);this.check()}));this.errback&&s(a,"error",this.errback)}c=a.id;e=k[c];!r(N,c)&&(e&&!e.enabled)&&j.enable(a,this)}));E(this.pluginMaps,t(this,function(a){var b=i(k,a.id);b&&!b.enabled&&j.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=
this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){x(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};j={config:m,contextName:b,registry:k,defined:p,urlFetched:S,defQueue:F,Module:W,makeModuleMap:h,nextTick:l.nextTick,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=m.pkgs,c=m.shim,e={paths:!0,config:!0,map:!0};E(a,function(a,b){e[b]?"map"===b?Q(m[b],a,!0,!0):Q(m[b],a,!0):m[b]=a});a.shim&&(E(a.shim,function(a,
b){I(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=j.makeShimExports(a);c[b]=a}),m.shim=c);a.packages&&(x(a.packages,function(a){a="string"===typeof a?{name:a}:a;b[a.name]={name:a.name,location:a.location||a.name,main:(a.main||"main").replace(ga,"").replace(aa,"")}}),m.pkgs=b);E(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=h(b))});if(a.deps||a.callback)j.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(Y,arguments));
return b||a.exports&&Z(a.exports)}},makeRequire:function(a,d){function f(e,c,u){var i,m;d.enableBuildCallback&&(c&&H(c))&&(c.__requireJsBuild=!0);if("string"===typeof e){if(H(c))return C(J("requireargs","Invalid require call"),u);if(a&&r(N,e))return N[e](k[a.id]);if(l.get)return l.get(j,e,a);i=h(e,a,!1,!0);i=i.id;return!r(p,i)?C(J("notloaded",'Module name "'+i+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[i]}K();j.nextTick(function(){K();m=q(h(null,a));m.skipMap=d.skipMap;
m.init(e,c,u,{enabled:!0});B()});return f}d=d||{};Q(f,{isBrowser:z,toUrl:function(b){var d=b.lastIndexOf("."),g=null;-1!==d&&(g=b.substring(d,b.length),b=b.substring(0,d));return j.nameToUrl(c(b,a&&a.id,!0),g)},defined:function(b){return r(p,h(b,a,!1,!0).id)},specified:function(b){b=h(b,a,!1,!0).id;return r(p,b)||r(k,b)}});a||(f.undef=function(b){w();var c=h(b,a,!0),d=i(k,b);delete p[b];delete S[c.url];delete X[b];d&&(d.events.defined&&(X[b]=d.events),delete k[b])});return f},enable:function(a){i(k,
a.id)&&q(a).enable()},completeLoad:function(a){var b,c,d=i(m.shim,a)||{},h=d.exports;for(w();F.length;){c=F.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);D(c)}c=i(k,a);if(!b&&!r(p,a)&&c&&!c.inited){if(m.enforceDefine&&(!h||!Z(h)))return y(a)?void 0:C(J("nodefine","No define call for "+a,null,[a]));D([a,d.deps||[],d.exportsFn])}B()},nameToUrl:function(a,b){var c,d,h,f,j,k;if(l.jsExtRegExp.test(a))f=a+(b||"");else{c=m.paths;d=m.pkgs;f=a.split("/");for(j=f.length;0<j;j-=1)if(k=
f.slice(0,j).join("/"),h=i(d,k),k=i(c,k)){I(k)&&(k=k[0]);f.splice(0,j,k);break}else if(h){c=a===h.name?h.location+"/"+h.main:h.location;f.splice(0,j,c);break}f=f.join("/");f+=b||(/\?/.test(f)?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":m.baseUrl)+f}return m.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+m.urlArgs):f},load:function(a,b){l.load(j,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ha.test((a.currentTarget||a.srcElement).readyState))P=
null,a=G(a),j.completeLoad(a.id)},onScriptError:function(a){var b=G(a);if(!y(b.id))return C(J("scripterror","Script error",a,[b.id]))}};j.require=j.makeRequire();return j}var l,w,A,D,s,G,P,K,ba,ca,ia=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ja=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,aa=/\.js$/,ga=/^\.\//;w=Object.prototype;var L=w.toString,da=w.hasOwnProperty,fa=Array.prototype.splice,z=!!("undefined"!==typeof window&&navigator&&document),$=!z&&"undefined"!==typeof importScripts,ha=z&&
"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,V="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),B={},q={},R=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(H(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!H(require)&&(q=require,require=void 0);l=requirejs=function(b,c,d,y){var f,h="_";!I(b)&&"string"!==typeof b&&(f=b,I(c)?(b=c,c=d,d=y):b=[]);f&&f.context&&(h=f.context);(y=i(B,h))||(y=B[h]=l.s.newContext(h));
f&&y.configure(f);return y.require(b,c,d)};l.config=function(b){return l(b)};l.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=l);l.version="2.1.2";l.jsExtRegExp=/^\/|:|\?|\.js$/;l.isBrowser=z;w=l.s={contexts:B,newContext:ea};l({});x(["toUrl","undef","defined","specified"],function(b){l[b]=function(){var c=B._;return c.require[b].apply(c,arguments)}});if(z&&(A=w.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))A=
w.head=D.parentNode;l.onError=function(b){throw b;};l.load=function(b,c,d){var i=b&&b.config||{},f;if(z)return f=i.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),f.type=i.scriptType||"text/javascript",f.charset="utf-8",f.async=!0,f.setAttribute("data-requirecontext",b.contextName),f.setAttribute("data-requiremodule",c),f.attachEvent&&!(f.attachEvent.toString&&0>f.attachEvent.toString().indexOf("[native code"))&&!V?(O=!0,f.attachEvent("onreadystatechange",
b.onScriptLoad)):(f.addEventListener("load",b.onScriptLoad,!1),f.addEventListener("error",b.onScriptError,!1)),f.src=d,K=f,D?A.insertBefore(f,D):A.appendChild(f),K=null,f;$&&(importScripts(d),b.completeLoad(c))};z&&M(document.getElementsByTagName("script"),function(b){A||(A=b.parentNode);if(s=b.getAttribute("data-main"))return q.baseUrl||(G=s.split("/"),ba=G.pop(),ca=G.length?G.join("/")+"/":"./",q.baseUrl=ca,s=ba),s=s.replace(aa,""),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var i,
f;"string"!==typeof b&&(d=c,c=b,b=null);I(c)||(d=c,c=[]);!c.length&&H(d)&&d.length&&(d.toString().replace(ia,"").replace(ja,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c));if(O){if(!(i=K))P&&"interactive"===P.readyState||M(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),i=P;i&&(b||(b=i.getAttribute("data-requiremodule")),f=B[i.getAttribute("data-requirecontext")])}(f?f.defQueue:R).push([b,c,d])};define.amd=
{jQuery:!0};l.exec=function(b){return eval(b)};l(q)}})(this);

51
web/bower_components/vis/examples/timeline/other/rtl.html vendored Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | RTL example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Timeline RTL support</h1>
<h2>Using <code>dir = "rtl"</code> in any parent node</h2>
<div id="timeline1" dir="rtl"></div>
<h2>Using <code>options.rtl = true</code></h2>
<div id="timeline2"></div>
<script>
var items = new vis.DataSet();
// add items to the DataSet
items.add([
{id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'},
{id: 2, content: '2014-01-18', start: '2014-01-18'},
{id: 3, content: '2014-01-21', start: '2014-01-21'},
{id: 4, content: '2014-01-19 - 2014-01-24', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: '2014-01-28', start: '2014-01-28', type:'point'},
{id: 6, content: '2014-01-26', start: '2014-01-26'}
]);
var container1 = document.getElementById('timeline1');
var container2 = document.getElementById('timeline2');
var options = {
start: '2014-01-10',
end: '2014-02-10',
height: '300px',
};
var options1 = jQuery.extend(options, {})
var timeline1 = new vis.Timeline(container1, items, options1);
var options2 = jQuery.extend(options, {rtl: true})
var timeline2 = new vis.Timeline(container2, items, options2);
</script>
</body>
</html>

66
web/bower_components/vis/examples/timeline/other/stressPerformance.html vendored Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<!--
This example is used mainly for developers to test performance issues by controlling number of groups,
number of items and their types.
-->
<html>
<head>
<title>Timeline | Stress Performance example</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
</body>
<script>
var now = moment();
var groupCount = 20;
var itemCount = 400;
// create a data set with groups
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({
id: g,
content: "group " + g
});
}
var types = ['point', 'range', 'box', 'background']
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, 'days');
var end = start.clone().add(Math.random() * 30, 'days');
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
group: group,
content: '' + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
width: '100%',
showCurrentTime: false,
stack: true,
selectable: true,
editable: true,
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</html>

80
web/bower_components/vis/examples/timeline/other/timezone.html vendored Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Time zone</title>
<style type="text/css">
body, html {
font-family: sans-serif;
max-width: 800px;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Time zone</h1>
<p>
The following demo shows how to display items in local time (default), in UTC, or for a specific time zone offset. By configuring your own <code>moment</code> constructor, you can display items in the time zone that you want. All timelines have the same start and end date.
</p>
<h2>Local time</h2>
<div id="local"></div>
<h2>UTC</h2>
<div id="utc"></div>
<h2>UTC +08:00</h2>
<div id="plus8"></div>
<script type="text/javascript">
// Create a DataSet (allows two way data-binding)
var today = vis.moment(vis.moment.utc().format('YYYY-MM-DDT00:00:00.000Z'));
var start = today.clone();
var end = today.clone().add(2, 'day');
var customTime = today.clone().add(28, 'hour');
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: today.clone().add(8, 'hour')},
{id: 2, content: 'item 2', start: today.clone().add(16, 'hour')},
{id: 3, content: 'item 3', start: today.clone().add(32, 'hour')}
]);
// Create a timeline displaying in local time (default)
var timelineLocal = new vis.Timeline(document.getElementById('local'), items, {
editable: true,
start: start,
end: end
});
timelineLocal.addCustomTime(customTime);
// Create a timeline displaying in UTC
var timelineUTC = new vis.Timeline(document.getElementById('utc'), items, {
editable: true,
start: start,
end: end,
moment: function (date) {
return vis.moment(date).utc();
}
});
timelineUTC.addCustomTime(customTime);
// Create a timeline displaying in UTC +08:00
var timelinePlus8 = new vis.Timeline(document.getElementById('plus8'), items, {
editable: true,
start: start,
end: end,
moment: function (date) {
return vis.moment(date).utcOffset('+08:00');
}
});
timelinePlus8.addCustomTime(customTime);
</script>
</body>
</html>

125
web/bower_components/vis/examples/timeline/other/usingReact.html vendored Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>React Components in templates</title>
</head>
<body>
<div id='root'></div>
<!--
For ease of use, we are including the React, ReactDOM and Babel CDN
builds to make getting started as fast as possible.
In production, you'll want to instead look at using something
like Gulp, Grunt or WebPack (my personal recommendation)
to compile JSX into JavaScript. Also, check out:
http://facebook.github.io/react/docs/tooling-integration.html
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<!--
This is where you link to your React code. Can be .js or .jsx
extension, doesn't really matter.
-->
<script type="text/babel">
var timeline;
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck ' + i
})
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
}
}
var GroupTemplate = React.createClass({
render: function() {
var { group } = this.props;
return <div>
<label>{group.content}</label>
</div>
}
})
var ItemTemplate = React.createClass({
render: function() {
var { item } = this.props;
return <div>
<label>{item.content}</label>
</div>
}
})
// specify options
var options = {
orientation: 'top',
maxHeight: 400,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
template: function (item, element) {
if (!item) { return }
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element);
},
groupTemplate: function (group, element) {
if (!group) { return }
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element);
}
}
var VisTimeline = React.createClass({
componentDidMount: function() {
return initTimeline();
},
render: function() {
return <div>
<h1>Vis timline with React</h1>
<h2>Using react components for items and group templates</h2>
<div id="mytimeline"></div>
</div>
}
});
function initTimeline() {
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, items, groups, options);
}
ReactDOM.render(<VisTimeline />, document.getElementById('root'));
</script>
</body>
</html>

90
web/bower_components/vis/examples/timeline/other/verticalScroll.html vendored Normal file
View File

@@ -0,0 +1,90 @@
<html>
<head>
<title>Timeline | Vertical Scroll Option</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Timeline vertical scroll option</h1>
<h2>With <code>
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>
<div id="mytimeline1"></div>
<h2>With <code>
horizontalScroll: true,
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>
<div id="mytimeline2"></div>
<script>
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck&nbsp;' + i
})
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
var orderIndex = order + itemsPerGroup * truck
items.add({
id: orderIndex,
group: truck,
start: start,
end: end,
content: 'Order ' + orderIndex
});
}
}
// specify options
var options = {
stack: true,
verticalScroll: true,
zoomKey: 'ctrlKey',
maxHeight: 200,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
};
// create a Timeline
options1 = jQuery.extend(options, {});
var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, groups, options1);
options2 = jQuery.extend(options, {horizontalScroll: true});
var container2 = document.getElementById('mytimeline2');
timeline2 = new vis.Timeline(container2, items, groups, options2);
</script>
</body>
</html>

34
web/bower_components/vis/examples/timeline/resources/data/basic.json vendored Normal file
View File

@@ -0,0 +1,34 @@
[
{
"id": 1,
"content": "item 1",
"start": "2014-04-20"
},
{
"id": 2,
"content": "item 2",
"start": "2014-04-14"
},
{
"id": 3,
"content": "item 3",
"start": "2014-04-18"
},
{
"id": 4,
"content": "item 4",
"start": "2014-04-16",
"end": "2014-04-19"
},
{
"id": 5,
"content": "item 5",
"start": "2014-04-25"
},
{
"id": 6,
"content": "item 6",
"start": "2014-04-27",
"type": "point"
}
]

152
web/bower_components/vis/examples/timeline/resources/data/wk2014.json vendored Normal file
View File

@@ -0,0 +1,152 @@
[
{
"player1": "Brazil",
"abbr1": "br",
"score1": "1 (3)",
"player2": "Chile",
"abbr2": "cl",
"score2": "1 (2)",
"description": "round of 16",
"start": "2014-06-28T13:00"
},
{
"player1": "Colombia",
"abbr1": "co",
"score1": 2,
"player2": "Uruguay",
"abbr2": "uy",
"score2": 0,
"description": "round of 16",
"start": "2014-06-28T17:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": 2,
"player2": "Mexico",
"abbr2": "mx",
"score2": 1,
"description": "round of 16",
"start": "2014-06-29T13:00"
},
{
"player1": "Costa Rica",
"abbr1": "cr",
"score1": "1 (5)",
"player2": "Greece",
"abbr2": "gr",
"score2": "1 (3)",
"description": "round of 16",
"start": "2014-06-29T17:00"
},
{
"player1": "France",
"abbr1": "fr",
"score1": 2,
"player2": "Nigeria",
"abbr2": "ng",
"score2": 0,
"description": "round of 16",
"start": "2014-06-30T13:00"
},
{
"player1": "Germany",
"abbr1": "de",
"score1": 2,
"player2": "Algeria",
"abbr2": "dz",
"score2": 1,
"description": "round of 16",
"start": "2014-06-30T17:00"
},
{
"player1": "Argentina",
"abbr1": "ar",
"score1": 1,
"player2": "Switzerland",
"abbr2": "ch",
"score2": 0,
"description": "round of 16",
"start": "2014-07-01T13:00"
},
{
"player1": "Belgium",
"abbr1": "be",
"score1": 2,
"player2": "USA",
"abbr2": "us",
"score2": 1,
"description": "round of 16",
"start": "2014-07-01T17:00"
},
{
"player1": "France",
"abbr1": "fr",
"score1": 0,
"player2": "Germany",
"abbr2": "de",
"score2": 1,
"description": "quarter-finals",
"start": "2014-07-04T13:00"
},
{
"player1": "Brazil",
"abbr1": "br",
"score1": 2,
"player2": "Colombia",
"abbr2": "co",
"score2": 1,
"description": "quarter-finals",
"start": "2014-07-04T17:00"
},
{
"player1": "Argentina",
"abbr1": "ar",
"score1": 1,
"player2": "Belgium",
"abbr2": "be",
"score2": 0,
"description": "quarter-finals",
"start": "2014-07-05T13:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": "0 (4)",
"player2": "Costa Rica",
"abbr2": "cr",
"score2": "0 (3)",
"description": "quarter-finals",
"start": "2014-07-05T17:00"
},
{
"player1": "Brazil",
"abbr1": "br",
"score1": 1,
"player2": "Germany",
"abbr2": "de",
"score2": 7,
"description": "semi-finals",
"start": "2014-07-08T17:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": "0 (2)",
"player2": "Argentina",
"abbr2": "ar",
"score2": "0 (4)",
"description": "semi-finals",
"start": "2014-07-09T17:00"
},
{
"player1": "Germany",
"score1": 1,
"abbr1": "de",
"player2": "Argentina",
"abbr2": "ar",
"score2": 0,
"description": "final",
"start": "2014-07-13T16:00"
}
]

BIN
web/bower_components/vis/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
web/bower_components/vis/examples/timeline/resources/img/attachment-icon.png vendored Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
web/bower_components/vis/examples/timeline/resources/img/blog-post-edit-icon.png vendored Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
web/bower_components/vis/examples/timeline/resources/img/comments-icon.png vendored Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
web/bower_components/vis/examples/timeline/resources/img/community-users-icon.png vendored Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

17
web/bower_components/vis/examples/timeline/resources/img/license.txt vendored Normal file
View File

@@ -0,0 +1,17 @@
IMAGE LICENSES
REFRESH CL
http://www.iconarchive.com/category/system/refresh-cl-icons-by-tpdkdesign.net.html
License: Free for non-commercial use.
http://www.iconarchive.com/icons/tpdkdesign.net/refresh-cl/readme_eng.txt
AESTHETICA 2
http://www.iconarchive.com/category/application/aesthetica-2-icons-by-dryicons.html
License:
DryIcons Terms of Use
http://dryicons.com/terms/

36
web/bower_components/vis/examples/timeline/resources/img/license_aesthetica-2.txt vendored Normal file
View File

@@ -0,0 +1,36 @@
Aesthetica Icon Set, version 2.0
http://dryicons.com/free-icons/preview/aesthetica-version-2/
Information
----------------------
This icon set contains 181 quality icons in the following formats:
Transparent PNG
16 x 16 px
24 x 24 px
32 x 32 px
48 x 48 px
128 x 128 px
Licensing
----------------------
The usage of DryIcons' work (icons, icon sets and graphics) is limited to the terms of the "Free License" and "Commercial License" use.
The DryIcons Free License means that you can use our icons, icon sets and graphics in any publicly accesible web site, web application or any form of presentation publicly accessible through the World Wide Web only according to the DryIcons Free License Terms and Conditions:
* You must put a back link with credits to http://dryicons.com on every page where DryIcons' Works are used (example: Icons by http://dryicons.com);
* You must include the correct back link to DryIcons website, which is: http://dryicons.com;
* You must place the link on an easy-to-see, recognizable place, so there is no confusion about the Original Author of the Works (DryIcons);
* When copying, or paraphrasing description text (or title) on one of the Works, you must make sure there are no spelling mistakes;
* Do not try to take credit or imply in any way that you and not DryIcons is the Original Author of the Works (icons, icon sets and graphics).
For a more detailed look at our Free License Agreement, please follow the link: http://dryicons.com/terms/#free-license
The DryIcons Commercial License means that you can use our Free Icon Sets and Free Graphics without being obligated to put a back link to DryIcons.com for a certain fee. After you complete yourpayment transaction DryIcons grants you a Commercial License.

26
web/bower_components/vis/examples/timeline/resources/img/license_refresh-cl.txt vendored Normal file
View File

@@ -0,0 +1,26 @@
RefreshCL Icon Pack by TPDK ©2005 www.tpdkdesign.net
All rights reserved.
version 1.0 2005/18/11
Terms of use
Theses icons are copyrighted, and for personal use only.
Until now, COMMERCIAL USE is strictly forbidden.
You cannot (non-exhaustive list) :
- Use my icons in commercial website
- Use my icons in a professional website layout
- Sell or distribute those icons
For any other use, such as :
- using in non-commercial website
- using icon in free software under GPL licence
you need my authorization to use them. If you have my permission, you need to credit me in your terms and put a link to my website.
I would not be responsible fo any damage you may encounter while using this product.
For any question or request about the pack, please send me an email to tpdk@tpdkdesign.net.
Special thanks to customxp's & crystalxp's teams and members for help and support ;)
http://crystalxp.net
http://customxp.net
http://pngfactory.net
visit my deviantart webpage : http://tpdkcasimir.deviantart.com/

BIN
web/bower_components/vis/examples/timeline/resources/img/mail-icon.png vendored Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
web/bower_components/vis/examples/timeline/resources/img/notes-edit-icon.png vendored Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
web/bower_components/vis/examples/timeline/resources/img/product-icon.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
web/bower_components/vis/examples/timeline/resources/img/truck-icon.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

76
web/bower_components/vis/examples/timeline/styling/axisOrientation.html vendored Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Orientation</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
There are a number of orientation options for the time axis and the items.
</p>
<p>
<label for="axis-orientation">Axis orientation</label>
<select id="axis-orientation">
<option value="both">both</option>
<option value="bottom" selected>bottom</option>
<option value="none">none</option>
<option value="top">top</option>
</select>
</p>
<p>
<label for="item-orientation">Item orientation</label>
<select id="item-orientation">
<option value="bottom" selected>bottom</option>
<option value="top">top</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);
// Configuration for the Timeline
var options = {
height: 250 // px
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var axisOrientation = document.getElementById('axis-orientation');
axisOrientation.onchange = function () {
timeline.setOptions({ orientation: {axis: this.value} });
};
var itemOrientation = document.getElementById('item-orientation');
itemOrientation.onchange = function () {
timeline.setOptions({ orientation: {item: this.value} });
};
</script>
</body>
</html>

100
web/bower_components/vis/examples/timeline/styling/customCss.html vendored Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom styling</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family: purisa, 'comic sans', cursive;
}
.vis-timeline {
border: 2px solid purple;
font-family: purisa, 'comic sans', cursive;
font-size: 12pt;
background: #ffecea;
}
.vis-item {
border-color: #F991A3;
background-color: pink;
font-size: 15pt;
color: purple;
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: green;
background-color: lightgreen;
}
.vis-time-axis .vis-text {
color: purple;
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: pink;
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #F991A3;
}
</style>
</head>
<body>
<p>
The style of the Timeline can be fully customized via CSS:
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{start: new Date(2010,7,23), content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,24,16,0,0), content: 'Report'},
{start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'},
{start: new Date(2010,7,28), content: '<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'},
{start: new Date(2010,7,29), content: '<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
{start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'}
]);
var options = {
editable: true,
margin: {
item: 20,
axis: 40
}
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

54
web/bower_components/vis/examples/timeline/styling/gridStyling.html vendored Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Grid styling</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: white;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'custom', start: '2015-01-01'},
{id: 2, content: 'styling', start: '2016-01-01'},
{id: 3, content: 'of', start: '2017-01-01'},
{id: 4, content: 'background', start: '2018-01-01'},
{id: 5, content: 'grid', start: '2019-01-01'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

117
web/bower_components/vis/examples/timeline/styling/itemClassNames.html vendored Executable file
View File

@@ -0,0 +1,117 @@
<html>
<head>
<title>Timeline | Item class names</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, input {
font: 12pt verdana;
}
/* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */
.vis-item.green {
background-color: greenyellow;
border-color: green;
}
/* create a custom sized dot at the bottom of the red item */
.vis-item.red {
background-color: red;
border-color: darkred;
color: white;
font-family: monospace;
box-shadow: 0 0 10px gray;
}
.vis-item.vis-dot.red {
border-radius: 10px;
border-width: 10px;
}
.vis-item.vis-line.red {
border-width: 5px;
}
.vis-item.vis-box.red {
border-radius: 0;
border-width: 2px;
font-size: 24pt;
font-weight: bold;
}
.vis-item.orange {
background-color: gold;
border-color: orange;
}
.vis-item.vis-selected.orange {
/* custom colors for selected orange items */
background-color: orange;
border-color: orangered;
}
.vis-item.magenta {
background-color: magenta;
border-color: purple;
color: white;
}
/* our custom classes overrule the styles for selected events,
so lets define a new style for the selected events */
.vis-item.vis-selected {
background-color: white;
border-color: black;
color: black;
box-shadow: 0 0 10px gray;
}
</style>
</head>
<body>
<p>This page demonstrates the Timeline with custom css classes for individual items.</p>
<div id="mytimeline"></div>
<script type="text/javascript">
// create data
// note that months are zero-based in the JavaScript Date object
var data = new vis.DataSet([
{
'start': new Date(2012,7,19),
'content': 'default'
},
{
'start': new Date(2012,7,23),
'content': 'green',
'className': 'green'
},
{
'start': new Date(2012,7,29),
'content': 'red',
'className': 'red'
},
{
'start': new Date(2012,7,27),
'end': new Date(2012,8,1),
'content': 'orange',
'className': 'orange'
},
{
'start': new Date(2012,8,2),
'content': 'magenta',
'className': 'magenta'
}
]);
// specify options
var options = {
editable: true
};
// create the timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

251
web/bower_components/vis/examples/timeline/styling/itemTemplates.html vendored Normal file
View File

@@ -0,0 +1,251 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Templates</title>
<!-- load handlebars for templating, and create a template -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="item-template" type="text/x-handlebars-template">
<table class="score">
<tr>
<td colspan="3" class="description">{{description}}</td>
</tr>
<tr>
<td>{{player1}}</td>
<th>{{score1}} - {{score2}}</th>
<td>{{player2}}</td>
</tr>
<tr>
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
<th></th>
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
</tr>
</table>
</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, html {
font-family: sans-serif;
font-size: 10pt;
}
.vis.timeline .item {
border-color: #acacac;
background-color: #efefef;
box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
}
table .description {
font-style: italic;
}
#visualization {
position: relative;
overflow: hidden;
}
.logo {
position: absolute;
right: 10px;
top: 10px;
}
.logo img {
width: 120px;
}
</style>
</head>
<body>
<h1>WK 2014</h1>
<p style="max-width: 600px;">
This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
</p>
<div id="visualization">
<div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
</div>
<script type="text/javascript">
// create a handlebars template
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
// round of 16
{
player1: 'Brazil',
abbr1: 'br',
score1: '1 (3)',
player2: 'Chile',
abbr2: 'cl',
score2: '1 (2)',
description: 'round of 16',
start: '2014-06-28T13:00:00'
},
{
player1: 'Colombia',
abbr1: 'co',
score1: 2,
player2: 'Uruguay',
abbr2: 'uy',
score2: 0,
description: 'round of 16',
start: '2014-06-28T17:00:00'
},
{
player1: 'Netherlands',
abbr1: 'nl',
score1: 2,
player2: 'Mexico',
abbr2: 'mx',
score2: 1,
description: 'round of 16',
start: '2014-06-29T13:00:00'
},
{
player1: 'Costa Rica',
abbr1: 'cr',
score1: '1 (5)',
player2: 'Greece',
abbr2: 'gr',
score2: '1 (3)',
description: 'round of 16',
start: '2014-06-29T17:00:00'
},
{
player1: 'France',
abbr1: 'fr',
score1: 2,
player2: 'Nigeria',
abbr2: 'ng',
score2: 0,
description: 'round of 16',
start: '2014-06-30T13:00:00'
},
{
player1: 'Germany',
abbr1: 'de',
score1: 2,
player2: 'Algeria',
abbr2: 'dz',
score2: 1,
description: 'round of 16',
start: '2014-06-30T17:00:00'
},
{
player1: 'Argentina',
abbr1: 'ar',
score1: 1,
player2: 'Switzerland',
abbr2: 'ch',
score2: 0,
description: 'round of 16',
start: '2014-07-01T13:00:00'
},
{
player1: 'Belgium',
abbr1: 'be',
score1: 2,
player2: 'USA',
abbr2: 'us',
score2: 1,
description: 'round of 16',
start: '2014-07-01T17:00:00'
},
// quarter-finals
{
player1: 'France',
abbr1: 'fr',
score1: 0,
player2: 'Germany',
abbr2: 'de',
score2: 1,
description: 'quarter-finals',
start: '2014-07-04T13:00:00'
},
{
player1: 'Brazil',
abbr1: 'br',
score1: 2,
player2: 'Colombia',
abbr2: 'co',
score2: 1,
description: 'quarter-finals',
start: '2014-07-04T17:00:00'
},
{
player1: 'Argentina',
abbr1: 'ar',
score1: 1,
player2: 'Belgium',
abbr2: 'be',
score2: 0,
description: 'quarter-finals',
start: '2014-07-05T13:00:00'
},
{
player1: 'Netherlands',
abbr1: 'nl',
score1: '0 (4)',
player2: 'Costa Rica',
abbr2: 'cr',
score2: '0 (3)',
description: 'quarter-finals',
start: '2014-07-05T17:00:00'
},
// semi-finals
{
player1: 'Brazil',
abbr1: 'br',
score1: 1,
player2: 'Germany',
abbr2: 'de',
score2: 7,
description: 'semi-finals',
start: '2014-07-08T17:00:00'
},
{
player1: 'Netherlands',
abbr1: 'nl',
score1: '0 (2)',
player2: 'Argentina',
abbr2: 'ar',
score2: '0 (4)',
description: 'semi-finals',
start: '2014-07-09T17:00:00'
},
// final
{
player1: 'Germany',
score1: 1,
abbr1: 'de',
player2: 'Argentina',
abbr2: 'ar',
score2: 0,
description: 'final',
start: '2014-07-13T16:00:00'
}
]);
// Configuration for the Timeline
var options = {
// specify a template for the items
template: template
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

111
web/bower_components/vis/examples/timeline/styling/weekStyling.html vendored Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Grid styling</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.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, html {
font-family: sans-serif;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}
</style>
</head>
<body>
<p>
Week numbers are calculated based on locales. For this to properly work, the timeline must be loaded with a version
of moment.js including locales.</p>
<p>To set a locale for the timeline, specify the option
<code>{locale: STRING}</code>.</p>
<p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p>
<p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js
objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week
numbers will be calculated according to the US week calendar numbering scheme.</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en">en</option>
<option value="it">it</option>
<option value="nl">nl</option>
<option value="de" selected>de</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var itemCount = 26;
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// just a group for the effects
var groups = new vis.DataSet();
groups.add([{id: 1, content: "ISO Weeks"}, {id: 2, content: "US Weeks"}]);
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet();
// create a localized moment object based on the current date
var USdate = moment().locale('en').hours(0).minutes(0).seconds(0).milliseconds(0);
// use the locale-aware weekday function to move to the begin of the current week
USdate.weekday(0);
// Iterate and just add a week to use it again in the next iteration
for (var i = 0; i < itemCount; i++) {
var USweekNumber = USdate.format('w');
var USweekStart = USdate.format();
var USweekEnd = USdate.add(1, 'week').format();
items.add({
id: i,
group: 2,
content: 'US week ' + USweekNumber,
start: USweekStart,
end: USweekEnd
});
}
// create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system
var DEdate = moment().locale('de').hours(0).minutes(0).seconds(0).milliseconds(0);
DEdate.weekday(0);
for (var j = 0; j < itemCount; j++) {
var DEweekNumber = DEdate.format('w');
var DEweekStart = DEdate.format();
var DEweekEnd = DEdate.add(1, 'week').format();
items.add({
id: itemCount + j,
group: 1,
content: 'ISO week ' + DEweekNumber,
start: DEweekStart,
end: DEweekEnd
});
}
// Configuration for the Timeline
var options = {timeAxis: {scale: 'week', step: 1}, locale: 'de'};
// Create a Timeline
var timeline = new vis.Timeline(container, items, groups, options);
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>