From: Dan Vanderkam Date: Fri, 6 Jul 2012 02:04:21 +0000 (-0400) Subject: all chart labels are ported over X-Git-Tag: v1.0.0~253 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=1c177b6ad57510df852f238f6e063db53ce5a71a;p=dygraphs.git all chart labels are ported over --- diff --git a/dygraph-layout.js b/dygraph-layout.js index 81274ed..ad15ae9 100644 --- a/dygraph-layout.js +++ b/dygraph-layout.js @@ -84,6 +84,16 @@ DygraphLayout.prototype.computePlotArea_ = function() { area.w -= px; return r; }, + reserveSpaceRight: function(px) { + var r = { + x: area.x + area.w - px, + y: area.y, + w: px, + h: area.h + }; + area.w -= px; + return r; + }, reserveSpaceTop: function(px) { var r = { x: area.x, @@ -95,6 +105,16 @@ DygraphLayout.prototype.computePlotArea_ = function() { area.h -= px; return r; }, + reserveSpaceBottom: function(px) { + var r = { + x: area.x, + y: area.y + area.h - px, + w: area.w, + h: px + }; + area.h -= px; + return r; + }, chartRect: function() { return {x:area.x, y:area.y, w:area.w, h:area.h}; } diff --git a/plugins/chart-labels.js b/plugins/chart-labels.js index 3e596cd..5a109df 100644 --- a/plugins/chart-labels.js +++ b/plugins/chart-labels.js @@ -60,21 +60,22 @@ var createRotatedDiv = function(g, box, axis, classes, html) { div = document.createElement("div"); div.style.position = 'absolute'; if (axis == 1) { - div.style.left = box.left; + // NOTE: this is cheating. Should be positioned relative to the box. + div.style.left = '0px'; } else { - div.style.right = box.left; + div.style.left = box.x + 'px'; } - div.style.top = box.top + 'px'; - div.style.width = box.width + 'px'; - div.style.height = box.height + 'px'; + div.style.top = box.y + 'px'; + div.style.width = box.w + 'px'; + div.style.height = box.h + '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.width = box.h + 'px'; + inner_div.style.height = box.w + 'px'; + inner_div.style.top = (box.h / 2 - box.w / 2) + 'px'; + inner_div.style.left = (box.w / 2 - box.h / 2) + 'px'; inner_div.style.textAlign = 'center'; // CSS rotation is an HTML5 feature which is not standardized. Hence every @@ -116,14 +117,30 @@ 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'; this.title_div_.style.fontWeight = 'bold'; + + var class_div = document.createElement("div"); + class_div.className = 'dygraph-label dygraph-title'; + class_div.innerHTML = g.getOption('title'); + this.title_div_.appendChild(class_div); div.appendChild(this.title_div_); } + if (g.getOption('xlabel')) { + var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight')); + this.xlabel_div_ = createDivInRect(x_rect); + this.xlabel_div_.style.textAlign = 'center'; + this.xlabel_div_.style.fontSize = (g.getOption('xLabelHeight') - 2) + 'px'; + + var class_div = document.createElement("div"); + class_div.className = 'dygraph-label dygraph-xlabel'; + class_div.innerHTML = g.getOption('xlabel'); + this.xlabel_div_.appendChild(class_div); + div.appendChild(this.xlabel_div_); + } + 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 @@ -139,24 +156,31 @@ chart_labels.prototype.layout = function(e) { div.appendChild(this.ylabel_div_); } - /* - if (g.getOption('xlabel')) { - var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight')); - } - - if (g.getOption('y2label')) { + if (g.getOption('y2label') && g.numAxes() == 2) { + // same logic applies here as for ylabel. var y2_rect = e.reserveSpaceRight(0); + this.y2label_div_ = createRotatedDiv( + g, y2_rect, + 2, // secondary (right) y-axis + 'dygraph-label dygraph-y2label', + g.getOption('y2label')); + div.appendChild(this.y2label_div_); } - */ }; chart_labels.prototype.drawChart = function(e) { var g = e.dygraph; if (this.title_div_) { - this.title_div_.innerHTML = g.getOption('title'); + this.title_div_.children[0].innerHTML = g.getOption('title'); + } + if (this.xlabel_div_) { + this.xlabel_div_.children[0].innerHTML = g.getOption('xlabel'); } if (this.ylabel_div_) { - // this.ylabel_div_. + this.ylabel_div_.children[0].children[0].innerHTML = g.getOption('ylabel'); + } + if (this.y2label_div_) { + this.y2label_div_.children[0].children[0].innerHTML = g.getOption('y2label'); } };