Fixed #1076: hiding remainder grid line at the end of a month

lib/timeline/component/TimeAxis.js

@@ -217,37 +217,40 @@ TimeAxis.prototype._repaintLabels = function () {
   dom.majorTexts = [];
   dom.minorTexts = [];
 
-  var cur;
-  var x = 0;
+  var current;
+  var next;
+  var x;
+  var xNext;
   var isMajor;
-  var xPrev = 0;
-  var width = 0;
-  var prevLine;
-  var prevText;
+  var width;
+  var line;
+  var labelMinor;
   var xFirstMajorLabel = undefined;
   var max = 0;
   var className;
 
   step.first();
+  next = step.getCurrent();
+  xNext = this.body.util.toScreen(next);
   while (step.hasNext() && max < 1000) {
     max++;
 
-    cur = step.getCurrent();
     isMajor = step.isMajor();
     className = step.getClassName();
+    labelMinor = step.getLabelMinor();
 
-    xPrev = x;
-    x = this.body.util.toScreen(cur);
-    width = x - xPrev;
-    if (prevLine) {
-      prevLine.style.width = width + 'px';
-    }
-    if (prevText) {
-      prevText.style.width = width + 'px';
-    }
+    current = next;
+    x = xNext;
+
+    step.next();
+    next = step.getCurrent();
+    xNext = this.body.util.toScreen(next);
+
+    width = xNext - x;
+    var labelFits = labelMinor.length * this.props.minorCharWidth < width;
 
-    if (this.options.showMinorLabels) {
-      prevText = this._repaintMinorText(x, step.getLabelMinor(), orientation, className);
+    if (this.options.showMinorLabels && labelFits) {
+      this._repaintMinorText(x, labelMinor, orientation, className);
     }
 
     if (isMajor && this.options.showMajorLabels) {
@@ -257,13 +260,18 @@ TimeAxis.prototype._repaintLabels = function () {
         }
         this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
       }
-      prevLine = this._repaintMajorLine(x, orientation, className);
+      line = this._repaintMajorLine(x, width, orientation, className);
     }
     else {
-      prevLine = this._repaintMinorLine(x, orientation, className);
+      if (labelFits) {
+        line = this._repaintMinorLine(x, width, orientation, className);
+      }
+      else {
+        if (line) {
+          line.style.width = (parseInt (line.style.width) + width) + 'px'
+        }
+      }
     }
-
-    step.next();
   }
 
   // create a major label on the left when needed
@@ -355,12 +363,13 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
 /**
  * Create a minor line for the axis at position x
  * @param {Number} x
+ * @param {Number} width
  * @param {String} orientation   "top" or "bottom" (default)
  * @param {String} className
  * @return {Element} Returns the created line
  * @private
  */
-TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
+TimeAxis.prototype._repaintMinorLine = function (x, width, orientation, className) {
   // reuse redundant line
   var line = this.dom.redundant.lines.shift();
   if (!line) {
@@ -379,6 +388,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
   }
   line.style.height = props.minorLineHeight + 'px';
   line.style.left = (x - props.minorLineWidth / 2) + 'px';
+  line.style.width = width + 'px';
 
   line.className = 'vis-grid vis-vertical vis-minor ' + className;
 
@@ -388,12 +398,13 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
 /**
  * Create a Major line for the axis at position x
  * @param {Number} x
+ * @param {Number} width
  * @param {String} orientation   "top" or "bottom" (default)
  * @param {String} className
  * @return {Element} Returns the created line
  * @private
  */
-TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
+TimeAxis.prototype._repaintMajorLine = function (x, width, orientation, className) {
   // reuse redundant line
   var line = this.dom.redundant.lines.shift();
   if (!line) {
@@ -412,6 +423,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
   }
   line.style.left = (x - props.majorLineWidth / 2) + 'px';
   line.style.height = props.majorLineHeight + 'px';
+  line.style.width = width  + 'px';
 
   line.className = 'vis-grid vis-vertical vis-major ' + className;