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

Multiple customTime vertical bars

v3_develop
Oleg Yapparov 9 years ago
parent
805ef8d43e
commit
1c848f1f2d
5 changed files with 154 additions and 4 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -0
      docs/timeline.html
  2. +68
    -0
      examples/timeline/34_add_custom_timebar.html
  3. +1
    -1
      examples/timeline/index.html
  4. +60
    -0
      lib/timeline/Core.js
  5. +16
    -3
      lib/timeline/component/CustomTime.js

+ 9
- 0
docs/timeline.html View File

@ -854,6 +854,13 @@ var options = {
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>addCustomTime(time)</td>
<td>Number</td>
<td>
Add new vertical bar representing custom time. Each new line is assigned a unique ID and can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Returns ID of the newly created bar. Only applicable when the option showCustomTime is true.
</td>
</tr>
<tr> <tr>
<td>clear([what])</td> <td>clear([what])</td>
<td>none</td> <td>none</td>
@ -1130,6 +1137,7 @@ timeline.off('select', onSelect);
</td> </td>
<td> <td>
<ul> <ul>
<li><code>id</code> (Number): Vertical bar ID.</li>
<li><code>time</code> (Date): the current time.</li> <li><code>time</code> (Date): the current time.</li>
</ul> </ul>
</td> </td>
@ -1142,6 +1150,7 @@ timeline.off('select', onSelect);
</td> </td>
<td> <td>
<ul> <ul>
<li><code>id</code> (Number): Vertical bar ID.</li>
<li><code>time</code> (Date): the current time.</li> <li><code>time</code> (Date): the current time.</li>
</ul> </ul>
</td> </td>

+ 68
- 0
examples/timeline/34_add_custom_timebar.html View File

@ -0,0 +1,68 @@
<!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.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
<input type="button" id="add" value="Add custom vertical bar" />
<span id="addCustomTime"></span>
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar" />
<input type="text" id="barIndex" value="0" />
</p>
<p>
<code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span> event: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span> event: <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,
showCustomTime: 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);
document.getElementById('add').onclick = function () {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate);
};
document.getElementById('remove').onclick = function () {
var index = document.getElementById('barIndex');
timeline.removeCustomTime(parseInt(index.value));
};
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>

+ 1
- 1
examples/timeline/index.html View File

@ -44,7 +44,7 @@
<p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p> <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
<p><a href="32_grid_styling.html">32_grid_styling.html</a></p> <p><a href="32_grid_styling.html">32_grid_styling.html</a></p>
<p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p> <p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p>
<p><a href="34_add_custom_timebar.html">34_add_custom_timebar.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
</div> </div>

+ 60
- 0
lib/timeline/Core.js View File

@ -7,6 +7,7 @@ var Range = require('./Range');
var ItemSet = require('./component/ItemSet'); var ItemSet = require('./component/ItemSet');
var Activator = require('../shared/Activator'); var Activator = require('../shared/Activator');
var DateUtil = require('./DateUtil'); var DateUtil = require('./DateUtil');
var CustomTime = require('./component/CustomTime');
/** /**
* Create a timeline visualization * Create a timeline visualization
@ -302,6 +303,65 @@ Core.prototype.getCustomTime = function() {
return this.customTime.getCustomTime(); return this.customTime.getCustomTime();
}; };
/**
* Add custom vertical bar
* param {Date | String | Number} time A Date, unix timestamp, or
* ISO date string. Time point where the new bar should be placed
* @return {int} ID of the new bar
*/
Core.prototype.addCustomTime = function (time) {
if (!this.currentTime) {
throw new Error('Option showCurrentTime must be true');
}
if (time === undefined) {
throw new Error('Time parameter for the custom bar must be provided');
}
var ts = util.convert(time, 'Date').valueOf(),
customTime, id;
if ('customLastId' in this) {
id = ++this.customLastId;
} else {
id = this.customLastId = 1;
}
customTime = new CustomTime(this.body, {
showCustomTime : true,
time : ts,
id : id
});
this.components.push(customTime);
this.redraw();
return id;
};
/**
* Remove previously added custom bar
* @param {int} id ID of the custom bar to be removed
* @return {boolean} True if the bar exists and is removed, false otherwise
*/
Core.prototype.removeCustomTime = function (id) {
var me = this;
var reduceLastId = function() {
if ('customLastId' in me && me.customLastId > 0) {
me.customLastId--;
}
};
this.components.forEach(function (bar, index, components) {
if (bar instanceof CustomTime && bar.options.id === id) {
reduceLastId();
components.splice(index, 1);
bar.destroy();
}
});
};
/** /**
* Get the id's of the currently visible items. * Get the id's of the currently visible items.

+ 16
- 3
lib/timeline/component/CustomTime.js View File

@ -20,11 +20,17 @@ function CustomTime (body, options) {
this.defaultOptions = { this.defaultOptions = {
showCustomTime: false, showCustomTime: false,
locales: locales, locales: locales,
locale: 'en'
locale: 'en',
id: 0
}; };
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
this.customTime = new Date();
if (options && options.time) {
this.customTime = options.time;
} else {
this.customTime = new Date();
}
this.eventParams = {}; // stores state parameters while dragging the bar this.eventParams = {}; // stores state parameters while dragging the bar
// create the DOM // create the DOM
@ -43,7 +49,12 @@ CustomTime.prototype = new Component();
CustomTime.prototype.setOptions = function(options) { CustomTime.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
util.selectiveExtend(['showCustomTime', 'locale', 'locales', 'id'], this.options, options);
// Triggered by addCustomTimeBar, redraw to add new bar
if (this.options.id) {
this.redraw();
}
} }
}; };
@ -169,6 +180,7 @@ CustomTime.prototype._onDrag = function (event) {
// fire a timechange event // fire a timechange event
this.body.emitter.emit('timechange', { this.body.emitter.emit('timechange', {
id: this.options.id,
time: new Date(this.customTime.valueOf()) time: new Date(this.customTime.valueOf())
}); });
@ -186,6 +198,7 @@ CustomTime.prototype._onDragEnd = function (event) {
// fire a timechanged event // fire a timechanged event
this.body.emitter.emit('timechanged', { this.body.emitter.emit('timechanged', {
id: this.options.id,
time: new Date(this.customTime.valueOf()) time: new Date(this.customTime.valueOf())
}); });

Write Preview
Loading…
Cancel
Save