dygraphs

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> .KEYW {color: #933;} .COMM {color: #bbb; font-style: italic;} .NUMB {color: #393;} .STRN {color: #393;} .REGX {color: #339;} .line {border-right: 1px dotted #666; color: #666; font-style: normal;} </style></head><body><pre> 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 const that = this; 164 165 if (g.getOptionForAxis('drawAxis', 'y') || 166 (g.numAxes() == 2 && g.getOptionForAxis('drawAxis', 'y2'))) { 167 if (layout.yticks && layout.yticks.length > 0) { 168 var num_axes = g.numAxes(); 169 var getOptions = [makeOptionGetter('y'), makeOptionGetter('y2')]; 170 layout.yticks.forEach(function (tick) { 171 if (tick.label === undefined) return; // this tick only has a grid line. 172 x = area.x; 173 var sgn = 1; 174 var prec_axis = 'y1'; 175 var getAxisOption = getOptions[0]; 176 if (tick.axis == 1) { // right-side y-axis 177 x = area.x + area.w; 178 sgn = -1; 179 prec_axis = 'y2'; 180 getAxisOption = getOptions[1]; 181 } 182 if (!getAxisOption('drawAxis')) return; 183 var fontSize = getAxisOption('axisLabelFontSize'); 184 y = area.y + tick.pos * area.h; 185 186 /* Tick marks are currently clipped, so don't bother drawing them. 187 context.beginPath(); 188 context.moveTo(halfUp(x), halfDown(y)); 189 context.lineTo(halfUp(x - sgn * that.attr_('axisTickSize')), halfDown(y)); 190 context.closePath(); 191 context.stroke(); 192 */ 193 194 label = makeDiv(tick.label, 'y', num_axes == 2 ? prec_axis : null); 195 var top = (y - fontSize / 2); 196 if (top < 0) top = 0; 197 198 if (top + fontSize + 3 > canvasHeight) { 199 label.style.bottom = '0'; 200 } else { 201 // The lowest tick on the y-axis often overlaps with the leftmost 202 // tick on the x-axis. Shift the bottom tick up a little bit to 203 // compensate if necessary. 204 label.style.top = Math.min(<span class=