From bd6ee5dcf9017abcbefa480e79756a6957c5c7ed Mon Sep 17 00:00:00 2001 From: Dan Vanderkam Date: Tue, 2 Aug 2016 15:00:32 -0400 Subject: [PATCH] Implement tick.label_v. --- src/dygraph-layout.js | 14 +++++++++----- src/plugins/axes.js | 25 ++++++++++++------------- src/plugins/grid.js | 14 ++++++++------ 3 files changed, 29 insertions(+), 24 deletions(-) diff --git a/src/dygraph-layout.js b/src/dygraph-layout.js index 3bc9135..c32a9e5 100644 --- a/src/dygraph-layout.js +++ b/src/dygraph-layout.js @@ -276,14 +276,16 @@ DygraphLayout.prototype._evaluateLineCharts = function() { }; DygraphLayout.prototype._evaluateLineTicks = function() { - var i, tick, label, pos; + var i, tick, label, pos, v, has_tick; this.xticks = []; for (i = 0; i < this.xTicks_.length; i++) { tick = this.xTicks_[i]; label = tick.label; - pos = this.dygraph_.toPercentXCoord(tick.v); + has_tick = !('label_v' in tick); + v = has_tick ? tick.v : tick.label_v; + pos = this.dygraph_.toPercentXCoord(v); if ((pos >= 0.0) && (pos < 1.0)) { - this.xticks.push([pos, label]); + this.xticks.push({pos, label, has_tick}); } } @@ -293,9 +295,11 @@ DygraphLayout.prototype._evaluateLineTicks = function() { for (var j = 0; j < axis.ticks.length; j++) { tick = axis.ticks[j]; label = tick.label; - pos = this.dygraph_.toPercentYCoord(tick.v, i); + has_tick = !('label_v' in tick); + v = has_tick ? tick.v : tick.label_v; + pos = this.dygraph_.toPercentYCoord(v, i); if ((pos > 0.0) && (pos <= 1.0)) { - this.yticks.push([i, pos, label]); + this.yticks.push({axis: i, pos, label, has_tick}); } } } diff --git a/src/plugins/axes.js b/src/plugins/axes.js index e913534..f93f36f 100644 --- a/src/plugins/axes.js +++ b/src/plugins/axes.js @@ -99,7 +99,7 @@ axes.prototype.willDrawChart = function(e) { !g.getOptionForAxis('drawAxis', 'y2')) { return; } - + // Round pixels to half-integer boundaries for crisper drawing. function halfUp(x) { return Math.round(x) + 0.5; } function halfDown(y){ return Math.round(y) - 0.5; } @@ -170,21 +170,20 @@ axes.prototype.willDrawChart = function(e) { if (layout.yticks && layout.yticks.length > 0) { var num_axes = g.numAxes(); var getOptions = [makeOptionGetter('y'), makeOptionGetter('y2')]; - for (i = 0; i < layout.yticks.length; i++) { - tick = layout.yticks[i]; - if (typeof(tick) == 'function') return; // <-- when would this happen? + for (var tick of layout.yticks) { + if (tick.label === undefined) continue; // this tick only has a grid line. x = area.x; var sgn = 1; var prec_axis = 'y1'; var getAxisOption = getOptions[0]; - if (tick[0] == 1) { // right-side y-axis + if (tick.axis == 1) { // right-side y-axis x = area.x + area.w; sgn = -1; prec_axis = 'y2'; getAxisOption = getOptions[1]; } var fontSize = getAxisOption('axisLabelFontSize'); - y = area.y + tick[1] * area.h; + y = area.y + tick.pos * area.h; /* Tick marks are currently clipped, so don't bother drawing them. context.beginPath(); @@ -194,7 +193,7 @@ axes.prototype.willDrawChart = function(e) { context.stroke(); */ - label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null); + label = makeDiv(tick.label, 'y', num_axes == 2 ? prec_axis : null); var top = (y - fontSize / 2); if (top < 0) top = 0; @@ -203,10 +202,10 @@ axes.prototype.willDrawChart = function(e) { } else { label.style.top = top + 'px'; } - if (tick[0] === 0) { + if (tick.axis === 0) { label.style.left = (area.x - getAxisOption('axisLabelWidth') - getAxisOption('axisTickSize')) + 'px'; label.style.textAlign = 'right'; - } else if (tick[0] == 1) { + } else if (tick.axis == 1) { label.style.left = (area.x + area.w + getAxisOption('axisTickSize')) + 'px'; label.style.textAlign = 'left'; @@ -263,9 +262,9 @@ axes.prototype.willDrawChart = function(e) { if (g.getOptionForAxis('drawAxis', 'x')) { if (layout.xticks) { var getAxisOption = makeOptionGetter('x'); - for (i = 0; i < layout.xticks.length; i++) { - tick = layout.xticks[i]; - x = area.x + tick[0] * area.w; + for (var tick of layout.xticks) { + if (tick.label === undefined) continue; // this tick only has a grid line. + x = area.x + tick.pos * area.w; y = area.y + area.h; /* Tick marks are currently clipped, so don't bother drawing them. @@ -276,7 +275,7 @@ axes.prototype.willDrawChart = function(e) { context.stroke(); */ - label = makeDiv(tick[1], 'x'); + label = makeDiv(tick.label, 'x'); label.style.textAlign = 'center'; label.style.top = (y + getAxisOption('axisTickSize')) + 'px'; diff --git a/src/plugins/grid.js b/src/plugins/grid.js index 16a83a2..25126db 100644 --- a/src/plugins/grid.js +++ b/src/plugins/grid.js @@ -62,9 +62,10 @@ grid.prototype.willDrawChart = function(e) { ticks = layout.yticks; ctx.save(); // draw grids for the different y axes - for (i = 0; i < ticks.length; i++) { - var axis = ticks[i][0]; - if(drawGrid[axis]) { + for (var tick of ticks) { + if (!tick.has_tick) continue; + var axis = tick.axis; + if (drawGrid[axis]) { ctx.save(); if (stroking[axis]) { if (ctx.setLineDash) ctx.setLineDash(strokePattern[axis]); @@ -73,7 +74,7 @@ grid.prototype.willDrawChart = function(e) { ctx.lineWidth = lineWidths[axis]; x = halfUp(area.x); - y = halfDown(area.y + ticks[i][1] * area.h); + y = halfDown(area.y + tick.pos * area.h); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + area.w, y); @@ -96,8 +97,9 @@ grid.prototype.willDrawChart = function(e) { } ctx.strokeStyle = g.getOptionForAxis('gridLineColor', 'x'); ctx.lineWidth = g.getOptionForAxis('gridLineWidth', 'x'); - for (i = 0; i < ticks.length; i++) { - x = halfUp(area.x + ticks[i][0] * area.w); + for (var tick of ticks) { + if (!tick.has_tick) continue; + x = halfUp(area.x + tick.pos * area.w); y = halfDown(area.y + area.h); ctx.beginPath(); ctx.moveTo(x, y); -- 2.7.4