a0169bcb90c76c5386e5376fcccffa754fe2e10c
3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
7 /*global Dygraph:false */
13 - Direct layout access
15 - Should include calculation of ticks, not just the drawing.
17 Options left to make axis-friendly.
22 import * as utils from
'../dygraph-utils';
25 * Draws the axes. This includes the labels on the x- and y-axes, as well
26 * as the tick marks on the axes.
27 * It does _not_ draw the grid lines which span the entire chart.
29 var axes
= function() {
34 axes
.prototype.toString
= function() {
38 axes
.prototype.activate
= function(g
) {
41 clearChart
: this.clearChart
,
42 willDrawChart
: this.willDrawChart
46 axes
.prototype.layout
= function(e
) {
49 if (g
.getOptionForAxis('drawAxis', 'y')) {
50 var w
= g
.getOptionForAxis('axisLabelWidth', 'y') + 2 * g
.getOptionForAxis('axisTickSize', 'y');
51 e
.reserveSpaceLeft(w
);
54 if (g
.getOptionForAxis('drawAxis', 'x')) {
56 // NOTE: I think this is probably broken now, since g.getOption() now
57 // hits the dictionary. (That is, g.getOption('xAxisHeight') now always
59 if (g
.getOption('xAxisHeight')) {
60 h
= g
.getOption('xAxisHeight');
62 h
= g
.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g
.getOptionForAxis('axisTickSize', 'x');
64 e
.reserveSpaceBottom(h
);
67 if (g
.numAxes() == 2) {
68 if (g
.getOptionForAxis('drawAxis', 'y2')) {
69 var w
= g
.getOptionForAxis('axisLabelWidth', 'y2') + 2 * g
.getOptionForAxis('axisTickSize', 'y2');
70 e
.reserveSpaceRight(w
);
72 } else if (g
.numAxes() > 2) {
73 g
.error('Only two y-axes are supported at this time. (Trying ' +
74 'to use ' + g
.numAxes() + ')');
78 axes
.prototype.detachLabels
= function() {
79 function removeArray(ary
) {
80 for (var i
= 0; i
< ary
.length
; i
++) {
82 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
86 removeArray(this.xlabels_
);
87 removeArray(this.ylabels_
);
92 axes
.prototype.clearChart
= function(e
) {
96 axes
.prototype.willDrawChart
= function(e
) {
99 if (!g
.getOptionForAxis('drawAxis', 'x') &&
100 !g
.getOptionForAxis('drawAxis', 'y') &&
101 !g
.getOptionForAxis('drawAxis', 'y2')) {
105 // Round pixels to half-integer boundaries for crisper drawing.
106 function halfUp(x
) { return Math
.round(x
) + 0.5; }
107 function halfDown(y
){ return Math
.round(y
) - 0.5; }
109 var context
= e
.drawingContext
;
110 var containerDiv
= e
.canvas
.parentNode
;
111 var canvasWidth
= g
.width_
; // e.canvas.width is affected by pixel ratio.
112 var canvasHeight
= g
.height_
;
114 var label
, x
, y
, tick
, i
;
116 var makeLabelStyle
= function(axis
) {
118 position
: 'absolute',
119 fontSize
: g
.getOptionForAxis('axisLabelFontSize', axis
) + 'px',
120 width
: g
.getOptionForAxis('axisLabelWidth', axis
) + 'px',
125 x
: makeLabelStyle('x'),
126 y
: makeLabelStyle('y'),
127 y2
: makeLabelStyle('y2')
130 var makeDiv
= function(txt
, axis
, prec_axis
) {
132 * This seems to be called with the following three sets of axis/prec_axis:
137 var div
= document
.createElement('div');
138 var labelStyle
= labelStyles
[prec_axis
== 'y2' ? 'y2' : axis
];
139 utils
.update(div
.style
, labelStyle
);
140 // TODO: combine outer & inner divs
141 var inner_div
= document
.createElement('div');
142 inner_div
.className
= 'dygraph-axis-label' +
143 ' dygraph-axis-label-' + axis
+
144 (prec_axis
? ' dygraph-axis-label-' + prec_axis
: '');
145 inner_div
.innerHTML
= txt
;
146 div
.appendChild(inner_div
);
153 var layout
= g
.layout_
;
154 var area
= e
.dygraph
.plotter_
.area
;
156 // Helper for repeated axis-option accesses.
157 var makeOptionGetter
= function(axis
) {
158 return function(option
) {
159 return g
.getOptionForAxis(option
, axis
);
163 if (g
.getOptionForAxis('drawAxis', 'y')) {
164 if (layout
.yticks
&& layout
.yticks
.length
> 0) {
165 var num_axes
= g
.numAxes();
166 var getOptions
= [makeOptionGetter('y'), makeOptionGetter('y2')];
167 layout
.yticks
.forEach(tick
=> {
168 if (tick
.label
=== undefined
) return; // this tick only has a grid line.
171 var prec_axis
= 'y1';
172 var getAxisOption
= getOptions
[0];
173 if (tick
.axis
== 1) { // right-side y-axis
177 getAxisOption
= getOptions
[1];
179 var fontSize
= getAxisOption('axisLabelFontSize');
180 y
= area
.y
+ tick
.pos
* area
.h
;
182 /* Tick marks are currently clipped, so don't bother drawing them.
184 context.moveTo(halfUp(x), halfDown(y));
185 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
190 label
= makeDiv(tick
.label
, 'y', num_axes
== 2 ? prec_axis
: null);
191 var top
= (y
- fontSize
/ 2);
192 if (top
< 0) top
= 0;
194 if (top
+ fontSize
+ 3 > canvasHeight
) {
195 label
.style
.bottom
= '0';
197 label
.style
.top
= top
+ 'px';
199 // TODO: replace these with css classes?
200 if (tick
.axis
=== 0) {
201 label
.style
.left
= (area
.x
- getAxisOption('axisLabelWidth') - getAxisOption('axisTickSize')) + 'px';
202 label
.style
.textAlign
= 'right';
203 } else if (tick
.axis
== 1) {
204 label
.style
.left
= (area
.x
+ area
.w
+
205 getAxisOption('axisTickSize')) + 'px';
206 label
.style
.textAlign
= 'left';
208 label
.style
.width
= getAxisOption('axisLabelWidth') + 'px';
209 containerDiv
.appendChild(label
);
210 this.ylabels_
.push(label
);
213 // The lowest tick on the y-axis often overlaps with the leftmost
214 // tick on the x-axis. Shift the bottom tick up a little bit to
215 // compensate if necessary.
216 var bottomTick
= this.ylabels_
[0];
217 // Interested in the y2 axis also?
218 var fontSize
= g
.getOptionForAxis('axisLabelFontSize', 'y');
219 var bottom
= parseInt(bottomTick
.style
.top
, 10) + fontSize
;
220 if (bottom
> canvasHeight
- fontSize
) {
221 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
, 10) -
222 fontSize
/ 2) + 'px';
226 // draw a vertical line on the left to separate the chart from the labels.
228 if (g
.getOption('drawAxesAtZero')) {
229 var r
= g
.toPercentXCoord(0);
230 if (r
> 1 || r
< 0 || isNaN(r
)) r
= 0;
231 axisX
= halfUp(area
.x
+ r
* area
.w
);
233 axisX
= halfUp(area
.x
);
236 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'y');
237 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'y');
240 context
.moveTo(axisX
, halfDown(area
.y
));
241 context
.lineTo(axisX
, halfDown(area
.y
+ area
.h
));
245 // if there's a secondary y-axis, draw a vertical line for that, too.
246 if (g
.numAxes() == 2) {
247 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'y2');
248 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'y2');
250 context
.moveTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
));
251 context
.lineTo(halfDown(area
.x
+ area
.w
), halfDown(area
.y
+ area
.h
));
257 if (g
.getOptionForAxis('drawAxis', 'x')) {
259 var getAxisOption
= makeOptionGetter('x');
260 layout
.xticks
.forEach(tick
=> {
261 if (tick
.label
=== undefined
) return; // this tick only has a grid line.
262 x
= area
.x
+ tick
.pos
* area
.w
;
265 /* Tick marks are currently clipped, so don't bother drawing them.
267 context.moveTo(halfUp(x), halfDown(y));
268 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
273 label
= makeDiv(tick
.label
, 'x');
274 label
.style
.textAlign
= 'center';
275 label
.style
.top
= (y
+ getAxisOption('axisTickSize')) + 'px';
277 var left
= (x
- getAxisOption('axisLabelWidth')/2);
278 if (left
+ getAxisOption('axisLabelWidth') > canvasWidth
) {
279 left
= canvasWidth
- getAxisOption('axisLabelWidth');
280 label
.style
.textAlign
= 'right';
284 label
.style
.textAlign
= 'left';
287 label
.style
.left
= left
+ 'px';
288 label
.style
.width
= getAxisOption('axisLabelWidth') + 'px';
289 containerDiv
.appendChild(label
);
290 this.xlabels_
.push(label
);
294 context
.strokeStyle
= g
.getOptionForAxis('axisLineColor', 'x');
295 context
.lineWidth
= g
.getOptionForAxis('axisLineWidth', 'x');
298 if (g
.getOption('drawAxesAtZero')) {
299 var r
= g
.toPercentYCoord(0, 0);
300 if (r
> 1 || r
< 0) r
= 1;
301 axisY
= halfDown(area
.y
+ r
* area
.h
);
303 axisY
= halfDown(area
.y
+ area
.h
);
305 context
.moveTo(halfUp(area
.x
), axisY
);
306 context
.lineTo(halfUp(area
.x
+ area
.w
), axisY
);