plugins/chart-labels.js

   1 /**
   2  * @license
   3  * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6 Dygraph.Plugins.ChartLabels = (function() {
   7
   8 // TODO(danvk): move chart label options out of dygraphs and into the plugin.
   9 // TODO(danvk): only tear down & rebuild the DIVs when it's necessary.
  10
  11 var chart_labels = function() {
  12   this.title_div_ = null;
  13   this.xlabel_div_ = null;
  14   this.ylabel_div_ = null;
  15   this.y2label_div_ = null;
  16 };
  17
  18 chart_labels.prototype.toString = function() {
  19   return "ChartLabels Plugin";
  20 };
  21
  22 chart_labels.prototype.activate = function(g) {
  23   return {
  24     layout: this.layout,
  25     // clearChart: this.clearChart,
  26     didDrawChart: this.didDrawChart
  27   };
  28 };
  29
  30 // QUESTION: should there be a plugin-utils.js?
  31 var createDivInRect = function(r) {
  32   var div = document.createElement('div');
  33   div.style.position = 'absolute';
  34   div.style.left = r.x + 'px';
  35   div.style.top = r.y + 'px';
  36   div.style.width = r.w + 'px';
  37   div.style.height = r.h + 'px';
  38   return div;
  39 };
  40
  41 // Detach and null out any existing nodes.
  42 chart_labels.prototype.detachLabels_ = function() {
  43   var els = [ this.title_div_,
  44               this.xlabel_div_,
  45               this.ylabel_div_,
  46               this.y2label_div_ ];
  47   for (var i = 0; i < els.length; i++) {
  48     var el = els[i];
  49     if (!el) continue;
  50     if (el.parentNode) el.parentNode.removeChild(el);
  51   }
  52
  53   this.title_div_ = null;
  54   this.xlabel_div_ = null;
  55   this.ylabel_div_ = null;
  56   this.y2label_div_ = null;
  57 };
  58
  59 var createRotatedDiv = function(g, box, axis, classes, html) {
  60   // TODO(danvk): is this outer div actually necessary?
  61   div = document.createElement("div");
  62   div.style.position = 'absolute';
  63   if (axis == 1) {
  64     // NOTE: this is cheating. Should be positioned relative to the box.
  65     div.style.left = '0px';
  66   } else {
  67     div.style.left = box.x + 'px';
  68   }
  69   div.style.top = box.y + 'px';
  70   div.style.width = box.w + 'px';
  71   div.style.height = box.h + 'px';
  72   div.style.fontSize = (g.getOption('yLabelWidth') - 2) + 'px';
  73
  74   var inner_div = document.createElement("div");
  75   inner_div.style.position = 'absolute';
  76   inner_div.style.width = box.h + 'px';
  77   inner_div.style.height = box.w + 'px';
  78   inner_div.style.top = (box.h / 2 - box.w / 2) + 'px';
  79   inner_div.style.left = (box.w / 2 - box.h / 2) + 'px';
  80   inner_div.style.textAlign = 'center';
  81
  82   // CSS rotation is an HTML5 feature which is not standardized. Hence every
  83   // browser has its own name for the CSS style.
  84   var val = 'rotate(' + (axis == 1 ? '-' : '') + '90deg)';
  85   inner_div.style.transform = val;        // HTML5
  86   inner_div.style.WebkitTransform = val;  // Safari/Chrome
  87   inner_div.style.MozTransform = val;     // Firefox
  88   inner_div.style.OTransform = val;       // Opera
  89   inner_div.style.msTransform = val;      // IE9
  90
  91   if (typeof(document.documentMode) !== 'undefined' &&
  92       document.documentMode < 9) {
  93     // We're dealing w/ an old version of IE, so we have to rotate the text
  94     // using a BasicImage transform. This uses a different origin of rotation
  95     // than HTML5 rotation (top left of div vs. its center).
  96     inner_div.style.filter =
  97         'progid:DXImageTransform.Microsoft.BasicImage(rotation=' +
  98         (axis == 1 ? '3' : '1') + ')';
  99     inner_div.style.left = '0px';
 100     inner_div.style.top = '0px';
 101   }
 102
 103   class_div = document.createElement("div");
 104   class_div.className = classes;
 105   class_div.innerHTML = html;
 106
 107   inner_div.appendChild(class_div);
 108   div.appendChild(inner_div);
 109   return div;
 110 }
 111
 112 chart_labels.prototype.layout = function(e) {
 113   this.detachLabels_();
 114
 115   var g = e.dygraph;
 116   var div = e.chart_div;
 117   if (g.getOption('title')) {
 118     // QUESTION: should this return an absolutely-positioned div instead?
 119     var title_rect = e.reserveSpaceTop(g.getOption('titleHeight'));
 120     this.title_div_ = createDivInRect(title_rect);
 121     this.title_div_.style.textAlign = 'center';
 122     this.title_div_.style.fontSize = (g.getOption('titleHeight') - 8) + 'px';
 123     this.title_div_.style.fontWeight = 'bold';
 124
 125     var class_div = document.createElement("div");
 126     class_div.className = 'dygraph-label dygraph-title';
 127     class_div.innerHTML = g.getOption('title');
 128     this.title_div_.appendChild(class_div);
 129     div.appendChild(this.title_div_);
 130   }
 131
 132   if (g.getOption('xlabel')) {
 133     var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight'));
 134     this.xlabel_div_ = createDivInRect(x_rect);
 135     this.xlabel_div_.style.textAlign = 'center';
 136     this.xlabel_div_.style.fontSize = (g.getOption('xLabelHeight') - 2) + 'px';
 137
 138     var class_div = document.createElement("div");
 139     class_div.className = 'dygraph-label dygraph-xlabel';
 140     class_div.innerHTML = g.getOption('xlabel');
 141     this.xlabel_div_.appendChild(class_div);
 142     div.appendChild(this.xlabel_div_);
 143   }
 144
 145   if (g.getOption('ylabel')) {
 146     // It would make sense to shift the chart here to make room for the y-axis
 147     // label, but the default yAxisLabelWidth is large enough that this results
 148     // in overly-padded charts. The y-axis label should fit fine. If it
 149     // doesn't, the yAxisLabelWidth option can be increased.
 150     var y_rect = e.reserveSpaceLeft(0);
 151
 152     this.ylabel_div_ = createRotatedDiv(
 153         g, y_rect,
 154         1,  // primary (left) y-axis
 155         'dygraph-label dygraph-ylabel',
 156         g.getOption('ylabel'));
 157     div.appendChild(this.ylabel_div_);
 158   }
 159
 160   if (g.getOption('y2label') && g.numAxes() == 2) {
 161     // same logic applies here as for ylabel.
 162     var y2_rect = e.reserveSpaceRight(0);
 163     this.y2label_div_ = createRotatedDiv(
 164         g, y2_rect,
 165         2,  // secondary (right) y-axis
 166         'dygraph-label dygraph-y2label',
 167         g.getOption('y2label'));
 168     div.appendChild(this.y2label_div_);
 169   }
 170 };
 171
 172 chart_labels.prototype.didDrawChart = function(e) {
 173   var g = e.dygraph;
 174   if (this.title_div_) {
 175     this.title_div_.children[0].innerHTML = g.getOption('title');
 176   }
 177   if (this.xlabel_div_) {
 178     this.xlabel_div_.children[0].innerHTML = g.getOption('xlabel');
 179   }
 180   if (this.ylabel_div_) {
 181     this.ylabel_div_.children[0].children[0].innerHTML = g.getOption('ylabel');
 182   }
 183   if (this.y2label_div_) {
 184     this.y2label_div_.children[0].children[0].innerHTML = g.getOption('y2label');
 185   }
 186 };
 187
 188 chart_labels.prototype.clearChart = function() {
 189 };
 190
 191 chart_labels.prototype.destroy = function() {
 192   detachLabels();
 193 };
 194
 195
 196 return chart_labels;
 197 })();