From a81062c4059f1ff2fd20f727493201e01caa0c23 Mon Sep 17 00:00:00 2001 From: Rica Zhang Date: Tue, 12 Jun 2018 21:33:11 -0700 Subject: [PATCH 1/4] add tickaxisalignment option --- src/plots/cartesian/axes.js | 10 ++++++++-- src/plots/cartesian/layout_attributes.js | 7 +++++++ src/plots/cartesian/tick_label_defaults.js | 8 +++++++- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js index 5bd190fe33d..3d8a53e0e7f 100644 --- a/src/plots/cartesian/axes.js +++ b/src/plots/cartesian/axes.js @@ -1737,13 +1737,19 @@ axes.doTicksSingle = function(gd, arg, skipTitle) { }; labelx = function(d) { return d.dx + position + (labelStandoff + pad + - ((Math.abs(ax.tickangle) === 90) ? d.fontSize / 2 : 0)) * flipit; + ((Math.abs(ax.tickangle) === 90) ? d.fontSize / 2 : 0)) * flipit + * ((ax.ticklabelalignment === "outside") ? 1 : -1); }; labelanchor = function(angle) { if(isNumeric(angle) && Math.abs(angle) === 90) { return 'middle'; } - return axside === 'right' ? 'start' : 'end'; + let alignment = axside === 'right' ? 'start' : 'end'; + if (ax.ticklabelalignment === "inside") { + // flip the alignment rules if ticklabels are inside the axis + alignment = axside === 'right' ? 'end' : 'start'; + } + return alignment;p }; } else if(axid === 'angular') { diff --git a/src/plots/cartesian/layout_attributes.js b/src/plots/cartesian/layout_attributes.js index 2fe31f5d4c8..3a4a62bb205 100644 --- a/src/plots/cartesian/layout_attributes.js +++ b/src/plots/cartesian/layout_attributes.js @@ -344,6 +344,13 @@ module.exports = { editType: 'ticks', description: 'Determines whether or not the tick labels are drawn.' }, + ticklabelalignment: { + valType: 'string', + dflt: 'outside', + role: 'style', + editType: 'ticks', + description: 'Determines whether the tick labels will be inside the axis (and text aligned toward the axis.' + }, automargin: { valType: 'boolean', dflt: false, diff --git a/src/plots/cartesian/tick_label_defaults.js b/src/plots/cartesian/tick_label_defaults.js index 06d3212a36d..925bf9da47f 100644 --- a/src/plots/cartesian/tick_label_defaults.js +++ b/src/plots/cartesian/tick_label_defaults.js @@ -33,7 +33,13 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe size: font.size, color: dfltFontColor }); - coerce('tickangle'); + var tickangle = coerce('tickangle'); + + var tickLabelAlignment = coerce('ticklabelalignment'); + // if tickangle is not 90, set ticklabelalignment back to default "outside" + if (tickangle !== 90 && tickangle !== 'auto') { + containerOut['ticklabelalignment'] = 'outside'; + } if(axType !== 'category') { var tickFormat = coerce('tickformat'); From 21e4b2ebebe2466edc1cd0ac77224904c2ec32b2 Mon Sep 17 00:00:00 2001 From: Rica Zhang Date: Tue, 12 Jun 2018 21:33:25 -0700 Subject: [PATCH 2/4] change some test files to test tickaxisalignment --- test/image/mocks/tick_attributes.json | 3 ++- test/image/mocks/tick_prefix_suffix.json | 3 ++- test/image/mocks/tickformat.json | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/test/image/mocks/tick_attributes.json b/test/image/mocks/tick_attributes.json index 9720c2a6546..c16c12a10f9 100644 --- a/test/image/mocks/tick_attributes.json +++ b/test/image/mocks/tick_attributes.json @@ -34,7 +34,8 @@ -2.1464968152866244, 0.1464968152866242 ], - "autorange": true + "autorange": true, + "ticklabelalignment": "inside" }, "height": 450, "width": 1000, diff --git a/test/image/mocks/tick_prefix_suffix.json b/test/image/mocks/tick_prefix_suffix.json index d6b63f1590c..a399d2b2a14 100644 --- a/test/image/mocks/tick_prefix_suffix.json +++ b/test/image/mocks/tick_prefix_suffix.json @@ -18,7 +18,8 @@ "tickprefix": "*** ", "showtickprefix": "first", "ticksuffix": " €", - "showticksuffix": "last" + "showticksuffix": "last", + "ticklabelalignment": "inside" } } } diff --git a/test/image/mocks/tickformat.json b/test/image/mocks/tickformat.json index 53330cf4be4..fc61db3a679 100644 --- a/test/image/mocks/tickformat.json +++ b/test/image/mocks/tickformat.json @@ -16,7 +16,8 @@ }, "yaxis": { "type": "log", - "tickformat": ":^+12.3g" + "tickformat": ":^+12.3g", + "ticklabelalignment": "inside" } } } From 8f07446ff1305952ab108c02a08996355c8cefd6 Mon Sep 17 00:00:00 2001 From: Rica Zhang Date: Tue, 12 Jun 2018 22:11:04 -0700 Subject: [PATCH 3/4] changed some more examples --- test/image/mocks/multiple_subplots.json | 12 ++++++++---- test/image/mocks/overlaying-axis-lines.json | 4 ++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/test/image/mocks/multiple_subplots.json b/test/image/mocks/multiple_subplots.json index 2c0b99ae429..2c185457c50 100644 --- a/test/image/mocks/multiple_subplots.json +++ b/test/image/mocks/multiple_subplots.json @@ -70,7 +70,8 @@ "domain": [ 0, 0.45 - ] + ], + "ticklabelalignment": "inside" }, "xaxis4": { "domain": [ @@ -97,20 +98,23 @@ 0, 0.45 ], - "anchor": "x2" + "anchor": "x2", + "ticklabelalignment": "inside" }, "yaxis3": { "domain": [ 0.55, 1 - ] + ], + "ticklabelalignment": "inside" }, "yaxis4": { "domain": [ 0.55, 1 ], - "anchor": "x4" + "anchor": "x4", + "ticklabelalignment": "inside" } } } diff --git a/test/image/mocks/overlaying-axis-lines.json b/test/image/mocks/overlaying-axis-lines.json index b300149e02f..3f9ad855979 100644 --- a/test/image/mocks/overlaying-axis-lines.json +++ b/test/image/mocks/overlaying-axis-lines.json @@ -9,8 +9,8 @@ }], "layout": { "xaxis": {"showline": true}, - "yaxis": {"showline": true}, + "yaxis": {"showline": true, "ticklabelalignment": "inside"}, "xaxis2": {"showline": true, "overlaying": "x", "side": "top"}, - "yaxis2": {"showline": true, "overlaying": "y", "side": "right"} + "yaxis2": {"showline": true, "overlaying": "y", "side": "right", "ticklabelalignment": "inside"} } } From 4a94525e1e54dfcefe6e4b116a9b9f709dcdd413 Mon Sep 17 00:00:00 2001 From: Rica Zhang Date: Tue, 12 Jun 2018 22:16:22 -0700 Subject: [PATCH 4/4] reformat, pull out variable --- src/plots/cartesian/axes.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js index 3d8a53e0e7f..643eb7a4ea5 100644 --- a/src/plots/cartesian/axes.js +++ b/src/plots/cartesian/axes.js @@ -1736,20 +1736,22 @@ axes.doTicksSingle = function(gd, arg, skipTitle) { return d.dy + d.fontSize * MID_SHIFT - labelShift * flipit; }; labelx = function(d) { + var alignmentFlip = (ax.ticklabelalignment === "outside") ? 1 : -1 return d.dx + position + (labelStandoff + pad + ((Math.abs(ax.tickangle) === 90) ? d.fontSize / 2 : 0)) * flipit - * ((ax.ticklabelalignment === "outside") ? 1 : -1); + * alignmentFlip; }; labelanchor = function(angle) { if(isNumeric(angle) && Math.abs(angle) === 90) { return 'middle'; } let alignment = axside === 'right' ? 'start' : 'end'; + + // flip the alignment rules if ticklabels are inside the axis if (ax.ticklabelalignment === "inside") { - // flip the alignment rules if ticklabels are inside the axis alignment = axside === 'right' ? 'end' : 'start'; } - return alignment;p + return alignment; }; } else if(axid === 'angular') {