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

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>