- DataAxis width option now draws correctly. #510

HISTORY.md

@@ -24,6 +24,7 @@ http://visjs.org
 - added show major/minor lines options to dataAxis.
 - Fixed adapting to width and height changes.
 - Added a check so only one 'activator' overlay is created on clickToUse.
+- DataAxis width option now draws correctly.
 
 ### Timeline
 

lib/timeline/component/DataAxis.js

@@ -261,7 +261,7 @@ DataAxis.prototype.setRange = function (start, end) {
  * @return {boolean} Returns true if the component is resized
  */
 DataAxis.prototype.redraw = function () {
-  var changeCalled = false;
+  var resized = false;
   var activeGroups = 0;
   
   // Make sure the line container adheres to the vertical scrolling.
@@ -314,6 +314,8 @@ DataAxis.prototype.redraw = function () {
       frame.style.bottom = '';
       frame.style.width = this.width + 'px';
       frame.style.height = this.height + "px";
+      this.props.width = this.body.domProps.left.width;
+      this.props.height = this.body.domProps.left.height;
     }
     else { // right
       frame.style.top = '';
@@ -321,8 +323,12 @@ DataAxis.prototype.redraw = function () {
       frame.style.left = '0';
       frame.style.width = this.width + 'px';
       frame.style.height = this.height + "px";
+      this.props.width = this.body.domProps.right.width;
+      this.props.height = this.body.domProps.right.height;
     }
-    changeCalled = this._redrawLabels();
+
+    resized = this._redrawLabels();
+    resized = this._isResized() || resized;
 
     if (this.options.icons == true) {
       this._redrawGroupIcons();
@@ -333,7 +339,7 @@ DataAxis.prototype.redraw = function () {
 
     this._redrawTitle(orientation);
   }
-  return changeCalled;
+  return resized;
 };
 
 /**
@@ -341,6 +347,7 @@ DataAxis.prototype.redraw = function () {
  * @private
  */
 DataAxis.prototype._redrawLabels = function () {
+  var resized = false;
   DOMutil.prepareElements(this.DOMelements.lines);
   DOMutil.prepareElements(this.DOMelements.labels);
 
@@ -457,7 +464,7 @@ DataAxis.prototype._redrawLabels = function () {
     DOMutil.cleanupElements(this.DOMelements.lines);
     DOMutil.cleanupElements(this.DOMelements.labels);
     this.redraw();
-    return true;
+    resized = true;
   }
   // this will resize the yAxis if it is too big for the labels.
   else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
@@ -466,13 +473,15 @@ DataAxis.prototype._redrawLabels = function () {
     DOMutil.cleanupElements(this.DOMelements.lines);
     DOMutil.cleanupElements(this.DOMelements.labels);
     this.redraw();
-    return true;
+    resized = true;
   }
   else {
     DOMutil.cleanupElements(this.DOMelements.lines);
     DOMutil.cleanupElements(this.DOMelements.labels);
-    return false;
+    resized = false;
   }
+
+  return resized;
 };
 
 DataAxis.prototype.convertValue = function (value) {

lib/timeline/component/LineGraph.js

@@ -100,7 +100,7 @@ function LineGraph(body, options) {
   this.hammer = null;
   this.groups = {};
   this.abortedGraphUpdate = false;
-  this.autoSizeSVG = false;
+  this.updateSVGheight = false;
 
   var me = this;
   this.itemsData = null;    // DataSet
@@ -194,11 +194,11 @@ LineGraph.prototype.setOptions = function(options) {
   if (options) {
     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;
+      this.updateSVGheight = true;
     }
     else if (this.body.domProps.centerContainer.height !== undefined && options.graphHeight !== undefined) {
       if (parseInt((options.graphHeight + '').replace("px",'')) < this.body.domProps.centerContainer.height) {
-        this.autoSizeSVG = true;
+        this.updateSVGheight = true;
       }
     }
     util.selectiveDeepExtend(fields, this.options, options);
@@ -566,18 +566,20 @@ LineGraph.prototype.redraw = function(forceGraphUpdate) {
   if (resized == true) {
     this.svg.style.width = util.option.asSize(3*this.props.width);
     this.svg.style.left = util.option.asSize(-this.props.width);
+
+    // if the height of the graph is set as proportional, change the height of the svg
     if ((this.options.height + '').indexOf("%") != -1) {
-      this.autoSizeSVG = true;
+      this.updateSVGheight = true;
     }
   }
 
   // update the height of the graph on each redraw of the graph.
-  if (this.autoSizeSVG == true) {
+  if (this.updateSVGheight == 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;
+    this.updateSVGheight = false;
   }
   else {
     this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
@@ -602,7 +604,6 @@ LineGraph.prototype.redraw = function(forceGraphUpdate) {
 
   this.legendLeft.redraw();
   this.legendRight.redraw();
-
   return resized;
 };
 
@@ -823,7 +824,7 @@ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
  * @private
  */
 LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
-  var changeCalled = false;
+  var resized = false;
   var yAxisLeftUsed = false;
   var yAxisRightUsed = false;
   var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
@@ -872,8 +873,8 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
       this.yAxisRight.setRange(minRight, maxRight);
     }
   }
-  changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || changeCalled;
-  changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
+  resized = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || resized;
+  resized = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || resized;
   if (yAxisRightUsed == true && yAxisLeftUsed == true) {
     this.yAxisLeft.drawIcons = true;
     this.yAxisRight.drawIcons = true;
@@ -888,13 +889,13 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
     if (yAxisRightUsed == true) {this.yAxisLeft.lineOffset = this.yAxisRight.width;}
     else                        {this.yAxisLeft.lineOffset = 0;}
 
-    changeCalled = this.yAxisLeft.redraw() || changeCalled;
+    resized = this.yAxisLeft.redraw() || resized;
     this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
     this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
-    changeCalled = this.yAxisRight.redraw() || changeCalled;
+    resized = this.yAxisRight.redraw() || resized;
   }
   else {
-    changeCalled = this.yAxisRight.redraw() || changeCalled;
+    resized = this.yAxisRight.redraw() || resized;
   }
 
   // clean the accumulated lists
@@ -905,7 +906,7 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
     groupIds.splice(groupIds.indexOf('__barchartRight'),1);
   }
 
-  return changeCalled;
+  return resized;
 };