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.

501 lines
15 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
  1. var util = require('../../util');
  2. var DOMutil = require('../../DOMutil');
  3. var Component = require('./Component');
  4. var DataStep = require('../DataStep');
  5. /**
  6. * A horizontal time axis
  7. * @param {Object} [options] See DataAxis.setOptions for the available
  8. * options.
  9. * @constructor DataAxis
  10. * @extends Component
  11. * @param body
  12. */
  13. function DataAxis (body, options, svg, linegraphOptions) {
  14. this.id = util.randomUUID();
  15. this.body = body;
  16. this.defaultOptions = {
  17. orientation: 'left', // supported: 'left', 'right'
  18. showMinorLabels: true,
  19. showMajorLabels: true,
  20. icons: true,
  21. majorLinesOffset: 7,
  22. minorLinesOffset: 4,
  23. labelOffsetX: 10,
  24. labelOffsetY: 2,
  25. iconWidth: 20,
  26. width: '40px',
  27. visible: true,
  28. customRange: {
  29. left: {min:undefined, max:undefined},
  30. right: {min:undefined, max:undefined}
  31. }
  32. };
  33. this.linegraphOptions = linegraphOptions;
  34. this.linegraphSVG = svg;
  35. this.props = {};
  36. this.DOMelements = { // dynamic elements
  37. lines: {},
  38. labels: {}
  39. };
  40. this.dom = {};
  41. this.range = {start:0, end:0};
  42. this.options = util.extend({}, this.defaultOptions);
  43. this.conversionFactor = 1;
  44. this.setOptions(options);
  45. this.width = Number(('' + this.options.width).replace("px",""));
  46. this.minWidth = this.width;
  47. this.height = this.linegraphSVG.offsetHeight;
  48. this.stepPixels = 25;
  49. this.stepPixelsForced = 25;
  50. this.lineOffset = 0;
  51. this.master = true;
  52. this.svgElements = {};
  53. this.groups = {};
  54. this.amountOfGroups = 0;
  55. // create the HTML DOM
  56. this._create();
  57. }
  58. DataAxis.prototype = new Component();
  59. DataAxis.prototype.addGroup = function(label, graphOptions) {
  60. if (!this.groups.hasOwnProperty(label)) {
  61. this.groups[label] = graphOptions;
  62. }
  63. this.amountOfGroups += 1;
  64. };
  65. DataAxis.prototype.updateGroup = function(label, graphOptions) {
  66. this.groups[label] = graphOptions;
  67. };
  68. DataAxis.prototype.removeGroup = function(label) {
  69. if (this.groups.hasOwnProperty(label)) {
  70. delete this.groups[label];
  71. this.amountOfGroups -= 1;
  72. }
  73. };
  74. DataAxis.prototype.setOptions = function (options) {
  75. if (options) {
  76. var redraw = false;
  77. if (this.options.orientation != options.orientation && options.orientation !== undefined) {
  78. redraw = true;
  79. }
  80. var fields = [
  81. 'orientation',
  82. 'showMinorLabels',
  83. 'showMajorLabels',
  84. 'icons',
  85. 'majorLinesOffset',
  86. 'minorLinesOffset',
  87. 'labelOffsetX',
  88. 'labelOffsetY',
  89. 'iconWidth',
  90. 'width',
  91. 'visible',
  92. 'customRange'
  93. ];
  94. util.selectiveExtend(fields, this.options, options);
  95. this.minWidth = Number(('' + this.options.width).replace("px",""));
  96. if (redraw == true && this.dom.frame) {
  97. this.hide();
  98. this.show();
  99. }
  100. }
  101. };
  102. /**
  103. * Create the HTML DOM for the DataAxis
  104. */
  105. DataAxis.prototype._create = function() {
  106. this.dom.frame = document.createElement('div');
  107. this.dom.frame.style.width = this.options.width;
  108. this.dom.frame.style.height = this.height;
  109. this.dom.lineContainer = document.createElement('div');
  110. this.dom.lineContainer.style.width = '100%';
  111. this.dom.lineContainer.style.height = this.height;
  112. // create svg element for graph drawing.
  113. this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
  114. this.svg.style.position = "absolute";
  115. this.svg.style.top = '0px';
  116. this.svg.style.height = '100%';
  117. this.svg.style.width = '100%';
  118. this.svg.style.display = "block";
  119. this.dom.frame.appendChild(this.svg);
  120. };
  121. DataAxis.prototype._redrawGroupIcons = function () {
  122. DOMutil.prepareElements(this.svgElements);
  123. var x;
  124. var iconWidth = this.options.iconWidth;
  125. var iconHeight = 15;
  126. var iconOffset = 4;
  127. var y = iconOffset + 0.5 * iconHeight;
  128. if (this.options.orientation == 'left') {
  129. x = iconOffset;
  130. }
  131. else {
  132. x = this.width - iconWidth - iconOffset;
  133. }
  134. for (var groupId in this.groups) {
  135. if (this.groups.hasOwnProperty(groupId)) {
  136. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  137. this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
  138. y += iconHeight + iconOffset;
  139. }
  140. }
  141. }
  142. DOMutil.cleanupElements(this.svgElements);
  143. };
  144. /**
  145. * Create the HTML DOM for the DataAxis
  146. */
  147. DataAxis.prototype.show = function() {
  148. if (!this.dom.frame.parentNode) {
  149. if (this.options.orientation == 'left') {
  150. this.body.dom.left.appendChild(this.dom.frame);
  151. }
  152. else {
  153. this.body.dom.right.appendChild(this.dom.frame);
  154. }
  155. }
  156. if (!this.dom.lineContainer.parentNode) {
  157. this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
  158. }
  159. };
  160. /**
  161. * Create the HTML DOM for the DataAxis
  162. */
  163. DataAxis.prototype.hide = function() {
  164. if (this.dom.frame.parentNode) {
  165. this.dom.frame.parentNode.removeChild(this.dom.frame);
  166. }
  167. if (this.dom.lineContainer.parentNode) {
  168. this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
  169. }
  170. };
  171. /**
  172. * Set a range (start and end)
  173. * @param end
  174. * @param start
  175. * @param end
  176. */
  177. DataAxis.prototype.setRange = function (start, end) {
  178. this.range.start = start;
  179. this.range.end = end;
  180. };
  181. /**
  182. * Repaint the component
  183. * @return {boolean} Returns true if the component is resized
  184. */
  185. DataAxis.prototype.redraw = function () {
  186. var changeCalled = false;
  187. var activeGroups = 0;
  188. for (var groupId in this.groups) {
  189. if (this.groups.hasOwnProperty(groupId)) {
  190. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  191. activeGroups++;
  192. }
  193. }
  194. }
  195. if (this.amountOfGroups == 0 || activeGroups == 0) {
  196. this.hide();
  197. }
  198. else {
  199. this.show();
  200. this.height = Number(this.linegraphSVG.style.height.replace("px",""));
  201. // svg offsetheight did not work in firefox and explorer...
  202. this.dom.lineContainer.style.height = this.height + 'px';
  203. this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
  204. var props = this.props;
  205. var frame = this.dom.frame;
  206. // update classname
  207. frame.className = 'dataaxis';
  208. // calculate character width and height
  209. this._calculateCharSize();
  210. var orientation = this.options.orientation;
  211. var showMinorLabels = this.options.showMinorLabels;
  212. var showMajorLabels = this.options.showMajorLabels;
  213. // determine the width and height of the elemens for the axis
  214. props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
  215. props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
  216. props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
  217. props.minorLineHeight = 1;
  218. props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
  219. props.majorLineHeight = 1;
  220. // take frame offline while updating (is almost twice as fast)
  221. if (orientation == 'left') {
  222. frame.style.top = '0';
  223. frame.style.left = '0';
  224. frame.style.bottom = '';
  225. frame.style.width = this.width + 'px';
  226. frame.style.height = this.height + "px";
  227. }
  228. else { // right
  229. frame.style.top = '';
  230. frame.style.bottom = '0';
  231. frame.style.left = '0';
  232. frame.style.width = this.width + 'px';
  233. frame.style.height = this.height + "px";
  234. }
  235. changeCalled = this._redrawLabels();
  236. if (this.options.icons == true) {
  237. this._redrawGroupIcons();
  238. }
  239. }
  240. return changeCalled;
  241. };
  242. /**
  243. * Repaint major and minor text labels and vertical grid lines
  244. * @private
  245. */
  246. DataAxis.prototype._redrawLabels = function () {
  247. DOMutil.prepareElements(this.DOMelements.lines);
  248. DOMutil.prepareElements(this.DOMelements.labels);
  249. var orientation = this.options['orientation'];
  250. // calculate range and step (step such that we have space for 7 characters per label)
  251. var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
  252. var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight, this.options.customRange[this.options.orientation]);
  253. this.step = step;
  254. // get the distance in pixels for a step
  255. // dead space is space that is "left over" after a step
  256. var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
  257. this.stepPixels = stepPixels;
  258. var amountOfSteps = this.height / stepPixels;
  259. var stepDifference = 0;
  260. if (this.master == false) {
  261. stepPixels = this.stepPixelsForced;
  262. stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
  263. for (var i = 0; i < 0.5 * stepDifference; i++) {
  264. step.previous();
  265. }
  266. amountOfSteps = this.height / stepPixels;
  267. }
  268. else {
  269. amountOfSteps += 0.25;
  270. }
  271. this.valueAtZero = step.marginEnd;
  272. var marginStartPos = 0;
  273. // do not draw the first label
  274. var max = 1;
  275. this.maxLabelSize = 0;
  276. var y = 0;
  277. while (max < Math.round(amountOfSteps)) {
  278. step.next();
  279. y = Math.round(max * stepPixels);
  280. marginStartPos = max * stepPixels;
  281. var isMajor = step.isMajor();
  282. if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
  283. this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
  284. }
  285. if (isMajor && this.options['showMajorLabels'] && this.master == true ||
  286. this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
  287. if (y >= 0) {
  288. this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight);
  289. }
  290. this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
  291. }
  292. else {
  293. this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
  294. }
  295. max++;
  296. }
  297. if (this.master == false) {
  298. this.conversionFactor = y / (this.valueAtZero - step.current);
  299. }
  300. else {
  301. this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
  302. }
  303. var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
  304. // this will resize the yAxis to accomodate the labels.
  305. if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
  306. this.width = this.maxLabelSize + offset;
  307. this.options.width = this.width + "px";
  308. DOMutil.cleanupElements(this.DOMelements.lines);
  309. DOMutil.cleanupElements(this.DOMelements.labels);
  310. this.redraw();
  311. return true;
  312. }
  313. // this will resize the yAxis if it is too big for the labels.
  314. else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
  315. this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
  316. this.options.width = this.width + "px";
  317. DOMutil.cleanupElements(this.DOMelements.lines);
  318. DOMutil.cleanupElements(this.DOMelements.labels);
  319. this.redraw();
  320. return true;
  321. }
  322. else {
  323. DOMutil.cleanupElements(this.DOMelements.lines);
  324. DOMutil.cleanupElements(this.DOMelements.labels);
  325. return false;
  326. }
  327. };
  328. DataAxis.prototype.convertValue = function (value) {
  329. var invertedValue = this.valueAtZero - value;
  330. var convertedValue = invertedValue * this.conversionFactor;
  331. return convertedValue;
  332. };
  333. /**
  334. * Create a label for the axis at position x
  335. * @private
  336. * @param y
  337. * @param text
  338. * @param orientation
  339. * @param className
  340. * @param characterHeight
  341. */
  342. DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
  343. // reuse redundant label
  344. var label = DOMutil.getDOMElement('div',this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
  345. label.className = className;
  346. label.innerHTML = text;
  347. if (orientation == 'left') {
  348. label.style.left = '-' + this.options.labelOffsetX + 'px';
  349. label.style.textAlign = "right";
  350. }
  351. else {
  352. label.style.right = '-' + this.options.labelOffsetX + 'px';
  353. label.style.textAlign = "left";
  354. }
  355. label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
  356. text += '';
  357. var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
  358. if (this.maxLabelSize < text.length * largestWidth) {
  359. this.maxLabelSize = text.length * largestWidth;
  360. }
  361. };
  362. /**
  363. * Create a minor line for the axis at position y
  364. * @param y
  365. * @param orientation
  366. * @param className
  367. * @param offset
  368. * @param width
  369. */
  370. DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
  371. if (this.master == true) {
  372. var line = DOMutil.getDOMElement('div',this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
  373. line.className = className;
  374. line.innerHTML = '';
  375. if (orientation == 'left') {
  376. line.style.left = (this.width - offset) + 'px';
  377. }
  378. else {
  379. line.style.right = (this.width - offset) + 'px';
  380. }
  381. line.style.width = width + 'px';
  382. line.style.top = y + 'px';
  383. }
  384. };
  385. /**
  386. * Determine the size of text on the axis (both major and minor axis).
  387. * The size is calculated only once and then cached in this.props.
  388. * @private
  389. */
  390. DataAxis.prototype._calculateCharSize = function () {
  391. // determine the char width and height on the minor axis
  392. if (!('minorCharHeight' in this.props)) {
  393. var textMinor = document.createTextNode('0');
  394. var measureCharMinor = document.createElement('DIV');
  395. measureCharMinor.className = 'yAxis minor measure';
  396. measureCharMinor.appendChild(textMinor);
  397. this.dom.frame.appendChild(measureCharMinor);
  398. this.props.minorCharHeight = measureCharMinor.clientHeight;
  399. this.props.minorCharWidth = measureCharMinor.clientWidth;
  400. this.dom.frame.removeChild(measureCharMinor);
  401. }
  402. if (!('majorCharHeight' in this.props)) {
  403. var textMajor = document.createTextNode('0');
  404. var measureCharMajor = document.createElement('DIV');
  405. measureCharMajor.className = 'yAxis major measure';
  406. measureCharMajor.appendChild(textMajor);
  407. this.dom.frame.appendChild(measureCharMajor);
  408. this.props.majorCharHeight = measureCharMajor.clientHeight;
  409. this.props.majorCharWidth = measureCharMajor.clientWidth;
  410. this.dom.frame.removeChild(measureCharMajor);
  411. }
  412. };
  413. /**
  414. * Snap a date to a rounded value.
  415. * The snap intervals are dependent on the current scale and step.
  416. * @param {Date} date the date to be snapped.
  417. * @return {Date} snappedDate
  418. */
  419. DataAxis.prototype.snap = function(date) {
  420. return this.step.snap(date);
  421. };
  422. module.exports = DataAxis;