Halfway improving Timeline.fit()

lib/timeline/Core.js

@@ -477,7 +477,7 @@ Core.prototype._getDataRange = function() {
   // apply the data range as range
   var dataRange = this.getItemRange();
 
-  // add 5% space on both sides
+  // add 1% space on both sides
   var start = dataRange.min;
   var end = dataRange.max;
   if (start != null && end != null) {
@@ -486,8 +486,8 @@ Core.prototype._getDataRange = function() {
       // prevent an empty interval
       interval = 24 * 60 * 60 * 1000; // 1 day
     }
-    start = new Date(start.valueOf() - interval * 0.05);
-    end = new Date(end.valueOf() + interval * 0.05);
+    start = new Date(start.valueOf() - interval * 0.01);
+    end = new Date(end.valueOf() + interval * 0.01);
   }
 
   return {

lib/timeline/Timeline.js

@@ -218,6 +218,8 @@ Timeline.prototype.setItems = function(items) {
       this.setWindow(start, end, {animation: false});
     }
     else {
+      // call fit twice as
+      this.fit({animation: false});
       this.fit({animation: false});
     }
   }
@@ -350,32 +352,37 @@ Timeline.prototype.focus = function(id, options) {
  *                                          When no maximum is found, max==null
  */
 Timeline.prototype.getItemRange = function() {
-  // calculate min from start filed
-  var dataset = this.itemsData && this.itemsData.getDataSet();
   var min = null;
   var max = null;
+  var minId = null;
+  var maxId = null;
 
+  var dataset = this.itemsData && this.itemsData.getDataSet();
   if (dataset) {
-    // calculate the minimum value of the field 'start'
-    var minItem = dataset.min('start');
-    min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
-    // Note: we convert first to Date and then to number because else
-    // a conversion from ISODate to Number will fail
-
-    // calculate maximum value of fields 'start' and 'end'
-    var maxStartItem = dataset.max('start');
-    if (maxStartItem) {
-      max = util.convert(maxStartItem.start, 'Date').valueOf();
-    }
-    var maxEndItem = dataset.max('end');
-    if (maxEndItem) {
-      if (max == null) {
-        max = util.convert(maxEndItem.end, 'Date').valueOf();
+    var fieldId = dataset._fieldId;
+
+    dataset.forEach(function (item) {
+      var start = util.convert(item.start, 'Date').valueOf();
+      var end   = util.convert(item.end != undefined ? item.end : item.start, 'Date').valueOf();
+      if (min === null || start < min) {
+        min = start;
+        minId = item[fieldId];
       }
-      else {
-        max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
+      if (max === null || end > max) {
+        max = start;
+        maxId = item[fieldId];
       }
-    }
+    });
+  }
+
+  var minItem = this.itemSet.items[minId];
+  var maxItem = this.itemSet.items[maxId];
+  if (minItem && minItem.width && maxItem && maxItem.width) {
+    var left = minItem.left;
+    var right = maxItem.left + maxItem.width;
+
+    min = this._toTime(left - 10);
+    max = this._toTime(right + 10);
   }
 
   return {

test/timeline.html

@@ -137,7 +137,7 @@
       title: 'hello title!'
     },
     {_id: 5, content: 'item 5', start: now.clone().add(9, 'days').toDate(), type:'point', title: 'hello title!', className: 'special'},
-    {_id: 6, content: 'item 6', start: now.clone().add(11, 'days').toDate()}
+    {_id: 6, content: 'item 6 very long test bla bla bla', start: now.clone().add(11, 'days').toDate()}
   ]);
 
   var container = document.getElementById('visualization');
@@ -147,8 +147,8 @@
     editable: true,
     //orientation: 'top',
     orientation: 'both',
-    start: now.clone().add(-7, 'days'),
-    end: now.clone().add(7, 'days'),
+//    start: now.clone().add(-7, 'days'),
+//    end: now.clone().add(7, 'days'),
     //maxHeight: 200,
     //height: 200,
     showCurrentTime: true,