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).
+
+