Skip to content

Add ticklabelstandoff and ticklabelshift to cartesian axes #7006

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 26 commits into from
Jul 5, 2024
Merged

Add ticklabelstandoff and ticklabelshift to cartesian axes #7006

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
6c81892
Add property axis.ticklabelshiftx and axis.ticklabelshifty
my-tien May 27, 2024
ad4509b
makeTransTickLabelFn: default vals for ax.ticklabelshiftx/y
my-tien May 28, 2024
fa50121
Add draftlog for PR 7006
my-tien May 27, 2024
d33e47c
Add ticklabelshiftx/y property to colorbar, indicator, gl3d, carpet, …
my-tien May 28, 2024
3dcb2aa
baseline image for updated date_axes_period2 using ticklabelshiftx/y
my-tien May 28, 2024
facdad3
ticklabelshiftx/y: valType number → integer. for carpet: editType tic…
my-tien May 28, 2024
ecf4787
Revert ticklabelshiftx/y change to mock date_axes_period2
my-tien Jun 3, 2024
2b9c90c
Replace ticklabelshiftx/y with ticklabelrunoff and ticklabelstandoff
my-tien Jun 3, 2024
f06a81e
Adjust ticklabelrunoff/ticklabelstandoff behavior depending on axis, …
my-tien Jun 7, 2024
57c82ee
baseline test mock for ticklabelrunoff/ticklabelstandoff
my-tien Jun 7, 2024
4ccaf73
Merge remote-tracking branch 'origin-plotly/master' into shift_axis_l…
my-tien Jun 7, 2024
4b62652
baseline image for mock zzz_ticklabelrunoff_standoff
my-tien Jun 8, 2024
94878cb
Split option noTicklabelrunoffstandoff → noTicklabelrunoff, noTicklab…
my-tien Jun 13, 2024
9ca95a2
Update property names in draftlog for PR 7006
my-tien Jun 13, 2024
6ea832f
Mark flaky: "should be able to restyle radial axis title"
my-tien Jun 18, 2024
b7a6327
Revert "Mark flaky: "should be able to restyle radial axis title""
my-tien Jun 19, 2024
316158d
Merge remote-tracking branch 'origin-plotly/master' into shift_axis_l…
my-tien Jun 19, 2024
e7a980a
Revert accidentally removed line in colorbar attributes
my-tien Jun 26, 2024
e8f88ba
correct var name. it's not ticks inside/outside, but labels inside/ou…
my-tien Jun 26, 2024
d9210da
Clarify the direction of movement for ticklabelstandoff and ticklabel…
my-tien Jun 26, 2024
e33270b
update plot-schema as well
my-tien Jun 26, 2024
ec5df56
Rename ticklabelrunoff → ticklabelshift
my-tien Jul 3, 2024
e3b0baa
Update draftlogs/7006_add.md
my-tien Jul 5, 2024
23a21c1
Simplify code for standoff sign
my-tien Jul 5, 2024
6715564
Update draftlogs/7006_add.md
my-tien Jul 5, 2024
26315dc
improve ticklabelstandoff description and note that inside ticks coul…
my-tien Jul 5, 2024
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
1 change: 1 addition & 0 deletions draftlogs/7006_add.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Add property axis.ticklabelshiftx axis.ticklabelshifty for shifting the tick labels by a number of pixels [[#7006](https://github.com/plotly/plotly.js/pull/7006)]
4 changes: 2 additions & 2 deletions src/components/colorbar/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,6 @@ module.exports = overrideAll({
'In other cases the default is *hide past div*.'
].join(' ')
}),

// ticklabelposition: not used directly, as values depend on orientation
// left/right options are for x axes, and top/bottom options are for y axes
ticklabelposition: {
Expand All @@ -188,7 +187,8 @@ module.exports = overrideAll({
'top and bottom when `orientation` is *v*.'
].join(' ')
},

ticklabelshiftx: axesAttrs.ticklabelshiftx,
ticklabelshifty: axesAttrs.ticklabelshifty,
ticklen: axesAttrs.ticklen,
tickwidth: axesAttrs.tickwidth,
tickcolor: axesAttrs.tickcolor,
Expand Down
11 changes: 7 additions & 4 deletions src/plots/cartesian/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2968,20 +2968,23 @@ axes.makeTransTickFn = function(ax) {

axes.makeTransTickLabelFn = function(ax) {
var uv = getTickLabelUV(ax);
var shiftx = ax.ticklabelshiftx || 0;
var shifty = ax.ticklabelshifty || 0;

var u = uv[0];
var v = uv[1];

return ax._id.charAt(0) === 'x' ?
function(d) {
return strTranslate(
u + ax._offset + ax.l2p(getPosX(d)),
v
u + ax._offset + ax.l2p(getPosX(d)) + shiftx,
v + shifty
);
} :
function(d) {
return strTranslate(
v,
u + ax._offset + ax.l2p(getPosX(d))
v + shiftx,
u + ax._offset + ax.l2p(getPosX(d)) + shifty
);
};
};
Expand Down
16 changes: 16 additions & 0 deletions src/plots/cartesian/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -698,6 +698,22 @@ module.exports = {
'In other cases the default is *hide past div*.'
].join(' ')
},
ticklabelshiftx: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering where we should put the x or y in the attribute names?
In #7005 we have xshift, here we have shiftx.

Copy link
Contributor Author

@my-tien my-tien May 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, true. in #7005 my reasoning was that in the shape properties we have x0, x1 and xref. So I added xshift.

Here I had a similar reasoning, there were already properties starting with ticklabel*. And since in ticklabelxshift it is maybe hard to make out the 'x', I moved it to the end…

No strong opinion here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMHo we shouldn't use x and y in these attribute names.
Instead something like standoff and runoff could be used so that when switching the orientation e.g. on a colorbar from horizontal to vertical everything works without a need to adjusting these parameters.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed to ticklabelrunoff (shifts in parallel to axis) and ticklabelstandoff (shifts orthogonally to axis)

valType: 'integer',
dflt: 0,
editType: 'ticks',
description: [
'Horizontally shifts the tick labels by the specified number of pixels.'
].join(' ')
},
ticklabelshifty: {
valType: 'integer',
dflt: 0,
editType: 'ticks',
description: [
'Vertically shifts the tick labels by the specified number of pixels.'
].join(' ')
},
mirror: {
valType: 'enumerated',
values: [true, 'ticks', false, 'all', 'allticks'],
Expand Down
2 changes: 2 additions & 0 deletions src/plots/cartesian/tick_label_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe

var showTickLabels = coerce('showticklabels');
if(showTickLabels) {
coerce('ticklabelshiftx');
coerce('ticklabelshifty');
var font = options.font || {};
var contColor = containerOut.color;
var position = containerOut.ticklabelposition || '';
Expand Down
2 changes: 2 additions & 0 deletions src/plots/gl3d/layout/axis_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ module.exports = overrideAll({
ticks: axesAttrs.ticks,
mirror: axesAttrs.mirror,
ticklen: axesAttrs.ticklen,
ticklabelshiftx: axesAttrs.ticklabelshiftx,
ticklabelshifty: axesAttrs.ticklabelshifty,
tickwidth: axesAttrs.tickwidth,
tickcolor: axesAttrs.tickcolor,
showticklabels: axesAttrs.showticklabels,
Expand Down
2 changes: 2 additions & 0 deletions src/plots/polar/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ var axisTickAttrs = overrideAll({
ticklen: axesAttrs.ticklen,
tickwidth: axesAttrs.tickwidth,
tickcolor: axesAttrs.tickcolor,
ticklabelshiftx: axesAttrs.ticklabelshiftx,
ticklabelshifty: axesAttrs.ticklabelshifty,
ticklabelstep: axesAttrs.ticklabelstep,
showticklabels: axesAttrs.showticklabels,
labelalias: axesAttrs.labelalias,
Expand Down
2 changes: 2 additions & 0 deletions src/plots/smith/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ var axisLineGridAttr = overrideAll({
}, 'plot', 'from-root');

var axisTickAttrs = overrideAll({
ticklabelshiftx: axesAttrs.ticklabelshiftx,
ticklabelshifty: axesAttrs.ticklabelshifty,
ticklen: axesAttrs.ticklen,
tickwidth: extendFlat({}, axesAttrs.tickwidth, {dflt: 2}),
tickcolor: axesAttrs.tickcolor,
Expand Down
2 changes: 2 additions & 0 deletions src/plots/ternary/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ var ternaryAxesAttrs = {
ticklen: axesAttrs.ticklen,
tickwidth: axesAttrs.tickwidth,
tickcolor: axesAttrs.tickcolor,
ticklabelshiftx: axesAttrs.ticklabelshiftx,
ticklabelshifty: axesAttrs.ticklabelshifty,
ticklabelstep: axesAttrs.ticklabelstep,
showticklabels: axesAttrs.showticklabels,
labelalias: axesAttrs.labelalias,
Expand Down
16 changes: 16 additions & 0 deletions src/traces/carpet/axis_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,22 @@ module.exports = {
'Has an effect only if `tickmode` is set to *auto*.'
].join(' ')
},
ticklabelshiftx: {
valType: 'integer',
dflt: 0,
editType: 'calc',
description: [
'Horizontally shifts the tick labels by the specified number of pixels.'
].join(' ')
},
ticklabelshifty: {
valType: 'integer',
dflt: 0,
editType: 'calc',
description: [
'Vertically shifts the tick labels by the specified number of pixels.'
].join(' ')
},
tickvals: {
valType: 'data_array',
editType: 'calc',
Expand Down
2 changes: 2 additions & 0 deletions src/traces/indicator/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,8 @@ module.exports = {
ticklen: axesAttrs.ticklen,
tickwidth: axesAttrs.tickwidth,
tickcolor: axesAttrs.tickcolor,
ticklabelshiftx: axesAttrs.ticklabelshiftx,
ticklabelshifty: axesAttrs.ticklabelshifty,
ticklabelstep: axesAttrs.ticklabelstep,
showticklabels: axesAttrs.showticklabels,
labelalias: axesAttrs.labelalias,
Expand Down
Binary file modified test/image/baselines/date_axes_period2.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.
2 changes: 2 additions & 0 deletions test/image/mocks/date_axes_period2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@
},
"xaxis": {
"minor": { "ticks": "inside" },
"ticklabelshiftx": 15,
"tickcolor": "black",
"gridcolor": "orange",
"range": [
Expand Down Expand Up @@ -197,6 +198,7 @@
},
"xaxis7": {
"minor": { "ticks": "inside" },
"ticklabelshifty": -10,
"tickcolor": "black",
"gridcolor": "orange",
"range": [
Expand Down
Loading