Merge branch 'master' into rangeslider-allow-zoom-on-oppaxis

Author: alexcjohnson

package-lock.json

@@ -114,6 +114,7 @@
   },
   "devDependencies": {
     "brfs": "^1.4.4",
+    "browser-pack-flat": "^3.0.8",
     "browserify": "^15.2.0",
     "browserify-transform-tools": "^1.7.0",
     "check-node-version": "^3.2.0",
@@ -148,6 +149,7 @@
     "prettysize": "1.1.0",
     "read-last-lines": "^1.1.0",
     "requirejs": "^2.3.1",
+    "run-series": "^1.1.4",
     "through2": "^2.0.3",
     "true-case-path": "^1.0.2",
     "watchify": "^3.10.0",

package.json

@@ -16,6 +16,7 @@ var Plots = require('../../plots/plots');
 var Lib = require('../../lib');
 var Drawing = require('../drawing');
 var Color = require('../color');
+var Titles = require('../titles');
 
 var Cartesian = require('../../plots/cartesian');
 var Axes = require('../../plots/cartesian/axes');
@@ -97,11 +98,17 @@ module.exports = function(gd) {
 
         // update range slider dimensions
 
-        var margin = fullLayout.margin,
-            graphSize = fullLayout._size,
-            domain = axisOpts.domain,
-            oppDomain = oppAxisOpts.domain,
-            tickHeight = (axisOpts._boundingBox || {}).height || 0;
+        var margin = fullLayout.margin;
+        var graphSize = fullLayout._size;
+        var domain = axisOpts.domain;
+        var tickHeight = (axisOpts._boundingBox || {}).height || 0;
+
+        var oppBottom = Infinity;
+        var subplotData = Axes.getSubplots(gd, axisOpts);
+        for(var i = 0; i < subplotData.length; i++) {
+            var oppAxis = Axes.getFromId(gd, subplotData[i].substr(subplotData[i].indexOf('y')));
+            oppBottom = Math.min(oppBottom, oppAxis.domain[0]);
+        }
 
         opts._id = constants.name + axisOpts._id;
         opts._clipId = opts._id + '-' + fullLayout._uid;
@@ -113,7 +120,7 @@ module.exports = function(gd) {
         var x = Math.round(margin.l + (graphSize.w * domain[0]));
 
         var y = Math.round(
-            margin.t + graphSize.h * (1 - oppDomain[0]) +
+            graphSize.t + graphSize.h * (1 - oppBottom) +
             tickHeight +
             opts._offsetShift + constants.extraPad
         );
@@ -162,18 +169,31 @@ module.exports = function(gd) {
         // update current range
         setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts, oppAxisRangeOpts);
 
-        // update margins
+        // title goes next to range slider instead of tick labels, so
+        // just take it over and draw it from here
+        if(axisOpts.side === 'bottom') {
+            Titles.draw(gd, axisOpts._id + 'title', {
+                propContainer: axisOpts,
+                propName: axisOpts._name + '.title',
+                placeholder: fullLayout._dfltTitle.x,
+                attributes: {
+                    x: axisOpts._offset + axisOpts._length / 2,
+                    y: y + opts._height + opts._offsetShift + 10 + 1.5 * axisOpts.titlefont.size,
+                    'text-anchor': 'middle'
+                }
+            });
+        }
 
+        // update margins
         Plots.autoMargin(gd, opts._id, {
             x: domain[0],
-            y: oppDomain[0],
+            y: oppBottom,
             l: 0,
             r: 0,
             t: 0,
             b: opts._height + margin.b + tickHeight,
             pad: constants.extraPad + opts._offsetShift * 2
         });
-
     });
 };
 

src/components/rangeslider/draw.js

@@ -20,7 +20,9 @@ var Color = require('../color');
 var svgTextUtils = require('../../lib/svg_text_utils');
 var interactConstants = require('../../constants/interactions');
 
-var Titles = module.exports = {};
+module.exports = {
+    draw: draw
+};
 
 var numStripRE = / [XY][0-9]* /;
 
@@ -54,7 +56,7 @@ var numStripRE = / [XY][0-9]* /;
  *
  *  @return {selection} d3 selection of title container group
  */
-Titles.draw = function(gd, titleClass, options) {
+function draw(gd, titleClass, options) {
     var cont = options.propContainer;
     var prop = options.propName;
     var placeholder = options.placeholder;
@@ -255,4 +257,4 @@ Titles.draw = function(gd, titleClass, options) {
     el.classed('js-placeholder', isplaceholder);
 
     return group;
-};
+}