diff --git a/draftlogs/6817_fix.md b/draftlogs/6817_fix.md new file mode 100644 index 00000000000..97881cc801c --- /dev/null +++ b/draftlogs/6817_fix.md @@ -0,0 +1 @@ + - Respect `insiderange` when multiple overlaid axes having `insideticklabel` [[#6817](https://github.com/plotly/plotly.js/pull/6817)] diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js index dfdb0e5166d..9493c5bbfe1 100644 --- a/src/plots/cartesian/axes.js +++ b/src/plots/cartesian/axes.js @@ -3885,8 +3885,29 @@ axes.drawLabels = function(gd, ax, opts) { var newRange = []; newRange[otherIndex] = anchorAx.range[otherIndex]; - var p0 = anchorAx.d2p(anchorAx.range[index]); - var p1 = anchorAx.d2p(anchorAx.range[otherIndex]); + var anchorAxRange = anchorAx.range; + + var p0 = anchorAx.d2p(anchorAxRange[index]); + var p1 = anchorAx.d2p(anchorAxRange[otherIndex]); + + var _tempNewRange = fullLayout._insideTickLabelsUpdaterange[anchorAx._name + '.range']; + if(_tempNewRange) { // case of having multiple anchored axes having insideticklabel + var q0 = anchorAx.d2p(_tempNewRange[index]); + var q1 = anchorAx.d2p(_tempNewRange[otherIndex]); + + var dir = sgn * (ax._id.charAt(0) === 'y' ? 1 : -1); + + if(dir * p0 < dir * q0) { + p0 = q0; + newRange[index] = anchorAxRange[index] = _tempNewRange[index]; + } + + if(dir * p1 > dir * q1) { + p1 = q1; + newRange[otherIndex] = anchorAxRange[otherIndex] = _tempNewRange[otherIndex]; + } + } + var dist = Math.abs(p1 - p0); if(dist - move > 0) { dist -= move; @@ -3898,7 +3919,7 @@ axes.drawLabels = function(gd, ax, opts) { if(ax._id.charAt(0) !== 'y') move = -move; newRange[index] = anchorAx.p2d( - anchorAx.d2p(anchorAx.range[index]) + + anchorAx.d2p(anchorAxRange[index]) + sgn * move ); diff --git a/test/image/baselines/zz-insiderange-x-multi-y.png b/test/image/baselines/zz-insiderange-x-multi-y.png new file mode 100644 index 00000000000..322dc421f59 Binary files /dev/null and b/test/image/baselines/zz-insiderange-x-multi-y.png differ diff --git a/test/image/baselines/zz-insiderange-y-multi-x.png b/test/image/baselines/zz-insiderange-y-multi-x.png new file mode 100644 index 00000000000..318fb446383 Binary files /dev/null and b/test/image/baselines/zz-insiderange-y-multi-x.png differ diff --git a/test/image/mocks/zz-insiderange-x-multi-y.json b/test/image/mocks/zz-insiderange-x-multi-y.json new file mode 100644 index 00000000000..1dbf83e49d7 --- /dev/null +++ b/test/image/mocks/zz-insiderange-x-multi-y.json @@ -0,0 +1,133 @@ +{ + "data": [{ + "type": "bar", + "xaxis": "x", + "yaxis": "y", + "y": [1000, 10, 100, 1] + }, { + "xaxis": "x", + "yaxis": "y11", + "y": [1000, 10, 100, 1] + }, { + "type": "bar", + "xaxis": "x2", + "yaxis": "y2", + "y": [1000, 10, 100, 1] + }, { + "xaxis": "x2", + "yaxis": "y12", + "y": [1000, 10, 100, 1] + }, { + "type": "bar", + "xaxis": "x3", + "yaxis": "y3", + "x": [2000, 2001, 2002, 2003], + "y": [1000, 10, 100, 1] + }, { + "xaxis": "x3", + "yaxis": "y13", + "x": [2000, 2001, 2002, 2003], + "y": [1000, 10, 100, 1] + }, { + "type": "bar", + "xaxis": "x4", + "yaxis": "y4", + "x": [2000, 2001, 2002, 2003], + "y": [1000, 10, 100, 1] + }, { + "xaxis": "x4", + "yaxis": "y14", + "x": [2000, 2001, 2002, 2003], + "y": [1000, 10, 100, 1] + }], + "layout": { + "template": { + "layout": { + "yaxis": { + "range": [-100, 1100], + "ticks": "inside", + "ticklabelposition": "inside", + "ticklen": 8, + "tickwidth": 3, + "gridcolor": "white" + } + } + }, + "xaxis": { + "insiderange": [1, 2], + "anchor": "y", + "domain": [0, 0.45], + "gridcolor": "white" + }, + "yaxis": { + "anchor": "x", + "domain": [0, 0.45], + "side": "right" + }, + "yaxis11": { + "anchor": "x", + "overlaying": "y", + "side": "left" + }, + "xaxis2": { + "insiderange": [2, 1], + "anchor": "y2", + "domain": [0, 0.45], + "gridcolor": "white" + }, + "yaxis2": { + "anchor": "x2", + "domain": [0.55, 1], + "side": "left" + }, + "yaxis12": { + "anchor": "x2", + "overlaying": "y2", + "side": "right" + }, + "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" + }, + "yaxis13": { + "anchor": "x3", + "overlaying": "y3", + "side": "left" + }, + "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" + }, + "yaxis14": { + "anchor": "x4", + "overlaying": "y4", + "side": "right" + }, + "plot_bgcolor": "lightblue", + "showlegend": false, + "width": 900, + "height": 900, + "margin": { + "t": 60, + "b": 60, + "l": 60, + "r": 60 + } + } +} diff --git a/test/image/mocks/zz-insiderange-y-multi-x.json b/test/image/mocks/zz-insiderange-y-multi-x.json new file mode 100644 index 00000000000..c24475ed190 --- /dev/null +++ b/test/image/mocks/zz-insiderange-y-multi-x.json @@ -0,0 +1,133 @@ +{ + "data": [{ + "type": "bar", "orientation": "h", + "yaxis": "y", + "xaxis": "x", + "x": [1000, 10, 100, 1] + }, { + "yaxis": "y", + "xaxis": "x11", + "x": [1000, 10, 100, 1] + }, { + "type": "bar", "orientation": "h", + "yaxis": "y2", + "xaxis": "x2", + "x": [1000, 10, 100, 1] + }, { + "yaxis": "y2", + "xaxis": "x12", + "x": [1000, 10, 100, 1] + }, { + "type": "bar", "orientation": "h", + "yaxis": "y3", + "xaxis": "x3", + "y": [2000, 2001, 2002, 2003], + "x": [1000, 10, 100, 1] + }, { + "yaxis": "y3", + "xaxis": "x13", + "y": [2000, 2001, 2002, 2003], + "x": [1000, 10, 100, 1] + }, { + "type": "bar", "orientation": "h", + "yaxis": "y4", + "xaxis": "x4", + "y": [2000, 2001, 2002, 2003], + "x": [1000, 10, 100, 1] + }, { + "yaxis": "y4", + "xaxis": "x14", + "y": [2000, 2001, 2002, 2003], + "x": [1000, 10, 100, 1] + }], + "layout": { + "template": { + "layout": { + "xaxis": { + "range": [-100, 1100], + "ticks": "inside", + "ticklabelposition": "inside", + "ticklen": 8, + "tickwidth": 3, + "gridcolor": "white" + } + } + }, + "yaxis": { + "insiderange": [1, 2], + "anchor": "x", + "domain": [0, 0.45], + "gridcolor": "white" + }, + "xaxis": { + "anchor": "y", + "domain": [0, 0.45], + "side": "top" + }, + "xaxis11": { + "anchor": "y", + "overlaying": "x", + "side": "bottom" + }, + "yaxis2": { + "insiderange": [2, 1], + "anchor": "x2", + "domain": [0, 0.45], + "gridcolor": "white" + }, + "xaxis2": { + "anchor": "y2", + "domain": [0.55, 1], + "side": "bottom" + }, + "xaxis12": { + "anchor": "y2", + "overlaying": "x2", + "side": "top" + }, + "yaxis3": { + "type": "date", + "insiderange": ["2001-01", "2002-01"], + "anchor": "x3", + "domain": [0.55, 1], + "gridcolor": "white" + }, + "xaxis3": { + "anchor": "y3", + "domain": [0, 0.45], + "side": "top" + }, + "xaxis13": { + "anchor": "y3", + "overlaying": "x3", + "side": "bottom" + }, + "yaxis4": { + "type": "date", + "insiderange": ["2002-01", "2001-01"], + "anchor": "x4", + "domain": [0.55, 1], + "gridcolor": "white" + }, + "xaxis4": { + "anchor": "y4", + "domain": [0.55, 1], + "side": "bottom" + }, + "xaxis14": { + "anchor": "y4", + "overlaying": "x4", + "side": "top" + }, + "plot_bgcolor": "lightblue", + "showlegend": false, + "width": 900, + "height": 900, + "margin": { + "t": 60, + "b": 60, + "l": 60, + "r": 60 + } + } +}