fixed relative height change on resize of browser as well as horizontal snapping when dragging window size. Improved consistancy with component

lib/timeline/component/LineGraph.js

@@ -143,7 +143,7 @@ function LineGraph(body, options) {
   this.COUNTER = 0;
   this.body.emitter.on('rangechanged', function() {
     me.lastStart = me.body.range.start;
-    me.svg.style.left = util.option.asSize(-me.width);
+    me.svg.style.left = util.option.asSize(-me.props.width);
     me.redraw.call(me,true);
   });
 
@@ -192,7 +192,7 @@ LineGraph.prototype._create = function(){
  */
 LineGraph.prototype.setOptions = function(options) {
   if (options) {
-    var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
+    var fields = ['sampling','defaultGroup','height','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
     if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) {
       this.autoSizeSVG = true;
     }
@@ -543,44 +543,61 @@ LineGraph.prototype._updateUngrouped = function() {
 LineGraph.prototype.redraw = function(forceGraphUpdate) {
   var resized = false;
 
-  this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
-  if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
-    resized = true;
+  // calculate actual size and position
+  this.props.width = this.dom.frame.offsetWidth;
+  this.props.height = this.body.domProps.centerContainer.height;
+
+  // update the graph if there is no lastWidth or with, used for the initial draw
+  if (this.lastWidth === undefined && this.props.width) {
+    forceGraphUpdate = true;
   }
+
   // check if this component is resized
   resized = this._isResized() || resized;
+
   // check whether zoomed (in that case we need to re-stack everything)
   var visibleInterval = this.body.range.end - this.body.range.start;
-  var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth); // we get this from the range changed event
+  var zoomed = (visibleInterval != this.lastVisibleInterval);
   this.lastVisibleInterval = visibleInterval;
-  this.lastWidth = this.width;
 
-  // calculate actual size and position
-  this.width = this.dom.frame.offsetWidth;
 
   // the svg element is three times as big as the width, this allows for fully dragging left and right
   // without reloading the graph. the controls for this are bound to events in the constructor
   if (resized == true) {
-    this.svg.style.width = util.option.asSize(3*this.width);
-    this.svg.style.left = util.option.asSize(-this.width);
+    this.svg.style.width = util.option.asSize(3*this.props.width);
+    this.svg.style.left = util.option.asSize(-this.props.width);
+    if ((this.options.height + '').indexOf("%") != -1) {
+      this.autoSizeSVG = true;
+    }
+  }
+
+  // update the height of the graph on each redraw of the graph.
+  if (this.autoSizeSVG == true) {
+    if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
+      this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
+      this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
+    }
+    this.autoSizeSVG = false;
+  }
+  else {
+    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
   }
 
   // zoomed is here to ensure that animations are shown correctly.
-  if (zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
-    resized = resized || this._updateGraph();
+  if (resized == true || zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
+    resized = this._updateGraph() || resized;
   }
   else {
     // move the whole svg while dragging
     if (this.lastStart != 0) {
       var offset = this.body.range.start - this.lastStart;
       var range = this.body.range.end - this.body.range.start;
-      if (this.width != 0) {
-        var rangePerPixelInv = this.width/range;
+      if (this.props.width != 0) {
+        var rangePerPixelInv = this.props.width/range;
         var xOffset = offset * rangePerPixelInv;
-        this.svg.style.left = (-this.width - xOffset) + 'px';
+        this.svg.style.left = (-this.props.width - xOffset) + 'px';
       }
     }
-
   }
 
   this.legendLeft.redraw();
@@ -597,22 +614,13 @@ LineGraph.prototype.redraw = function(forceGraphUpdate) {
 LineGraph.prototype._updateGraph = function () {
   // reset the svg elements
   DOMutil.prepareElements(this.svgElements);
-  if (this.width != 0 && this.itemsData != null) {
+  if (this.props.width != 0 && this.itemsData != null) {
     var group, i;
     var preprocessedGroupData = {};
     var processedGroupData = {};
     var groupRanges = {};
     var changeCalled = false;
 
-    // update the height of the graph on each redraw of the graph.
-    if (this.autoSizeSVG == true) {
-      if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
-        this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
-        this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
-      }
-      this.autoSizeSVG = false;
-    }
-
     // getting group Ids
     var groupIds = [];
     for (var groupId in this.groups) {
@@ -866,7 +874,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
   }
   changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
   changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
-
   if (yAxisRightUsed == true && yAxisLeftUsed == true) {
     this.yAxisLeft.drawIcons = true;
     this.yAxisRight.drawIcons = true;
@@ -875,7 +882,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
     this.yAxisLeft.drawIcons = false;
     this.yAxisRight.drawIcons = false;
   }
-
   this.yAxisRight.master = !yAxisLeftUsed;
 
   if (this.yAxisRight.master == false) {
@@ -944,7 +950,7 @@ LineGraph.prototype._convertXcoordinates = function (datapoints) {
   var toScreen = this.body.util.toScreen;
 
   for (var i = 0; i < datapoints.length; i++) {
-    xValue = toScreen(datapoints[i].x) + this.width;
+    xValue = toScreen(datapoints[i].x) + this.props.width;
     yValue = datapoints[i].y;
     extractedData.push({x: xValue, y: yValue});
   }
@@ -974,7 +980,7 @@ LineGraph.prototype._convertYcoordinates = function (datapoints, group) {
   }
 
   for (var i = 0; i < datapoints.length; i++) {
-    xValue = toScreen(datapoints[i].x) + this.width;
+    xValue = toScreen(datapoints[i].x) + this.props.width;
     yValue = Math.round(axis.convertValue(datapoints[i].y));
     extractedData.push({x: xValue, y: yValue});
   }