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.

135 lines
4.9 KiB

  1. var util = require('../../util');
  2. var DOMutil = require('../../DOMutil');
  3. /**
  4. * @constructor Group
  5. * @param {Number | String} groupId
  6. * @param {Object} data
  7. * @param {ItemSet} itemSet
  8. */
  9. function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
  10. this.id = groupId;
  11. var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom','slots']
  12. this.options = util.selectiveBridgeObject(fields,options);
  13. this.usingDefaultStyle = group.className === undefined;
  14. this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
  15. this.zeroPosition = 0;
  16. this.update(group);
  17. if (this.usingDefaultStyle == true) {
  18. this.groupsUsingDefaultStyles[0] += 1;
  19. }
  20. this.itemsData = [];
  21. this.visible = group.visible === undefined ? true : group.visible;
  22. }
  23. GraphGroup.prototype.setItems = function(items) {
  24. if (items != null) {
  25. this.itemsData = items;
  26. if (this.options.sort == true) {
  27. this.itemsData.sort(function (a,b) {return a.x - b.x;})
  28. }
  29. }
  30. else {
  31. this.itemsData = [];
  32. }
  33. };
  34. GraphGroup.prototype.setZeroPosition = function(pos) {
  35. this.zeroPosition = pos;
  36. };
  37. GraphGroup.prototype.setOptions = function(options) {
  38. if (options !== undefined) {
  39. var fields = ['sampling','style','sort','yAxisOrientation','barChart','slots'];
  40. util.selectiveDeepExtend(fields, this.options, options);
  41. util.mergeOptions(this.options, options,'catmullRom');
  42. util.mergeOptions(this.options, options,'drawPoints');
  43. util.mergeOptions(this.options, options,'shaded');
  44. if (options.catmullRom) {
  45. if (typeof options.catmullRom == 'object') {
  46. if (options.catmullRom.parametrization) {
  47. if (options.catmullRom.parametrization == 'uniform') {
  48. this.options.catmullRom.alpha = 0;
  49. }
  50. else if (options.catmullRom.parametrization == 'chordal') {
  51. this.options.catmullRom.alpha = 1.0;
  52. }
  53. else {
  54. this.options.catmullRom.parametrization = 'centripetal';
  55. this.options.catmullRom.alpha = 0.5;
  56. }
  57. }
  58. }
  59. }
  60. }
  61. };
  62. GraphGroup.prototype.update = function(group) {
  63. this.group = group;
  64. this.content = group.content || 'graph';
  65. this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
  66. this.visible = group.visible === undefined ? true : group.visible;
  67. this.setOptions(group.options);
  68. };
  69. GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
  70. var fillHeight = iconHeight * 0.5;
  71. var path, fillPath;
  72. var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
  73. outline.setAttributeNS(null, "x", x);
  74. outline.setAttributeNS(null, "y", y - fillHeight);
  75. outline.setAttributeNS(null, "width", iconWidth);
  76. outline.setAttributeNS(null, "height", 2*fillHeight);
  77. outline.setAttributeNS(null, "class", "outline");
  78. if (this.options.style == 'line') {
  79. path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
  80. path.setAttributeNS(null, "class", this.className);
  81. path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
  82. if (this.options.shaded.enabled == true) {
  83. fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
  84. if (this.options.shaded.orientation == 'top') {
  85. fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
  86. "L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
  87. }
  88. else {
  89. fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
  90. "L"+x+"," + (y + fillHeight) + " " +
  91. "L"+ (x + iconWidth) + "," + (y + fillHeight) +
  92. "L"+ (x + iconWidth) + ","+y);
  93. }
  94. fillPath.setAttributeNS(null, "class", this.className + " iconFill");
  95. }
  96. if (this.options.drawPoints.enabled == true) {
  97. DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
  98. }
  99. }
  100. else {
  101. var barWidth = Math.round(0.3 * iconWidth);
  102. var bar1Height = Math.round(0.4 * iconHeight);
  103. var bar2Height = Math.round(0.75 * iconHeight);
  104. var offset = Math.round((iconWidth - (2 * barWidth))/3);
  105. DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
  106. DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
  107. }
  108. };
  109. /**
  110. *
  111. * @param iconWidth
  112. * @param iconHeight
  113. * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
  114. */
  115. GraphGroup.prototype.getLegend = function(iconWidth, iconHeight) {
  116. var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
  117. this.drawIcon(0,0.5*iconHeight,[],svg,iconWidth,iconHeight);
  118. return {icon: svg, label: this.content, orientation:this.options.yAxisOrientation};
  119. }
  120. module.exports = GraphGroup;