Skip to content

Make inside ticklabels autorange work with scaleanchor or matches #5329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Dec 9, 2020
Merged

Make inside ticklabels autorange work with scaleanchor or matches #5329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3c5d208
test image trace with inside ticklabels
archmoj Dec 8, 2020
dd3ac6e
do not try to reset scale to avoid infinite loops
archmoj Dec 8, 2020
d87320a
test inside ticklabels render with matches and scaleanchor
archmoj Dec 8, 2020
0086aaa
do not add extra pad for inside ticklabels with matches and scaleanchor
archmoj Dec 8, 2020
49ba846
search for links in constraint and match groups
archmoj Dec 8, 2020
21d0a12
update description and some optimization
archmoj Dec 8, 2020
2bc8420
rewrite forEach and isLinked - add comment - etc
archmoj Dec 9, 2020
ef1979b
correct comment
archmoj Dec 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 17 additions & 8 deletions src/plots/cartesian/autorange.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ var Lib = require('../../lib');
var FP_SAFE = require('../../constants/numerical').FP_SAFE;
var Registry = require('../../registry');

var getFromId = require('./axis_ids').getFromId;
var axIds = require('./axis_ids');
var getFromId = axIds.getFromId;
var isLinked = axIds.isLinked;

module.exports = {
getAutoRange: getAutoRange,
Expand Down Expand Up @@ -56,8 +58,9 @@ function getAutoRange(gd, ax) {
var i, j;
var newRange = [];

var getPadMin = makePadFn(ax, 0);
var getPadMax = makePadFn(ax, 1);
var fullLayout = gd._fullLayout;
var getPadMin = makePadFn(fullLayout, ax, 0);
var getPadMax = makePadFn(fullLayout, ax, 1);
var extremes = concatExtremes(gd, ax);
var minArray = extremes.min;
var maxArray = extremes.max;
Expand Down Expand Up @@ -202,13 +205,15 @@ function calcBreaksLength(ax, v0, v1) {
* calculate the pixel padding for ax._min and ax._max entries with
* optional extrapad as 5% of the total axis length
*/
function makePadFn(ax, max) {
function makePadFn(fullLayout, ax, max) {
// 5% padding for points that specify extrapad: true
var extrappad = 0.05 * ax._length;

var anchorAxis = ax._anchorAxis || {};

if(
(ax.ticklabelposition || '').indexOf('inside') !== -1 ||
((ax._anchorAxis || {}).ticklabelposition || '').indexOf('inside') !== -1
(anchorAxis.ticklabelposition || '').indexOf('inside') !== -1
) {
var axReverse = ax.autorange === 'reversed';
if(!axReverse) {
Expand All @@ -218,8 +223,12 @@ function makePadFn(ax, max) {
if(axReverse) max = !max;
}

var A = padInsideLabelsOnAnchorAxis(ax, max);
var B = padInsideLabelsOnThisAxis(ax, max);
var A = 0;
var B = 0;
if(!isLinked(fullLayout, ax._id)) {
A = padInsideLabelsOnAnchorAxis(ax, max);
B = padInsideLabelsOnThisAxis(ax, max);
}

var zero = Math.max(A, B);
extrappad = Math.max(zero, extrappad);
Expand Down Expand Up @@ -273,7 +282,7 @@ function padInsideLabelsOnThisAxis(ax, max) {

function padInsideLabelsOnAnchorAxis(ax, max) {
var pad = 0;
var anchorAxis = (ax._anchorAxis || {});
var anchorAxis = ax._anchorAxis || {};
if((anchorAxis.ticklabelposition || '').indexOf('inside') !== -1) {
// increase padding to make more room for inside tick labels of the counter axis
if((
Expand Down
9 changes: 7 additions & 2 deletions src/plots/cartesian/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ axes.setConvert = require('./set_convert');
var autoType = require('./axis_autotype');

var axisIds = require('./axis_ids');
var idSort = axisIds.idSort;
var isLinked = axisIds.isLinked;

// tight coupling to chart studio
axes.id2name = axisIds.id2name;
axes.name2id = axisIds.name2id;
axes.cleanId = axisIds.cleanId;
Expand Down Expand Up @@ -2907,7 +2911,7 @@ axes.drawZeroLine = function(gd, ax, opts) {
// If several zerolines enter at the same time we will sort once per,
// but generally this should be a minimal overhead.
opts.layer.selectAll('path').sort(function(da, db) {
return axisIds.idSort(da.id, db.id);
return idSort(da.id, db.id);
});
});

Expand Down Expand Up @@ -3205,7 +3209,8 @@ axes.drawLabels = function(gd, ax, opts) {
var anchorAx = ax._anchorAxis;
if(
anchorAx && anchorAx.autorange &&
(ax.ticklabelposition || '').indexOf('inside') !== -1
(ax.ticklabelposition || '').indexOf('inside') !== -1 &&
!isLinked(fullLayout, ax._id)
) {
if(!fullLayout._insideTickLabelsAutorange) {
fullLayout._insideTickLabelsAutorange = {};
Expand Down
16 changes: 16 additions & 0 deletions src/plots/cartesian/axis_ids.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,3 +136,19 @@ exports.ref2id = function(ar) {
// return the axis ID. Otherwise it returns false.
return (/^[xyz]/.test(ar)) ? ar.split(' ')[0] : false;
};

function isFound(axId, list) {
if(list && list.length) {
for(var i = 0; i < list.length; i++) {
if(list[i][axId]) return true;
}
}
return false;
}

exports.isLinked = function(fullLayout, axId) {
return (
isFound(axId, fullLayout._axisMatchGroups) ||
isFound(axId, fullLayout._axisConstraintGroups)
);
};
4 changes: 2 additions & 2 deletions src/plots/cartesian/constraints.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -565,8 +565,8 @@ exports.enforce = function enforce(gd) {
// *are* expanding to the full domain
var outerMin = rangeCenter - halfRange * factor * 1.0001;
var outerMax = rangeCenter + halfRange * factor * 1.0001;
var getPadMin = autorange.makePadFn(ax, 0);
var getPadMax = autorange.makePadFn(ax, 1);
var getPadMin = autorange.makePadFn(fullLayout, ax, 0);
var getPadMax = autorange.makePadFn(fullLayout, ax, 1);

updateDomain(ax, factor);
var m = Math.abs(ax._m);
Expand Down
5 changes: 4 additions & 1 deletion src/plots/cartesian/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,10 @@ module.exports = {
'top or bottom has no effect on x axes or when `ticklabelmode` is set to *period*.',
'Similarly',
'left or right has no effect on y axes or when `ticklabelmode` is set to *period*.',
'Has no effect on *multicategory* axes or when `tickson` is set to *boundaries*.'
'Has no effect on *multicategory* axes or when `tickson` is set to *boundaries*.',
'When used on axes linked by `matches` or `scaleanchor`,',
'no extra padding for inside labels would be added by autorange,',
'so that the scales could match.'
].join(' ')
},
mirror: {
Expand Down
Binary file added test/image/baselines/axes_chain_scaleanchor_matches2_inside-ticklabels.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/image/baselines/axes_chain_scaleanchor_matches_inside-ticklabels.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/ticklabelposition-3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 82 additions & 0 deletions test/image/mocks/axes_chain_scaleanchor_matches2_inside-ticklabels.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
{
"data": [
{"y":[1,2], "marker": {"color": "red"}},
{"y":[1,2],"xaxis":"x2","yaxis":"y2", "marker": {"color": "red"}},
{"y":[1,2],"xaxis":"x3","yaxis":"y3", "marker": {"color": "red"}},
{"y":[1,2],"xaxis":"x4","yaxis":"y4", "marker": {"color": "red"}},
{"y":[1,2],"xaxis":"x5","yaxis":"y5", "marker": {"color": "green"}},
{"y":[1,2],"xaxis":"x6","yaxis":"y6", "marker": {"color": "green"}},
{"y":[1,2],"xaxis":"x7","yaxis":"y7", "marker": {"color": "green"}},
{"y":[1,2],"xaxis":"x8","yaxis":"y8", "marker": {"color": "green"}},
{"y":[1,2],"xaxis":"x9","yaxis":"y9", "marker": {"color": "blue"}},
{"y":[1,2],"xaxis":"x10","yaxis":"y10", "marker": {"color": "blue"}},
{"y":[1,2],"xaxis":"x11","yaxis":"y11", "marker": {"color": "blue"}},
{"y":[1,2],"xaxis":"x12","yaxis":"y12", "marker": {"color": "blue"}},
{"y":[1,2],"xaxis":"x13","yaxis":"y13", "marker": {"color": "black"}},
{"y":[1,2],"xaxis":"x14","yaxis":"y14", "marker": {"color": "black"}},
{"y":[1,2],"xaxis":"x15","yaxis":"y15", "marker": {"color": "black"}},
{"y":[1,2],"xaxis":"x16","yaxis":"y16", "marker": {"color": "black"}}
],
"layout": {
"xaxis": {"ticklabelposition": "inside", "domain": [0, 0.2], "anchor": "y"},
"yaxis": {"ticklabelposition": "inside", "domain": [0, 0.15], "anchor": "x", "matches": "x"},
"xaxis2": {"ticklabelposition": "inside", "domain": [0.25, 0.45], "anchor": "y2", "scaleanchor": "y"},
"yaxis2": {"ticklabelposition": "inside", "domain": [0, 0.15], "anchor": "x2", "matches": "x2"},
"xaxis3": {"ticklabelposition": "inside", "domain": [0.5, 0.7], "anchor": "y3", "scaleanchor": "y2"},
"yaxis3": {"ticklabelposition": "inside", "domain": [0, 0.15], "anchor": "x3", "matches": "x3"},
"xaxis4": {"ticklabelposition": "inside", "domain": [0.75, 0.95], "anchor": "y4", "scaleanchor": "y3"},
"yaxis4": {"ticklabelposition": "inside", "domain": [0, 0.15], "anchor": "x4", "matches": "x4"},

"xaxis5": {"ticklabelposition": "inside", "domain": [0, 0.2], "anchor": "y5", "constrain": "domain"},
"yaxis5": {"ticklabelposition": "inside", "domain": [0.25, 0.4], "anchor": "x5", "matches": "x5", "constrain": "domain"},
"xaxis6": {"ticklabelposition": "inside", "domain": [0.25, 0.45], "anchor": "y6", "scaleanchor": "y5", "constrain": "domain"},
"yaxis6": {"ticklabelposition": "inside", "domain": [0.25, 0.4], "anchor": "x6", "matches": "x6", "constrain": "domain"},
"xaxis7": {"ticklabelposition": "inside", "domain": [0.5, 0.7], "anchor": "y7", "scaleanchor": "y6", "constrain": "domain"},
"yaxis7": {"ticklabelposition": "inside", "domain": [0.25, 0.4], "anchor": "x7", "matches": "x7", "constrain": "domain"},
"xaxis8": {"ticklabelposition": "inside", "domain": [0.75, 0.95], "anchor": "y8", "scaleanchor": "y7", "constrain": "domain"},
"yaxis8": {"ticklabelposition": "inside", "domain": [0.25, 0.4], "anchor": "x8", "matches": "x8", "constrain": "domain"},

"xaxis9": {"ticklabelposition": "inside", "domain": [0, 0.15], "anchor": "y9"},
"yaxis9": {"ticklabelposition": "inside", "domain": [0.5, 0.7], "anchor": "x9", "matches": "x9"},
"xaxis10": {"ticklabelposition": "inside", "domain": [0.25, 0.4], "anchor": "y10", "scaleanchor": "y9"},
"yaxis10": {"ticklabelposition": "inside", "domain": [0.5, 0.7], "anchor": "x10", "matches": "x10"},
"xaxis11": {"ticklabelposition": "inside", "domain": [0.5, 0.65], "anchor": "y11", "scaleanchor": "y10"},
"yaxis11": {"ticklabelposition": "inside", "domain": [0.5, 0.7], "anchor": "x11", "matches": "x11"},
"xaxis12": {"ticklabelposition": "inside", "domain": [0.75, 0.9], "anchor": "y12", "scaleanchor": "y11"},
"yaxis12": {"ticklabelposition": "inside", "domain": [0.5, 0.7], "anchor": "x12", "matches": "x12"},

"xaxis13": {"ticklabelposition": "inside", "domain": [0, 0.15], "anchor": "y13", "constrain": "domain"},
"yaxis13": {"ticklabelposition": "inside", "domain": [0.75, 0.95], "anchor": "x13", "matches": "x13", "constrain": "domain"},
"xaxis14": {"ticklabelposition": "inside", "domain": [0.25, 0.4], "anchor": "y14", "scaleanchor": "y13", "constrain": "domain"},
"yaxis14": {"ticklabelposition": "inside", "domain": [0.75, 0.95], "anchor": "x14", "matches": "x14", "constrain": "domain"},
"xaxis15": {"ticklabelposition": "inside", "domain": [0.5, 0.65], "anchor": "y15", "scaleanchor": "y14", "constrain": "domain"},
"yaxis15": {"ticklabelposition": "inside", "domain": [0.75, 0.95], "anchor": "x15", "matches": "x15", "constrain": "domain"},
"xaxis16": {"ticklabelposition": "inside", "domain": [0.75, 0.9], "anchor": "y16", "scaleanchor": "y15", "constrain": "domain"},
"yaxis16": {"ticklabelposition": "inside", "domain": [0.75, 0.95], "anchor": "x16", "matches": "x16", "constrain": "domain"},

"shapes": [
{"x0": 0, "x1": 0.2, "y0": 0, "y1": 0.15, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.25, "x1": 0.45, "y0": 0, "y1": 0.15, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.5, "x1": 0.7, "y0": 0, "y1": 0.15, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.75, "x1": 0.95, "y0": 0, "y1": 0.15, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0, "x1": 0.2, "y0": 0.25, "y1": 0.4, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.25, "x1": 0.45, "y0": 0.25, "y1": 0.4, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.5, "x1": 0.7, "y0": 0.25, "y1": 0.4, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.75, "x1": 0.95, "y0": 0.25, "y1": 0.4, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0, "x1": 0.15, "y0": 0.5, "y1": 0.7, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.25, "x1": 0.4, "y0": 0.5, "y1": 0.7, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.5, "x1": 0.65, "y0": 0.5, "y1": 0.7, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.75, "x1": 0.9, "y0": 0.5, "y1": 0.7, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0, "x1": 0.15, "y0": 0.75, "y1": 0.95, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.25, "x1": 0.4, "y0": 0.75, "y1": 0.95, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.5, "x1": 0.65, "y0": 0.75, "y1": 0.95, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}},
{"x0": 0.75, "x1": 0.9, "y0": 0.75, "y1": 0.95, "type": "rect", "xref": "paper", "yref": "paper", "line": {"color": "#ccc", "dash": "dot"}}
],
"annotations": [{"x": 0, "y": 1, "xanchor": "left", "yanchor": "top", "xref": "paper", "yref": "paper", "showarrow": false, "align": "left", "text": "y matches same x, x scales to the previous y. Subplot aspect ratios compound"}],

"width": 500,
"height": 500,
"margin": {"l": 50, "r": 0, "t": 0, "b": 50},
"showlegend": false
}
}
26 changes: 26 additions & 0 deletions test/image/mocks/axes_chain_scaleanchor_matches_inside-ticklabels.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"data": [
{"z": [[1, 2], [3, 4], [5, 6]], "type": "heatmap", "showscale": false},
{"z": [[1, 2, 3], [6, 5, 4]], "type": "heatmap", "xaxis": "x2", "yaxis": "y2", "showscale": false},
{"z": [[1, 6], [2, 5], [3, 4]], "type": "heatmap", "xaxis": "x3", "yaxis": "y3", "showscale": false},
{"z": [[1, 2, 3], [4, 5, 6]], "type": "heatmap", "xaxis": "x4", "yaxis": "y4", "showscale": false}
],
"layout": {
"xaxis": {"ticklabelposition": "inside", "domain": [0, 0.4], "constrain": "domain"},
"yaxis": {"ticklabelposition": "inside", "domain": [0, 0.3], "constrain": "domain", "scaleanchor": "x", "title": {"text": "constrain domain"}},
"xaxis2": {"ticklabelposition": "inside", "domain": [0.6, 1], "matches": "x", "anchor": "y2", "title": {"text": "<- each right subplot matches<br>the axes left and below<br>and all are constrained<br>to square bricks."}},
"yaxis2": {"ticklabelposition": "inside", "domain": [0.2, 0.5], "matches": "y", "anchor": "x2"},
"xaxis3": {"ticklabelposition": "inside", "domain": [0, 0.4], "constrain": "range", "anchor": "y3"},
"yaxis3": {"ticklabelposition": "inside", "domain": [0.5, 0.8], "constrain": "range", "scaleanchor": "x3", "anchor": "x3", "title": {"text": "constrain range"}},
"xaxis4": {"ticklabelposition": "inside", "domain": [0.6, 1], "matches": "x3", "anchor": "y4"},
"yaxis4": {"ticklabelposition": "inside", "domain": [0.7, 1], "matches": "y3", "anchor": "x4"},
"shapes": [
{"x0": 0, "x1": 0.4, "y0": 0, "y1": 0.3, "xref": "paper", "yref": "paper", "type": "rect", "line": {"color": "#888", "dash": "dot"}},
{"x0": 0.6, "x1": 1, "y0": 0.2, "y1": 0.5, "xref": "paper", "yref": "paper", "type": "rect", "line": {"color": "#888", "dash": "dot"}},
{"x0": 0, "x1": 0.4, "y0": 0.5, "y1": 0.8, "xref": "paper", "yref": "paper", "type": "rect", "line": {"color": "#888", "dash": "dot"}},
{"x0": 0.6, "x1": 1, "y0": 0.7, "y1": 1, "xref": "paper", "yref": "paper", "type": "rect", "line": {"color": "#888", "dash": "dot"}}
],
"width": 700,
"height": 600
}
}
13 changes: 9 additions & 4 deletions test/image/mocks/ticklabelposition-3.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,15 @@
}, {
"xaxis": "x3",
"yaxis": "y3",
"type": "scatter",
"mode": "lines",
"x": [-100, 0, 100],
"y": [-100, 0, 100]
"type": "image",
"z": [
[[255, 0, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255], [0, 0, 255], [255, 0, 255]],
[[255, 255, 0], [0, 255, 0], [0, 255, 255], [0, 0, 255], [255, 0, 255], [255, 0, 0]],
[[0, 255, 0], [0, 255, 255], [0, 0, 255], [255, 0, 255], [255, 0, 0], [255, 255, 0]],
[[0, 255, 255], [0, 0, 255], [255, 0, 255], [255, 0, 0], [255, 255, 0], [0, 255, 0]],
[[0, 0, 255], [255, 0, 255], [255, 0, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255]],
[[255, 0, 255], [255, 0, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255], [0, 0, 255]]
]
}, {
"xaxis": "x4",
"yaxis": "y4",
Expand Down
4 changes: 4 additions & 0 deletions test/jasmine/tests/mock_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@ var list = [
'axes_category_null',
'axes_chain_scaleanchor_matches',
'axes_chain_scaleanchor_matches2',
'axes_chain_scaleanchor_matches_inside-ticklabels',
'axes_chain_scaleanchor_matches2_inside-ticklabels',
'axes_custom-ticks_log-date',
'axes_enumerated_ticks',
'axes_free_default',
Expand Down Expand Up @@ -1172,6 +1174,8 @@ figs['axes_category_categoryarray_truncated_tails'] = require('@mocks/axes_categ
figs['axes_category_null'] = require('@mocks/axes_category_null');
figs['axes_chain_scaleanchor_matches'] = require('@mocks/axes_chain_scaleanchor_matches');
figs['axes_chain_scaleanchor_matches2'] = require('@mocks/axes_chain_scaleanchor_matches2');
figs['axes_chain_scaleanchor_matches_inside-ticklabels'] = require('@mocks/axes_chain_scaleanchor_matches_inside-ticklabels');
figs['axes_chain_scaleanchor_matches2_inside-ticklabels'] = require('@mocks/axes_chain_scaleanchor_matches2_inside-ticklabels');
figs['axes_custom-ticks_log-date'] = require('@mocks/axes_custom-ticks_log-date');
figs['axes_enumerated_ticks'] = require('@mocks/axes_enumerated_ticks');
figs['axes_free_default'] = require('@mocks/axes_free_default');
Expand Down