Fixed #1449, #1393: text of minor grids sometimes not being drawn. Implemented option `maxMinorChars` to customize the width of the grids.

HISTORY.md

@@ -23,7 +23,6 @@ http://visjs.org
 - Fixed #1416: Fixed error in improvedLayout.
 - Improvements on hierarchical layout.
 
-
 ### Timeline
 
 - Implemented option `itemsAlwaysDraggable`, See #1395. Thanks @liuqingc.
@@ -31,7 +30,9 @@ http://visjs.org
 - Implemented property `oldData` on change events of the DataSet, and
   deprecated the `data` property which wrongly contained new data instead of
   old data. Thanks @hansmaulwurf23.
+- Implemented option `maxMinorChars` to customize the width of the grid.
 - Expose `vis.timeline.Core` for customization purposes.
+- Fixed #1449, #1393: text of minor grids sometimes not being drawn.
 
 ### Graph2d
 
@@ -43,7 +44,7 @@ http://visjs.org
 - Performance improvements (see #1381). Thanks @phimimms.
 
 
-## 2015-01-01, version 4.9.0
+## 2015-10-01, version 4.9.0
 
 ### Network
 

docs/graph2d/index.html

@@ -927,6 +927,16 @@ function (option, path) {
             <td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
         </tr>
 
+        <tr>
+            <td>maxMinorChars</td>
+            <td>number</td>
+            <td>7</td>
+            <td>
+                Specifies the maximum number of characters that should fit in minor grid labels.
+                If larger, less and wider grids will be drawn.
+            </td>
+        </tr>
+
         <tr>
             <td>min</td>
             <td>Date or Number or String</td>

docs/timeline/index.html

@@ -742,6 +742,16 @@ function (option, path) {
       <td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
     </tr>
 
+    <tr>
+      <td>maxMinorChars</td>
+      <td>number</td>
+      <td>7</td>
+      <td>
+        Specifies the maximum number of characters that should fit in minor grid labels.
+        If larger, less and wider grids will be drawn.
+      </td>
+    </tr>
+
     <tr>
       <td>min</td>
       <td>Date or Number or String or Moment</td>

lib/timeline/component/TimeAxis.js

@@ -39,6 +39,7 @@ function TimeAxis (body, options) {
     },  // axis orientation: 'top' or 'bottom'
     showMinorLabels: true,
     showMajorLabels: true,
+    maxMinorChars: 7,
     format: TimeStep.FORMAT,
     moment: moment,
     timeAxis: null
@@ -69,6 +70,7 @@ TimeAxis.prototype.setOptions = function(options) {
     util.selectiveExtend([
       'showMinorLabels',
       'showMajorLabels',
+      'maxMinorChars',
       'hiddenDates',
       'timeAxis',
       'moment'
@@ -195,7 +197,7 @@ TimeAxis.prototype._repaintLabels = function () {
   // calculate range and step (step such that we have space for 7 characters per label)
   var start = util.convert(this.body.range.start, 'Number');
   var end = util.convert(this.body.range.end, 'Number');
-  var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf();
+  var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * this.options.maxMinorChars).valueOf();
   var minimumStep = timeLabelsize - DateUtil.getHiddenDurationBefore(this.options.moment, this.body.hiddenDates, this.body.range, timeLabelsize);
   minimumStep -= this.body.util.toTime(0).valueOf();
 
@@ -224,19 +226,20 @@ TimeAxis.prototype._repaintLabels = function () {
   var next;
   var x;
   var xNext;
-  var isMajor;
-  var width;
+  var isMajor, nextIsMajor;
+  var width = 0, prevWidth;
   var line;
   var labelMinor;
   var xFirstMajorLabel = undefined;
-  var max = 0;
+  var count = 0;
+  const MAX = 1000;
   var className;
 
   step.start();
   next = step.getCurrent();
   xNext = this.body.util.toScreen(next);
-  while (step.hasNext() && max < 1000) {
-    max++;
+  while (step.hasNext() && count < MAX) {
+    count++;
 
     isMajor = step.isMajor();
     className = step.getClassName();
@@ -247,13 +250,16 @@ TimeAxis.prototype._repaintLabels = function () {
 
     step.next();
     next = step.getCurrent();
+    nextIsMajor = step.isMajor();
     xNext = this.body.util.toScreen(next);
 
+    prevWidth = width;
     width = xNext - x;
-    var labelFits = (labelMinor.length + 1) * this.props.minorCharWidth < width;
+    var showMinorGrid = (width >= prevWidth * 0.4); // prevent displaying of the 31th of the month on a scale of 5 days
 
-    if (this.options.showMinorLabels && labelFits) {
-      this._repaintMinorText(x, labelMinor, orientation, className);
+    if (this.options.showMinorLabels && showMinorGrid) {
+      var label = this._repaintMinorText(x, labelMinor, orientation, className);
+      label.style.width = width + 'px'; // set width to prevent overflow
     }
 
     if (isMajor && this.options.showMajorLabels) {
@@ -261,22 +267,28 @@ TimeAxis.prototype._repaintLabels = function () {
         if (xFirstMajorLabel == undefined) {
           xFirstMajorLabel = x;
         }
-        this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
+        label = this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
       }
       line = this._repaintMajorLine(x, width, orientation, className);
     }
-    else {
-      if (labelFits) {
+    else { // minor line
+      if (showMinorGrid) {
         line = this._repaintMinorLine(x, width, orientation, className);
       }
       else {
         if (line) {
-          line.style.width = (parseInt (line.style.width) + width) + 'px'
+          // adjust the width of the previous grid
+          line.style.width = (parseInt (line.style.width) + width) + 'px';
         }
       }
     }
   }
 
+  if (count === MAX && !warnedForOverflow) {
+      console.warn(`Something is wrong with the Timeline scale. Limited drawing of grid lines to ${MAX} lines.`);
+      warnedForOverflow = true;
+  }
+
   // create a major label on the left when needed
   if (this.options.showMajorLabels) {
     var leftTime = this.body.util.toTime(0),
@@ -467,4 +479,7 @@ TimeAxis.prototype._calculateCharSize = function () {
   this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;
 };
 
+
+var warnedForOverflow = false;
+
 module.exports = TimeAxis;

lib/timeline/optionsGraph2d.js

@@ -141,6 +141,7 @@ let allOptions = {
   },
   max: {date, number, string, moment},
   maxHeight: {number, string},
+  maxMinorChars: {number},
   min: {date, number, string, moment},
   minHeight: {number, string},
   moveable: {boolean},
@@ -250,6 +251,7 @@ let configureOptions = {
     locale: '',
     max: '',
     maxHeight: '',
+    maxMinorChars: 7,
     min: '',
     minHeight: '',
     moveable:true,

lib/timeline/optionsTimeline.js

@@ -96,6 +96,7 @@ let allOptions = {
   },
   max: {date, number, string, moment},
   maxHeight: {number, string},
+  maxMinorChars: {number},
   min: {date, number, string, moment},
   minHeight: {number, string},
   moveable: {boolean},
@@ -190,6 +191,7 @@ let configureOptions = {
     },
     max: '',
     maxHeight: '',
+    maxMinorChars: 7,
     min: '',
     minHeight: '',
     moveable: false,

test/timeline.html

@@ -216,6 +216,8 @@
   items.on('update', console.log.bind(console));
   items.on('remove', console.log.bind(console));
 
+
+//  timeline.setOptions({timeAxis:{scale: 'minute', step: 5}})
 </script>
 </body>
 </html>