X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=1861fb611c337574ae82f18b300a2d2ad75354a3;hb=d3056731270c08eb8051c4786e1decd35144fdac;hp=83d4e8c33e3de5944e15fe27f741f8e0c47e2a49;hpb=bbfb84f2a5e0fbb5259fab16f0785a5806c5bf8d;p=dygraphs.git

diff --git a/dygraph.js b/dygraph.js
index 83d4e8c..1861fb6 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -225,31 +225,25 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   // div, then only one will be drawn.
   div.innerHTML = "";
 
-  // If the div isn't already sized then inherit from our attrs or
-  // give it a default size.
-  if (div.style.width == '') {
-    div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px";
+  // For historical reasons, the 'width' and 'height' options trump all CSS
+  // rules _except_ for an explicit 'width' or 'height' on the div.
+  // As an added convenience, if the div has zero height (like <div></div> does
+  // without any styles), then we use a default height/width.
+  if (div.style.width == '' && attrs.width) {
+    div.style.width = attrs.width + "px";
   }
-  if (div.style.height == '') {
-    div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px";
+  if (div.style.height == '' && attrs.height) {
+    div.style.height = attrs.height + "px";
   }
-  this.width_ = parseInt(div.style.width, 10);
-  this.height_ = parseInt(div.style.height, 10);
-  // The div might have been specified as percent of the current window size,
-  // convert that to an appropriate number of pixels.
-  if (div.style.width.indexOf("%") == div.style.width.length - 1) {
-    this.width_ = div.offsetWidth;
-  }
-  if (div.style.height.indexOf("%") == div.style.height.length - 1) {
-    this.height_ = div.offsetHeight;
-  }
-
-  if (this.width_ == 0) {
-    this.error("dygraph has zero width. Please specify a width in pixels.");
-  }
-  if (this.height_ == 0) {
-    this.error("dygraph has zero height. Please specify a height in pixels.");
+  if (div.style.height == '' && div.offsetHeight == 0) {
+    div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
+    if (div.style.width == '') {
+      div.style.width = Dygraph.DEFAULT_WIDTH + "px";
+    }
   }
+  // these will be zero if the dygraph's div is hidden.
+  this.width_ = div.offsetWidth;
+  this.height_ = div.offsetHeight;
 
   // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
   if (attrs['stackedGraph']) {
@@ -656,6 +650,12 @@ Dygraph.prototype.createInterface_ = function() {
 
   this.createStatusMessage_();
   this.createDragInterface_();
+
+  // Update when the window is resized.
+  // TODO(danvk): drop frames depending on complexity of the chart.
+  Dygraph.addEvent(window, 'resize', function(e) {
+    dygraph.resize();
+  });
 };
 
 /**
@@ -777,6 +777,7 @@ Dygraph.prototype.createStatusMessage_ = function() {
       "overflow": "hidden"};
     Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
     var div = document.createElement("div");
+    div.className = "dygraph-legend";
     for (var name in messagestyle) {
       if (messagestyle.hasOwnProperty(name)) {
         div.style[name] = messagestyle[name];
@@ -866,13 +867,13 @@ Dygraph.prototype.createDragInterface_ = function() {
     isZooming: false,
     isPanning: false,  // is this drag part of a pan?
     is2DPan: false,    // if so, is that pan 1- or 2-dimensional?
-    dragStartX: null,
-    dragStartY: null,
-    dragEndX: null,
-    dragEndY: null,
+    dragStartX: null, // pixel coordinates
+    dragStartY: null, // pixel coordinates
+    dragEndX: null, // pixel coordinates
+    dragEndY: null, // pixel coordinates
     dragDirection: null,
-    prevEndX: null,
-    prevEndY: null,
+    prevEndX: null, // pixel coordinates
+    prevEndY: null, // pixel coordinates
     prevDragDirection: null,
 
     // The value on the left side of the graph when a pan operation starts.
@@ -887,7 +888,8 @@ Dygraph.prototype.createDragInterface_ = function() {
     // panning operation.
     dateRange: null,
 
-    // Utility function to convert page-wide coordinates to canvas coords
+    // Top-left corner of the canvas, in DOM coords
+    // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
     px: 0,
     py: 0,
 
@@ -1660,7 +1662,8 @@ Dygraph.dateTicker = function(startDate, endDate, self) {
   if (chosen >= 0) {
     return self.GetXAxis(startDate, endDate, chosen);
   } else {
-    // TODO(danvk): signal error.
+    // this can happen if self.width_ is zero.
+    return [];
   }
 };
 
@@ -1880,6 +1883,8 @@ Dygraph.prototype.extremeValues_ = function(series) {
  * number of axes, rolling averages, etc.
  */
 Dygraph.prototype.predraw_ = function() {
+  var start = new Date();
+
   // TODO(danvk): move more computations out of drawGraph_ and into here.
   this.computeYAxes_();
 
@@ -1901,6 +1906,10 @@ Dygraph.prototype.predraw_ = function() {
 
   // If the data or options have changed, then we'd better redraw.
   this.drawGraph_();
+
+  // This is used to determine whether to do various animations.
+  var end = new Date();
+  this.drawingTimeMs_ = (end - start);
 };
 
 /**
@@ -1916,6 +1925,8 @@ Dygraph.prototype.predraw_ = function() {
  * @private
  */
 Dygraph.prototype.drawGraph_ = function(clearSelection) {
+  var start = new Date();
+
   if (typeof(clearSelection) === 'undefined') {
     clearSelection = true;
   }
@@ -2077,6 +2088,13 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) {
   if (this.attr_("drawCallback") !== null) {
     this.attr_("drawCallback")(this, is_initial_draw);
   }
+
+  if (this.attr_("timingName")) {
+    var end = new Date();
+    if (console) {
+      console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms")
+    }
+  }
 };
 
 /**
@@ -2409,9 +2427,13 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
           count -= 1;
         }
       }
-      rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
-                                              1.0 * (mid - low) / count,
-                                              1.0 * (high - mid) / count ]];
+      if (count) {
+        rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
+                                                1.0 * (mid - low) / count,
+                                                1.0 * (high - mid) / count ]];
+      } else {
+        rollingData[i] = [originalData[i][0], [null, null, null]];
+      }
     }
   } else {
     // Calculate the rolling average for the first rollPeriod - 1 points where
@@ -2974,9 +2996,8 @@ Dygraph.prototype.resize = function(width, height) {
     width = height = null;
   }
 
-  // TODO(danvk): there should be a clear() method.
-  this.maindiv_.innerHTML = "";
-  this.attrs_.labelsDiv = null;
+  var old_width = this.width_;
+  var old_height = this.height_;
 
   if (width) {
     this.maindiv_.style.width = width + "px";
@@ -2988,8 +3009,13 @@ Dygraph.prototype.resize = function(width, height) {
     this.height_ = this.maindiv_.offsetHeight;
   }
 
-  this.createInterface_();
-  this.predraw_();
+  if (old_width != this.width_ || old_height != this.height_) {
+    // TODO(danvk): there should be a clear() method.
+    this.maindiv_.innerHTML = "";
+    this.attrs_.labelsDiv = null;
+    this.createInterface_();
+    this.predraw_();
+  }
 
   this.resize_lock = false;
 };
@@ -3033,6 +3059,16 @@ Dygraph.prototype.setVisibility = function(num, value) {
 };
 
 /**
+ * How large of an area will the dygraph render itself in?
+ * This is used for testing.
+ * @return A {width: w, height: h} object.
+ * @private
+ */
+Dygraph.prototype.size = function() {
+  return { width: this.width_, height: this.height_ };
+};
+
+/**
  * Update the list of annotations and redraw the chart.
  */
 Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {