Merge pull request #6817 from plotly/insiderange-multiple-axes

Respect `insiderange` when multiple overlaid axes having `insideticklabel`

draftlogs/6817_fix.md

@@ -0,0 +1 @@
+ - Respect `insiderange` when multiple overlaid axes having `insideticklabel` [[#6817](https:/plotly/plotly.js/pull/6817)]

src/plots/cartesian/axes.js

@@ -3905,8 +3905,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;
@@ -3918,7 +3939,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
  );
 

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
+ }
+ }
+}

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
+ }
+ }
+}