Added classNames to vertical grid lines

lib/timeline/TimeStep.js

@@ -526,4 +526,78 @@ TimeStep.prototype.getLabelMajor = function(date) {
   return (format && format.length > 0) ? moment(date).format(format) : '';
 };
 
+TimeStep.prototype.getClassName = function() {
+  var date = moment(this.current).locale('en');
+  var step = this.step;
+
+  // TODO: if step is not 1, change the className to something like '0-4h'
+
+  function even(value) {
+    return (value / step % 2 == 0) ? ' even' : ' odd';
+  }
+
+  function today(date) {
+    if (date.isSame(new Date(), 'day')) {
+      return ' today';
+    }
+    if (date.isSame(moment().add(1, 'day'), 'day')) {
+      return ' tomorrow';
+    }
+    if (date.isSame(moment().add(-1, 'day'), 'day')) {
+      return ' yesterday';
+    }
+    return '';
+  }
+
+  function currentWeek(date) {
+    return date.isSame(new Date(), 'week') ? ' current-week' : '';
+  }
+
+  function currentMonth(date) {
+    return date.isSame(new Date(), 'month') ? ' current-month' : '';
+  }
+
+  function currentYear(date) {
+    return date.isSame(new Date(), 'year') ? ' current-year' : '';
+  }
+
+  switch (this.scale) {
+    case 'millisecond':
+      return even(date.milliseconds());
+
+    case 'second':
+      return even(date.seconds());
+
+    case 'minute':
+      return even(date.minutes());
+
+    case 'hour':
+      var hour = date.hours();
+      if (this.step == 4) {
+        hour = hour + '-' + (hour + 4);
+      }
+      return hour + 'h' + today(date) + even(hour);
+
+    case 'weekday':
+      return date.format('dddd').toLowerCase() +
+          today(date) + currentWeek(date) + even(date.date());
+
+    case 'day':
+      var d = date.date();
+      var month = date.format('MMMM').toLowerCase();
+      return 'date' + d + ' ' + month + currentMonth(date) + even(d - 1);
+
+    case 'month':
+      return date.format('MMMM').toLowerCase() +
+          currentMonth(date) + even(date.month());
+
+    case 'year':
+      var year = date.year();
+      return 'year' + year + currentYear(date)+ even(year);
+
+    default:
+      return '';
+  }
+};
+
 module.exports = TimeStep;

lib/timeline/component/TimeAxis.js

@@ -208,23 +208,34 @@ TimeAxis.prototype._repaintLabels = function () {
   var isMajor;
   var xPrev = 0;
   var width = 0;
+  var prevLine;
   var xFirstMajorLabel = undefined;
   var max = 0;
+  var className;
 
   step.first();
   while (step.hasNext() && max < 1000) {
     max++;
+
     cur = step.getCurrent();
     isMajor = step.isMajor();
+    className = step.getClassName();
 
     xPrev = x;
     x = this.body.util.toScreen(cur);
     width = x - xPrev;
+    if (prevLine) {
+      prevLine.style.width = width + 'px';
+    }
+
+    // FIXME: the width is not always correct, for example on the month scale.
 
     if (this.options.showMinorLabels) {
       this._repaintMinorText(x, step.getLabelMinor(), orientation);
     }
 
+    // FIXME: the divs must be ordered so that you can use css odd/even classes
+
     if (isMajor && this.options.showMajorLabels) {
       if (x > 0) {
         if (xFirstMajorLabel == undefined) {
@@ -233,11 +244,11 @@ TimeAxis.prototype._repaintLabels = function () {
         this._repaintMajorText(x, step.getLabelMajor(), orientation);
       }
       if (this.options.showMajorLines == true) {
-        this._repaintMajorLine(x, width, orientation);
+        prevLine = this._repaintMajorLine(x, orientation, className);
       }
     }
     else if (this.options.showMinorLines == true) {
-      this._repaintMinorLine(x, width, orientation);
+      prevLine = this._repaintMinorLine(x, orientation, className);
     }
 
     step.next();
@@ -324,18 +335,18 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
 /**
  * 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, width, orientation) {
+TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
   // reuse redundant line
   var line = this.dom.redundant.minorLines.shift();
 
   if (!line) {
     // create vertical line
     line = document.createElement('div');
-    line.className = 'grid vertical minor';
     this.dom.background.appendChild(line);
   }
   this.dom.minorLines.push(line);
@@ -348,25 +359,28 @@ TimeAxis.prototype._repaintMinorLine = function (x, width, orientation) {
     line.style.top = this.body.domProps.top.height + 'px';
   }
   line.style.height = props.minorLineHeight + 'px';
-  line.style.width = width + 'px';
   line.style.left = (x - props.minorLineWidth / 2) + 'px';
+
+  line.className = 'grid vertical minor ' + className;
+
+  return line;
 };
 
 /**
  * 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, width, orientation) {
+TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
   // reuse redundant line
   var line = this.dom.redundant.majorLines.shift();
 
   if (!line) {
     // create vertical line
     line = document.createElement('DIV');
-    line.className = 'grid vertical major';
     this.dom.background.appendChild(line);
   }
   this.dom.majorLines.push(line);
@@ -379,8 +393,11 @@ TimeAxis.prototype._repaintMajorLine = function (x, width, orientation) {
     line.style.top = this.body.domProps.top.height + 'px';
   }
   line.style.left = (x - props.majorLineWidth / 2) + 'px';
-  line.style.width = width + 'px';
   line.style.height = props.majorLineHeight + 'px';
+
+  line.className = 'grid vertical major ' + className;
+
+  return line;
 };
 
 /**

lib/timeline/component/css/timeaxis.css

@@ -36,7 +36,7 @@
 .vis.timeline .timeaxis .grid.vertical {
   position: absolute;
   width: 0;
-  border-right: 1px solid;
+  border-left: 1px solid;
 }
 
 .vis.timeline .timeaxis .grid.minor {

test/timeline.html

@@ -19,6 +19,10 @@
     #visualization .itemset {
       /*background: rgba(255, 255, 0, 0.5);*/
     }
+
+    #visualization .grid.vertical.odd {
+      background: #f5f5f5;
+    }
   </style>
 
 </head>
@@ -103,12 +107,12 @@
         'minute':     'dddd D MMMM',
         'hour':       'dddd D MMMM'
       }
-    },
+    }
     //clickToUse: true,
     //min: moment('2013-01-01'),
     //max: moment('2013-12-31'),
     //zoomMin: 1000 * 60 * 60 * 24,            // 1 day
-    zoomMax: 1000 * 60 * 60 * 24 * 30 * 6     // 6 months
+    //zoomMax: 1000 * 60 * 60 * 24 * 30 * 6     // 6 months
   };
 
   console.timeEnd('create dataset');