From: Dan Vanderkam Date: Thu, 18 Apr 2013 16:28:36 +0000 (-0700) Subject: Merge pull request #245 from sauter-hq/custom-bar-data-gaps-459 X-Git-Tag: v1.0.0~37 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=d88dec82afd6b902ffa56339d4afbf3277ad5ba3;hp=6d25b0cd34d97f35b10242d370a1272a973683a7;p=dygraphs.git Merge pull request #245 from sauter-hq/custom-bar-data-gaps-459 Custom bar data gaps 459 --- diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js index a27cad7..34e3574 100644 --- a/auto_tests/tests/range_selector.js +++ b/auto_tests/tests/range_selector.js @@ -318,6 +318,32 @@ RangeSelectorTestCase.prototype.testRangeSelectorInteraction = function() { assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]); }; + +RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = function() { + var opts = { + width: 480, + height: 100, + xAxisHeight: 30, + drawXAxis: false, + showRangeSelector: true, + rangeSelectorHeight: 30 + }; + var data = [ + [0, 1], + [10, 1] + ]; + var graph = document.getElementById("graph"); + var g = new Dygraph(graph, data, opts); + + //assert, that the range selector is at top position 70 since the 30px of the + // xAxis shouldn't be reserved since it isn't drawn. + this.assertGraphExistence(g, graph); + var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0]; + assertEquals("Range selector is not at the expected position.","70px", bgcanvas.style.top); + var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0]; + assertEquals("Range selector is not at the expected position.","70px", fgcanvas.style.top); +}; + RangeSelectorTestCase.prototype.assertGraphExistence = function(g, graph) { assertNotNull(g); var zoomhandles = graph.getElementsByClassName('dygraph-rangesel-zoomhandle'); diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 90ef027..ef6cf1f 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -39,8 +39,8 @@ * The chart canvas has already been created by the Dygraph object. The * renderer simply gets a drawing context. * - * @param {Dyraph} dygraph The chart to which this renderer belongs. - * @param {Canvas} element The <canvas> DOM element on which to draw. + * @param {Dygraph} dygraph The chart to which this renderer belongs. + * @param {HTMLCanvasElement} element The <canvas> DOM element on which to draw. * @param {CanvasRenderingContext2D} elementContext The drawing context. * @param {DygraphLayout} layout The chart's DygraphLayout object. * @@ -58,6 +58,7 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { this.width = this.element.width; // --- check whether everything is ok before we return + // NOTE(konigsberg): isIE is never defined in this object. Bug of some sort. if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element))) throw "Canvas is not supported."; @@ -433,14 +434,16 @@ DygraphCanvasRenderer.prototype._updatePoints = function() { /** * Add canvas Actually draw the lines chart, including error bars. - * If opt_seriesName is specified, only that series will be drawn. - * (This is used for expedited redrawing with highlightSeriesOpts) - * Lines are typically drawn in the non-interactive dygraph canvas. If opt_ctx - * is specified, they can be drawn elsewhere. * * This function can only be called if DygraphLayout's points array has been * updated with canvas{x,y} attributes, i.e. by * DygraphCanvasRenderer._updatePoints. + * + * @param {string=} opt_seriesName when specified, only that series will + * be drawn. (This is used for expedited redrawing with highlightSeriesOpts) + * @param {CanvasRenderingContext2D} opt_ctx when specified, the drawing + * context. However, lines are typically drawn on the object's + * elementContext. * @private */ DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) { diff --git a/dygraph-layout.js b/dygraph-layout.js index 552911e..da0405e 100644 --- a/dygraph-layout.js +++ b/dygraph-layout.js @@ -52,6 +52,12 @@ DygraphLayout.prototype.addDataset = function(setname, set_xy) { this.setNames.push(setname); }; +/** + * Returns the box which the chart should be drawn in. This is the canvas's + * box, less space needed for the axis and chart labels. + * + * @return {{x: number, y: number, w: number, h: number}} + */ DygraphLayout.prototype.getPlotArea = function() { return this.area_; }; diff --git a/dygraph-options.js b/dygraph-options.js index 5fa8f3e..0f90086 100644 --- a/dygraph-options.js +++ b/dygraph-options.js @@ -17,14 +17,10 @@ var DygraphOptions = (function() { "use strict"; /* - * Interesting member variables: - * dygraph_ - the graph. + * Interesting member variables: (REMOVING THIS LIST AS I CLOSURIZE) * global_ - global attributes (common among all graphs, AIUI) * user - attributes set by the user - * yAxes_ - array of axis index to { series : [ series names ] , options : { axis-specific options. } - * xAxis_ - { options : { axis-specific options. } * series_ - { seriesName -> { idx, yAxis, options }} - * labels_ - used as mapping from index to series name. */ /** @@ -38,26 +34,47 @@ var DygraphOptions = (function() { * @constructor */ var DygraphOptions = function(dygraph) { + /** + * The dygraph. + * @type {!Dygraph} + */ this.dygraph_ = dygraph; - /** @type {Array.<{options: Object, series: string}>} @private */ + /** + * Array of axis index to { series : [ series names ] , options : { axis-specific options. } + * @type {Array.<{series : Array., options : Object}>} @private + */ this.yAxes_ = []; - /** @type {{options: Object}} @private */ - this.xAxis_ = {options: {}}; - /** @type {Object} @private */ + + /** + * Contains x-axis specific options, which are stored in the options key. + * This matches the yAxes_ object structure (by being a dictionary with an + * options element) allowing for shared code. + * @type {options: Object} @private + */ + this.xAxis_ = {}; this.series_ = {}; // Once these two objects are initialized, you can call get(); this.global_ = this.dygraph_.attrs_; this.user_ = this.dygraph_.user_attrs_ || {}; + /** + * A list of series in columnar order. + * @type {Array.} + */ + this.labels_ = []; + this.highlightSeries_ = this.get("highlightSeriesOpts") || {}; this.reparseSeries(); }; -/* +/** * Not optimal, but does the trick when you're only using two axes. * If we move to more axes, this can just become a function. + * + * @type {Object.} + * @private */ DygraphOptions.AXIS_STRING_MAPPINGS_ = { 'y' : 0, diff --git a/dygraph-utils.js b/dygraph-utils.js index 250c855..223360b 100644 --- a/dygraph-utils.js +++ b/dygraph-utils.js @@ -1244,10 +1244,11 @@ Dygraph.isNodeContainedBy = function(containee, container) { if (container === null || containee === null) { return false; } - while (containee && containee !== container) { - containee = containee.parentNode; + var containeeNode = /** @type {Node} */ (containee); + while (containeeNode && containeeNode !== container) { + containeeNode = containeeNode.parentNode; } - return (containee === container); + return (containeeNode === container); }; diff --git a/plugins/range-selector.js b/plugins/range-selector.js index df8f867..d45a29a 100644 --- a/plugins/range-selector.js +++ b/plugins/range-selector.js @@ -176,7 +176,11 @@ rangeSelector.prototype.resize_ = function() { } var plotArea = this.dygraph_.layout_.getPlotArea(); - var xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize')); + + var xAxisLabelHeight = 0; + if(this.getOption_('drawXAxis')){ + xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize')); + } this.canvasRect_ = { x: plotArea.x, y: plotArea.y + plotArea.h + xAxisLabelHeight + 4, diff --git a/tests/range-selector.html b/tests/range-selector.html index 3ad6a26..74a38d6 100644 --- a/tests/range-selector.html +++ b/tests/range-selector.html @@ -29,6 +29,10 @@ Roll period of 14 timesteps, custom range selector height and plot color.

+

+ Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector). +

+