X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=src%2Fplugins%2Faxes.js;h=a0169bcb90c76c5386e5376fcccffa754fe2e10c;hb=refs%2Fheads%2Fmaster;hp=f93f36fce1e8a0c15e007e88318dc67f58b324ef;hpb=546df89613a776fa97d049368f469c058844c431;p=dygraphs.git diff --git a/src/plugins/axes.js b/src/plugins/axes.js index f93f36f..a0169bc 100644 --- a/src/plugins/axes.js +++ b/src/plugins/axes.js @@ -19,6 +19,8 @@ Options left to make axis-friendly. ('xAxisHeight') */ +import * as utils from '../dygraph-utils'; + /** * Draws the axes. This includes the labels on the x- and y-axes, as well * as the tick marks on the axes. @@ -115,19 +117,14 @@ axes.prototype.willDrawChart = function(e) { return { position: 'absolute', fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + 'px', - zIndex: 10, - color: g.getOptionForAxis('axisLabelColor', axis), width: g.getOptionForAxis('axisLabelWidth', axis) + 'px', - // height: g.getOptionForAxis('axisLabelFontSize', 'x') + 2 + "px", - lineHeight: 'normal', // Something other than "normal" line-height screws up label positioning. - overflow: 'hidden' }; }; var labelStyles = { - x : makeLabelStyle('x'), - y : makeLabelStyle('y'), - y2 : makeLabelStyle('y2') + x: makeLabelStyle('x'), + y: makeLabelStyle('y'), + y2: makeLabelStyle('y2') }; var makeDiv = function(txt, axis, prec_axis) { @@ -139,11 +136,8 @@ axes.prototype.willDrawChart = function(e) { */ var div = document.createElement('div'); var labelStyle = labelStyles[prec_axis == 'y2' ? 'y2' : axis]; - for (var name in labelStyle) { - if (labelStyle.hasOwnProperty(name)) { - div.style[name] = labelStyle[name]; - } - } + utils.update(div.style, labelStyle); + // TODO: combine outer & inner divs var inner_div = document.createElement('div'); inner_div.className = 'dygraph-axis-label' + ' dygraph-axis-label-' + axis + @@ -170,8 +164,8 @@ axes.prototype.willDrawChart = function(e) { if (layout.yticks && layout.yticks.length > 0) { var num_axes = g.numAxes(); var getOptions = [makeOptionGetter('y'), makeOptionGetter('y2')]; - for (var tick of layout.yticks) { - if (tick.label === undefined) continue; // this tick only has a grid line. + layout.yticks.forEach(tick => { + if (tick.label === undefined) return; // this tick only has a grid line. x = area.x; var sgn = 1; var prec_axis = 'y1'; @@ -202,6 +196,7 @@ axes.prototype.willDrawChart = function(e) { } else { label.style.top = top + 'px'; } + // TODO: replace these with css classes? if (tick.axis === 0) { label.style.left = (area.x - getAxisOption('axisLabelWidth') - getAxisOption('axisTickSize')) + 'px'; label.style.textAlign = 'right'; @@ -213,7 +208,7 @@ axes.prototype.willDrawChart = function(e) { label.style.width = getAxisOption('axisLabelWidth') + 'px'; containerDiv.appendChild(label); this.ylabels_.push(label); - } + }); // The lowest tick on the y-axis often overlaps with the leftmost // tick on the x-axis. Shift the bottom tick up a little bit to @@ -262,8 +257,8 @@ axes.prototype.willDrawChart = function(e) { if (g.getOptionForAxis('drawAxis', 'x')) { if (layout.xticks) { var getAxisOption = makeOptionGetter('x'); - for (var tick of layout.xticks) { - if (tick.label === undefined) continue; // this tick only has a grid line. + layout.xticks.forEach(tick => { + if (tick.label === undefined) return; // this tick only has a grid line. x = area.x + tick.pos * area.w; y = area.y + area.h; @@ -293,7 +288,7 @@ axes.prototype.willDrawChart = function(e) { label.style.width = getAxisOption('axisLabelWidth') + 'px'; containerDiv.appendChild(label); this.xlabels_.push(label); - } + }); } context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x');