no more renderer options!
[dygraphs.git] / dygraph.js
index 78f933d..aeb30e9 100644 (file)
@@ -85,13 +85,10 @@ Dygraph.toString = function() {
 Dygraph.DEFAULT_ROLL_PERIOD = 1;
 Dygraph.DEFAULT_WIDTH = 480;
 Dygraph.DEFAULT_HEIGHT = 320;
-Dygraph.AXIS_LINE_WIDTH = 0.3;
 
 Dygraph.LOG_SCALE = 10;
 Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE);
-/**
- * @private
- */
+/** @private */
 Dygraph.log10 = function(x) {
   return Math.log(x) / Dygraph.LN_TEN;
 }
@@ -156,6 +153,18 @@ Dygraph.DEFAULT_ATTRS = {
   xLabelHeight: 18,
   yLabelWidth: 18,
 
+  // From renderer
+  drawXAxis: true,
+  drawYAxis: true,
+  axisLineColor: "black",
+    "axisLineWidth": 0.3,
+    "axisLabelColor": "black",
+    "axisLabelFont": "Arial",  // TODO(danvk): is this implemented?
+    "axisLabelWidth": 50,
+    "drawYGrid": true,
+    "drawXGrid": true,
+    "gridLineColor": "rgb(128,128,128)",
+
   interactionModel: null  // will be set to Dygraph.defaultInteractionModel.
 };
 
@@ -391,23 +400,17 @@ Dygraph.prototype.log = function(severity, message) {
   }
 };
 
-/**
- * @private
- */
+/** @private */
 Dygraph.prototype.info = function(message) {
   this.log(Dygraph.INFO, message);
 };
 
-/**
- * @private
- */
+/** @private */
 Dygraph.prototype.warn = function(message) {
   this.log(Dygraph.WARNING, message);
 };
 
-/**
- * @private
- */
+/** @private */
 Dygraph.prototype.error = function(message) {
   this.log(Dygraph.ERROR, message);
 };
@@ -766,21 +769,7 @@ Dygraph.prototype.createInterface_ = function() {
   });
 
   // Create the grapher
-  // TODO(danvk): why does the Layout need its own set of options?
-  this.layoutOptions_ = { 'xOriginIsZero': false };
-  Dygraph.update(this.layoutOptions_, this.attrs_);
-  Dygraph.update(this.layoutOptions_, this.user_attrs_);
-  Dygraph.update(this.layoutOptions_, {
-    'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
-
-  this.layout_ = new DygraphLayout(this, this.layoutOptions_);
-
-  // TODO(danvk): why does the Renderer need its own set of options?
-  this.renderOptions_ = { colorScheme: this.colors_,
-                          strokeColor: null,
-                          axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
-  Dygraph.update(this.renderOptions_, this.attrs_);
-  Dygraph.update(this.renderOptions_, this.user_attrs_);
+  this.layout_ = new DygraphLayout(this);
 
   this.createStatusMessage_();
   this.createDragInterface_();
@@ -886,8 +875,6 @@ Dygraph.hsvToRGB = function (hue, saturation, value) {
  * @private
  */
 Dygraph.prototype.setColors_ = function() {
-  // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
-  // away with this.renderOptions_.
   var num = this.attr_("labels").length - 1;
   this.colors_ = [];
   var colors = this.attr_('colors');
@@ -910,11 +897,7 @@ Dygraph.prototype.setColors_ = function() {
     }
   }
 
-  // TODO(danvk): update this w/r/t/ the new options system.
-  this.renderOptions_.colorScheme = this.colors_;
-  Dygraph.update(this.plotter_.options, this.renderOptions_);
-  Dygraph.update(this.layoutOptions_, this.user_attrs_);
-  Dygraph.update(this.layoutOptions_, this.attrs_);
+  this.plotter_.setColors(this.colors_);
 };
 
 /**
@@ -930,9 +913,7 @@ Dygraph.prototype.getColors = function() {
 // http://blog.firetree.net/2005/07/04/javascript-find-position/
 // http://www.quirksmode.org/js/findpos.html
 
-/**
- * @private
- */
+/** @private */
 Dygraph.findPosX = function(obj) {
   var curleft = 0;
   if(obj.offsetParent)
@@ -949,9 +930,7 @@ Dygraph.findPosX = function(obj) {
 };
 
 
-/**
- * @private
- */
+/** @private */
 Dygraph.findPosY = function(obj) {
   var curtop = 0;
   if(obj.offsetParent)
@@ -1109,6 +1088,12 @@ Dygraph.prototype.dragGetY_ = function(e, context) {
 };
 
 /**
+ * A collection of functions to facilitate build custom interaction models.
+ * @class
+ */
+Dygraph.Interaction = {};
+
+/**
  * Called in response to an interaction model operation that
  * should start the default panning behavior.
  *
@@ -1121,7 +1106,7 @@ Dygraph.prototype.dragGetY_ = function(e, context) {
  * @param { Object} context The dragging context object (with
  * dragStartX/dragStartY/etc. properties). This function modifies the context.
  */
-Dygraph.startPan = function(event, g, context) {
+Dygraph.Interaction.startPan = function(event, g, context) {
   context.isPanning = true;
   var xRange = g.xAxisRange();
   context.dateRange = xRange[1] - xRange[0];
@@ -1192,7 +1177,7 @@ Dygraph.startPan = function(event, g, context) {
  * @param { Object} context The dragging context object (with
  * dragStartX/dragStartY/etc. properties). This function modifies the context.
  */
-Dygraph.movePan = function(event, g, context) {
+Dygraph.Interaction.movePan = function(event, g, context) {
   context.dragEndX = g.dragGetX_(event, context);
   context.dragEndY = g.dragGetY_(event, context);
 
@@ -1261,7 +1246,7 @@ Dygraph.movePan = function(event, g, context) {
  * @param { Object} context The dragging context object (with
  * dragStartX/dragStartY/etc. properties). This function modifies the context.
  */
-Dygraph.endPan = function(event, g, context) {
+Dygraph.Interaction.endPan = function(event, g, context) {
   // TODO(konigsberg): Clear the context data from the axis.
   // TODO(konigsberg): mouseup should just delete the
   // context object, and mousedown should create a new one.
@@ -1287,7 +1272,7 @@ Dygraph.endPan = function(event, g, context) {
  * @param { Object} context The dragging context object (with
  * dragStartX/dragStartY/etc. properties). This function modifies the context.
  */
-Dygraph.startZoom = function(event, g, context) {
+Dygraph.Interaction.startZoom = function(event, g, context) {
   context.isZooming = true;
 };
 
@@ -1304,7 +1289,7 @@ Dygraph.startZoom = function(event, g, context) {
  * @param { Object} context The dragging context object (with
  * dragStartX/dragStartY/etc. properties). This function modifies the context.
  */
-Dygraph.moveZoom = function(event, g, context) {
+Dygraph.Interaction.moveZoom = function(event, g, context) {
   context.dragEndX = g.dragGetX_(event, context);
   context.dragEndY = g.dragGetY_(event, context);
 
@@ -1343,7 +1328,7 @@ Dygraph.moveZoom = function(event, g, context) {
  * @param { Object} context The dragging context object (with
  * dragStartX/dragStartY/etc. properties). This function modifies the context.
  */
-Dygraph.endZoom = function(event, g, context) {
+Dygraph.Interaction.endZoom = function(event, g, context) {
   // TODO(konigsberg): Refactor or rename this fn -- it deals with clicks, too.
   context.isZooming = false;
   context.dragEndX = g.dragGetX_(event, context);
@@ -1401,7 +1386,7 @@ Dygraph.endZoom = function(event, g, context) {
  *   }
  * } );
  */
-Dygraph.defaultInteractionModel = {
+Dygraph.Interaction.defaultModel = {
   // Track the beginning of drag events
   mousedown: function(event, g, context) {
     context.initializeMouseDown(event, g, context);
@@ -1449,7 +1434,16 @@ Dygraph.defaultInteractionModel = {
   }
 };
 
-Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.defaultInteractionModel;
+Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.Interaction.defaultModel;
+
+// old ways of accessing these methods/properties
+Dygraph.defaultInteractionModel = Dygraph.Interaction.defaultModel;
+Dygraph.endZoom = Dygraph.Interaction.endZoom;
+Dygraph.moveZoom = Dygraph.Interaction.moveZoom;
+Dygraph.startZoom = Dygraph.Interaction.startZoom;
+Dygraph.endPan = Dygraph.Interaction.endPan;
+Dygraph.movePan = Dygraph.Interaction.movePan;
+Dygraph.startPan = Dygraph.Interaction.startPan;
 
 /**
  * Set up all the mouse handlers needed to capture dragging behavior for zoom
@@ -2185,7 +2179,7 @@ Dygraph.prototype.addXTicks_ = function() {
   }
 
   var xTicks = this.attr_('xTicker')(range[0], range[1], this);
-  this.layout_.updateOptions({xTicks: xTicks});
+  this.layout_.setXTicks(xTicks);
 };
 
 // Time granularity enumeration
@@ -2648,8 +2642,7 @@ Dygraph.prototype.predraw_ = function() {
   this.plotter_ = new DygraphCanvasRenderer(this,
                                             this.hidden_,
                                             this.hidden_ctx_,
-                                            this.layout_,
-                                            this.renderOptions_);
+                                            this.layout_);
 
   // The roller sits in the bottom left corner of the chart. We don't know where
   // this will be until the options are available, so it's positioned here.
@@ -2794,15 +2787,14 @@ Dygraph.prototype.drawGraph_ = function() {
   }
 
   this.computeYAxisRanges_(extremes);
-  this.layout_.updateOptions( { yAxes: this.axes_,
-                                seriesToAxisMap: this.seriesToAxisMap_
-                              } );
+  this.layout_.setYAxes(this.axes_);
+
   this.addXTicks_();
 
-  // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
+  // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
   var tmp_zoomed_x = this.zoomed_x_;
   // Tell PlotKit to use this new data and render itself
-  this.layout_.updateOptions({dateWindow: this.dateWindow_});
+  this.layout_.setDateWindow(this.dateWindow_);
   this.zoomed_x_ = tmp_zoomed_x;
   this.layout_.evaluateWithError();
   this.plotter_.clear();
@@ -2933,6 +2925,18 @@ Dygraph.prototype.numAxes = function() {
 
 /**
  * @private
+ * Returns axis properties for the given series.
+ * @param { String } setName The name of the series for which to get axis
+ * properties, e.g. 'Y1'.
+ * @return { Object } The axis properties.
+ */
+Dygraph.prototype.axisPropertiesForSeries = function(series) {
+  // TODO(danvk): handle errors.
+  return this.axes_[this.seriesToAxisMap_[series]];
+};
+
+/**
+ * @private
  * Determine the value range and tick marks for each axis.
  * @param {Object} extremes A mapping from seriesName -> [low, high]
  * This fills in the valueRange and ticks fields in each entry of this.axes_.
@@ -3240,7 +3244,9 @@ Dygraph.prototype.detectTypeFromString_ = function(str) {
     this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else {
     // TODO(danvk): use Dygraph.numberFormatter here?
+    /** @private (shut up, jsdoc!) */
     this.attrs_.xValueFormatter = function(x) { return x; };
+    /** @private (shut up, jsdoc!) */
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;
     this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
@@ -3475,6 +3481,7 @@ Dygraph.prototype.parseArray_ = function(data) {
     return parsedData;
   } else {
     // Some intelligent defaults for a numeric x-axis.
+    /** @private (shut up, jsdoc!) */
     this.attrs_.xValueFormatter = function(x) { return x; };
     this.attrs_.xTicker = Dygraph.numericTicks;
     return data;
@@ -3751,12 +3758,9 @@ Dygraph.prototype.updateOptions = function(attrs) {
   // highlightCircleSize
 
   Dygraph.update(this.user_attrs_, attrs);
-  Dygraph.update(this.renderOptions_, attrs);
 
   this.labelsFromCSV_ = (this.attr_("labels") == null);
 
-  // TODO(danvk): this doesn't match the constructor logic
-  this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
   if (attrs['file']) {
     this.file_ = attrs['file'];
     this.start_();