Merge pull request #1498 from almende/newShading

More graph2d updates

docs/graph2d/index.html

@@ -576,7 +576,7 @@ drawPoints: {
             
             3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br />
             <pre class="prettyprint lang-js">
-drawPoints: function(item, group, graph2d) {
+drawPoints: function(item, group) {
   ...
 }
             </pre>

lib/timeline/component/DataAxis.js

@@ -77,6 +77,7 @@ function DataAxis (body, options, svg, linegraphOptions) {
 
   // create the HTML DOM
   this._create();
+  this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
 
   var me = this;
   this.body.emitter.on("verticalDrag", function() {
@@ -187,7 +188,7 @@ DataAxis.prototype._redrawGroupIcons = function () {
   for (var i = 0; i < groupArray.length; i++) {
     var groupId = groupArray[i];
     if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) {
-      this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+      this.groups[groupId].getLegend(iconWidth, iconHeight, this.framework, x, y);
       y += iconHeight + iconOffset;
     }
   }

lib/timeline/component/GraphGroup.js

@@ -1,5 +1,8 @@
 var util = require('../../util');
 var DOMutil = require('../../DOMutil');
+var Bars = require('./graph2d_types/bar');
+var Lines = require('./graph2d_types/line');
+var Points = require('./graph2d_types/points');
 
 /**
  * /**
@@ -120,79 +123,6 @@ GraphGroup.prototype.update = function (group) {
   this.setOptions(group.options);
 };
 
-
-//TODO: move these render functions into the type specific files and call them from LineGraph
-
-/**
- * draw the icon for the legend.
- *
- * @param x
- * @param y
- * @param JSONcontainer
- * @param SVGcontainer
- * @param iconWidth
- * @param iconHeight
- */
-GraphGroup.prototype.drawIcon = function (x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
-  var fillHeight = iconHeight * 0.5;
-  var path, fillPath;
-
-  var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
-  outline.setAttributeNS(null, "x", x);
-  outline.setAttributeNS(null, "y", y - fillHeight);
-  outline.setAttributeNS(null, "width", iconWidth);
-  outline.setAttributeNS(null, "height", 2 * fillHeight);
-  outline.setAttributeNS(null, "class", "vis-outline");
-
-  if (this.options.style == 'line') {
-    path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-    path.setAttributeNS(null, "class", this.className);
-    if (this.style !== undefined) {
-      path.setAttributeNS(null, "style", this.style);
-    }
-
-    path.setAttributeNS(null, "d", "M" + x + "," + y + " L" + (x + iconWidth) + "," + y + "");
-    if (this.options.shaded.enabled == true) {
-      fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-      if (this.options.shaded.orientation == 'top') {
-        fillPath.setAttributeNS(null, "d", "M" + x + ", " + (y - fillHeight) +
-          "L" + x + "," + y + " L" + (x + iconWidth) + "," + y + " L" + (x + iconWidth) + "," + (y - fillHeight));
-      }
-      else {
-        fillPath.setAttributeNS(null, "d", "M" + x + "," + y + " " +
-          "L" + x + "," + (y + fillHeight) + " " +
-          "L" + (x + iconWidth) + "," + (y + fillHeight) +
-          "L" + (x + iconWidth) + "," + y);
-      }
-      fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
-      if (this.options.shaded.style !== undefined && this.options.shaded.style !== "") {
-        fillPath.setAttributeNS(null, "style", this.options.shaded.style);
-      }
-    }
-
-    if (this.options.drawPoints.enabled == true) {
-      var groupTemplate = {
-        style: this.options.drawPoints.style,
-        styles: this.options.drawPoints.styles,
-        size: this.options.drawPoints.size,
-        className: this.className
-      };
-      DOMutil.drawPoint(x + 0.5 * iconWidth, y, groupTemplate, JSONcontainer, SVGcontainer);
-    }
-  }
-  else {
-    var barWidth = Math.round(0.3 * iconWidth);
-    var bar1Height = Math.round(0.4 * iconHeight);
-    var bar2Height = Math.round(0.75 * iconHeight);
-
-    var offset = Math.round((iconWidth - (2 * barWidth)) / 3);
-
-    DOMutil.drawBar(x + 0.5 * barWidth + offset, y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer, this.style);
-    DOMutil.drawBar(x + 1.5 * barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer, this.style);
-  }
-};
-
-
 /**
  * return the legend entree for this group.
  *
@@ -200,10 +130,29 @@ GraphGroup.prototype.drawIcon = function (x, y, JSONcontainer, SVGcontainer, ico
  * @param iconHeight
  * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
  */
-GraphGroup.prototype.getLegend = function (iconWidth, iconHeight) {
-  var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
-  this.drawIcon(0, 0.5 * iconHeight, [], svg, iconWidth, iconHeight);
-  return {icon: svg, label: this.content, orientation: this.options.yAxisOrientation};
+GraphGroup.prototype.getLegend = function (iconWidth, iconHeight, framework, x, y) {
+  if (framework == undefined || framework == null) {
+    var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
+    framework = {svg: svg, svgElements:{}, options: this.options, groups: [this]}
+  }
+  if (x == undefined || x == null){
+    x = 0;
+  }
+  if (y == undefined || y == null){
+    y = 0.5 * iconHeight;
+  }
+  switch (this.options.style){
+    case "line":
+      Lines.drawIcon(this, x, y, iconWidth, iconHeight, framework);
+      break;
+    case "points":
+      Points.drawIcon(this, x, y, iconWidth, iconHeight, framework);
+      break;
+    case "bar":
+      Bars.drawIcon(this, x, y, iconWidth, iconHeight, framework);
+      break;
+  }
+  return {icon: framework.svg, label: this.content, orientation: this.options.yAxisOrientation};
 };
 
 GraphGroup.prototype.getYRange = function (groupData) {

lib/timeline/component/Legend.js

@@ -30,6 +30,7 @@ function Legend(body, options, side, linegraphOptions) {
   this.groups = {};
   this.amountOfGroups = 0;
   this._create();
+  this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
 
   this.setOptions(options);
 }
@@ -204,7 +205,7 @@ Legend.prototype.drawLegendIcons = function() {
     for (var i = 0; i < groupArray.length; i++) {
       var groupId = groupArray[i];
       if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-        this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+        this.groups[groupId].getLegend(iconWidth, iconHeight, this.framework, x, y);
         y += iconHeight + this.options.iconSpacing;
       }
     }

lib/timeline/component/graph2d_types/bar.js

@@ -4,6 +4,40 @@ var Points = require('./points');
 function Bargraph(groupId, options) {
 }
 
+Bargraph.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) {
+  var fillHeight = iconHeight * 0.5;
+  var path, fillPath;
+
+  var outline = DOMutil.getSVGElement("rect", framework.svgElements, framework.svg);
+  outline.setAttributeNS(null, "x", x);
+  outline.setAttributeNS(null, "y", y - fillHeight);
+  outline.setAttributeNS(null, "width", iconWidth);
+  outline.setAttributeNS(null, "height", 2 * fillHeight);
+  outline.setAttributeNS(null, "class", "vis-outline");
+
+  var barWidth = Math.round(0.3 * iconWidth);
+  var bar1Height = Math.round(0.4 * iconHeight);
+  var bar2Height = Math.round(0.75 * iconHeight);
+
+  var offset = Math.round((iconWidth - (2 * barWidth)) / 3);
+
+  DOMutil.drawBar(x + 0.5 * barWidth + offset, y + fillHeight - bar1Height - 1, barWidth, bar1Height, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
+  DOMutil.drawBar(x + 1.5 * barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
+  //TODO: draw little points if drawPoints enabled.
+
+  if (group.options.drawPoints.enabled == true) {
+    var groupTemplate = {
+      style: group.options.drawPoints.style,
+      styles: group.options.drawPoints.styles,
+      size: barWidth/5,
+      className: group.className
+    };
+    DOMutil.drawPoint(x + 0.5 * barWidth + offset, y + fillHeight - bar1Height - 1, groupTemplate, framework.svgElements, framework.svg);
+    DOMutil.drawPoint(x + 1.5 * barWidth + offset + 2, y + fillHeight - bar2Height - 1, groupTemplate, framework.svgElements, framework.svg);
+  }
+
+}
+
 /**
  * draw a bar graph
  *

lib/timeline/component/graph2d_types/line.js

@@ -20,6 +20,53 @@ Line.calcPath = function (dataset, group) {
     }
 }
 
+Line.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) {
+    var fillHeight = iconHeight * 0.5;
+    var path, fillPath;
+
+    var outline = DOMutil.getSVGElement("rect", framework.svgElements, framework.svg);
+    outline.setAttributeNS(null, "x", x);
+    outline.setAttributeNS(null, "y", y - fillHeight);
+    outline.setAttributeNS(null, "width", iconWidth);
+    outline.setAttributeNS(null, "height", 2 * fillHeight);
+    outline.setAttributeNS(null, "class", "vis-outline");
+
+    path = DOMutil.getSVGElement("path", framework.svgElements, framework.svg);
+    path.setAttributeNS(null, "class", group.className);
+    if (group.style !== undefined) {
+        path.setAttributeNS(null, "style", group.style);
+    }
+
+    path.setAttributeNS(null, "d", "M" + x + "," + y + " L" + (x + iconWidth) + "," + y + "");
+    if (group.options.shaded.enabled == true) {
+        fillPath = DOMutil.getSVGElement("path", framework.svgElements, framework.svg);
+        if (group.options.shaded.orientation == 'top') {
+            fillPath.setAttributeNS(null, "d", "M" + x + ", " + (y - fillHeight) +
+              "L" + x + "," + y + " L" + (x + iconWidth) + "," + y + " L" + (x + iconWidth) + "," + (y - fillHeight));
+        }
+        else {
+            fillPath.setAttributeNS(null, "d", "M" + x + "," + y + " " +
+              "L" + x + "," + (y + fillHeight) + " " +
+              "L" + (x + iconWidth) + "," + (y + fillHeight) +
+              "L" + (x + iconWidth) + "," + y);
+        }
+        fillPath.setAttributeNS(null, "class", group.className + " vis-icon-fill");
+        if (group.options.shaded.style !== undefined && group.options.shaded.style !== "") {
+            fillPath.setAttributeNS(null, "style", group.options.shaded.style);
+        }
+    }
+
+    if (group.options.drawPoints.enabled == true) {
+        var groupTemplate = {
+            style: group.options.drawPoints.style,
+            styles: group.options.drawPoints.styles,
+            size: group.options.drawPoints.size,
+            className: group.className
+        };
+        DOMutil.drawPoint(x + 0.5 * iconWidth, y, groupTemplate, framework.svgElements, framework.svg);
+    }
+}
+
 Line.drawShading = function (pathArray, group, subPathArray, framework) {
     // append shading to the path
     if (group.options.shaded.enabled == true) {

lib/timeline/component/graph2d_types/points.js

@@ -14,47 +14,61 @@ function Points(groupId, options) {
  */
 Points.draw = function (dataset, group, framework, offset) {
   offset = offset || 0;
-  var callback = getCallback();
+  var callback = getCallback(framework, group);
 
   for (var i = 0; i < dataset.length; i++) {
     if (!callback) {
       // draw the point the simple way.
-      DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(), framework.svgElements, framework.svg, dataset[i].label);
+      DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(group), framework.svgElements, framework.svg, dataset[i].label);
     }
     else {
-      var callbackResult = callback(dataset[i], group, framework); // result might be true, false or an object
+      var callbackResult = callback(dataset[i], group); // result might be true, false or an object
       if (callbackResult === true || typeof callbackResult === 'object') {
-          DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(callbackResult), framework.svgElements, framework.svg, dataset[i].label);
+        DOMutil.drawPoint(dataset[i].screen_x + offset, dataset[i].screen_y, getGroupTemplate(group, callbackResult), framework.svgElements, framework.svg, dataset[i].label);
       }
     }
   }
+};
 
-  function getGroupTemplate(callbackResult) {
-    callbackResult = (typeof callbackResult === 'undefined') ? {} : callbackResult;
-    return {
-      style: callbackResult.style || group.options.drawPoints.style,
-      styles: callbackResult.styles || group.options.drawPoints.styles,
-      size: callbackResult.size || group.options.drawPoints.size,
-      className: callbackResult.className || group.className
-    };
-  }
+Points.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) {
+  var fillHeight = iconHeight * 0.5;
+  var path, fillPath;
 
-  function getCallback() {
-    var callback = undefined;
-      // check for the graph2d onRender
-      if (framework.options.drawPoints.onRender && typeof framework.options.drawPoints.onRender == 'function') {
-        callback = framework.options.drawPoints.onRender;
-      }
+  var outline = DOMutil.getSVGElement("rect", framework.svgElements, framework.svg);
+  outline.setAttributeNS(null, "x", x);
+  outline.setAttributeNS(null, "y", y - fillHeight);
+  outline.setAttributeNS(null, "width", iconWidth);
+  outline.setAttributeNS(null, "height", 2 * fillHeight);
+  outline.setAttributeNS(null, "class", "vis-outline");
 
-      // override it with the group onRender if defined
-      if (group.group.options && group.group.options.drawPoints && group.group.options.drawPoints.onRender && typeof group.group.options.drawPoints.onRender == 'function') {
-        callback = group.group.options.drawPoints.onRender;
-      }
+  //Don't call callback on icon
+  DOMutil.drawPoint(x + 0.5 * iconWidth, y, getGroupTemplate(group), framework.svgElements, framework.svg);
+};
 
-      return callback;
+function getGroupTemplate(group, callbackResult) {
+  callbackResult = (typeof callbackResult === 'undefined') ? {} : callbackResult;
+  return {
+    style: callbackResult.style || group.options.drawPoints.style,
+    styles: callbackResult.styles || group.options.drawPoints.styles,
+    size: callbackResult.size || group.options.drawPoints.size,
+    className: callbackResult.className || group.className
+  };
+}
+
+function getCallback(framework, group) {
+  var callback = undefined;
+  // check for the graph2d onRender
+  if (framework.options && framework.options.drawPoints && framework.options.drawPoints.onRender && typeof framework.options.drawPoints.onRender == 'function') {
+    callback = framework.options.drawPoints.onRender;
   }
-};
 
+  // override it with the group onRender if defined
+  if (group.group.options && group.group.options.drawPoints && group.group.options.drawPoints.onRender && typeof group.group.options.drawPoints.onRender == 'function') {
+    callback = group.group.options.drawPoints.onRender;
+  }
+
+  return callback;
+}
 
 
 module.exports = Points;