X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Faxes.js;h=6623a0b5ce06ca820213cb16cfa3c4aefed9ce59;hb=df75aef5d3eb2056253841c2522e61ecf5dc53a2;hp=40b826c99550e29c6b73270f2d8b93e2e6f7c2e9;hpb=014a0f3441223be74be72ee47da276010931774f;p=dygraphs.git diff --git a/plugins/axes.js b/plugins/axes.js index 40b826c..6623a0b 100644 --- a/plugins/axes.js +++ b/plugins/axes.js @@ -4,17 +4,27 @@ * MIT-licensed (http://opensource.org/licenses/MIT) */ +/*global Dygraph:false */ + Dygraph.Plugins.Axes = (function() { "use strict"; /* - Bits of jankiness: - Direct layout access - Direct area access - Should include calculation of ticks, not just the drawing. +Options left to make axis-friendly. + ('axisTickSize') + ('drawAxesAtZero') + ('xAxisHeight') + +These too. What is the difference between axisLablelWidth and {x,y}AxisLabelWidth? + ('axisLabelWidth') + ('xAxisLabelWidth') + ('yAxisLabelWidth') */ /** @@ -42,25 +52,31 @@ axes.prototype.activate = function(g) { axes.prototype.layout = function(e) { var g = e.dygraph; - if (g.getOption('drawYAxis')) { + if (g.getOptionForAxis('drawAxis', 'y')) { var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize'); - var y_axis_rect = e.reserveSpaceLeft(w); + e.reserveSpaceLeft(w); } - if (g.getOption('drawXAxis')) { + if (g.getOptionForAxis('drawAxis', 'x')) { var h; + // NOTE: I think this is probably broken now, since g.getOption() now + // hits the dictionary. (That is, g.getOption('xAxisHeight') now always + // has a value.) if (g.getOption('xAxisHeight')) { h = g.getOption('xAxisHeight'); } else { h = g.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g.getOption('axisTickSize'); } - var x_axis_rect = e.reserveSpaceBottom(h); + e.reserveSpaceBottom(h); } if (g.numAxes() == 2) { - // TODO(danvk): per-axis setting. - var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize'); - var y2_axis_rect = e.reserveSpaceRight(w); + // TODO(danvk): introduce a 'drawAxis' per-axis property. + if (g.getOptionForAxis('drawAxis', 'y')) { + // TODO(danvk): per-axis setting. + var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize'); + e.reserveSpaceRight(w); + } } else if (g.numAxes() > 2) { g.error("Only two y-axes are supported at this time. (Trying " + "to use " + g.numAxes() + ")"); @@ -82,13 +98,13 @@ axes.prototype.detachLabels = function() { }; axes.prototype.clearChart = function(e) { - var g = e.dygraph; this.detachLabels(); }; axes.prototype.willDrawChart = function(e) { var g = e.dygraph; - if (!g.getOption('drawXAxis') && !g.getOption('drawYAxis')) return; + + if (!g.getOptionForAxis('drawAxis', 'x') && !g.getOptionForAxis('drawAxis', 'y')) return; // Round pixels to half-integer boundaries for crisper drawing. function halfUp(x) { return Math.round(x) + 0.5; } @@ -106,23 +122,23 @@ axes.prototype.willDrawChart = function(e) { position: "absolute", fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + "px", zIndex: 10, - color: g.getOption('axisLabelColor'), + color: g.getOptionForAxis('axisLabelColor', axis), width: g.getOption('axisLabelWidth') + "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'), + y2 : makeLabelStyle('y2') }; var makeDiv = function(txt, axis, prec_axis) { /* - * This seems to be called with the following three sets of axis/perc_axis: + * This seems to be called with the following three sets of axis/prec_axis: * x: undefined * y: y1 * y: y2 @@ -145,13 +161,11 @@ axes.prototype.willDrawChart = function(e) { // axis lines context.save(); - context.strokeStyle = g.getOption('axisLineColor'); - context.lineWidth = g.getOption('axisLineWidth'); var layout = g.layout_; var area = e.dygraph.plotter_.area; - if (g.getOption('drawYAxis')) { + if (g.getOptionForAxis('drawAxis', 'y')) { if (layout.yticks && layout.yticks.length > 0) { var num_axes = g.numAxes(); for (i = 0; i < layout.yticks.length; i++) { @@ -215,11 +229,15 @@ axes.prototype.willDrawChart = function(e) { var axisX; if (g.getOption('drawAxesAtZero')) { var r = g.toPercentXCoord(0); - if (r > 1 || r < 0) r = 0; + if (r > 1 || r < 0 || isNaN(r)) r = 0; axisX = halfUp(area.x + r * area.w); } else { axisX = halfUp(area.x); } + + context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y'); + context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y'); + context.beginPath(); context.moveTo(axisX, halfDown(area.y)); context.lineTo(axisX, halfDown(area.y + area.h)); @@ -228,6 +246,8 @@ axes.prototype.willDrawChart = function(e) { // if there's a secondary y-axis, draw a vertical line for that, too. if (g.numAxes() == 2) { + context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y2'); + context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y2'); context.beginPath(); context.moveTo(halfDown(area.x + area.w), halfDown(area.y)); context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h)); @@ -236,7 +256,7 @@ axes.prototype.willDrawChart = function(e) { } } - if (g.getOption('drawXAxis')) { + if (g.getOptionForAxis('drawAxis', 'x')) { if (layout.xticks) { for (i = 0; i < layout.xticks.length; i++) { tick = layout.xticks[i]; @@ -272,6 +292,8 @@ axes.prototype.willDrawChart = function(e) { } } + context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x'); + context.lineWidth = g.getOptionForAxis('axisLineWidth', 'x'); context.beginPath(); var axisY; if (g.getOption('drawAxesAtZero')) {