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.

1094 lines
35 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
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
10 years ago
9 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
9 years ago
10 years ago
10 years ago
  1. var util = require('../../util');
  2. var DOMutil = require('../../DOMutil');
  3. var DataSet = require('../../DataSet');
  4. var DataView = require('../../DataView');
  5. var Component = require('./Component');
  6. var DataAxis = require('./DataAxis');
  7. var GraphGroup = require('./GraphGroup');
  8. var Legend = require('./Legend');
  9. var Bars = require('./graph2d_types/bar');
  10. var Lines = require('./graph2d_types/line');
  11. var Points = require('./graph2d_types/points');
  12. var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
  13. /**
  14. * This is the constructor of the LineGraph. It requires a Timeline body and options.
  15. *
  16. * @param body
  17. * @param options
  18. * @constructor
  19. */
  20. function LineGraph(body, options) {
  21. this.id = util.randomUUID();
  22. this.body = body;
  23. this.defaultOptions = {
  24. yAxisOrientation: 'left',
  25. defaultGroup: 'default',
  26. sort: true,
  27. sampling: true,
  28. stack: false,
  29. graphHeight: '400px',
  30. shaded: {
  31. enabled: false,
  32. orientation: 'bottom' // top, bottom, zero
  33. },
  34. style: 'line', // line, bar
  35. barChart: {
  36. width: 50,
  37. sideBySide: false,
  38. align: 'center' // left, center, right
  39. },
  40. interpolation: {
  41. enabled: true,
  42. parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
  43. alpha: 0.5
  44. },
  45. drawPoints: {
  46. enabled: true,
  47. size: 6,
  48. style: 'square' // square, circle
  49. },
  50. dataAxis: {}, //Defaults are done on DataAxis level
  51. legend: {}, //Defaults are done on Legend level
  52. groups: {
  53. visibility: {}
  54. }
  55. };
  56. // options is shared by this lineGraph and all its items
  57. this.options = util.extend({}, this.defaultOptions);
  58. this.dom = {};
  59. this.props = {};
  60. this.hammer = null;
  61. this.groups = {};
  62. this.abortedGraphUpdate = false;
  63. this.updateSVGheight = false;
  64. this.updateSVGheightOnResize = false;
  65. this.forceGraphUpdate = true;
  66. var me = this;
  67. this.itemsData = null; // DataSet
  68. this.groupsData = null; // DataSet
  69. // listeners for the DataSet of the items
  70. this.itemListeners = {
  71. 'add': function (event, params, senderId) {
  72. me._onAdd(params.items);
  73. },
  74. 'update': function (event, params, senderId) {
  75. me._onUpdate(params.items);
  76. },
  77. 'remove': function (event, params, senderId) {
  78. me._onRemove(params.items);
  79. }
  80. };
  81. // listeners for the DataSet of the groups
  82. this.groupListeners = {
  83. 'add': function (event, params, senderId) {
  84. me._onAddGroups(params.items);
  85. },
  86. 'update': function (event, params, senderId) {
  87. me._onUpdateGroups(params.items);
  88. },
  89. 'remove': function (event, params, senderId) {
  90. me._onRemoveGroups(params.items);
  91. }
  92. };
  93. this.items = {}; // object with an Item for every data item
  94. this.selection = []; // list with the ids of all selected nodes
  95. this.lastStart = this.body.range.start;
  96. this.touchParams = {}; // stores properties while dragging
  97. this.svgElements = {};
  98. this.setOptions(options);
  99. this.groupsUsingDefaultStyles = [0];
  100. this.body.emitter.on('rangechanged', function () {
  101. me.lastStart = me.body.range.start;
  102. me.svg.style.left = util.option.asSize(-me.props.width);
  103. me.forceGraphUpdate = true;
  104. //Is this local redraw necessary? (Core also does a change event!)
  105. me.redraw.call(me);
  106. });
  107. // create the HTML DOM
  108. this._create();
  109. this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
  110. }
  111. LineGraph.prototype = new Component();
  112. /**
  113. * Create the HTML DOM for the ItemSet
  114. */
  115. LineGraph.prototype._create = function () {
  116. var frame = document.createElement('div');
  117. frame.className = 'vis-line-graph';
  118. this.dom.frame = frame;
  119. // create svg element for graph drawing.
  120. this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  121. this.svg.style.position = 'relative';
  122. this.svg.style.height = ('' + this.options.graphHeight).replace('px', '') + 'px';
  123. this.svg.style.display = 'block';
  124. frame.appendChild(this.svg);
  125. // data axis
  126. this.options.dataAxis.orientation = 'left';
  127. this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
  128. this.options.dataAxis.orientation = 'right';
  129. this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
  130. delete this.options.dataAxis.orientation;
  131. // legends
  132. this.legendLeft = new Legend(this.body, this.options.legend, 'left', this.options.groups);
  133. this.legendRight = new Legend(this.body, this.options.legend, 'right', this.options.groups);
  134. this.show();
  135. };
  136. /**
  137. * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
  138. * @param {object} options
  139. */
  140. LineGraph.prototype.setOptions = function (options) {
  141. if (options) {
  142. var fields = ['sampling', 'defaultGroup', 'stack', 'height', 'graphHeight', 'yAxisOrientation', 'style', 'barChart', 'dataAxis', 'sort', 'groups'];
  143. if (options.graphHeight === undefined && options.height !== undefined) {
  144. this.updateSVGheight = true;
  145. this.updateSVGheightOnResize = true;
  146. }
  147. else if (this.body.domProps.centerContainer.height !== undefined && options.graphHeight !== undefined) {
  148. if (parseInt((options.graphHeight + '').replace("px", '')) < this.body.domProps.centerContainer.height) {
  149. this.updateSVGheight = true;
  150. }
  151. }
  152. util.selectiveDeepExtend(fields, this.options, options);
  153. util.mergeOptions(this.options, options, 'interpolation');
  154. util.mergeOptions(this.options, options, 'drawPoints');
  155. util.mergeOptions(this.options, options, 'shaded');
  156. util.mergeOptions(this.options, options, 'legend');
  157. if (options.interpolation) {
  158. if (typeof options.interpolation == 'object') {
  159. if (options.interpolation.parametrization) {
  160. if (options.interpolation.parametrization == 'uniform') {
  161. this.options.interpolation.alpha = 0;
  162. }
  163. else if (options.interpolation.parametrization == 'chordal') {
  164. this.options.interpolation.alpha = 1.0;
  165. }
  166. else {
  167. this.options.interpolation.parametrization = 'centripetal';
  168. this.options.interpolation.alpha = 0.5;
  169. }
  170. }
  171. }
  172. }
  173. if (this.yAxisLeft) {
  174. if (options.dataAxis !== undefined) {
  175. this.yAxisLeft.setOptions(this.options.dataAxis);
  176. this.yAxisRight.setOptions(this.options.dataAxis);
  177. }
  178. }
  179. if (this.legendLeft) {
  180. if (options.legend !== undefined) {
  181. this.legendLeft.setOptions(this.options.legend);
  182. this.legendRight.setOptions(this.options.legend);
  183. }
  184. }
  185. if (this.groups.hasOwnProperty(UNGROUPED)) {
  186. this.groups[UNGROUPED].setOptions(options);
  187. }
  188. }
  189. // this is used to redraw the graph if the visibility of the groups is changed.
  190. if (this.dom.frame) { //not on initial run?
  191. this.forceGraphUpdate=true;
  192. this.body.emitter.emit("_change",{queue: true});
  193. }
  194. };
  195. /**
  196. * Hide the component from the DOM
  197. */
  198. LineGraph.prototype.hide = function () {
  199. // remove the frame containing the items
  200. if (this.dom.frame.parentNode) {
  201. this.dom.frame.parentNode.removeChild(this.dom.frame);
  202. }
  203. };
  204. /**
  205. * Show the component in the DOM (when not already visible).
  206. * @return {Boolean} changed
  207. */
  208. LineGraph.prototype.show = function () {
  209. // show frame containing the items
  210. if (!this.dom.frame.parentNode) {
  211. this.body.dom.center.appendChild(this.dom.frame);
  212. }
  213. };
  214. /**
  215. * Set items
  216. * @param {vis.DataSet | null} items
  217. */
  218. LineGraph.prototype.setItems = function (items) {
  219. var me = this,
  220. ids,
  221. oldItemsData = this.itemsData;
  222. // replace the dataset
  223. if (!items) {
  224. this.itemsData = null;
  225. }
  226. else if (items instanceof DataSet || items instanceof DataView) {
  227. this.itemsData = items;
  228. }
  229. else {
  230. throw new TypeError('Data must be an instance of DataSet or DataView');
  231. }
  232. if (oldItemsData) {
  233. // unsubscribe from old dataset
  234. util.forEach(this.itemListeners, function (callback, event) {
  235. oldItemsData.off(event, callback);
  236. });
  237. // remove all drawn items
  238. ids = oldItemsData.getIds();
  239. this._onRemove(ids);
  240. }
  241. if (this.itemsData) {
  242. // subscribe to new dataset
  243. var id = this.id;
  244. util.forEach(this.itemListeners, function (callback, event) {
  245. me.itemsData.on(event, callback, id);
  246. });
  247. // add all new items
  248. ids = this.itemsData.getIds();
  249. this._onAdd(ids);
  250. }
  251. };
  252. /**
  253. * Set groups
  254. * @param {vis.DataSet} groups
  255. */
  256. LineGraph.prototype.setGroups = function (groups) {
  257. var me = this;
  258. var ids;
  259. // unsubscribe from current dataset
  260. if (this.groupsData) {
  261. util.forEach(this.groupListeners, function (callback, event) {
  262. me.groupsData.off(event, callback);
  263. });
  264. // remove all drawn groups
  265. ids = this.groupsData.getIds();
  266. this.groupsData = null;
  267. for (var i = 0; i < ids.length; i++) {
  268. this._removeGroup(ids[i]);
  269. }
  270. }
  271. // replace the dataset
  272. if (!groups) {
  273. this.groupsData = null;
  274. }
  275. else if (groups instanceof DataSet || groups instanceof DataView) {
  276. this.groupsData = groups;
  277. }
  278. else {
  279. throw new TypeError('Data must be an instance of DataSet or DataView');
  280. }
  281. if (this.groupsData) {
  282. // subscribe to new dataset
  283. var id = this.id;
  284. util.forEach(this.groupListeners, function (callback, event) {
  285. me.groupsData.on(event, callback, id);
  286. });
  287. // draw all ms
  288. ids = this.groupsData.getIds();
  289. this._onAddGroups(ids);
  290. }
  291. };
  292. LineGraph.prototype._onUpdate = function (ids) {
  293. this._updateAllGroupData(ids);
  294. };
  295. LineGraph.prototype._onAdd = function (ids) {
  296. this._onUpdate(ids);
  297. };
  298. LineGraph.prototype._onRemove = function (ids) {
  299. this._onUpdate(ids);
  300. };
  301. LineGraph.prototype._onUpdateGroups = function (groupIds) {
  302. this._updateAllGroupData(null, groupIds);
  303. };
  304. LineGraph.prototype._onAddGroups = function (groupIds) {
  305. this._onUpdateGroups(groupIds);
  306. };
  307. /**
  308. * this cleans the group out off the legends and the dataaxis, updates the ungrouped and updates the graph
  309. * @param {Array} groupIds
  310. * @private
  311. */
  312. LineGraph.prototype._onRemoveGroups = function (groupIds) {
  313. for (var i = 0; i < groupIds.length; i++) {
  314. this._removeGroup(groupIds[i]);
  315. }
  316. this.forceGraphUpdate = true;
  317. this.body.emitter.emit("_change",{queue: true});
  318. };
  319. /**
  320. * this cleans the group out off the legends and the dataaxis
  321. * @param groupId
  322. * @private
  323. */
  324. LineGraph.prototype._removeGroup = function (groupId) {
  325. if (this.groups.hasOwnProperty(groupId)) {
  326. if (this.groups[groupId].options.yAxisOrientation == 'right') {
  327. this.yAxisRight.removeGroup(groupId);
  328. this.legendRight.removeGroup(groupId);
  329. this.legendRight.redraw();
  330. }
  331. else {
  332. this.yAxisLeft.removeGroup(groupId);
  333. this.legendLeft.removeGroup(groupId);
  334. this.legendLeft.redraw();
  335. }
  336. delete this.groups[groupId];
  337. }
  338. }
  339. /**
  340. * update a group object with the group dataset entree
  341. *
  342. * @param group
  343. * @param groupId
  344. * @private
  345. */
  346. LineGraph.prototype._updateGroup = function (group, groupId) {
  347. if (!this.groups.hasOwnProperty(groupId)) {
  348. this.groups[groupId] = new GraphGroup(group, groupId, this.options, this.groupsUsingDefaultStyles);
  349. if (this.groups[groupId].options.yAxisOrientation == 'right') {
  350. this.yAxisRight.addGroup(groupId, this.groups[groupId]);
  351. this.legendRight.addGroup(groupId, this.groups[groupId]);
  352. }
  353. else {
  354. this.yAxisLeft.addGroup(groupId, this.groups[groupId]);
  355. this.legendLeft.addGroup(groupId, this.groups[groupId]);
  356. }
  357. }
  358. else {
  359. this.groups[groupId].update(group);
  360. if (this.groups[groupId].options.yAxisOrientation == 'right') {
  361. this.yAxisRight.updateGroup(groupId, this.groups[groupId]);
  362. this.legendRight.updateGroup(groupId, this.groups[groupId]);
  363. //If yAxisOrientation changed, clean out the group from the other axis.
  364. this.yAxisLeft.removeGroup(groupId);
  365. this.legendLeft.removeGroup(groupId);
  366. }
  367. else {
  368. this.yAxisLeft.updateGroup(groupId, this.groups[groupId]);
  369. this.legendLeft.updateGroup(groupId, this.groups[groupId]);
  370. //If yAxisOrientation changed, clean out the group from the other axis.
  371. this.yAxisRight.removeGroup(groupId);
  372. this.legendRight.removeGroup(groupId);
  373. }
  374. }
  375. this.legendLeft.redraw();
  376. this.legendRight.redraw();
  377. };
  378. /**
  379. * this updates all groups, it is used when there is an update the the itemset.
  380. *
  381. * @param {Array} ids
  382. * @param {Array} groupIds
  383. * @private
  384. */
  385. LineGraph.prototype._updateAllGroupData = function (ids, groupIds) {
  386. if (this.itemsData != null) {
  387. var groupsContent = {};
  388. var items = this.itemsData.get();
  389. var fieldId = this.itemsData._fieldId;
  390. var idMap = {};
  391. if (ids){
  392. ids.map(function (id) {
  393. idMap[id] = id;
  394. });
  395. }
  396. //pre-Determine array sizes, for more efficient memory claim
  397. var groupCounts = {};
  398. for (var i = 0; i < items.length; i++) {
  399. var item = items[i];
  400. var groupId = item.group;
  401. if (groupId === null || groupId === undefined) {
  402. groupId = UNGROUPED;
  403. }
  404. groupCounts.hasOwnProperty(groupId) ? groupCounts[groupId]++ : groupCounts[groupId] = 1;
  405. }
  406. //Pre-load arrays from existing groups if items are not changed (not in ids)
  407. if (!groupIds && ids) {
  408. for (var groupId in this.groups) {
  409. if (this.groups.hasOwnProperty(groupId)) {
  410. var group = this.groups[groupId];
  411. var existing_items = group.getItems();
  412. groupsContent[groupId] = existing_items.filter(function (item) {
  413. return (item[fieldId] !== idMap[item[fieldId]]);
  414. });
  415. var newLength = groupCounts[groupId];
  416. groupCounts[groupId] -= groupsContent[groupId].length;
  417. if (groupsContent[groupId].length < newLength) {
  418. groupsContent[groupId][newLength - 1] = {};
  419. }
  420. }
  421. }
  422. }
  423. //Now insert data into the arrays.
  424. for (var i = 0; i < items.length; i++) {
  425. var item = items[i];
  426. var groupId = item.group;
  427. if (groupId === null || groupId === undefined) {
  428. groupId = UNGROUPED;
  429. }
  430. if (!groupIds && ids && (item[fieldId] !== idMap[item[fieldId]])) {
  431. continue;
  432. }
  433. if (!groupsContent.hasOwnProperty(groupId)) {
  434. groupsContent[groupId] = new Array(groupCounts[groupId]);
  435. }
  436. //Copy data (because of unmodifiable DataView input.
  437. var extended = util.bridgeObject(item);
  438. extended.x = util.convert(item.x, 'Date');
  439. extended.orginalY = item.y; //real Y
  440. extended.y = Number(item.y);
  441. extended[fieldId] = item[fieldId];
  442. var index= groupsContent[groupId].length - groupCounts[groupId]--;
  443. groupsContent[groupId][index] = extended;
  444. }
  445. //Make sure all groups are present, to allow removal of old groups
  446. for (var groupId in this.groups){
  447. if (this.groups.hasOwnProperty(groupId)){
  448. if (!groupsContent.hasOwnProperty(groupId)) {
  449. groupsContent[groupId] = new Array(0);
  450. }
  451. }
  452. }
  453. //Update legendas, style and axis
  454. for (var groupId in groupsContent) {
  455. if (groupsContent.hasOwnProperty(groupId)) {
  456. if (groupsContent[groupId].length == 0) {
  457. if (this.groups.hasOwnProperty(groupId)) {
  458. this._removeGroup(groupId);
  459. }
  460. } else {
  461. var group = undefined;
  462. if (this.groupsData != undefined) {
  463. group = this.groupsData.get(groupId);
  464. }
  465. if (group == undefined) {
  466. group = {id: groupId, content: this.options.defaultGroup + groupId};
  467. }
  468. this._updateGroup(group, groupId);
  469. this.groups[groupId].setItems(groupsContent[groupId]);
  470. }
  471. }
  472. }
  473. this.forceGraphUpdate = true;
  474. this.body.emitter.emit("_change",{queue: true});
  475. }
  476. };
  477. /**
  478. * Redraw the component, mandatory function
  479. * @return {boolean} Returns true if the component is resized
  480. */
  481. LineGraph.prototype.redraw = function () {
  482. var resized = false;
  483. // calculate actual size and position
  484. this.props.width = this.dom.frame.offsetWidth;
  485. this.props.height = this.body.domProps.centerContainer.height
  486. - this.body.domProps.border.top
  487. - this.body.domProps.border.bottom;
  488. // check if this component is resized
  489. resized = this._isResized() || resized;
  490. // check whether zoomed (in that case we need to re-stack everything)
  491. var visibleInterval = this.body.range.end - this.body.range.start;
  492. var zoomed = (visibleInterval != this.lastVisibleInterval);
  493. this.lastVisibleInterval = visibleInterval;
  494. // the svg element is three times as big as the width, this allows for fully dragging left and right
  495. // without reloading the graph. the controls for this are bound to events in the constructor
  496. if (resized == true) {
  497. this.svg.style.width = util.option.asSize(3 * this.props.width);
  498. this.svg.style.left = util.option.asSize(-this.props.width);
  499. // if the height of the graph is set as proportional, change the height of the svg
  500. if ((this.options.height + '').indexOf("%") != -1 || this.updateSVGheightOnResize == true) {
  501. this.updateSVGheight = true;
  502. }
  503. }
  504. // update the height of the graph on each redraw of the graph.
  505. if (this.updateSVGheight == true) {
  506. if (this.options.graphHeight != this.props.height + 'px') {
  507. this.options.graphHeight = this.props.height + 'px';
  508. this.svg.style.height = this.props.height + 'px';
  509. }
  510. this.updateSVGheight = false;
  511. }
  512. else {
  513. this.svg.style.height = ('' + this.options.graphHeight).replace('px', '') + 'px';
  514. }
  515. // zoomed is here to ensure that animations are shown correctly.
  516. if (resized == true || zoomed == true || this.abortedGraphUpdate == true || this.forceGraphUpdate == true) {
  517. resized = this._updateGraph() || resized;
  518. this.forceGraphUpdate = false;
  519. }
  520. else {
  521. // move the whole svg while dragging
  522. if (this.lastStart != 0) {
  523. var offset = this.body.range.start - this.lastStart;
  524. var range = this.body.range.end - this.body.range.start;
  525. if (this.props.width != 0) {
  526. var rangePerPixelInv = this.props.width / range;
  527. var xOffset = offset * rangePerPixelInv;
  528. this.svg.style.left = (-this.props.width - xOffset) + 'px';
  529. }
  530. }
  531. }
  532. this.legendLeft.redraw();
  533. this.legendRight.redraw();
  534. return resized;
  535. };
  536. LineGraph.prototype._getSortedGroupIds = function(){
  537. // getting group Ids
  538. var grouplist = [];
  539. for (var groupId in this.groups) {
  540. if (this.groups.hasOwnProperty(groupId)) {
  541. var group = this.groups[groupId];
  542. if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
  543. grouplist.push({id:groupId,zIndex:group.options.zIndex});
  544. }
  545. }
  546. }
  547. util.insertSort(grouplist,function(a,b){
  548. var az = a.zIndex;
  549. var bz = b.zIndex;
  550. if (az === undefined) az=0;
  551. if (bz === undefined) bz=0;
  552. return az==bz? 0: (az<bz ? -1: 1);
  553. });
  554. var groupIds = new Array(grouplist.length);
  555. for (var i=0; i< grouplist.length; i++){
  556. groupIds[i] = grouplist[i].id;
  557. }
  558. return groupIds;
  559. }
  560. /**
  561. * Update and redraw the graph.
  562. *
  563. */
  564. LineGraph.prototype._updateGraph = function () {
  565. // reset the svg elements
  566. DOMutil.prepareElements(this.svgElements);
  567. if (this.props.width != 0 && this.itemsData != null) {
  568. var group, i;
  569. var groupRanges = {};
  570. var changeCalled = false;
  571. // this is the range of the SVG canvas
  572. var minDate = this.body.util.toGlobalTime(-this.body.domProps.root.width);
  573. var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
  574. // getting group Ids
  575. var groupIds = this._getSortedGroupIds();
  576. if (groupIds.length > 0) {
  577. var groupsData = {};
  578. // fill groups data, this only loads the data we require based on the timewindow
  579. this._getRelevantData(groupIds, groupsData, minDate, maxDate);
  580. // apply sampling, if disabled, it will pass through this function.
  581. this._applySampling(groupIds, groupsData);
  582. // we transform the X coordinates to detect collisions
  583. for (i = 0; i < groupIds.length; i++) {
  584. this._convertXcoordinates(groupsData[groupIds[i]]);
  585. }
  586. // now all needed data has been collected we start the processing.
  587. this._getYRanges(groupIds, groupsData, groupRanges);
  588. // update the Y axis first, we use this data to draw at the correct Y points
  589. changeCalled = this._updateYAxis(groupIds, groupRanges);
  590. // at changeCalled, abort this update cycle as the graph needs another update with new Width input from the Redraw container.
  591. // Cleanup SVG elements on abort.
  592. if (changeCalled == true) {
  593. DOMutil.cleanupElements(this.svgElements);
  594. this.abortedGraphUpdate = true;
  595. return true;
  596. }
  597. this.abortedGraphUpdate = false;
  598. // With the yAxis scaled correctly, use this to get the Y values of the points.
  599. var below = undefined;
  600. for (i = 0; i < groupIds.length; i++) {
  601. group = this.groups[groupIds[i]];
  602. if (this.options.stack === true && this.options.style === 'line') {
  603. if (group.options.excludeFromStacking == undefined || !group.options.excludeFromStacking) {
  604. if (below != undefined) {
  605. this._stack(groupsData[group.id], groupsData[below.id]);
  606. if (group.options.shaded.enabled == true && group.options.shaded.orientation !== "group"){
  607. if (group.options.shaded.orientation == "top" && below.options.shaded.orientation !== "group"){
  608. below.options.shaded.orientation="group";
  609. below.options.shaded.groupId=group.id;
  610. } else {
  611. group.options.shaded.orientation="group";
  612. group.options.shaded.groupId=below.id;
  613. }
  614. }
  615. }
  616. below = group;
  617. }
  618. }
  619. this._convertYcoordinates(groupsData[groupIds[i]], group);
  620. }
  621. //Precalculate paths and draw shading if appropriate. This will make sure the shading is always behind any lines.
  622. var paths = {};
  623. for (i = 0; i < groupIds.length; i++) {
  624. group = this.groups[groupIds[i]];
  625. if (group.options.style === 'line' && group.options.shaded.enabled == true) {
  626. var dataset = groupsData[groupIds[i]];
  627. if (dataset == null || dataset.length == 0) {
  628. continue;
  629. }
  630. if (!paths.hasOwnProperty(groupIds[i])) {
  631. paths[groupIds[i]] = Lines.calcPath(dataset, group);
  632. }
  633. if (group.options.shaded.orientation === "group") {
  634. var subGroupId = group.options.shaded.groupId;
  635. if (groupIds.indexOf(subGroupId) === -1) {
  636. console.log(group.id + ": Unknown shading group target given:" + subGroupId);
  637. continue;
  638. }
  639. if (!paths.hasOwnProperty(subGroupId)) {
  640. paths[subGroupId] = Lines.calcPath(groupsData[subGroupId], this.groups[subGroupId]);
  641. }
  642. Lines.drawShading(paths[groupIds[i]], group, paths[subGroupId], this.framework);
  643. }
  644. else {
  645. Lines.drawShading(paths[groupIds[i]], group, undefined, this.framework);
  646. }
  647. }
  648. }
  649. // draw the groups, calculating paths if still necessary.
  650. Bars.draw(groupIds, groupsData, this.framework);
  651. for (i = 0; i < groupIds.length; i++) {
  652. group = this.groups[groupIds[i]];
  653. if (groupsData[groupIds[i]].length > 0) {
  654. switch (group.options.style) {
  655. case "line":
  656. if (!paths.hasOwnProperty(groupIds[i])) {
  657. paths[groupIds[i]] = Lines.calcPath(groupsData[groupIds[i]], group);
  658. }
  659. Lines.draw(paths[groupIds[i]], group, this.framework);
  660. //explicit no break;
  661. case "point":
  662. //explicit no break;
  663. case "points":
  664. if (group.options.style == "point" || group.options.style == "points" || group.options.drawPoints.enabled == true) {
  665. Points.draw(groupsData[groupIds[i]], group, this.framework);
  666. }
  667. break;
  668. case "bar":
  669. // bar needs to be drawn enmasse
  670. //explicit no break
  671. default:
  672. //do nothing...
  673. }
  674. }
  675. }
  676. }
  677. }
  678. // cleanup unused svg elements
  679. DOMutil.cleanupElements(this.svgElements);
  680. return false;
  681. };
  682. LineGraph.prototype._stack = function (data, subData) {
  683. var index, dx, dy, subPrevPoint, subNextPoint;
  684. index = 0;
  685. // for each data point we look for a matching on in the set below
  686. for (var j = 0; j < data.length; j++) {
  687. subPrevPoint = undefined;
  688. subNextPoint = undefined;
  689. // we look for time matches or a before-after point
  690. for (var k = index; k < subData.length; k++) {
  691. // if times match exactly
  692. if (subData[k].x === data[j].x) {
  693. subPrevPoint = subData[k];
  694. subNextPoint = subData[k];
  695. index = k;
  696. break;
  697. }
  698. else if (subData[k].x > data[j].x) { // overshoot
  699. subNextPoint = subData[k];
  700. if (k == 0) {
  701. subPrevPoint = subNextPoint;
  702. }
  703. else {
  704. subPrevPoint = subData[k - 1];
  705. }
  706. index = k;
  707. break;
  708. }
  709. }
  710. // in case the last data point has been used, we assume it stays like this.
  711. if (subNextPoint === undefined) {
  712. subPrevPoint = subData[subData.length - 1];
  713. subNextPoint = subData[subData.length - 1];
  714. }
  715. // linear interpolation
  716. dx = subNextPoint.x - subPrevPoint.x;
  717. dy = subNextPoint.y - subPrevPoint.y;
  718. if (dx == 0) {
  719. data[j].y = data[j].orginalY + subNextPoint.y;
  720. }
  721. else {
  722. data[j].y = data[j].orginalY + (dy / dx) * (data[j].x - subPrevPoint.x) + subPrevPoint.y; // ax + b where b is data[j].y
  723. }
  724. }
  725. }
  726. /**
  727. * first select and preprocess the data from the datasets.
  728. * the groups have their preselection of data, we now loop over this data to see
  729. * what data we need to draw. Sorted data is much faster.
  730. * more optimization is possible by doing the sampling before and using the binary search
  731. * to find the end date to determine the increment.
  732. *
  733. * @param {array} groupIds
  734. * @param {object} groupsData
  735. * @param {date} minDate
  736. * @param {date} maxDate
  737. * @private
  738. */
  739. LineGraph.prototype._getRelevantData = function (groupIds, groupsData, minDate, maxDate) {
  740. var group, i, j, item;
  741. if (groupIds.length > 0) {
  742. for (i = 0; i < groupIds.length; i++) {
  743. group = this.groups[groupIds[i]];
  744. var itemsData = group.getItems();
  745. // optimization for sorted data
  746. if (group.options.sort == true) {
  747. var dateComparator = function (a, b) {
  748. return a.getTime() == b.getTime() ? 0 : a < b ? -1 : 1
  749. };
  750. var first = Math.max(0, util.binarySearchValue(itemsData, minDate, 'x', 'before', dateComparator));
  751. var last = Math.min(itemsData.length, util.binarySearchValue(itemsData, maxDate, 'x', 'after', dateComparator) + 1);
  752. if (last <= 0) {
  753. last = itemsData.length;
  754. }
  755. var dataContainer = new Array(last-first);
  756. for (j = first; j < last; j++) {
  757. item = group.itemsData[j];
  758. dataContainer[j-first] = item;
  759. }
  760. groupsData[groupIds[i]] = dataContainer;
  761. }
  762. else {
  763. // If unsorted data, all data is relevant, just returning entire structure
  764. groupsData[groupIds[i]] = group.itemsData;
  765. }
  766. }
  767. }
  768. };
  769. /**
  770. *
  771. * @param groupIds
  772. * @param groupsData
  773. * @private
  774. */
  775. LineGraph.prototype._applySampling = function (groupIds, groupsData) {
  776. var group;
  777. if (groupIds.length > 0) {
  778. for (var i = 0; i < groupIds.length; i++) {
  779. group = this.groups[groupIds[i]];
  780. if (group.options.sampling == true) {
  781. var dataContainer = groupsData[groupIds[i]];
  782. if (dataContainer.length > 0) {
  783. var increment = 1;
  784. var amountOfPoints = dataContainer.length;
  785. // the global screen is used because changing the width of the yAxis may affect the increment, resulting in an endless loop
  786. // of width changing of the yAxis.
  787. //TODO: This assumes sorted data, but that's not guaranteed!
  788. var xDistance = this.body.util.toGlobalScreen(dataContainer[dataContainer.length - 1].x) - this.body.util.toGlobalScreen(dataContainer[0].x);
  789. var pointsPerPixel = amountOfPoints / xDistance;
  790. increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1, Math.round(pointsPerPixel)));
  791. var sampledData = new Array(amountOfPoints);
  792. for (var j = 0; j < amountOfPoints; j += increment) {
  793. var idx = Math.round(j/increment);
  794. sampledData[idx]=dataContainer[j];
  795. }
  796. groupsData[groupIds[i]] = sampledData.splice(0,Math.round(amountOfPoints/increment));
  797. }
  798. }
  799. }
  800. }
  801. };
  802. /**
  803. *
  804. *
  805. * @param {array} groupIds
  806. * @param {object} groupsData
  807. * @param {object} groupRanges | this is being filled here
  808. * @private
  809. */
  810. LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
  811. var groupData, group, i;
  812. var combinedDataLeft = [];
  813. var combinedDataRight = [];
  814. var options;
  815. if (groupIds.length > 0) {
  816. for (i = 0; i < groupIds.length; i++) {
  817. groupData = groupsData[groupIds[i]];
  818. options = this.groups[groupIds[i]].options;
  819. if (groupData.length > 0) {
  820. group = this.groups[groupIds[i]];
  821. // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
  822. if (options.stack === true && options.style === 'bar') {
  823. if (options.yAxisOrientation === 'left') {
  824. combinedDataLeft = combinedDataLeft.concat(group.getItems());
  825. }
  826. else {
  827. combinedDataRight = combinedDataRight.concat(group.getItems());
  828. }
  829. }
  830. else {
  831. groupRanges[groupIds[i]] = group.getYRange(groupData, groupIds[i]);
  832. }
  833. }
  834. }
  835. // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
  836. Bars.getStackedYRange(combinedDataLeft, groupRanges, groupIds, '__barStackLeft', 'left');
  837. Bars.getStackedYRange(combinedDataRight, groupRanges, groupIds, '__barStackRight', 'right');
  838. }
  839. };
  840. /**
  841. * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
  842. * @param {Array} groupIds
  843. * @param {Object} groupRanges
  844. * @private
  845. */
  846. LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
  847. var resized = false;
  848. var yAxisLeftUsed = false;
  849. var yAxisRightUsed = false;
  850. var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
  851. // if groups are present
  852. if (groupIds.length > 0) {
  853. // this is here to make sure that if there are no items in the axis but there are groups, that there is no infinite draw/redraw loop.
  854. for (var i = 0; i < groupIds.length; i++) {
  855. var group = this.groups[groupIds[i]];
  856. if (group && group.options.yAxisOrientation != 'right') {
  857. yAxisLeftUsed = true;
  858. minLeft = 1e9;
  859. maxLeft = -1e9;
  860. }
  861. else if (group && group.options.yAxisOrientation) {
  862. yAxisRightUsed = true;
  863. minRight = 1e9;
  864. maxRight = -1e9;
  865. }
  866. }
  867. // if there are items:
  868. for (var i = 0; i < groupIds.length; i++) {
  869. if (groupRanges.hasOwnProperty(groupIds[i])) {
  870. if (groupRanges[groupIds[i]].ignore !== true) {
  871. minVal = groupRanges[groupIds[i]].min;
  872. maxVal = groupRanges[groupIds[i]].max;
  873. if (groupRanges[groupIds[i]].yAxisOrientation != 'right') {
  874. yAxisLeftUsed = true;
  875. minLeft = minLeft > minVal ? minVal : minLeft;
  876. maxLeft = maxLeft < maxVal ? maxVal : maxLeft;
  877. }
  878. else {
  879. yAxisRightUsed = true;
  880. minRight = minRight > minVal ? minVal : minRight;
  881. maxRight = maxRight < maxVal ? maxVal : maxRight;
  882. }
  883. }
  884. }
  885. }
  886. if (yAxisLeftUsed == true) {
  887. this.yAxisLeft.setRange(minLeft, maxLeft);
  888. }
  889. if (yAxisRightUsed == true) {
  890. this.yAxisRight.setRange(minRight, maxRight);
  891. }
  892. }
  893. resized = this._toggleAxisVisiblity(yAxisLeftUsed, this.yAxisLeft) || resized;
  894. resized = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || resized;
  895. if (yAxisRightUsed == true && yAxisLeftUsed == true) {
  896. this.yAxisLeft.drawIcons = true;
  897. this.yAxisRight.drawIcons = true;
  898. }
  899. else {
  900. this.yAxisLeft.drawIcons = false;
  901. this.yAxisRight.drawIcons = false;
  902. }
  903. this.yAxisRight.master = !yAxisLeftUsed;
  904. this.yAxisRight.masterAxis = this.yAxisLeft;
  905. if (this.yAxisRight.master == false) {
  906. if (yAxisRightUsed == true) {
  907. this.yAxisLeft.lineOffset = this.yAxisRight.width;
  908. }
  909. else {
  910. this.yAxisLeft.lineOffset = 0;
  911. }
  912. resized = this.yAxisLeft.redraw() || resized;
  913. resized = this.yAxisRight.redraw() || resized;
  914. }
  915. else {
  916. resized = this.yAxisRight.redraw() || resized;
  917. }
  918. // clean the accumulated lists
  919. var tempGroups = ['__barStackLeft', '__barStackRight', '__lineStackLeft', '__lineStackRight'];
  920. for (var i = 0; i < tempGroups.length; i++) {
  921. if (groupIds.indexOf(tempGroups[i]) != -1) {
  922. groupIds.splice(groupIds.indexOf(tempGroups[i]), 1);
  923. }
  924. }
  925. return resized;
  926. };
  927. /**
  928. * This shows or hides the Y axis if needed. If there is a change, the changed event is emitted by the updateYAxis function
  929. *
  930. * @param {boolean} axisUsed
  931. * @returns {boolean}
  932. * @private
  933. * @param axis
  934. */
  935. LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
  936. var changed = false;
  937. if (axisUsed == false) {
  938. if (axis.dom.frame.parentNode && axis.hidden == false) {
  939. axis.hide();
  940. changed = true;
  941. }
  942. }
  943. else {
  944. if (!axis.dom.frame.parentNode && axis.hidden == true) {
  945. axis.show();
  946. changed = true;
  947. }
  948. }
  949. return changed;
  950. };
  951. /**
  952. * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
  953. * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
  954. * the yAxis.
  955. *
  956. * @param datapoints
  957. * @returns {Array}
  958. * @private
  959. */
  960. LineGraph.prototype._convertXcoordinates = function (datapoints) {
  961. var toScreen = this.body.util.toScreen;
  962. for (var i = 0; i < datapoints.length; i++) {
  963. datapoints[i].screen_x = toScreen(datapoints[i].x) + this.props.width;
  964. datapoints[i].screen_y = datapoints[i].y; //starting point for range calculations
  965. }
  966. };
  967. /**
  968. * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
  969. * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
  970. * the yAxis.
  971. *
  972. * @param datapoints
  973. * @param group
  974. * @returns {Array}
  975. * @private
  976. */
  977. LineGraph.prototype._convertYcoordinates = function (datapoints, group) {
  978. var axis = this.yAxisLeft;
  979. var svgHeight = Number(this.svg.style.height.replace('px', ''));
  980. if (group.options.yAxisOrientation == 'right') {
  981. axis = this.yAxisRight;
  982. }
  983. for (var i = 0; i < datapoints.length; i++) {
  984. datapoints[i].screen_y = Math.round(axis.convertValue(datapoints[i].y));
  985. }
  986. group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
  987. };
  988. module.exports = LineGraph;