3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
6 /*global Dygraph:false */
10 // TODO(danvk): move chart label options out of dygraphs and into the plugin.
11 // TODO(danvk): only tear down & rebuild the DIVs when it's necessary.
13 var chart_labels
= function() {
14 this.title_div_
= null;
15 this.xlabel_div_
= null;
16 this.ylabel_div_
= null;
17 this.y2label_div_
= null;
20 chart_labels
.prototype.toString
= function() {
21 return "ChartLabels Plugin";
24 chart_labels
.prototype.activate
= function(g
) {
27 // clearChart: this.clearChart,
28 didDrawChart
: this.didDrawChart
32 // QUESTION: should there be a plugin-utils.js?
33 var createDivInRect
= function(r
) {
34 var div
= document
.createElement('div');
35 div
.style
.position
= 'absolute';
36 div
.style
.left
= r
.x
+ 'px';
37 div
.style
.top
= r
.y
+ 'px';
38 div
.style
.width
= r
.w
+ 'px';
39 div
.style
.height
= r
.h
+ 'px';
43 // Detach and null out any existing nodes.
44 chart_labels
.prototype.detachLabels_
= function() {
45 var els
= [ this.title_div_
,
49 for (var i
= 0; i
< els
.length
; i
++) {
52 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
55 this.title_div_
= null;
56 this.xlabel_div_
= null;
57 this.ylabel_div_
= null;
58 this.y2label_div_
= null;
61 var createRotatedDiv
= function(g
, box
, axis
, classes
, html
) {
62 // TODO(danvk): is this outer div actually necessary?
63 var div
= document
.createElement("div");
64 div
.style
.position
= 'absolute';
66 // NOTE: this is cheating. Should be positioned relative to the box.
67 div
.style
.left
= '0px';
69 div
.style
.left
= box
.x
+ 'px';
71 div
.style
.top
= box
.y
+ 'px';
72 div
.style
.width
= box
.w
+ 'px';
73 div
.style
.height
= box
.h
+ 'px';
74 div
.style
.fontSize
= (g
.getOption('yLabelWidth') - 2) + 'px';
76 var inner_div
= document
.createElement("div");
77 inner_div
.style
.position
= 'absolute';
78 inner_div
.style
.width
= box
.h
+ 'px';
79 inner_div
.style
.height
= box
.w
+ 'px';
80 inner_div
.style
.top
= (box
.h
/ 2 - box.w / 2) + 'px';
81 inner_div
.style
.left
= (box
.w
/ 2 - box.h / 2) + 'px';
82 inner_div
.style
.textAlign
= 'center';
84 // CSS rotation is an HTML5 feature which is not standardized. Hence every
85 // browser has its own name for the CSS style.
86 var val
= 'rotate(' + (axis
== 1 ? '-' : '') + '90deg)';
87 inner_div
.style
.transform
= val
; // HTML5
88 inner_div
.style
.WebkitTransform
= val
; // Safari/Chrome
89 inner_div
.style
.MozTransform
= val
; // Firefox
90 inner_div
.style
.OTransform
= val
; // Opera
91 inner_div
.style
.msTransform
= val
; // IE9
93 var class_div
= document
.createElement("div");
94 class_div
.className
= classes
;
95 class_div
.innerHTML
= html
;
97 inner_div
.appendChild(class_div
);
98 div
.appendChild(inner_div
);
102 chart_labels
.prototype.layout
= function(e
) {
103 this.detachLabels_();
106 var div
= e
.chart_div
;
107 if (g
.getOption('title')) {
108 // QUESTION: should this return an absolutely-positioned div instead?
109 var title_rect
= e
.reserveSpaceTop(g
.getOption('titleHeight'));
110 this.title_div_
= createDivInRect(title_rect
);
111 this.title_div_
.style
.textAlign
= 'center';
112 this.title_div_
.style
.fontSize
= (g
.getOption('titleHeight') - 8) + 'px';
113 this.title_div_
.style
.fontWeight
= 'bold';
114 this.title_div_
.style
.zIndex
= 10;
116 var class_div
= document
.createElement("div");
117 class_div
.className
= 'dygraph-label dygraph-title';
118 class_div
.innerHTML
= g
.getOption('title');
119 this.title_div_
.appendChild(class_div
);
120 div
.appendChild(this.title_div_
);
123 if (g
.getOption('xlabel')) {
124 var x_rect
= e
.reserveSpaceBottom(g
.getOption('xLabelHeight'));
125 this.xlabel_div_
= createDivInRect(x_rect
);
126 this.xlabel_div_
.style
.textAlign
= 'center';
127 this.xlabel_div_
.style
.fontSize
= (g
.getOption('xLabelHeight') - 2) + 'px';
129 var class_div
= document
.createElement("div");
130 class_div
.className
= 'dygraph-label dygraph-xlabel';
131 class_div
.innerHTML
= g
.getOption('xlabel');
132 this.xlabel_div_
.appendChild(class_div
);
133 div
.appendChild(this.xlabel_div_
);
136 if (g
.getOption('ylabel')) {
137 // It would make sense to shift the chart here to make room for the y-axis
138 // label, but the default yAxisLabelWidth is large enough that this results
139 // in overly-padded charts. The y-axis label should fit fine. If it
140 // doesn't, the yAxisLabelWidth option can be increased.
141 var y_rect
= e
.reserveSpaceLeft(0);
143 this.ylabel_div_
= createRotatedDiv(
145 1, // primary (left) y-axis
146 'dygraph-label dygraph-ylabel',
147 g
.getOption('ylabel'));
148 div
.appendChild(this.ylabel_div_
);
151 if (g
.getOption('y2label') && g
.numAxes() == 2) {
152 // same logic applies here as for ylabel.
153 var y2_rect
= e
.reserveSpaceRight(0);
154 this.y2label_div_
= createRotatedDiv(
156 2, // secondary (right) y-axis
157 'dygraph-label dygraph-y2label',
158 g
.getOption('y2label'));
159 div
.appendChild(this.y2label_div_
);
163 chart_labels
.prototype.didDrawChart
= function(e
) {
165 if (this.title_div_
) {
166 this.title_div_
.children
[0].innerHTML
= g
.getOption('title');
168 if (this.xlabel_div_
) {
169 this.xlabel_div_
.children
[0].innerHTML
= g
.getOption('xlabel');
171 if (this.ylabel_div_
) {
172 this.ylabel_div_
.children
[0].children
[0].innerHTML
= g
.getOption('ylabel');
174 if (this.y2label_div_
) {
175 this.y2label_div_
.children
[0].children
[0].innerHTML
= g
.getOption('y2label');
179 chart_labels
.prototype.clearChart
= function() {
182 chart_labels
.prototype.destroy
= function() {
183 this.detachLabels_();
186 export default chart_labels
;