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.

216 lines
6.9 KiB

  1. var util = require('../../util');
  2. var DOMutil = require('../../DOMutil');
  3. var Component = require('./Component');
  4. /**
  5. * Legend for Graph2d
  6. */
  7. function Legend(body, options, side, linegraphOptions) {
  8. this.body = body;
  9. this.defaultOptions = {
  10. enabled: false,
  11. icons: true,
  12. iconSize: 20,
  13. iconSpacing: 6,
  14. left: {
  15. visible: true,
  16. position: 'top-left' // top/bottom - left,center,right
  17. },
  18. right: {
  19. visible: true,
  20. position: 'top-left' // top/bottom - left,center,right
  21. }
  22. }
  23. this.side = side;
  24. this.options = util.extend({},this.defaultOptions);
  25. this.linegraphOptions = linegraphOptions;
  26. this.svgElements = {};
  27. this.dom = {};
  28. this.groups = {};
  29. this.amountOfGroups = 0;
  30. this._create();
  31. this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
  32. this.setOptions(options);
  33. }
  34. Legend.prototype = new Component();
  35. Legend.prototype.clear = function() {
  36. this.groups = {};
  37. this.amountOfGroups = 0;
  38. };
  39. Legend.prototype.addGroup = function(label, graphOptions) {
  40. // Include a group only if the group option 'excludeFromLegend: false' is not set.
  41. if (graphOptions.options.excludeFromLegend != true) {
  42. if (!this.groups.hasOwnProperty(label)) {
  43. this.groups[label] = graphOptions;
  44. }
  45. this.amountOfGroups += 1;
  46. }
  47. };
  48. Legend.prototype.updateGroup = function(label, graphOptions) {
  49. this.groups[label] = graphOptions;
  50. };
  51. Legend.prototype.removeGroup = function(label) {
  52. if (this.groups.hasOwnProperty(label)) {
  53. delete this.groups[label];
  54. this.amountOfGroups -= 1;
  55. }
  56. };
  57. Legend.prototype._create = function() {
  58. this.dom.frame = document.createElement('div');
  59. this.dom.frame.className = 'vis-legend';
  60. this.dom.frame.style.position = "absolute";
  61. this.dom.frame.style.top = "10px";
  62. this.dom.frame.style.display = "block";
  63. this.dom.textArea = document.createElement('div');
  64. this.dom.textArea.className = 'vis-legend-text';
  65. this.dom.textArea.style.position = "relative";
  66. this.dom.textArea.style.top = "0px";
  67. this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
  68. this.svg.style.position = 'absolute';
  69. this.svg.style.top = 0 +'px';
  70. this.svg.style.width = this.options.iconSize + 5 + 'px';
  71. this.svg.style.height = '100%';
  72. this.dom.frame.appendChild(this.svg);
  73. this.dom.frame.appendChild(this.dom.textArea);
  74. };
  75. /**
  76. * Hide the component from the DOM
  77. */
  78. Legend.prototype.hide = function() {
  79. // remove the frame containing the items
  80. if (this.dom.frame.parentNode) {
  81. this.dom.frame.parentNode.removeChild(this.dom.frame);
  82. }
  83. };
  84. /**
  85. * Show the component in the DOM (when not already visible).
  86. * @return {Boolean} changed
  87. */
  88. Legend.prototype.show = function() {
  89. // show frame containing the items
  90. if (!this.dom.frame.parentNode) {
  91. this.body.dom.center.appendChild(this.dom.frame);
  92. }
  93. };
  94. Legend.prototype.setOptions = function(options) {
  95. var fields = ['enabled','orientation','icons','left','right'];
  96. util.selectiveDeepExtend(fields, this.options, options);
  97. };
  98. Legend.prototype.redraw = function() {
  99. var activeGroups = 0;
  100. var groupArray = Object.keys(this.groups);
  101. groupArray.sort(function (a,b) {
  102. return (a < b ? -1 : 1);
  103. })
  104. for (var i = 0; i < groupArray.length; i++) {
  105. var groupId = groupArray[i];
  106. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  107. activeGroups++;
  108. }
  109. }
  110. if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false || activeGroups == 0) {
  111. this.hide();
  112. }
  113. else {
  114. this.show();
  115. if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
  116. this.dom.frame.style.left = '4px';
  117. this.dom.frame.style.textAlign = "left";
  118. this.dom.textArea.style.textAlign = "left";
  119. this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
  120. this.dom.textArea.style.right = '';
  121. this.svg.style.left = 0 +'px';
  122. this.svg.style.right = '';
  123. }
  124. else {
  125. this.dom.frame.style.right = '4px';
  126. this.dom.frame.style.textAlign = "right";
  127. this.dom.textArea.style.textAlign = "right";
  128. this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
  129. this.dom.textArea.style.left = '';
  130. this.svg.style.right = 0 +'px';
  131. this.svg.style.left = '';
  132. }
  133. if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
  134. this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
  135. this.dom.frame.style.bottom = '';
  136. }
  137. else {
  138. var scrollableHeight = this.body.domProps.center.height - this.body.domProps.centerContainer.height;
  139. this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace("px","")) + 'px';
  140. this.dom.frame.style.top = '';
  141. }
  142. if (this.options.icons == false) {
  143. this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
  144. this.dom.textArea.style.right = '';
  145. this.dom.textArea.style.left = '';
  146. this.svg.style.width = '0px';
  147. }
  148. else {
  149. this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
  150. this.drawLegendIcons();
  151. }
  152. var content = '';
  153. for (var i = 0; i < groupArray.length; i++) {
  154. var groupId = groupArray[i];
  155. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  156. content += this.groups[groupId].content + '<br />';
  157. }
  158. }
  159. this.dom.textArea.innerHTML = content;
  160. this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
  161. }
  162. };
  163. Legend.prototype.drawLegendIcons = function() {
  164. if (this.dom.frame.parentNode) {
  165. var groupArray = Object.keys(this.groups);
  166. groupArray.sort(function (a,b) {
  167. return (a < b ? -1 : 1);
  168. });
  169. // this resets the elements so the order is maintained
  170. DOMutil.resetElements(this.svgElements);
  171. var padding = window.getComputedStyle(this.dom.frame).paddingTop;
  172. var iconOffset = Number(padding.replace('px',''));
  173. var x = iconOffset;
  174. var iconWidth = this.options.iconSize;
  175. var iconHeight = 0.75 * this.options.iconSize;
  176. var y = iconOffset + 0.5 * iconHeight + 3;
  177. this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
  178. for (var i = 0; i < groupArray.length; i++) {
  179. var groupId = groupArray[i];
  180. if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
  181. this.groups[groupId].getLegend(iconWidth, iconHeight, this.framework, x, y);
  182. y += iconHeight + this.options.iconSpacing;
  183. }
  184. }
  185. }
  186. };
  187. module.exports = Legend;