1 /** 2 * @license 3 * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) 4 * MIT-licenced: https://opensource.org/licenses/MIT 5 */ 6 7 /*global Dygraph:false */ 8 9 'use strict'; 10 11 /* 12 Bits of jankiness: 13 - Direct layout access 14 - Direct area access 15 - Should include calculation of ticks, not just the drawing. 16 17 Options left to make axis-friendly. 18 ('drawAxesAtZero') 19 ('xAxisHeight') 20 */ 21 22 import * as utils from '../dygraph-utils'; 23 24 /** 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. 28 */ 29 var axes = function() { 30 this.xlabels_ = []; 31 this.ylabels_ = []; 32 }; 33 34 axes.prototype.toString = function() { 35 return 'Axes Plugin'; 36 }; 37 38 axes.prototype.activate = function(g) { 39 return { 40 layout: this.layout, 41 clearChart: this.clearChart, 42 willDrawChart: this.willDrawChart 43 }; 44 }; 45 46 axes.prototype.layout = function(e) { 47 var g = e.dygraph; 48 49 if (g.getOptionForAxis('drawAxis', 'y')) { 50 var w = g.getOptionForAxis('axisLabelWidth', 'y') + 2 * g.getOptionForAxis('axisTickSize', 'y'); 51 e.reserveSpaceLeft(w); 52 } 53 54 if (g.getOptionForAxis('drawAxis', 'x')) { 55 var h; 56 // NOTE: I think this is probably broken now, since g.getOption() now 57 // hits the dictionary. (That is, g.getOption('xAxisHeight') now always 58 // has a value.) 59 if (g.getOption('xAxisHeight')) { 60 h = g.getOption('xAxisHeight'); 61 } else { 62 h = g.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g.getOptionForAxis('axisTickSize', 'x'); 63 } 64 e.reserveSpaceBottom(h); 65 } 66 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); 71 } 72 } else if (g.numAxes() > 2) { 73 g.error('Only two y-axes are supported at this time. (Trying ' + 74 'to use ' + g.numAxes() + ')'); 75 } 76 }; 77 78 axes.prototype.detachLabels = function() { 79 function removeArray(ary) { 80 for (var i = 0; i < ary.length; i++) { 81 var el = ary[i]; 82 if (el.parentNode) el.parentNode.removeChild(el); 83 } 84 } 85 86 removeArray(this.xlabels_); 87 removeArray(this.ylabels_); 88 this.xlabels_ = []; 89 this.ylabels_ = []; 90 }; 91 92 axes.prototype.clearChart = function(e) { 93 this.detachLabels(); 94 }; 95 96 axes.prototype.willDrawChart = function(e) { 97 var g = e.dygraph; 98 99 if (!g.getOptionForAxis('drawAxis', 'x') && 100 !g.getOptionForAxis('drawAxis', 'y') && 101 !g.getOptionForAxis('drawAxis', 'y2')) { 102 return; 103 } 104 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; } 108 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_; 113 114 var label, x, y, tick, i; 115 116 var makeLabelStyle = function(axis) { 117 return { 118 position: 'absolute', 119 fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + 'px', 120 width: g.getOptionForAxis('axisLabelWidth', axis) + 'px', 121 }; 122 }; 123 124 var labelStyles = { 125 x: makeLabelStyle('x'), 126 y: makeLabelStyle('y'), 127 y2: makeLabelStyle('y2') 128 }; 129 130 var makeDiv = function(txt, axis, prec_axis) { 131 /* 132 * This seems to be called with the following three sets of axis/prec_axis: 133 * x: undefined 134 * y: y1 135 * y: y2 136 */ 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); 147 return div; 148 }; 149 150 // axis lines 151 context.save(); 152 153 var layout = g.layout_; 154 var area = e.dygraph.plotter_.area; 155 156 // Helper for repeated axis-option accesses. 157 var makeOptionGetter = function(axis) { 158 return function(option) { 159 return g.getOptionForAxis(option, axis); 160 }; 161 }; 162 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. 169 x = area.x; 170 var sgn = 1; 171 var prec_axis = 'y1'; 172 var getAxisOption = getOptions[0]; 173 if (tick.axis == 1) { // right-side y-axis 174 x = area.x + area.w; 175 sgn = -1; 176 prec_axis = 'y2'; 177 getAxisOption = getOptions[1]; 178 } 179 var fontSize = getAxisOption('axisLabelFontSize'); 180 y = area.y + tick.pos * area.h; 181 182 /* Tick marks are currently clipped, so don't bother drawing them. 183 context.beginPath(); 184 context.moveTo(halfUp(x), halfDown(y)); 185 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y)); 186 context.closePath(); 187 context.stroke(); 188 */ 189 190 label = makeDiv(tick.label, 'y', num_axes == 2 ? prec_axis : null); 191 var top = (y - fontSize / 2); 192 if (top < 0) top = 0; 193 194 if (top + fontSize + 3 > canvasHeight) { 195 label.style.bottom = '0'; 196 } else { 197 label.style.top = top + 'px'; 198 } 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'; 207 } 208 label.style.width = getAxisOption('axisLabelWidth') + 'px'; 209 containerDiv.appendChild(label); 210 this.ylabels_.push(label); 211 }); 212 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'; 223 } 224 } 225 226 // draw a vertical line on the left to separate the chart from the labels. 227 var axisX; 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); 232 } else { 233 axisX = halfUp(area.x); 234 } 235 236 context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y'); 237 context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y'); 238 239 context.beginPath(); 240 context.moveTo(axisX, halfDown(area.y)); 241 context.lineTo(axisX, halfDown(area.y + area.h)); 242 context.closePath(); 243 context.stroke(); 244 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'); 249 context.beginPath(); 250 context.moveTo(halfDown(area.x + area.w), halfDown(area.y)); 251 context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h)); 252 context.closePath(); 253 context.stroke(); 254 } 255 } 256 257 if (g.getOptionForAxis('drawAxis', 'x')) { 258 if (layout.xticks) { 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; 263 y = area.y + area.h; 264 265 /* Tick marks are currently clipped, so don't bother drawing them. 266 context.beginPath(); 267 context.moveTo(halfUp(x), halfDown(y)); 268 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize'))); 269 context.closePath(); 270 context.stroke(); 271 */ 272 273 label = makeDiv(tick.label, 'x'); 274 label.style.textAlign = 'center'; 275 label.style.top = (y + getAxisOption('axisTickSize')) + 'px'; 276 277 var left = (x - getAxisOption('axisLabelWidth')/2); 278 if (left + getAxisOption('axisLabelWidth') > canvasWidth) { 279 left = canvasWidth - getAxisOption('axisLabelWidth'); 280 label.style.textAlign = 'right'; 281 } 282 if (left < 0) { 283 left = 0; 284 label.style.textAlign = 'left'; 285 } 286 287 label.style.left = left + 'px'; 288 label.style.width = getAxisOption('axisLabelWidth') + 'px'; 289 containerDiv.appendChild(label); 290 this.xlabels_.push(label); 291 }); 292 } 293 294 context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x'); 295 context.lineWidth = g.getOptionForAxis('axisLineWidth', 'x'); 296 context.beginPath(); 297 var axisY; 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); 302 } else { 303 axisY = halfDown(area.y + area.h); 304 } 305 context.moveTo(halfUp(area.x), axisY); 306 context.lineTo(halfUp(area.x + area.w), axisY); 307 context.closePath(); 308 context.stroke(); 309 } 310 311 context.restore(); 312 }; 313 314 export default axes; 315