From: Dan Vanderkam <dan@dygraphs.com>
Date: Fri, 6 Jul 2012 01:43:06 +0000 (-0400)
Subject: start y-label port; not working yet
X-Git-Tag: v1.0.0~254
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=441e4a56ca59ee633813adfeb3162cfbf1c4fc49;p=dygraphs.git

start y-label port; not working yet
---

diff --git a/plugins/chart-labels.js b/plugins/chart-labels.js
index aa56337..3e596cd 100644
--- a/plugins/chart-labels.js
+++ b/plugins/chart-labels.js
@@ -55,6 +55,58 @@ chart_labels.prototype.detachLabels_ = function() {
   this.y2label_div_ = null;
 };
 
+var createRotatedDiv = function(g, box, axis, classes, html) {
+  // TODO(danvk): is this outer div actually necessary?
+  div = document.createElement("div");
+  div.style.position = 'absolute';
+  if (axis == 1) {
+    div.style.left = box.left;
+  } else {
+    div.style.right = box.left;
+  }
+  div.style.top = box.top + 'px';
+  div.style.width = box.width + 'px';
+  div.style.height = box.height + 'px';
+  div.style.fontSize = (g.getOption('yLabelWidth') - 2) + 'px';
+
+  var inner_div = document.createElement("div");
+  inner_div.style.position = 'absolute';
+  inner_div.style.width = box.height + 'px';
+  inner_div.style.height = box.width + 'px';
+  inner_div.style.top = (box.height / 2 - box.width / 2) + 'px';
+  inner_div.style.left = (box.width / 2 - box.height / 2) + 'px';
+  inner_div.style.textAlign = 'center';
+
+  // CSS rotation is an HTML5 feature which is not standardized. Hence every
+  // browser has its own name for the CSS style.
+  var val = 'rotate(' + (axis == 1 ? '-' : '') + '90deg)';
+  inner_div.style.transform = val;        // HTML5
+  inner_div.style.WebkitTransform = val;  // Safari/Chrome
+  inner_div.style.MozTransform = val;     // Firefox
+  inner_div.style.OTransform = val;       // Opera
+  inner_div.style.msTransform = val;      // IE9
+
+  if (typeof(document.documentMode) !== 'undefined' &&
+      document.documentMode < 9) {
+    // We're dealing w/ an old version of IE, so we have to rotate the text
+    // using a BasicImage transform. This uses a different origin of rotation
+    // than HTML5 rotation (top left of div vs. its center).
+    inner_div.style.filter =
+        'progid:DXImageTransform.Microsoft.BasicImage(rotation=' +
+        (axis == 1 ? '3' : '1') + ')';
+    inner_div.style.left = '0px';
+    inner_div.style.top = '0px';
+  }
+
+  class_div = document.createElement("div");
+  class_div.className = classes;
+  class_div.innerHTML = html;
+
+  inner_div.appendChild(class_div);
+  div.appendChild(inner_div);
+  return div;
+}
+
 chart_labels.prototype.layout = function(e) {
   this.detachLabels_();
 
@@ -64,6 +116,7 @@ chart_labels.prototype.layout = function(e) {
     // QUESTION: should this return an absolutely-positioned div instead?
     var title_rect = e.reserveSpaceTop(g.getOption('titleHeight'));
     this.title_div_ = createDivInRect(title_rect);
+    this.title_div_.className = 'dygraph-label dygraph-title';
     this.title_div_.innerHTML = g.getOption('title');
     this.title_div_.style.textAlign = 'center';
     this.title_div_.style.fontSize = (g.getOption('titleHeight') - 8) + 'px';
@@ -71,13 +124,24 @@ chart_labels.prototype.layout = function(e) {
     div.appendChild(this.title_div_);
   }
 
-/*
-  if (g.getOption('xlabel')) {
-    var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight'));
-  }
-
   if (g.getOption('ylabel')) {
+    // It would make sense to shift the chart here to make room for the y-axis
+    // label, but the default yAxisLabelWidth is large enough that this results
+    // in overly-padded charts. The y-axis label should fit fine. If it
+    // doesn't, the yAxisLabelWidth option can be increased.
     var y_rect = e.reserveSpaceLeft(0);
+
+    this.ylabel_div_ = createRotatedDiv(
+        g, y_rect,
+        1,  // primary (left) y-axis
+        'dygraph-label dygraph-ylabel',
+        g.getOption('ylabel'));
+    div.appendChild(this.ylabel_div_);
+  }
+
+  /*
+  if (g.getOption('xlabel')) {
+    var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight'));
   }
 
   if (g.getOption('y2label')) {
@@ -91,6 +155,9 @@ chart_labels.prototype.drawChart = function(e) {
   if (this.title_div_) {
     this.title_div_.innerHTML = g.getOption('title');
   }
+  if (this.ylabel_div_) {
+    // this.ylabel_div_.
+  }
 };
 
 chart_labels.prototype.clearChart = function() {