vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

395 lines
12 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. var Emitter = require('emitter-component');
  2. var Hammer = require('../module/hammer');
  3. var util = require('../util');
  4. var DataSet = require('../DataSet');
  5. var DataView = require('../DataView');
  6. var Range = require('./Range');
  7. var Core = require('./Core');
  8. var TimeAxis = require('./component/TimeAxis');
  9. var CurrentTime = require('./component/CurrentTime');
  10. var CustomTime = require('./component/CustomTime');
  11. var ItemSet = require('./component/ItemSet');
  12. /**
  13. * Create a timeline visualization
  14. * @param {HTMLElement} container
  15. * @param {vis.DataSet | vis.DataView | Array} [items]
  16. * @param {vis.DataSet | vis.DataView | Array} [groups]
  17. * @param {Object} [options] See Timeline.setOptions for the available options.
  18. * @constructor
  19. * @extends Core
  20. */
  21. function Timeline (container, items, groups, options) {
  22. if (!(this instanceof Timeline)) {
  23. throw new SyntaxError('Constructor must be called with the new operator');
  24. }
  25. // if the third element is options, the forth is groups (optionally);
  26. if (!(Array.isArray(groups) || groups instanceof DataSet || groups instanceof DataView) && groups instanceof Object) {
  27. var forthArgument = options;
  28. options = groups;
  29. groups = forthArgument;
  30. }
  31. var me = this;
  32. this.defaultOptions = {
  33. start: null,
  34. end: null,
  35. autoResize: true,
  36. orientation: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
  37. width: null,
  38. height: null,
  39. maxHeight: null,
  40. minHeight: null
  41. };
  42. this.options = util.deepExtend({}, this.defaultOptions);
  43. // Create the DOM, props, and emitter
  44. this._create(container);
  45. // all components listed here will be repainted automatically
  46. this.components = [];
  47. this.body = {
  48. dom: this.dom,
  49. domProps: this.props,
  50. emitter: {
  51. on: this.on.bind(this),
  52. off: this.off.bind(this),
  53. emit: this.emit.bind(this)
  54. },
  55. hiddenDates: [],
  56. util: {
  57. getScale: function () {
  58. return me.timeAxis.step.scale;
  59. },
  60. getStep: function () {
  61. return me.timeAxis.step.step;
  62. },
  63. toScreen: me._toScreen.bind(me),
  64. toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
  65. toTime: me._toTime.bind(me),
  66. toGlobalTime : me._toGlobalTime.bind(me)
  67. }
  68. };
  69. // range
  70. this.range = new Range(this.body);
  71. this.components.push(this.range);
  72. this.body.range = this.range;
  73. // time axis
  74. this.timeAxis = new TimeAxis(this.body);
  75. this.timeAxis2 = null; // used in case of orientation option 'both'
  76. this.components.push(this.timeAxis);
  77. // current time bar
  78. this.currentTime = new CurrentTime(this.body);
  79. this.components.push(this.currentTime);
  80. // item set
  81. this.itemSet = new ItemSet(this.body);
  82. this.components.push(this.itemSet);
  83. this.itemsData = null; // DataSet
  84. this.groupsData = null; // DataSet
  85. this.on('tap', function (event) {
  86. me.emit('click', me.getEventProperties(event))
  87. });
  88. this.on('doubletap', function (event) {
  89. me.emit('doubleClick', me.getEventProperties(event))
  90. });
  91. this.dom.root.oncontextmenu = function (event) {
  92. me.emit('contextmenu', me.getEventProperties(event))
  93. };
  94. // apply options
  95. if (options) {
  96. this.setOptions(options);
  97. }
  98. // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
  99. if (groups) {
  100. this.setGroups(groups);
  101. }
  102. // create itemset
  103. if (items) {
  104. this.setItems(items);
  105. }
  106. else {
  107. this._redraw();
  108. }
  109. }
  110. // Extend the functionality from Core
  111. Timeline.prototype = new Core();
  112. /**
  113. * Force a redraw. The size of all items will be recalculated.
  114. * Can be useful to manually redraw when option autoResize=false and the window
  115. * has been resized, or when the items CSS has been changed.
  116. */
  117. Timeline.prototype.redraw = function() {
  118. this.itemSet && this.itemSet.markDirty({refreshItems: true});
  119. this._redraw();
  120. };
  121. /**
  122. * Set items
  123. * @param {vis.DataSet | Array | null} items
  124. */
  125. Timeline.prototype.setItems = function(items) {
  126. var initialLoad = (this.itemsData == null);
  127. // convert to type DataSet when needed
  128. var newDataSet;
  129. if (!items) {
  130. newDataSet = null;
  131. }
  132. else if (items instanceof DataSet || items instanceof DataView) {
  133. newDataSet = items;
  134. }
  135. else {
  136. // turn an array into a dataset
  137. newDataSet = new DataSet(items, {
  138. type: {
  139. start: 'Date',
  140. end: 'Date'
  141. }
  142. });
  143. }
  144. // set items
  145. this.itemsData = newDataSet;
  146. this.itemSet && this.itemSet.setItems(newDataSet);
  147. if (initialLoad) {
  148. if (this.options.start != undefined || this.options.end != undefined) {
  149. if (this.options.start == undefined || this.options.end == undefined) {
  150. var dataRange = this._getDataRange();
  151. }
  152. var start = this.options.start != undefined ? this.options.start : dataRange.start;
  153. var end = this.options.end != undefined ? this.options.end : dataRange.end;
  154. this.setWindow(start, end, {animation: false});
  155. }
  156. else {
  157. this.fit({animation: false});
  158. }
  159. }
  160. };
  161. /**
  162. * Set groups
  163. * @param {vis.DataSet | Array} groups
  164. */
  165. Timeline.prototype.setGroups = function(groups) {
  166. // convert to type DataSet when needed
  167. var newDataSet;
  168. if (!groups) {
  169. newDataSet = null;
  170. }
  171. else if (groups instanceof DataSet || groups instanceof DataView) {
  172. newDataSet = groups;
  173. }
  174. else {
  175. // turn an array into a dataset
  176. newDataSet = new DataSet(groups);
  177. }
  178. this.groupsData = newDataSet;
  179. this.itemSet.setGroups(newDataSet);
  180. };
  181. /**
  182. * Set both items and groups in one go
  183. * @param {{items: Array | vis.DataSet, groups: Array | vis.DataSet}} data
  184. */
  185. Timeline.prototype.setData = function (data) {
  186. if (data && data.groups) {
  187. this.setGroups(data.groups);
  188. }
  189. if (data && data.items) {
  190. this.setItems(data.items);
  191. }
  192. };
  193. /**
  194. * Set selected items by their id. Replaces the current selection
  195. * Unknown id's are silently ignored.
  196. * @param {string[] | string} [ids] An array with zero or more id's of the items to be
  197. * selected. If ids is an empty array, all items will be
  198. * unselected.
  199. * @param {Object} [options] Available options:
  200. * `focus: boolean`
  201. * If true, focus will be set to the selected item(s)
  202. * `animation: boolean | {duration: number, easingFunction: string}`
  203. * If true (default), the range is animated
  204. * smoothly to the new window. An object can be
  205. * provided to specify duration and easing function.
  206. * Default duration is 500 ms, and default easing
  207. * function is 'easeInOutQuad'.
  208. * Only applicable when option focus is true.
  209. */
  210. Timeline.prototype.setSelection = function(ids, options) {
  211. this.itemSet && this.itemSet.setSelection(ids);
  212. if (options && options.focus) {
  213. this.focus(ids, options);
  214. }
  215. };
  216. /**
  217. * Get the selected items by their id
  218. * @return {Array} ids The ids of the selected items
  219. */
  220. Timeline.prototype.getSelection = function() {
  221. return this.itemSet && this.itemSet.getSelection() || [];
  222. };
  223. /**
  224. * Adjust the visible window such that the selected item (or multiple items)
  225. * are centered on screen.
  226. * @param {String | String[]} id An item id or array with item ids
  227. * @param {Object} [options] Available options:
  228. * `animation: boolean | {duration: number, easingFunction: string}`
  229. * If true (default), the range is animated
  230. * smoothly to the new window. An object can be
  231. * provided to specify duration and easing function.
  232. * Default duration is 500 ms, and default easing
  233. * function is 'easeInOutQuad'.
  234. */
  235. Timeline.prototype.focus = function(id, options) {
  236. if (!this.itemsData || id == undefined) return;
  237. var ids = Array.isArray(id) ? id : [id];
  238. // get the specified item(s)
  239. var itemsData = this.itemsData.getDataSet().get(ids, {
  240. type: {
  241. start: 'Date',
  242. end: 'Date'
  243. }
  244. });
  245. // calculate minimum start and maximum end of specified items
  246. var start = null;
  247. var end = null;
  248. itemsData.forEach(function (itemData) {
  249. var s = itemData.start.valueOf();
  250. var e = 'end' in itemData ? itemData.end.valueOf() : itemData.start.valueOf();
  251. if (start === null || s < start) {
  252. start = s;
  253. }
  254. if (end === null || e > end) {
  255. end = e;
  256. }
  257. });
  258. if (start !== null && end !== null) {
  259. // calculate the new middle and interval for the window
  260. var middle = (start + end) / 2;
  261. var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
  262. var animation = (options && options.animation !== undefined) ? options.animation : true;
  263. this.range.setRange(middle - interval / 2, middle + interval / 2, animation);
  264. }
  265. };
  266. /**
  267. * Get the data range of the item set.
  268. * @returns {{min: Date, max: Date}} range A range with a start and end Date.
  269. * When no minimum is found, min==null
  270. * When no maximum is found, max==null
  271. */
  272. Timeline.prototype.getItemRange = function() {
  273. // calculate min from start filed
  274. var dataset = this.itemsData.getDataSet(),
  275. min = null,
  276. max = null;
  277. if (dataset) {
  278. // calculate the minimum value of the field 'start'
  279. var minItem = dataset.min('start');
  280. min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
  281. // Note: we convert first to Date and then to number because else
  282. // a conversion from ISODate to Number will fail
  283. // calculate maximum value of fields 'start' and 'end'
  284. var maxStartItem = dataset.max('start');
  285. if (maxStartItem) {
  286. max = util.convert(maxStartItem.start, 'Date').valueOf();
  287. }
  288. var maxEndItem = dataset.max('end');
  289. if (maxEndItem) {
  290. if (max == null) {
  291. max = util.convert(maxEndItem.end, 'Date').valueOf();
  292. }
  293. else {
  294. max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
  295. }
  296. }
  297. }
  298. return {
  299. min: (min != null) ? new Date(min) : null,
  300. max: (max != null) ? new Date(max) : null
  301. };
  302. };
  303. /**
  304. * Generate Timeline related information from an event
  305. * @param {Event} event
  306. * @return {Object} An object with related information, like on which area
  307. * The event happened, whether clicked on an item, etc.
  308. */
  309. Timeline.prototype.getEventProperties = function (event) {
  310. var pageX = event.center ? event.center.x : event.pageX;
  311. var pageY = event.center ? event.center.y : event.pageY;
  312. var x = pageX - util.getAbsoluteLeft(this.dom.centerContainer);
  313. var y = pageY - util.getAbsoluteTop(this.dom.centerContainer);
  314. var item = this.itemSet.itemFromTarget(event);
  315. var group = this.itemSet.groupFromTarget(event);
  316. var customTime = CustomTime.customTimeFromTarget(event);
  317. var snap = this.itemSet.options.snap || null;
  318. var scale = this.body.util.getScale();
  319. var step = this.body.util.getStep();
  320. var time = this._toTime(x);
  321. var snappedTime = snap ? snap(time, scale, step) : time;
  322. var element = util.getTarget(event);
  323. var what = null;
  324. if (item != null) {what = 'item';}
  325. else if (customTime != null) {what = 'custom-time';}
  326. else if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';}
  327. else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';}
  328. else if (util.hasParent(element, this.itemSet.dom.labelSet)) {what = 'group-label';}
  329. else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';}
  330. else if (util.hasParent(element, this.dom.center)) {what = 'background';}
  331. return {
  332. event: event,
  333. item: item ? item.id : null,
  334. group: group ? group.groupId : null,
  335. what: what,
  336. pageX: pageX,
  337. pageY: pageY,
  338. x: x,
  339. y: y,
  340. time: time,
  341. snappedTime: snappedTime
  342. }
  343. };
  344. module.exports = Timeline;