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.

337 lines
9.9 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. var Emitter = require('emitter-component');
  2. var Hammer = require('../module/hammer');
  3. var moment = require('../module/moment');
  4. var util = require('../util');
  5. var DataSet = require('../DataSet');
  6. var DataView = require('../DataView');
  7. var Range = require('./Range');
  8. var Core = require('./Core');
  9. var TimeAxis = require('./component/TimeAxis');
  10. var CurrentTime = require('./component/CurrentTime');
  11. var CustomTime = require('./component/CustomTime');
  12. var LineGraph = require('./component/LineGraph');
  13. var printStyle = require('../shared/Validator').printStyle;
  14. var allOptions = require('./optionsGraph2d').allOptions;
  15. var configureOptions = require('./optionsGraph2d').configureOptions;
  16. var Configurator = require('../shared/Configurator').default;
  17. var Validator = require('../shared/Validator').default;
  18. /**
  19. * Create a timeline visualization
  20. * @param {HTMLElement} container
  21. * @param {vis.DataSet | Array} [items]
  22. * @param {Object} [options] See Graph2d.setOptions for the available options.
  23. * @constructor
  24. * @extends Core
  25. */
  26. function Graph2d (container, items, groups, options) {
  27. // if the third element is options, the forth is groups (optionally);
  28. if (!(Array.isArray(groups) || groups instanceof DataSet || groups instanceof DataView) && groups instanceof Object) {
  29. var forthArgument = options;
  30. options = groups;
  31. groups = forthArgument;
  32. }
  33. // TODO: REMOVE THIS in the next MAJOR release
  34. // see https://github.com/almende/vis/issues/2511
  35. if (options && options.throttleRedraw) {
  36. console.warn("Graph2d option \"throttleRedraw\" is DEPRICATED and no longer supported. It will be removed in the next MAJOR release.");
  37. }
  38. var me = this;
  39. this.defaultOptions = {
  40. start: null,
  41. end: null,
  42. autoResize: true,
  43. orientation: {
  44. axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
  45. item: 'bottom' // not relevant for Graph2d
  46. },
  47. moment: moment,
  48. width: null,
  49. height: null,
  50. maxHeight: null,
  51. minHeight: null
  52. };
  53. this.options = util.deepExtend({}, this.defaultOptions);
  54. // Create the DOM, props, and emitter
  55. this._create(container);
  56. // all components listed here will be repainted automatically
  57. this.components = [];
  58. this.body = {
  59. dom: this.dom,
  60. domProps: this.props,
  61. emitter: {
  62. on: this.on.bind(this),
  63. off: this.off.bind(this),
  64. emit: this.emit.bind(this)
  65. },
  66. hiddenDates: [],
  67. util: {
  68. toScreen: me._toScreen.bind(me),
  69. toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
  70. toTime: me._toTime.bind(me),
  71. toGlobalTime : me._toGlobalTime.bind(me)
  72. }
  73. };
  74. // range
  75. this.range = new Range(this.body);
  76. this.components.push(this.range);
  77. this.body.range = this.range;
  78. // time axis
  79. this.timeAxis = new TimeAxis(this.body);
  80. this.components.push(this.timeAxis);
  81. //this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
  82. // current time bar
  83. this.currentTime = new CurrentTime(this.body);
  84. this.components.push(this.currentTime);
  85. // item set
  86. this.linegraph = new LineGraph(this.body);
  87. this.components.push(this.linegraph);
  88. this.itemsData = null; // DataSet
  89. this.groupsData = null; // DataSet
  90. this.on('tap', function (event) {
  91. me.emit('click', me.getEventProperties(event))
  92. });
  93. this.on('doubletap', function (event) {
  94. me.emit('doubleClick', me.getEventProperties(event))
  95. });
  96. this.dom.root.oncontextmenu = function (event) {
  97. me.emit('contextmenu', me.getEventProperties(event))
  98. };
  99. // apply options
  100. if (options) {
  101. this.setOptions(options);
  102. }
  103. // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
  104. if (groups) {
  105. this.setGroups(groups);
  106. }
  107. // create itemset
  108. if (items) {
  109. this.setItems(items);
  110. }
  111. // draw for the first time
  112. this._redraw();
  113. }
  114. // Extend the functionality from Core
  115. Graph2d.prototype = new Core();
  116. Graph2d.prototype.setOptions = function (options) {
  117. // validate options
  118. let errorFound = Validator.validate(options, allOptions);
  119. if (errorFound === true) {
  120. console.log('%cErrors have been found in the supplied options object.', printStyle);
  121. }
  122. Core.prototype.setOptions.call(this, options);
  123. };
  124. /**
  125. * Set items
  126. * @param {vis.DataSet | Array | null} items
  127. */
  128. Graph2d.prototype.setItems = function(items) {
  129. var initialLoad = (this.itemsData == null);
  130. // convert to type DataSet when needed
  131. var newDataSet;
  132. if (!items) {
  133. newDataSet = null;
  134. }
  135. else if (items instanceof DataSet || items instanceof DataView) {
  136. newDataSet = items;
  137. }
  138. else {
  139. // turn an array into a dataset
  140. newDataSet = new DataSet(items, {
  141. type: {
  142. start: 'Date',
  143. end: 'Date'
  144. }
  145. });
  146. }
  147. // set items
  148. this.itemsData = newDataSet;
  149. this.linegraph && this.linegraph.setItems(newDataSet);
  150. if (initialLoad) {
  151. if (this.options.start != undefined || this.options.end != undefined) {
  152. var start = this.options.start != undefined ? this.options.start : null;
  153. var end = this.options.end != undefined ? this.options.end : null;
  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. Graph2d.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.linegraph.setGroups(newDataSet);
  180. };
  181. /**
  182. * Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
  183. * @param groupId
  184. * @param width
  185. * @param height
  186. */
  187. Graph2d.prototype.getLegend = function(groupId, width, height) {
  188. if (width === undefined) {width = 15;}
  189. if (height === undefined) {height = 15;}
  190. if (this.linegraph.groups[groupId] !== undefined) {
  191. return this.linegraph.groups[groupId].getLegend(width,height);
  192. }
  193. else {
  194. return "cannot find group:'" + groupId + "'";
  195. }
  196. };
  197. /**
  198. * This checks if the visible option of the supplied group (by ID) is true or false.
  199. * @param groupId
  200. * @returns {*}
  201. */
  202. Graph2d.prototype.isGroupVisible = function(groupId) {
  203. if (this.linegraph.groups[groupId] !== undefined) {
  204. return (this.linegraph.groups[groupId].visible && (this.linegraph.options.groups.visibility[groupId] === undefined || this.linegraph.options.groups.visibility[groupId] == true));
  205. }
  206. else {
  207. return false;
  208. }
  209. };
  210. /**
  211. * Get the data range of the item set.
  212. * @returns {{min: Date, max: Date}} range A range with a start and end Date.
  213. * When no minimum is found, min==null
  214. * When no maximum is found, max==null
  215. */
  216. Graph2d.prototype.getDataRange = function() {
  217. var min = null;
  218. var max = null;
  219. // calculate min from start filed
  220. for (var groupId in this.linegraph.groups) {
  221. if (this.linegraph.groups.hasOwnProperty(groupId)) {
  222. if (this.linegraph.groups[groupId].visible == true) {
  223. for (var i = 0; i < this.linegraph.groups[groupId].itemsData.length; i++) {
  224. var item = this.linegraph.groups[groupId].itemsData[i];
  225. var value = util.convert(item.x, 'Date').valueOf();
  226. min = min == null ? value : min > value ? value : min;
  227. max = max == null ? value : max < value ? value : max;
  228. }
  229. }
  230. }
  231. }
  232. return {
  233. min: (min != null) ? new Date(min) : null,
  234. max: (max != null) ? new Date(max) : null
  235. };
  236. };
  237. /**
  238. * Generate Timeline related information from an event
  239. * @param {Event} event
  240. * @return {Object} An object with related information, like on which area
  241. * The event happened, whether clicked on an item, etc.
  242. */
  243. Graph2d.prototype.getEventProperties = function (event) {
  244. var clientX = event.center ? event.center.x : event.clientX;
  245. var clientY = event.center ? event.center.y : event.clientY;
  246. var x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
  247. var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
  248. var time = this._toTime(x);
  249. var customTime = CustomTime.customTimeFromTarget(event);
  250. var element = util.getTarget(event);
  251. var what = null;
  252. if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';}
  253. else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';}
  254. else if (util.hasParent(element, this.linegraph.yAxisLeft.dom.frame)) {what = 'data-axis';}
  255. else if (util.hasParent(element, this.linegraph.yAxisRight.dom.frame)) {what = 'data-axis';}
  256. else if (util.hasParent(element, this.linegraph.legendLeft.dom.frame)) {what = 'legend';}
  257. else if (util.hasParent(element, this.linegraph.legendRight.dom.frame)) {what = 'legend';}
  258. else if (customTime != null) {what = 'custom-time';}
  259. else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';}
  260. else if (util.hasParent(element, this.dom.center)) {what = 'background';}
  261. var value = [];
  262. var yAxisLeft = this.linegraph.yAxisLeft;
  263. var yAxisRight = this.linegraph.yAxisRight;
  264. if (!yAxisLeft.hidden && this.itemsData.length > 0) {
  265. value.push(yAxisLeft.screenToValue(y));
  266. }
  267. if (!yAxisRight.hidden && this.itemsData.length > 0) {
  268. value.push(yAxisRight.screenToValue(y));
  269. }
  270. return {
  271. event: event,
  272. what: what,
  273. pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
  274. pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
  275. x: x,
  276. y: y,
  277. time: time,
  278. value: value
  279. }
  280. };
  281. /**
  282. * Load a configurator
  283. * @return {Object}
  284. * @private
  285. */
  286. Graph2d.prototype._createConfigurator = function () {
  287. return new Configurator(this, this.dom.container, configureOptions);
  288. };
  289. module.exports = Graph2d;