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

Merge pull request #651 from aytech/develop 

Multiple customTime vertical bars
v3_develop
Alex 9 years ago
parent
ff4444b30f 9c469d02ba
commit
69576a57e2
5 changed files with 217 additions and 12 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +23
    -4
      docs/timeline.html
  2. +74
    -0
      examples/timeline/34_add_custom_timebar.html
  3. +1
    -1
      examples/timeline/index.html
  4. +103
    -4
      lib/timeline/Core.js
  5. +16
    -3
      lib/timeline/component/CustomTime.js

+ 23
- 4
docs/timeline.html View File

@ -854,6 +854,15 @@ var options = {
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>addCustomTime(time[, id])</td>
<td>Number | String</td>
<td>
Only applicable when the option showCustomTime is true.<br>
Add new vertical bar representing custom time that can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Parameter <code>id</code> can be Number or String. If <code>id</code> is provided, it will be used as ID for the new vertical bar, otherwise the ID will be auto generated.<br>
Returns ID of the newly created bar.
</td>
</tr>
<tr> <tr>
<td>clear([what])</td> <td>clear([what])</td>
<td>none</td> <td>none</td>
@ -903,9 +912,9 @@ timeline.clear({options: true}); // clear options only
</tr> </tr>
<tr> <tr>
<td>getCustomTime()</td>
<td>getCustomTime([id])</td>
<td>Date</td> <td>Date</td>
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true. If parameter <code>id</code> is provided, time of the custom time bar under that ID is returned.
</td> </td>
</tr> </tr>
@ -958,6 +967,14 @@ timeline.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>removeCustomTime(id)</td>
<td>none</td>
<td>
Remove vertical bars previously added to the timeline via <code>addCustomTime</code> method. Parameter <code>id</code> is the ID of the custom vertical bar returned by <code>addCustomTime</code> method.
</td>
</tr>
<tr> <tr>
<td>setCurrentTime(time)</td> <td>setCurrentTime(time)</td>
<td>none</td> <td>none</td>
@ -967,9 +984,9 @@ timeline.clear({options: true}); // clear options only
</tr> </tr>
<tr> <tr>
<td>setCustomTime(time)</td>
<td>setCustomTime(time [, id])</td>
<td>none</td> <td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method and can be a Number or String.
</td> </td>
</tr> </tr>
@ -1130,6 +1147,7 @@ timeline.off('select', onSelect);
</td> </td>
<td> <td>
<ul> <ul>
<li><code>id</code> (Number | String): 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 +1160,7 @@ timeline.off('select', onSelect);
</td> </td>
<td> <td>
<ul> <ul>
<li><code>id</code> (Number | String): 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>

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

@ -0,0 +1,74 @@
<!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">
<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="1" placeholder="custom bar ID">
</p>
<p>
<code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span>. Time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> bar 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,
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);
// Set first time bar
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate, 1);
document.getElementById('add').onclick = function () {
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 = '';
};
document.getElementById('remove').onclick = function () {
timeline.removeCustomTime(document.getElementById('barIndex').value);
document.getElementById('barIndex').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>

+ 103
- 4
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
@ -281,25 +282,123 @@ Core.prototype.destroy = function () {
/** /**
* Set a custom time bar * Set a custom time bar
* @param {Date} time * @param {Date} time
* @param {int} id
*/ */
Core.prototype.setCustomTime = function (time) {
Core.prototype.setCustomTime = function (time, id) {
if (!this.customTime) { if (!this.customTime) {
throw new Error('Cannot get custom time: Custom time bar is not enabled'); throw new Error('Cannot get custom time: Custom time bar is not enabled');
} }
this.customTime.setCustomTime(time);
var barId = id || 0;
this.components.forEach(function (element, index, components) {
if (element instanceof CustomTime && element.options.id === barId) {
element.setCustomTime(time);
}
});
}; };
/** /**
* Retrieve the current custom time. * Retrieve the current custom time.
* @return {Date} customTime * @return {Date} customTime
* @param {int} id
*/ */
Core.prototype.getCustomTime = function() {
Core.prototype.getCustomTime = function(id) {
if (!this.customTime) { if (!this.customTime) {
throw new Error('Cannot get custom time: Custom time bar is not enabled'); throw new Error('Cannot get custom time: Custom time bar is not enabled');
} }
return this.customTime.getCustomTime();
var barId = id || 0,
customTime = this.customTime.getCustomTime();
this.components.forEach(function (element, index, components) {
if (element instanceof CustomTime && element.options.id === barId) {
customTime = element.getCustomTime();
}
});
return customTime;
};
/**
* 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
* @param {Number | String} ID of the new bar
* @return {Number | String} ID of the new bar
*/
Core.prototype.addCustomTime = function (time, id) {
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(),
numIds, customTime, customBarId;
// All bar IDs are kept in 1 array, mixed types
// Bar with ID 0 is the default bar.
if (!this.customBarIds || this.customBarIds.constructor !== Array) {
this.customBarIds = [0];
}
// If the ID is not provided, generate one, otherwise just use it
if (id === undefined) {
numIds = this.customBarIds.filter(function (element) {
return util.isNumber(element);
});
customBarId = numIds.length > 0 ? Math.max.apply(null, numIds) + 1 : 1;
} else {
// Check for duplicates
this.customBarIds.forEach(function (element) {
if (element === id) {
throw new Error('Custom time ID already exists');
}
});
customBarId = id;
}
this.customBarIds.push(customBarId);
customTime = new CustomTime(this.body, {
showCustomTime : true,
time : ts,
id : customBarId
});
this.components.push(customTime);
this.redraw();
return customBarId;
};
/**
* 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;
this.components.forEach(function (bar, index, components) {
if (bar instanceof CustomTime && bar.options.id === id) {
// Only the lines added by the user will be removed
if (bar.options.id !== 0) {
me.customBarIds.splice(me.customBarIds.indexOf(id), 1);
components.splice(index, 1);
bar.destroy();
}
}
});
}; };

+ 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