Skip to content

Multiple legend positioning and sizing fixes#4160

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
etpinard merged 20 commits into from
Sep 23, 2019
Merged

Multiple legend positioning and sizing fixes #4160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
3ab7713
rm useless legend/anchor_utils.js file
etpinard Aug 15, 2019
de369f3
improve legend x, y, xanchor, yanchor attr declarations
etpinard Aug 14, 2019
1cf347a
drop firstRender logic in Legend.draw
etpinard Aug 7, 2019
82b9769
calc max name/label length in getLegendData
etpinard Aug 7, 2019
0c497bb
add a few things to legend/constants.js
etpinard Aug 9, 2019
f12c62c
drop expandHorizontalMargin logic
etpinard Aug 9, 2019
d770138
some more linting
etpinard Aug 13, 2019
51df66d
trim toggle-rect to more-precise width
etpinard Aug 13, 2019
bf586d4
add more legend mocks (with 1.49.4 baselines)
etpinard Aug 13, 2019
488cca1
fix many legend auto-margin push and positioning edge cases
etpinard Aug 16, 2019
c33c92f
do not constrain legend (x,y) when `margin.autoexpand:false`
etpinard Aug 16, 2019
1e6862a
Lib.log when margin push are dropped
etpinard Aug 14, 2019
1f00a40
add Lib.log when legend (x,y) are constrained into graph width/height
etpinard Aug 30, 2019
2b2bd9b
add mocks showing #4132 bug
etpinard Aug 19, 2019
6b0befe
fix #4132 - fix horizontal legend dimension computations
etpinard Aug 19, 2019
6b2b63b
Merge branch 'master' into legend-horizontal-computed-dims-fix
etpinard Sep 9, 2019
e92ca98
cleanup legend relayout tests
etpinard Sep 10, 2019
35b0c92
fixup variable name in legend maxWidth logic block
etpinard Sep 10, 2019
42d5e4e
end Legend.draw early when margin-redraw in-progress
etpinard Sep 10, 2019
d043151
add margin.autoexpand attr description
etpinard Sep 23, 2019
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
47 changes: 0 additions & 47 deletions src/components/legend/anchor_utils.js
View file
Open in desktop

This file was deleted.

26 changes: 19 additions & 7 deletions src/components/legend/attributes.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -121,10 +121,13 @@ module.exports = {
valType: 'number',
min: -2,
max: 3,
dflt: 1.02,
role: 'style',
editType: 'legend',
description: 'Sets the x position (in normalized coordinates) of the legend.'
description: [
'Sets the x position (in normalized coordinates) of the legend.',
'Defaults to *1.02* for vertical legends and',
'defaults to *0* for horizontal legends.'
].join(' ')
},
xanchor: {
valType: 'enumerated',
Expand All@@ -135,28 +138,37 @@ module.exports = {
description: [
'Sets the legend\'s horizontal position anchor.',
'This anchor binds the `x` position to the *left*, *center*',
'or *right* of the legend.'
'or *right* of the legend.',
'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
'anchors legends to the left for `x` values less than or equal to 1/3 and',
'anchors legends with respect to their center otherwise.'
].join(' ')
},
y: {
valType: 'number',
min: -2,
max: 3,
dflt: 1,
role: 'style',
editType: 'legend',
description: 'Sets the y position (in normalized coordinates) of the legend.'
description: [
'Sets the y position (in normalized coordinates) of the legend.',
'Defaults to *1* for vertical legends,',
'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
].join(' ')
},
yanchor: {
valType: 'enumerated',
values: ['auto', 'top', 'middle', 'bottom'],
dflt: 'auto',
role: 'info',
editType: 'legend',
description: [
'Sets the legend\'s vertical position anchor',
'This anchor binds the `y` position to the *top*, *middle*',
'or *bottom* of the legend.'
'or *bottom* of the legend.',
'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
'anchors legends with respect to their middle otherwise.'
].join(' ')
},
uirevision: {
Expand Down
7 changes: 6 additions & 1 deletion src/components/legend/constants.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,5 +13,10 @@ module.exports = {
scrollBarMinHeight: 20,
scrollBarColor: '#808BA4',
scrollBarMargin: 4,
textOffsetX: 40
scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},

// number of px between legend symbol and legend text (always in x direction)
textGap: 40,
// number of px between each legend item (x and/or y direction)
itemGap: 5
};
26 changes: 15 additions & 11 deletions src/components/legend/defaults.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
var legendReallyHasATrace = false;
var defaultOrder = 'normal';

var defaultX, defaultY, defaultXAnchor, defaultYAnchor;

for(var i = 0; i < fullData.length; i++) {
var trace = fullData[i];

Expand DownExpand Up@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
coerce('borderwidth');
Lib.coerceFont(coerce, 'font', layoutOut.font);

coerce('orientation');
if(containerOut.orientation === 'h') {
var xaxis = layoutIn.xaxis;
if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
defaultX = 0;
defaultXAnchor = 'left';
var orientation = coerce('orientation');
var defaultX, defaultY, defaultYAnchor;

if(orientation === 'h') {
defaultX = 0;

if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
defaultY = 1.1;
defaultYAnchor = 'bottom';
} else {
defaultX = 0;
defaultXAnchor = 'left';
// maybe use y=1.1 / yanchor=bottom as above
// to avoid https://github.com/plotly/plotly.js/issues/1199
// in v2
defaultY = -0.1;
defaultYAnchor = 'top';
}
} else {
defaultX = 1.02;
defaultY = 1;
defaultYAnchor = 'auto';
}

coerce('traceorder', defaultOrder);
Expand All@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
coerce('itemdoubleclick');

coerce('x', defaultX);
coerce('xanchor', defaultXAnchor);
coerce('xanchor');
coerce('y', defaultY);
coerce('yanchor', defaultYAnchor);
coerce('valign');
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Multiple legend positioning and sizing fixes by etpinard · Pull Request #4160 · plotly/plotly.js · GitHub
Skip to content
Multiple legend positioning and sizing fixes#4160

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

etpinard
merged 20 commits into

from

Sep 23, 2019
 Merged


Multiple legend positioning and sizing fixes
#4160
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


20 commits


Select commit
Hold shift + click to select a range
3ab7713

rm useless legend/anchor_utils.js file


etpinard Aug 15, 2019
de369f3

improve legend x, y, xanchor, yanchor attr declarations


etpinard Aug 14, 2019
1cf347a

drop firstRender logic in Legend.draw


etpinard Aug 7, 2019
82b9769

calc max name/label length in getLegendData


etpinard Aug 7, 2019
0c497bb

add a few things to legend/constants.js


etpinard Aug 9, 2019
f12c62c

drop expandHorizontalMargin logic


etpinard Aug 9, 2019
d770138

some more linting


etpinard Aug 13, 2019
51df66d

trim toggle-rect to more-precise width


etpinard Aug 13, 2019
bf586d4

add more legend mocks (with 1.49.4 baselines)


etpinard Aug 13, 2019
488cca1

fix many legend auto-margin push and positioning edge cases


etpinard Aug 16, 2019
c33c92f

do not constrain legend (x,y) when `margin.autoexpand:false`


etpinard Aug 16, 2019
1e6862a

Lib.log when margin push are dropped


etpinard Aug 14, 2019
1f00a40

add Lib.log when legend (x,y) are constrained into graph width/height


etpinard Aug 30, 2019
2b2bd9b

add mocks showing #4132 bug


etpinard Aug 19, 2019
6b0befe

fix #4132 - fix horizontal legend dimension computations


etpinard Aug 19, 2019
6b2b63b

Merge branch 'master' into legend-horizontal-computed-dims-fix


etpinard Sep 9, 2019
e92ca98

cleanup legend relayout tests


etpinard Sep 10, 2019
35b0c92

fixup variable name in legend maxWidth logic block


etpinard Sep 10, 2019
42d5e4e

end Legend.draw early when margin-redraw in-progress


etpinard Sep 10, 2019
d043151

add margin.autoexpand attr description


etpinard Sep 23, 2019

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


47 changes: 0 additions & 47 deletions
src/components/legend/anchor_utils.js

View file


Open in desktop


This file was deleted.


26 changes: 19 additions & 7 deletions
src/components/legend/attributes.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -121,10 +121,13 @@ module.exports = {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1.02,
 role: 'style',
 editType: 'legend',
 description: 'Sets the x position (in normalized coordinates) of the legend.'
 description: [
 'Sets the x position (in normalized coordinates) of the legend.',
 'Defaults to *1.02* for vertical legends and',
 'defaults to *0* for horizontal legends.'
 ].join(' ')
 },
 xanchor: {
 valType: 'enumerated',
Expand All@@ -135,28 +138,37 @@ module.exports = {
 description: [
 'Sets the legend\'s horizontal position anchor.',
 'This anchor binds the `x` position to the *left*, *center*',
 'or *right* of the legend.'
 'or *right* of the legend.',
 'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
 'anchors legends to the left for `x` values less than or equal to 1/3 and',
 'anchors legends with respect to their center otherwise.'
 ].join(' ')
 },
 y: {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1,
 role: 'style',
 editType: 'legend',
 description: 'Sets the y position (in normalized coordinates) of the legend.'
 description: [
 'Sets the y position (in normalized coordinates) of the legend.',
 'Defaults to *1* for vertical legends,',
 'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
 'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
 ].join(' ')
 },
 yanchor: {
 valType: 'enumerated',
 values: ['auto', 'top', 'middle', 'bottom'],
 dflt: 'auto',
 role: 'info',
 editType: 'legend',
 description: [
 'Sets the legend\'s vertical position anchor',
 'This anchor binds the `y` position to the *top*, *middle*',
 'or *bottom* of the legend.'
 'or *bottom* of the legend.',
 'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
 'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
 'anchors legends with respect to their middle otherwise.'
 ].join(' ')
 },
 uirevision: {
Expand Down

7 changes: 6 additions & 1 deletion
src/components/legend/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,5 +13,10 @@ module.exports = {
 scrollBarMinHeight: 20,
 scrollBarColor: '#808BA4',
 scrollBarMargin: 4,
 textOffsetX: 40
 scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},

 // number of px between legend symbol and legend text (always in x direction)
 textGap: 40,
 // number of px between each legend item (x and/or y direction)
 itemGap: 5
};

26 changes: 15 additions & 11 deletions
src/components/legend/defaults.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 var legendReallyHasATrace = false;
 var defaultOrder = 'normal';

 var defaultX, defaultY, defaultXAnchor, defaultYAnchor;

 for(var i = 0; i < fullData.length; i++) {
 var trace = fullData[i];

Expand DownExpand Up@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('borderwidth');
 Lib.coerceFont(coerce, 'font', layoutOut.font);

 coerce('orientation');
 if(containerOut.orientation === 'h') {
 var xaxis = layoutIn.xaxis;
 if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
 defaultX = 0;
 defaultXAnchor = 'left';
 var orientation = coerce('orientation');
 var defaultX, defaultY, defaultYAnchor;

 if(orientation === 'h') {
 defaultX = 0;

 if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
 defaultY = 1.1;
 defaultYAnchor = 'bottom';
 } else {
 defaultX = 0;
 defaultXAnchor = 'left';
 // maybe use y=1.1 / yanchor=bottom as above
 // to avoid https://github.com/plotly/plotly.js/issues/1199
 // in v2
 defaultY = -0.1;
 defaultYAnchor = 'top';
 }
 } else {
 defaultX = 1.02;
 defaultY = 1;
 defaultYAnchor = 'auto';
 }

 coerce('traceorder', defaultOrder);
Expand All@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('itemdoubleclick');

 coerce('x', defaultX);
 coerce('xanchor', defaultXAnchor);
 coerce('xanchor');
 coerce('y', defaultY);
 coerce('yanchor', defaultYAnchor);
 coerce('valign');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Multiple legend positioning and sizing fixes by etpinard · Pull Request #4160 · plotly/plotly.js · GitHub
Skip to content
Multiple legend positioning and sizing fixes#4160

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

etpinard
merged 20 commits into

from

Sep 23, 2019
 Merged


Multiple legend positioning and sizing fixes
#4160
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


20 commits


Select commit
Hold shift + click to select a range
3ab7713

rm useless legend/anchor_utils.js file


etpinard Aug 15, 2019
de369f3

improve legend x, y, xanchor, yanchor attr declarations


etpinard Aug 14, 2019
1cf347a

drop firstRender logic in Legend.draw


etpinard Aug 7, 2019
82b9769

calc max name/label length in getLegendData


etpinard Aug 7, 2019
0c497bb

add a few things to legend/constants.js


etpinard Aug 9, 2019
f12c62c

drop expandHorizontalMargin logic


etpinard Aug 9, 2019
d770138

some more linting


etpinard Aug 13, 2019
51df66d

trim toggle-rect to more-precise width


etpinard Aug 13, 2019
bf586d4

add more legend mocks (with 1.49.4 baselines)


etpinard Aug 13, 2019
488cca1

fix many legend auto-margin push and positioning edge cases


etpinard Aug 16, 2019
c33c92f

do not constrain legend (x,y) when `margin.autoexpand:false`


etpinard Aug 16, 2019
1e6862a

Lib.log when margin push are dropped


etpinard Aug 14, 2019
1f00a40

add Lib.log when legend (x,y) are constrained into graph width/height


etpinard Aug 30, 2019
2b2bd9b

add mocks showing #4132 bug


etpinard Aug 19, 2019
6b0befe

fix #4132 - fix horizontal legend dimension computations


etpinard Aug 19, 2019
6b2b63b

Merge branch 'master' into legend-horizontal-computed-dims-fix


etpinard Sep 9, 2019
e92ca98

cleanup legend relayout tests


etpinard Sep 10, 2019
35b0c92

fixup variable name in legend maxWidth logic block


etpinard Sep 10, 2019
42d5e4e

end Legend.draw early when margin-redraw in-progress


etpinard Sep 10, 2019
d043151

add margin.autoexpand attr description


etpinard Sep 23, 2019

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


47 changes: 0 additions & 47 deletions
src/components/legend/anchor_utils.js

View file


Open in desktop


This file was deleted.


26 changes: 19 additions & 7 deletions
src/components/legend/attributes.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -121,10 +121,13 @@ module.exports = {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1.02,
 role: 'style',
 editType: 'legend',
 description: 'Sets the x position (in normalized coordinates) of the legend.'
 description: [
 'Sets the x position (in normalized coordinates) of the legend.',
 'Defaults to *1.02* for vertical legends and',
 'defaults to *0* for horizontal legends.'
 ].join(' ')
 },
 xanchor: {
 valType: 'enumerated',
Expand All@@ -135,28 +138,37 @@ module.exports = {
 description: [
 'Sets the legend\'s horizontal position anchor.',
 'This anchor binds the `x` position to the *left*, *center*',
 'or *right* of the legend.'
 'or *right* of the legend.',
 'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
 'anchors legends to the left for `x` values less than or equal to 1/3 and',
 'anchors legends with respect to their center otherwise.'
 ].join(' ')
 },
 y: {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1,
 role: 'style',
 editType: 'legend',
 description: 'Sets the y position (in normalized coordinates) of the legend.'
 description: [
 'Sets the y position (in normalized coordinates) of the legend.',
 'Defaults to *1* for vertical legends,',
 'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
 'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
 ].join(' ')
 },
 yanchor: {
 valType: 'enumerated',
 values: ['auto', 'top', 'middle', 'bottom'],
 dflt: 'auto',
 role: 'info',
 editType: 'legend',
 description: [
 'Sets the legend\'s vertical position anchor',
 'This anchor binds the `y` position to the *top*, *middle*',
 'or *bottom* of the legend.'
 'or *bottom* of the legend.',
 'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
 'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
 'anchors legends with respect to their middle otherwise.'
 ].join(' ')
 },
 uirevision: {
Expand Down

7 changes: 6 additions & 1 deletion
src/components/legend/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,5 +13,10 @@ module.exports = {
 scrollBarMinHeight: 20,
 scrollBarColor: '#808BA4',
 scrollBarMargin: 4,
 textOffsetX: 40
 scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},

 // number of px between legend symbol and legend text (always in x direction)
 textGap: 40,
 // number of px between each legend item (x and/or y direction)
 itemGap: 5
};

26 changes: 15 additions & 11 deletions
src/components/legend/defaults.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 var legendReallyHasATrace = false;
 var defaultOrder = 'normal';

 var defaultX, defaultY, defaultXAnchor, defaultYAnchor;

 for(var i = 0; i < fullData.length; i++) {
 var trace = fullData[i];

Expand DownExpand Up@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('borderwidth');
 Lib.coerceFont(coerce, 'font', layoutOut.font);

 coerce('orientation');
 if(containerOut.orientation === 'h') {
 var xaxis = layoutIn.xaxis;
 if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
 defaultX = 0;
 defaultXAnchor = 'left';
 var orientation = coerce('orientation');
 var defaultX, defaultY, defaultYAnchor;

 if(orientation === 'h') {
 defaultX = 0;

 if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
 defaultY = 1.1;
 defaultYAnchor = 'bottom';
 } else {
 defaultX = 0;
 defaultXAnchor = 'left';
 // maybe use y=1.1 / yanchor=bottom as above
 // to avoid https://github.com/plotly/plotly.js/issues/1199
 // in v2
 defaultY = -0.1;
 defaultYAnchor = 'top';
 }
 } else {
 defaultX = 1.02;
 defaultY = 1;
 defaultYAnchor = 'auto';
 }

 coerce('traceorder', defaultOrder);
Expand All@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('itemdoubleclick');

 coerce('x', defaultX);
 coerce('xanchor', defaultXAnchor);
 coerce('xanchor');
 coerce('y', defaultY);
 coerce('yanchor', defaultYAnchor);
 coerce('valign');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Multiple legend positioning and sizing fixes by etpinard · Pull Request #4160 · plotly/plotly.js · GitHub
Skip to content
Multiple legend positioning and sizing fixes#4160

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

etpinard
merged 20 commits into

from

Sep 23, 2019
 Merged


Multiple legend positioning and sizing fixes
#4160
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


20 commits


Select commit
Hold shift + click to select a range
3ab7713

rm useless legend/anchor_utils.js file


etpinard Aug 15, 2019
de369f3

improve legend x, y, xanchor, yanchor attr declarations


etpinard Aug 14, 2019
1cf347a

drop firstRender logic in Legend.draw


etpinard Aug 7, 2019
82b9769

calc max name/label length in getLegendData


etpinard Aug 7, 2019
0c497bb

add a few things to legend/constants.js


etpinard Aug 9, 2019
f12c62c

drop expandHorizontalMargin logic


etpinard Aug 9, 2019
d770138

some more linting


etpinard Aug 13, 2019
51df66d

trim toggle-rect to more-precise width


etpinard Aug 13, 2019
bf586d4

add more legend mocks (with 1.49.4 baselines)


etpinard Aug 13, 2019
488cca1

fix many legend auto-margin push and positioning edge cases


etpinard Aug 16, 2019
c33c92f

do not constrain legend (x,y) when `margin.autoexpand:false`


etpinard Aug 16, 2019
1e6862a

Lib.log when margin push are dropped


etpinard Aug 14, 2019
1f00a40

add Lib.log when legend (x,y) are constrained into graph width/height


etpinard Aug 30, 2019
2b2bd9b

add mocks showing #4132 bug


etpinard Aug 19, 2019
6b0befe

fix #4132 - fix horizontal legend dimension computations


etpinard Aug 19, 2019
6b2b63b

Merge branch 'master' into legend-horizontal-computed-dims-fix


etpinard Sep 9, 2019
e92ca98

cleanup legend relayout tests


etpinard Sep 10, 2019
35b0c92

fixup variable name in legend maxWidth logic block


etpinard Sep 10, 2019
42d5e4e

end Legend.draw early when margin-redraw in-progress


etpinard Sep 10, 2019
d043151

add margin.autoexpand attr description


etpinard Sep 23, 2019

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


47 changes: 0 additions & 47 deletions
src/components/legend/anchor_utils.js

View file


Open in desktop


This file was deleted.


26 changes: 19 additions & 7 deletions
src/components/legend/attributes.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -121,10 +121,13 @@ module.exports = {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1.02,
 role: 'style',
 editType: 'legend',
 description: 'Sets the x position (in normalized coordinates) of the legend.'
 description: [
 'Sets the x position (in normalized coordinates) of the legend.',
 'Defaults to *1.02* for vertical legends and',
 'defaults to *0* for horizontal legends.'
 ].join(' ')
 },
 xanchor: {
 valType: 'enumerated',
Expand All@@ -135,28 +138,37 @@ module.exports = {
 description: [
 'Sets the legend\'s horizontal position anchor.',
 'This anchor binds the `x` position to the *left*, *center*',
 'or *right* of the legend.'
 'or *right* of the legend.',
 'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
 'anchors legends to the left for `x` values less than or equal to 1/3 and',
 'anchors legends with respect to their center otherwise.'
 ].join(' ')
 },
 y: {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1,
 role: 'style',
 editType: 'legend',
 description: 'Sets the y position (in normalized coordinates) of the legend.'
 description: [
 'Sets the y position (in normalized coordinates) of the legend.',
 'Defaults to *1* for vertical legends,',
 'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
 'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
 ].join(' ')
 },
 yanchor: {
 valType: 'enumerated',
 values: ['auto', 'top', 'middle', 'bottom'],
 dflt: 'auto',
 role: 'info',
 editType: 'legend',
 description: [
 'Sets the legend\'s vertical position anchor',
 'This anchor binds the `y` position to the *top*, *middle*',
 'or *bottom* of the legend.'
 'or *bottom* of the legend.',
 'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
 'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
 'anchors legends with respect to their middle otherwise.'
 ].join(' ')
 },
 uirevision: {
Expand Down

7 changes: 6 additions & 1 deletion
src/components/legend/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,5 +13,10 @@ module.exports = {
 scrollBarMinHeight: 20,
 scrollBarColor: '#808BA4',
 scrollBarMargin: 4,
 textOffsetX: 40
 scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},

 // number of px between legend symbol and legend text (always in x direction)
 textGap: 40,
 // number of px between each legend item (x and/or y direction)
 itemGap: 5
};

26 changes: 15 additions & 11 deletions
src/components/legend/defaults.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 var legendReallyHasATrace = false;
 var defaultOrder = 'normal';

 var defaultX, defaultY, defaultXAnchor, defaultYAnchor;

 for(var i = 0; i < fullData.length; i++) {
 var trace = fullData[i];

Expand DownExpand Up@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('borderwidth');
 Lib.coerceFont(coerce, 'font', layoutOut.font);

 coerce('orientation');
 if(containerOut.orientation === 'h') {
 var xaxis = layoutIn.xaxis;
 if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
 defaultX = 0;
 defaultXAnchor = 'left';
 var orientation = coerce('orientation');
 var defaultX, defaultY, defaultYAnchor;

 if(orientation === 'h') {
 defaultX = 0;

 if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
 defaultY = 1.1;
 defaultYAnchor = 'bottom';
 } else {
 defaultX = 0;
 defaultXAnchor = 'left';
 // maybe use y=1.1 / yanchor=bottom as above
 // to avoid https://github.com/plotly/plotly.js/issues/1199
 // in v2
 defaultY = -0.1;
 defaultYAnchor = 'top';
 }
 } else {
 defaultX = 1.02;
 defaultY = 1;
 defaultYAnchor = 'auto';
 }

 coerce('traceorder', defaultOrder);
Expand All@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('itemdoubleclick');

 coerce('x', defaultX);
 coerce('xanchor', defaultXAnchor);
 coerce('xanchor');
 coerce('y', defaultY);
 coerce('yanchor', defaultYAnchor);
 coerce('valign');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Multiple legend positioning and sizing fixes by etpinard · Pull Request #4160 · plotly/plotly.js · GitHub
Skip to content
Multiple legend positioning and sizing fixes#4160

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

etpinard
merged 20 commits into

from

Sep 23, 2019
 Merged


Multiple legend positioning and sizing fixes
#4160
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


20 commits


Select commit
Hold shift + click to select a range
3ab7713

rm useless legend/anchor_utils.js file


etpinard Aug 15, 2019
de369f3

improve legend x, y, xanchor, yanchor attr declarations


etpinard Aug 14, 2019
1cf347a

drop firstRender logic in Legend.draw


etpinard Aug 7, 2019
82b9769

calc max name/label length in getLegendData


etpinard Aug 7, 2019
0c497bb

add a few things to legend/constants.js


etpinard Aug 9, 2019
f12c62c

drop expandHorizontalMargin logic


etpinard Aug 9, 2019
d770138

some more linting


etpinard Aug 13, 2019
51df66d

trim toggle-rect to more-precise width


etpinard Aug 13, 2019
bf586d4

add more legend mocks (with 1.49.4 baselines)


etpinard Aug 13, 2019
488cca1

fix many legend auto-margin push and positioning edge cases


etpinard Aug 16, 2019
c33c92f

do not constrain legend (x,y) when `margin.autoexpand:false`


etpinard Aug 16, 2019
1e6862a

Lib.log when margin push are dropped


etpinard Aug 14, 2019
1f00a40

add Lib.log when legend (x,y) are constrained into graph width/height


etpinard Aug 30, 2019
2b2bd9b

add mocks showing #4132 bug


etpinard Aug 19, 2019
6b0befe

fix #4132 - fix horizontal legend dimension computations


etpinard Aug 19, 2019
6b2b63b

Merge branch 'master' into legend-horizontal-computed-dims-fix


etpinard Sep 9, 2019
e92ca98

cleanup legend relayout tests


etpinard Sep 10, 2019
35b0c92

fixup variable name in legend maxWidth logic block


etpinard Sep 10, 2019
42d5e4e

end Legend.draw early when margin-redraw in-progress


etpinard Sep 10, 2019
d043151

add margin.autoexpand attr description


etpinard Sep 23, 2019

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


47 changes: 0 additions & 47 deletions
src/components/legend/anchor_utils.js

View file


Open in desktop


This file was deleted.


26 changes: 19 additions & 7 deletions
src/components/legend/attributes.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -121,10 +121,13 @@ module.exports = {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1.02,
 role: 'style',
 editType: 'legend',
 description: 'Sets the x position (in normalized coordinates) of the legend.'
 description: [
 'Sets the x position (in normalized coordinates) of the legend.',
 'Defaults to *1.02* for vertical legends and',
 'defaults to *0* for horizontal legends.'
 ].join(' ')
 },
 xanchor: {
 valType: 'enumerated',
Expand All@@ -135,28 +138,37 @@ module.exports = {
 description: [
 'Sets the legend\'s horizontal position anchor.',
 'This anchor binds the `x` position to the *left*, *center*',
 'or *right* of the legend.'
 'or *right* of the legend.',
 'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
 'anchors legends to the left for `x` values less than or equal to 1/3 and',
 'anchors legends with respect to their center otherwise.'
 ].join(' ')
 },
 y: {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1,
 role: 'style',
 editType: 'legend',
 description: 'Sets the y position (in normalized coordinates) of the legend.'
 description: [
 'Sets the y position (in normalized coordinates) of the legend.',
 'Defaults to *1* for vertical legends,',
 'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
 'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
 ].join(' ')
 },
 yanchor: {
 valType: 'enumerated',
 values: ['auto', 'top', 'middle', 'bottom'],
 dflt: 'auto',
 role: 'info',
 editType: 'legend',
 description: [
 'Sets the legend\'s vertical position anchor',
 'This anchor binds the `y` position to the *top*, *middle*',
 'or *bottom* of the legend.'
 'or *bottom* of the legend.',
 'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
 'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
 'anchors legends with respect to their middle otherwise.'
 ].join(' ')
 },
 uirevision: {
Expand Down

7 changes: 6 additions & 1 deletion
src/components/legend/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,5 +13,10 @@ module.exports = {
 scrollBarMinHeight: 20,
 scrollBarColor: '#808BA4',
 scrollBarMargin: 4,
 textOffsetX: 40
 scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},

 // number of px between legend symbol and legend text (always in x direction)
 textGap: 40,
 // number of px between each legend item (x and/or y direction)
 itemGap: 5
};

26 changes: 15 additions & 11 deletions
src/components/legend/defaults.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 var legendReallyHasATrace = false;
 var defaultOrder = 'normal';

 var defaultX, defaultY, defaultXAnchor, defaultYAnchor;

 for(var i = 0; i < fullData.length; i++) {
 var trace = fullData[i];

Expand DownExpand Up@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('borderwidth');
 Lib.coerceFont(coerce, 'font', layoutOut.font);

 coerce('orientation');
 if(containerOut.orientation === 'h') {
 var xaxis = layoutIn.xaxis;
 if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
 defaultX = 0;
 defaultXAnchor = 'left';
 var orientation = coerce('orientation');
 var defaultX, defaultY, defaultYAnchor;

 if(orientation === 'h') {
 defaultX = 0;

 if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
 defaultY = 1.1;
 defaultYAnchor = 'bottom';
 } else {
 defaultX = 0;
 defaultXAnchor = 'left';
 // maybe use y=1.1 / yanchor=bottom as above
 // to avoid https://github.com/plotly/plotly.js/issues/1199
 // in v2
 defaultY = -0.1;
 defaultYAnchor = 'top';
 }
 } else {
 defaultX = 1.02;
 defaultY = 1;
 defaultYAnchor = 'auto';
 }

 coerce('traceorder', defaultOrder);
Expand All@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('itemdoubleclick');

 coerce('x', defaultX);
 coerce('xanchor', defaultXAnchor);
 coerce('xanchor');
 coerce('y', defaultY);
 coerce('yanchor', defaultYAnchor);
 coerce('valign');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Multiple legend positioning and sizing fixes by etpinard · Pull Request #4160 · plotly/plotly.js · GitHub
Skip to content
Multiple legend positioning and sizing fixes#4160

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

etpinard
merged 20 commits into

from

Sep 23, 2019
 Merged


Multiple legend positioning and sizing fixes
#4160
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


20 commits


Select commit
Hold shift + click to select a range
3ab7713

rm useless legend/anchor_utils.js file


etpinard Aug 15, 2019
de369f3

improve legend x, y, xanchor, yanchor attr declarations


etpinard Aug 14, 2019
1cf347a

drop firstRender logic in Legend.draw


etpinard Aug 7, 2019
82b9769

calc max name/label length in getLegendData


etpinard Aug 7, 2019
0c497bb

add a few things to legend/constants.js


etpinard Aug 9, 2019
f12c62c

drop expandHorizontalMargin logic


etpinard Aug 9, 2019
d770138

some more linting


etpinard Aug 13, 2019
51df66d

trim toggle-rect to more-precise width


etpinard Aug 13, 2019
bf586d4

add more legend mocks (with 1.49.4 baselines)


etpinard Aug 13, 2019
488cca1

fix many legend auto-margin push and positioning edge cases


etpinard Aug 16, 2019
c33c92f

do not constrain legend (x,y) when `margin.autoexpand:false`


etpinard Aug 16, 2019
1e6862a

Lib.log when margin push are dropped


etpinard Aug 14, 2019
1f00a40

add Lib.log when legend (x,y) are constrained into graph width/height


etpinard Aug 30, 2019
2b2bd9b

add mocks showing #4132 bug


etpinard Aug 19, 2019
6b0befe

fix #4132 - fix horizontal legend dimension computations


etpinard Aug 19, 2019
6b2b63b

Merge branch 'master' into legend-horizontal-computed-dims-fix


etpinard Sep 9, 2019
e92ca98

cleanup legend relayout tests


etpinard Sep 10, 2019
35b0c92

fixup variable name in legend maxWidth logic block


etpinard Sep 10, 2019
42d5e4e

end Legend.draw early when margin-redraw in-progress


etpinard Sep 10, 2019
d043151

add margin.autoexpand attr description


etpinard Sep 23, 2019

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


47 changes: 0 additions & 47 deletions
src/components/legend/anchor_utils.js

View file


Open in desktop


This file was deleted.


26 changes: 19 additions & 7 deletions
src/components/legend/attributes.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -121,10 +121,13 @@ module.exports = {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1.02,
 role: 'style',
 editType: 'legend',
 description: 'Sets the x position (in normalized coordinates) of the legend.'
 description: [
 'Sets the x position (in normalized coordinates) of the legend.',
 'Defaults to *1.02* for vertical legends and',
 'defaults to *0* for horizontal legends.'
 ].join(' ')
 },
 xanchor: {
 valType: 'enumerated',
Expand All@@ -135,28 +138,37 @@ module.exports = {
 description: [
 'Sets the legend\'s horizontal position anchor.',
 'This anchor binds the `x` position to the *left*, *center*',
 'or *right* of the legend.'
 'or *right* of the legend.',
 'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
 'anchors legends to the left for `x` values less than or equal to 1/3 and',
 'anchors legends with respect to their center otherwise.'
 ].join(' ')
 },
 y: {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1,
 role: 'style',
 editType: 'legend',
 description: 'Sets the y position (in normalized coordinates) of the legend.'
 description: [
 'Sets the y position (in normalized coordinates) of the legend.',
 'Defaults to *1* for vertical legends,',
 'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
 'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
 ].join(' ')
 },
 yanchor: {
 valType: 'enumerated',
 values: ['auto', 'top', 'middle', 'bottom'],
 dflt: 'auto',
 role: 'info',
 editType: 'legend',
 description: [
 'Sets the legend\'s vertical position anchor',
 'This anchor binds the `y` position to the *top*, *middle*',
 'or *bottom* of the legend.'
 'or *bottom* of the legend.',
 'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
 'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
 'anchors legends with respect to their middle otherwise.'
 ].join(' ')
 },
 uirevision: {
Expand Down

7 changes: 6 additions & 1 deletion
src/components/legend/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,5 +13,10 @@ module.exports = {
 scrollBarMinHeight: 20,
 scrollBarColor: '#808BA4',
 scrollBarMargin: 4,
 textOffsetX: 40
 scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},

 // number of px between legend symbol and legend text (always in x direction)
 textGap: 40,
 // number of px between each legend item (x and/or y direction)
 itemGap: 5
};

26 changes: 15 additions & 11 deletions
src/components/legend/defaults.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 var legendReallyHasATrace = false;
 var defaultOrder = 'normal';

 var defaultX, defaultY, defaultXAnchor, defaultYAnchor;

 for(var i = 0; i < fullData.length; i++) {
 var trace = fullData[i];

Expand DownExpand Up@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('borderwidth');
 Lib.coerceFont(coerce, 'font', layoutOut.font);

 coerce('orientation');
 if(containerOut.orientation === 'h') {
 var xaxis = layoutIn.xaxis;
 if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
 defaultX = 0;
 defaultXAnchor = 'left';
 var orientation = coerce('orientation');
 var defaultX, defaultY, defaultYAnchor;

 if(orientation === 'h') {
 defaultX = 0;

 if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
 defaultY = 1.1;
 defaultYAnchor = 'bottom';
 } else {
 defaultX = 0;
 defaultXAnchor = 'left';
 // maybe use y=1.1 / yanchor=bottom as above
 // to avoid https://github.com/plotly/plotly.js/issues/1199
 // in v2
 defaultY = -0.1;
 defaultYAnchor = 'top';
 }
 } else {
 defaultX = 1.02;
 defaultY = 1;
 defaultYAnchor = 'auto';
 }

 coerce('traceorder', defaultOrder);
Expand All@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('itemdoubleclick');

 coerce('x', defaultX);
 coerce('xanchor', defaultXAnchor);
 coerce('xanchor');
 coerce('y', defaultY);
 coerce('yanchor', defaultYAnchor);
 coerce('valign');
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
Multiple legend positioning and sizing fixes by etpinard · Pull Request #4160 · plotly/plotly.js · GitHub
Skip to content
Multiple legend positioning and sizing fixes#4160

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

etpinard
merged 20 commits into

from

Sep 23, 2019
 Merged


Multiple legend positioning and sizing fixes
#4160
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


20 commits


Select commit
Hold shift + click to select a range
3ab7713

rm useless legend/anchor_utils.js file


etpinard Aug 15, 2019
de369f3

improve legend x, y, xanchor, yanchor attr declarations


etpinard Aug 14, 2019
1cf347a

drop firstRender logic in Legend.draw


etpinard Aug 7, 2019
82b9769

calc max name/label length in getLegendData


etpinard Aug 7, 2019
0c497bb

add a few things to legend/constants.js


etpinard Aug 9, 2019
f12c62c

drop expandHorizontalMargin logic


etpinard Aug 9, 2019
d770138

some more linting


etpinard Aug 13, 2019
51df66d

trim toggle-rect to more-precise width


etpinard Aug 13, 2019
bf586d4

add more legend mocks (with 1.49.4 baselines)


etpinard Aug 13, 2019
488cca1

fix many legend auto-margin push and positioning edge cases


etpinard Aug 16, 2019
c33c92f

do not constrain legend (x,y) when `margin.autoexpand:false`


etpinard Aug 16, 2019
1e6862a

Lib.log when margin push are dropped


etpinard Aug 14, 2019
1f00a40

add Lib.log when legend (x,y) are constrained into graph width/height


etpinard Aug 30, 2019
2b2bd9b

add mocks showing #4132 bug


etpinard Aug 19, 2019
6b0befe

fix #4132 - fix horizontal legend dimension computations


etpinard Aug 19, 2019
6b2b63b

Merge branch 'master' into legend-horizontal-computed-dims-fix


etpinard Sep 9, 2019
e92ca98

cleanup legend relayout tests


etpinard Sep 10, 2019
35b0c92

fixup variable name in legend maxWidth logic block


etpinard Sep 10, 2019
42d5e4e

end Legend.draw early when margin-redraw in-progress


etpinard Sep 10, 2019
d043151

add margin.autoexpand attr description


etpinard Sep 23, 2019

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


47 changes: 0 additions & 47 deletions
src/components/legend/anchor_utils.js

View file


Open in desktop


This file was deleted.


26 changes: 19 additions & 7 deletions
src/components/legend/attributes.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -121,10 +121,13 @@ module.exports = {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1.02,
 role: 'style',
 editType: 'legend',
 description: 'Sets the x position (in normalized coordinates) of the legend.'
 description: [
 'Sets the x position (in normalized coordinates) of the legend.',
 'Defaults to *1.02* for vertical legends and',
 'defaults to *0* for horizontal legends.'
 ].join(' ')
 },
 xanchor: {
 valType: 'enumerated',
Expand All@@ -135,28 +138,37 @@ module.exports = {
 description: [
 'Sets the legend\'s horizontal position anchor.',
 'This anchor binds the `x` position to the *left*, *center*',
 'or *right* of the legend.'
 'or *right* of the legend.',
 'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
 'anchors legends to the left for `x` values less than or equal to 1/3 and',
 'anchors legends with respect to their center otherwise.'
 ].join(' ')
 },
 y: {
 valType: 'number',
 min: -2,
 max: 3,
 dflt: 1,
 role: 'style',
 editType: 'legend',
 description: 'Sets the y position (in normalized coordinates) of the legend.'
 description: [
 'Sets the y position (in normalized coordinates) of the legend.',
 'Defaults to *1* for vertical legends,',
 'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
 'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
 ].join(' ')
 },
 yanchor: {
 valType: 'enumerated',
 values: ['auto', 'top', 'middle', 'bottom'],
 dflt: 'auto',
 role: 'info',
 editType: 'legend',
 description: [
 'Sets the legend\'s vertical position anchor',
 'This anchor binds the `y` position to the *top*, *middle*',
 'or *bottom* of the legend.'
 'or *bottom* of the legend.',
 'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
 'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
 'anchors legends with respect to their middle otherwise.'
 ].join(' ')
 },
 uirevision: {
Expand Down

7 changes: 6 additions & 1 deletion
src/components/legend/constants.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,5 +13,10 @@ module.exports = {
 scrollBarMinHeight: 20,
 scrollBarColor: '#808BA4',
 scrollBarMargin: 4,
 textOffsetX: 40
 scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},

 // number of px between legend symbol and legend text (always in x direction)
 textGap: 40,
 // number of px between each legend item (x and/or y direction)
 itemGap: 5
};

26 changes: 15 additions & 11 deletions
src/components/legend/defaults.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 var legendReallyHasATrace = false;
 var defaultOrder = 'normal';

 var defaultX, defaultY, defaultXAnchor, defaultYAnchor;

 for(var i = 0; i < fullData.length; i++) {
 var trace = fullData[i];

Expand DownExpand Up@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('borderwidth');
 Lib.coerceFont(coerce, 'font', layoutOut.font);

 coerce('orientation');
 if(containerOut.orientation === 'h') {
 var xaxis = layoutIn.xaxis;
 if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
 defaultX = 0;
 defaultXAnchor = 'left';
 var orientation = coerce('orientation');
 var defaultX, defaultY, defaultYAnchor;

 if(orientation === 'h') {
 defaultX = 0;

 if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
 defaultY = 1.1;
 defaultYAnchor = 'bottom';
 } else {
 defaultX = 0;
 defaultXAnchor = 'left';
 // maybe use y=1.1 / yanchor=bottom as above
 // to avoid https://github.com/plotly/plotly.js/issues/1199
 // in v2
 defaultY = -0.1;
 defaultYAnchor = 'top';
 }
 } else {
 defaultX = 1.02;
 defaultY = 1;
 defaultYAnchor = 'auto';
 }

 coerce('traceorder', defaultOrder);
Expand All@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 coerce('itemdoubleclick');

 coerce('x', defaultX);
 coerce('xanchor', defaultXAnchor);
 coerce('xanchor');
 coerce('y', defaultY);
 coerce('yanchor', defaultYAnchor);
 coerce('valign');
Expand Down
Loading