[Timeline] Align current time (#3718)

* add alignCurrentTime option

* update docs

* add available values

docs/graph2d/index.html

@@ -782,6 +782,13 @@ onRender: function(item, group, graph2d) {
             <th>Description</th>
         </tr>
 
+        <tr>
+            <td>alignCurrentTime</td>
+            <td>String</td>
+            <td>none</td>
+            <td>If set, the current time bar will be aligned to the start of the chosen unit of time. Available values are 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute' or 'second'. If not provided, the current time bar will be updated at every tick.</td>
+        </tr>
+
         <tr>
             <td>autoResize</td>
             <td>Boolean</td>

docs/timeline/index.html

@@ -515,6 +515,13 @@ var options = {
       <td>Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
     </tr>
 
+    <tr>
+      <td>alignCurrentTime</td>
+      <td>String</td>
+      <td>none</td>
+      <td>If set, the current time bar will be aligned to the start of the chosen unit of time. Available values are 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute' or 'second'. If not provided, the current time bar will be updated at every tick.</td>
+    </tr>
+
     <tr>
       <td>autoResize</td>
       <td>boolean</td>

lib/timeline/component/CurrentTime.js

@@ -8,6 +8,7 @@ var locales = require('../locales');
  * @param {{range: Range, dom: Object, domProps: Object}} body
  * @param {Object} [options]        Available parameters:
  *                                  {Boolean} [showCurrentTime]
+ *                                  {String}  [alignCurrentTime]
  * @constructor CurrentTime
  * @extends Component
  */
@@ -18,6 +19,7 @@ function CurrentTime (body, options) {
   this.defaultOptions = {
     rtl: false,
     showCurrentTime: true,
+    alignCurrentTime: undefined,
 
     moment: moment,
     locales: locales,
@@ -61,11 +63,12 @@ CurrentTime.prototype.destroy = function () {
  * Set options for the component. Options will be merged in current options.
  * @param {Object} options  Available parameters:
  *                          {boolean} [showCurrentTime]
+ *                          {String}  [alignCurrentTime]
  */
 CurrentTime.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    util.selectiveExtend(['rtl', 'showCurrentTime', 'moment', 'locale', 'locales'], this.options, options);
+    util.selectiveExtend(['rtl', 'showCurrentTime', 'alignCurrentTime', 'moment', 'locale', 'locales'], this.options, options);
   }
 };
 
@@ -87,6 +90,11 @@ CurrentTime.prototype.redraw = function() {
     }
 
     var now = this.options.moment(new Date().valueOf() + this.offset);
+
+    if (this.options.alignCurrentTime) {
+      now = now.startOf(this.options.alignCurrentTime);
+    }
+
     var x = this.body.util.toScreen(now);
 
     var locale = this.options.locales[this.options.locale];

lib/timeline/optionsGraph2d.js

@@ -25,6 +25,7 @@ let allOptions = {
   },
 
   //globals :
+  alignCurrentTime: {string, 'undefined': 'undefined'},  
   yAxisOrientation: {string:['left','right']},
   defaultGroup: {string},
   sort: {'boolean': bool},
@@ -169,6 +170,7 @@ let allOptions = {
 
 let configureOptions = {
   global: {
+    alignCurrentTime: ['none', 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute', 'second'],   
     //yAxisOrientation: ['left','right'], // TDOO: enable as soon as Grahp2d doesn't crash when changing this on the fly
     sort: true,
     sampling: true,

lib/timeline/optionsTimeline.js

@@ -25,6 +25,7 @@ let allOptions = {
 
   //globals :
   align: {string},
+  alignCurrentTime: {string, 'undefined': 'undefined'},
   rtl: { 'boolean': bool, 'undefined': 'undefined'},
   rollingMode: {
     follow: { 'boolean': bool },
@@ -179,6 +180,7 @@ let allOptions = {
 let configureOptions = {
   global: {
     align:  ['center', 'left', 'right'],
+    alignCurrentTime: ['none', 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute', 'second'],
     direction:  false,
     autoResize: true,
     clickToUse: false,