making it work but it's sort of a mess
This commit is contained in:
Arjun Patel
@@ -0,0 +1,38 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTVisTimelineBasic = function () {
|
||||
// Private functions
|
||||
var exampleBasic = function () {
|
||||
// DOM element where the Timeline will be attached
|
||||
var container = document.getElementById("kt_docs_vistimeline_basic");
|
||||
|
||||
// Create a DataSet (allows two way data-binding)
|
||||
var items = new vis.DataSet([
|
||||
{ id: 1, content: "item 1", start: "2021-04-20" },
|
||||
{ id: 2, content: "item 2", start: "2021-04-14" },
|
||||
{ id: 3, content: "item 3", start: "2021-04-18" },
|
||||
{ id: 4, content: "item 4", start: "2021-04-16", end: "2021-04-19" },
|
||||
{ id: 5, content: "item 5", start: "2021-04-25" },
|
||||
{ id: 6, content: "item 6", start: "2021-04-27", type: "point" },
|
||||
]);
|
||||
|
||||
// Configuration for the Timeline
|
||||
var options = {};
|
||||
|
||||
// Create a Timeline
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleBasic();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTVisTimelineBasic.init();
|
||||
});
|
||||
@@ -0,0 +1,101 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTVisTimelineGroup = function () {
|
||||
// Private functions
|
||||
var exampleGroup = function () {
|
||||
var now = Date.now();
|
||||
|
||||
var options = {
|
||||
stack: true,
|
||||
maxHeight: 640,
|
||||
horizontalScroll: false,
|
||||
verticalScroll: true,
|
||||
zoomKey: "ctrlKey",
|
||||
start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
|
||||
end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
|
||||
orientation: {
|
||||
axis: "both",
|
||||
item: "top",
|
||||
},
|
||||
};
|
||||
var groups = new vis.DataSet();
|
||||
var items = new vis.DataSet();
|
||||
|
||||
var count = 300;
|
||||
|
||||
for (var i = 0; i < count; i++) {
|
||||
var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));
|
||||
var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));
|
||||
|
||||
groups.add({
|
||||
id: i,
|
||||
content: "Task " + i,
|
||||
order: i,
|
||||
});
|
||||
|
||||
items.add({
|
||||
id: i,
|
||||
group: i,
|
||||
start: start,
|
||||
end: end,
|
||||
type: "range",
|
||||
content: "Item " + i,
|
||||
});
|
||||
}
|
||||
|
||||
// create a Timeline
|
||||
var container = document.getElementById("kt_docs_vistimeline_group");
|
||||
var timeline = new vis.Timeline(container, items, groups, options);
|
||||
//timeline = new vis.Timeline(container, null, options);
|
||||
timeline.setGroups(groups);
|
||||
timeline.setItems(items);
|
||||
|
||||
function debounce(func, wait = 100) {
|
||||
let timeout;
|
||||
return function (...args) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
}, wait);
|
||||
};
|
||||
}
|
||||
|
||||
let groupFocus = (e) => {
|
||||
let vGroups = timeline.getVisibleGroups();
|
||||
let vItems = vGroups.reduce((res, groupId) => {
|
||||
let group = timeline.itemSet.groups[groupId];
|
||||
if (group.items) {
|
||||
res = res.concat(Object.keys(group.items));
|
||||
}
|
||||
return res;
|
||||
}, []);
|
||||
timeline.focus(vItems);
|
||||
};
|
||||
timeline.on("scroll", debounce(groupFocus, 200));
|
||||
// Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't
|
||||
// this.timeline.on("scrollSide", debounce(groupFocus, 200))
|
||||
|
||||
// Handle button click
|
||||
const button = document.getElementById('kt_docs_vistimeline_group_button');
|
||||
button.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
var a = timeline.getVisibleGroups();
|
||||
document.getElementById("visibleGroupsContainer").innerHTML = "";
|
||||
document.getElementById("visibleGroupsContainer").innerHTML += a;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleGroup();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTVisTimelineGroup.init();
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTVisTimelineInteraction = function () {
|
||||
// Private functions
|
||||
var exampleInteraction = function () {
|
||||
// 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: "2021-01-23" },
|
||||
{ id: 2, content: "item 2", start: "2021-01-18" },
|
||||
{ id: 3, content: "item 3", start: "2021-01-21" },
|
||||
{ id: 4, content: "item 4", start: "2021-01-19", end: "2021-01-24" },
|
||||
{ id: 5, content: "item 5", start: "2021-01-28", type: "point" },
|
||||
{ id: 6, content: "item 6", start: "2021-01-26" },
|
||||
]);
|
||||
|
||||
var container = document.getElementById("kt_docs_vistimeline_interaction");
|
||||
var options = {
|
||||
start: "2021-01-10",
|
||||
end: "2021-02-10",
|
||||
editable: true,
|
||||
showCurrentTime: true,
|
||||
};
|
||||
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
|
||||
// Handle buttons
|
||||
document.getElementById("window1").onclick = function () {
|
||||
timeline.setWindow("2021-01-01", "2021-04-01");
|
||||
};
|
||||
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("moveTo").onclick = function () {
|
||||
timeline.moveTo("2021-02-01");
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleInteraction();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTVisTimelineInteraction.init();
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
"use strict";
|
||||
|
||||
|
||||
// Class definition
|
||||
var KTVisTimelineStyle = function () {
|
||||
// Private functions
|
||||
var exampleStyle = function () {
|
||||
var container = document.getElementById("kt_docs_vistimeline_style");
|
||||
|
||||
// Generate HTML content
|
||||
const getContent = (title, img) => {
|
||||
const item = document.createElement('div');
|
||||
const name = document.createElement('div');
|
||||
const nameClasses = ['fw-bolder', 'mb-2'];
|
||||
name.classList.add(...nameClasses);
|
||||
name.innerHTML = title;
|
||||
|
||||
const image = document.createElement('img');
|
||||
image.setAttribute('src', img);
|
||||
|
||||
const symbol = document.createElement('div');
|
||||
const symbolClasses = ['symbol', 'symbol-circle', 'symbol-30'];
|
||||
symbol.classList.add(...symbolClasses);
|
||||
symbol.appendChild(image);
|
||||
|
||||
item.appendChild(name);
|
||||
item.appendChild(symbol);
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
// note that months are zero-based in the JavaScript Date object
|
||||
var items = new vis.DataSet([
|
||||
{
|
||||
start: new Date(2010, 7, 23),
|
||||
content: getContent('Conversation', hostUrl + '/media/avatars/150-1.jpg')
|
||||
},
|
||||
{
|
||||
start: new Date(2010, 7, 23, 23, 0, 0),
|
||||
content: getContent('Mail from boss', hostUrl + '/media/avatars/150-2.jpg')
|
||||
},
|
||||
{ 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: getContent('Memo', hostUrl + '/media/avatars/150-3.jpg')
|
||||
},
|
||||
{
|
||||
start: new Date(2010, 7, 29),
|
||||
content: getContent('Phone call', hostUrl + '/media/avatars/150-4.jpg')
|
||||
},
|
||||
{
|
||||
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: getContent('Report', hostUrl + '/media/avatars/150-5.jpg')
|
||||
},
|
||||
]);
|
||||
|
||||
var options = {
|
||||
editable: true,
|
||||
margin: {
|
||||
item: 20,
|
||||
axis: 40,
|
||||
},
|
||||
};
|
||||
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleStyle();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTVisTimelineStyle.init();
|
||||
});
|
||||
@@ -0,0 +1,230 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTVisTimelineTemplate = function () {
|
||||
// Template data --- handlebars is used as the template for this demo. For more info: https://handlebarsjs.com/
|
||||
const data = `<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="https://flagpedia.net/data/flags/mini/{{abbr1}}.png"
|
||||
width="31"
|
||||
height="20"
|
||||
alt="{{abbr1}}"
|
||||
/>
|
||||
</td>
|
||||
<th></th>
|
||||
<td>
|
||||
<img
|
||||
src="https://flagpedia.net/data/flags/mini/{{abbr2}}.png"
|
||||
width="31"
|
||||
height="20"
|
||||
alt="{{abbr2}}"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>`;
|
||||
|
||||
// Private functions
|
||||
var exampleTemplate = function () {
|
||||
// create a handlebars template --- For more info: https://handlebarsjs.com/
|
||||
var template = Handlebars.compile(data);
|
||||
|
||||
// DOM element where the Timeline will be attached
|
||||
var container = document.getElementById("kt_docs_vistimeline_template");
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleTemplate();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTVisTimelineTemplate.init();
|
||||
});
|
||||
Reference in New Issue
Block a user