Merge pull request #6735 from plotly/range-inside-ticklables

Add `insiderange` to cartesian axes

Author: archmoj

src/components/colorbar/draw.js

@@ -1004,6 +1004,7 @@ function mockColorBarAxis(gd, opts, zrange) {
         noHover: true,
         noTickson: true,
         noTicklabelmode: true,
+        noInsideRange: true,
         calendar: fullLayout.calendar  // not really necessary (yet?)
     };
 

src/plot_api/helpers.js

@@ -72,6 +72,9 @@ exports.cleanLayout = function(layout) {
                 ax.autorange = true;
                 ax.rangemode = 'tozero';
             }
+
+            if(ax.insiderange) delete ax.range;
+
             delete ax.islog;
             delete ax.isdate;
             delete ax.categories; // replaced by _categories

src/plot_api/plot_api.js

@@ -357,9 +357,12 @@ function _doPlot(gd, data, layout, config) {
         seq.push(
             drawAxes,
             function insideTickLabelsAutorange(gd) {
-                if(gd._fullLayout._insideTickLabelsAutorange) {
-                    relayout(gd, gd._fullLayout._insideTickLabelsAutorange).then(function() {
-                        gd._fullLayout._insideTickLabelsAutorange = undefined;
+                var insideTickLabelsUpdaterange = gd._fullLayout._insideTickLabelsUpdaterange;
+                if(insideTickLabelsUpdaterange) {
+                    gd._fullLayout._insideTickLabelsUpdaterange = undefined;
+
+                    return relayout(gd, insideTickLabelsUpdaterange).then(function() {
+                        Axes.saveRangeInitial(gd, true);
                     });
                 }
             }
@@ -379,16 +382,9 @@ function _doPlot(gd, data, layout, config) {
         // calculated. Would be much better to separate margin calculations from
         // component drawing - see https://github.com/plotly/plotly.js/issues/2704
         Plots.doAutoMargin,
-        saveRangeInitialForInsideTickLabels,
         Plots.previousPromises
     );
 
-    function saveRangeInitialForInsideTickLabels(gd) {
-        if(gd._fullLayout._insideTickLabelsAutorange) {
-            if(graphWasEmpty) Axes.saveRangeInitial(gd, true);
-        }
-    }
-
     // even if everything we did was synchronous, return a promise
     // so that the caller doesn't care which route we took
     var plotDone = Lib.syncOrAsync(seq, gd);
@@ -1793,7 +1789,6 @@ function relayout(gd, astr, val) {
     // something may have happened within relayout that we
     // need to wait for
     var seq = [Plots.previousPromises];
-
     if(flags.layoutReplot) {
         seq.push(subroutines.layoutReplot);
     } else if(Object.keys(aobj).length) {

src/plots/cartesian/axes.js

@@ -3821,28 +3821,105 @@ axes.drawLabels = function(gd, ax, opts) {
         });
     }
 
+    var computeTickLabelBoundingBoxes = function() {
+        var labelsMaxW = 0;
+        var labelsMaxH = 0;
+        tickLabels.each(function(d, i) {
+            var thisLabel = selectTickLabel(this);
+            var mathjaxGroup = thisLabel.select('.text-math-group');
+
+            if(mathjaxGroup.empty()) {
+                var bb;
+
+                if(ax._vals[i]) {
+                    bb = ax._vals[i].bb || Drawing.bBox(thisLabel.node());
+                    ax._vals[i].bb = bb;
+                }
+
+                labelsMaxW = Math.max(labelsMaxW, bb.width);
+                labelsMaxH = Math.max(labelsMaxH, bb.height);
+            }
+        });
+
+        return {
+            labelsMaxW: labelsMaxW,
+            labelsMaxH: labelsMaxH
+        };
+    };
+
     var anchorAx = ax._anchorAxis;
     if(
-        anchorAx && anchorAx.autorange &&
+        anchorAx && (anchorAx.autorange || anchorAx.insiderange) &&
         insideTicklabelposition(ax) &&
         !isLinked(fullLayout, ax._id)
     ) {
-        if(!fullLayout._insideTickLabelsAutorange) {
-            fullLayout._insideTickLabelsAutorange = {};
+        if(!fullLayout._insideTickLabelsUpdaterange) {
+            fullLayout._insideTickLabelsUpdaterange = {};
         }
-        fullLayout._insideTickLabelsAutorange[anchorAx._name + '.autorange'] = anchorAx.autorange;
-
-        seq.push(
-            function computeFinalTickLabelBoundingBoxes() {
-                tickLabels.each(function(d, i) {
-                    var thisLabel = selectTickLabel(this);
-                    var mathjaxGroup = thisLabel.select('.text-math-group');
-                    if(mathjaxGroup.empty()) {
-                        ax._vals[i].bb = Drawing.bBox(thisLabel.node());
-                    }
-                });
+
+        if(anchorAx.autorange) {
+            fullLayout._insideTickLabelsUpdaterange[anchorAx._name + '.autorange'] = anchorAx.autorange;
+
+            seq.push(computeTickLabelBoundingBoxes);
+        }
+
+        if(anchorAx.insiderange) {
+            var BBs = computeTickLabelBoundingBoxes();
+            var move = ax._id.charAt(0) === 'y' ?
+                BBs.labelsMaxW :
+                BBs.labelsMaxH;
+
+            move += 2 * TEXTPAD;
+
+            if(ax.ticklabelposition === 'inside') {
+                move += ax.ticklen || 0;
             }
-        );
+
+            var sgn = (ax.side === 'right' || ax.side === 'top') ? 1 : -1;
+            var index = sgn === 1 ? 1 : 0;
+            var otherIndex = sgn === 1 ? 0 : 1;
+
+            var newRange = [];
+            newRange[otherIndex] = anchorAx.range[otherIndex];
+
+            var p0 = anchorAx.d2p(anchorAx.range[index]);
+            var p1 = anchorAx.d2p(anchorAx.range[otherIndex]);
+            var dist = Math.abs(p1 - p0);
+            if(dist - move > 0) {
+                dist -= move;
+                move *= 1 + move / dist;
+            } else {
+                move = 0;
+            }
+
+            if(ax._id.charAt(0) !== 'y') move = -move;
+
+            newRange[index] = anchorAx.p2d(
+                anchorAx.d2p(anchorAx.range[index]) +
+                sgn * move
+            );
+
+            // handle partial ranges in insiderange
+            if(
+                anchorAx.autorange === 'min' ||
+                anchorAx.autorange === 'max reversed'
+            ) {
+                newRange[0] = null;
+
+                anchorAx._rangeInitial0 = undefined;
+                anchorAx._rangeInitial1 = undefined;
+            } else if(
+                anchorAx.autorange === 'max' ||
+                anchorAx.autorange === 'min reversed'
+            ) {
+                newRange[1] = null;
+
+                anchorAx._rangeInitial0 = undefined;
+                anchorAx._rangeInitial1 = undefined;
+            }
+
+            fullLayout._insideTickLabelsUpdaterange[anchorAx._name + '.range'] = newRange;
+        }
     }
 
     var done = Lib.syncOrAsync(seq);

src/plots/cartesian/layout_attributes.js

@@ -398,6 +398,21 @@ module.exports = {
             'If true, then zoom is disabled.'
         ].join(' ')
     },
+    insiderange: {
+        valType: 'info_array',
+        items: [
+            {valType: 'any', editType: 'plot'},
+            {valType: 'any', editType: 'plot'}
+        ],
+        editType: 'plot',
+        description: [
+            'Could be used to set the desired inside range of this axis',
+            '(excluding the labels) when `ticklabelposition` of',
+            'the anchored axis has *inside*.',
+            'Not implemented for axes with `type` *log*.',
+            'This would be ignored when `range` is provided.'
+        ].join(' ')
+    },
     // scaleanchor: not used directly, just put here for reference
     // values are any opposite-letter axis id, or `false`.
     scaleanchor: {

src/plots/cartesian/range_defaults.js

@@ -10,6 +10,25 @@ module.exports = function handleRangeDefaults(containerIn, containerOut, coerce,
     coerce('maxallowed');
 
     var range = coerce('range');
+    if(!range) {
+        var insiderange;
+        if(!options.noInsiderange && axType !== 'log') {
+            insiderange = coerce('insiderange');
+
+            // We may support partial insideranges in future
+            // For now it is out of scope
+            if(insiderange && (
+                    insiderange[0] === null ||
+                    insiderange[1] === null
+            )) {
+                containerOut.insiderange = false;
+                insiderange = undefined;
+            }
+
+            if(insiderange) range = coerce('range', insiderange);
+        }
+    }
+
     var autorangeDflt = containerOut.getAutorangeDflt(range, options);
     var autorange = coerce('autorange', autorangeDflt);
 

src/plots/gl3d/layout/axis_defaults.js

@@ -46,6 +46,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
                 noTicklabelstep: true,
                 noTicklabelposition: true,
                 noTicklabeloverflow: true,
+                noInsiderange: true,
                 bgColor: options.bgColor,
                 calendar: options.calendar
             },

test/image/baselines/zz-insiderange-x-narrow.png

@@ -0,0 +1,99 @@
+{
+    "data": [{
+        "xaxis": "x",
+        "yaxis": "y",
+        "y": [1000, 10, 100, 1]
+    }, {
+        "xaxis": "x2",
+        "yaxis": "y2",
+        "y": [1000, 10, 100, 1]
+    }, {
+        "xaxis": "x3",
+        "yaxis": "y3",
+        "x": [2000, 2001, 2002, 2003],
+        "y": [1000, 10, 100, 1]
+    }, {
+        "xaxis": "x4",
+        "yaxis": "y4",
+        "x": [2000, 2001, 2002, 2003],
+        "y": [1000, 10, 100, 1]
+    }],
+    "layout": {
+        "xaxis": {
+            "insiderange": [1, 2],
+            "anchor": "y",
+            "domain": [0, 0.45],
+            "gridcolor": "white"
+        },
+        "yaxis": {
+            "anchor": "x",
+            "domain": [0, 0.45],
+            "side": "right",
+            "ticks": "inside",
+            "ticklabelposition": "inside",
+            "ticklen": 8,
+            "tickwidth": 3,
+            "gridcolor": "white"
+        },
+        "xaxis2": {
+            "insiderange": [2, 1],
+            "anchor": "y2",
+            "domain": [0, 0.45],
+            "gridcolor": "white"
+        },
+        "yaxis2": {
+            "anchor": "x2",
+            "domain": [0.55, 1],
+            "side": "left",
+            "ticks": "inside",
+            "ticklabelposition": "inside",
+            "ticklen": 8,
+            "tickwidth": 3,
+            "gridcolor": "white"
+        },
+        "xaxis3": {
+            "type": "date",
+            "insiderange": ["2001-01", "2002-01"],
+            "anchor": "y3",
+            "domain": [0.55, 1],
+            "gridcolor": "white"
+        },
+        "yaxis3": {
+            "anchor": "x3",
+            "domain": [0, 0.45],
+            "side": "right",
+            "ticks": "inside",
+            "ticklabelposition": "inside",
+            "ticklen": 8,
+            "tickwidth": 3,
+            "gridcolor": "white"
+        },
+        "xaxis4": {
+            "type": "date",
+            "insiderange": ["2002-01", "2001-01"],
+            "anchor": "y4",
+            "domain": [0.55, 1],
+            "gridcolor": "white"
+        },
+        "yaxis4": {
+            "anchor": "x4",
+            "domain": [0.55, 1],
+            "side": "left",
+            "ticks": "inside",
+            "ticklabelposition": "inside",
+            "ticklen": 8,
+            "tickwidth": 3,
+            "gridcolor": "white"
+        },
+        "plot_bgcolor": "lightblue",
+        "showlegend": false,
+        "width":  300,
+        "height": 900,
+        "margin": {
+            "t": 60,
+            "b": 60,
+            "l": 60,
+            "r": 60
+        }
+    }
+}