From 60fbfe120e08b4cbc7011740fc0949dd6012f1ba Mon Sep 17 00:00:00 2001 From: Nementon Date: Fri, 28 Aug 2020 17:59:12 +0200 Subject: [PATCH 01/11] components / legend / add `hmaxheightratio`, `hmaxheight` attributes - Replace hardcoded horizontal legend max height ratio of 2 with user options (default is still 2). --- src/components/legend/attributes.js | 18 ++++++++++++++++++ src/components/legend/defaults.js | 2 ++ src/components/legend/draw.js | 16 +++++++++++----- 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index 029c49cf0a8..8e10ca685d9 100644 --- a/src/components/legend/attributes.js +++ b/src/components/legend/attributes.js @@ -33,6 +33,24 @@ module.exports = { editType: 'legend', description: 'Sets the color of the border enclosing the legend.' }, + hmaxheightratio: { + valType: 'number', + min: 2, + dflt: 2, + role: 'style', + editType: 'legend', + description: [ + 'Sets the max height ratio (layout / ratio) of the visible legend when horizontaly aligned.', + 'Default value is 2; the legend will take up to 50% of the layout height before displaying a scrollbar', + ].join(' ') + }, + hmaxheight: { + valType: 'number', + min: 0, + role: 'style', + editType: 'legend', + description: 'Sets the max height (in px) of the horizontaly aligned legend.' + }, borderwidth: { valType: 'number', min: 0, diff --git a/src/components/legend/defaults.js b/src/components/legend/defaults.js index aad87454867..4f8d79c9720 100644 --- a/src/components/legend/defaults.js +++ b/src/components/legend/defaults.js @@ -188,6 +188,8 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) { coerce('xanchor', defaultXAnchor); coerce('yanchor', defaultYAnchor); + coerce('hmaxheightratio'); + coerce('hmaxheight'); coerce('valign'); Lib.noneOrAll(containerIn, containerOut, ['x', 'y']); diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 0c15194a713..1b5f9e90757 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -769,12 +769,18 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var traceGroupGap = legendObj.tracegroupgap; var legendGroupWidths = {}; - // - if below/above plot area, give it the maximum potential margin-push value + // - if below/above plot area, give it the [user defined] maximum potential margin-push value // - otherwise, extend the height of the plot area - legendObj._maxHeight = Math.max( - (isBelowPlotArea || isAbovePlotArea) ? fullLayout.height / 2 : gs.h, - 30 - ); + if (isBelowPlotArea || isAbovePlotArea) { + if (legendObj.hmaxheight !== undefined) { + legendObj._maxHeight = legendObj.hmaxheight; + } else { + legendObj._maxHeight = fullLayout.height / legendObj.hmaxheightratio; + } + } + else { + legendObj._maxHeight = Math.max(gs.h, 30); + } var toggleRectWidth = 0; legendObj._width = 0; From fb035f7420d0c4604f4ca867eae4fdb631286482 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Sat, 8 Feb 2025 09:30:16 -0700 Subject: [PATCH 02/11] Switch to single attribute for controlling legend height --- src/components/legend/attributes.js | 18 ++++++------------ src/components/legend/defaults.js | 1 - src/components/legend/draw.js | 22 ++++++++++++++-------- 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index 8e10ca685d9..ce1af5b1cac 100644 --- a/src/components/legend/attributes.js +++ b/src/components/legend/attributes.js @@ -33,23 +33,17 @@ module.exports = { editType: 'legend', description: 'Sets the color of the border enclosing the legend.' }, - hmaxheightratio: { - valType: 'number', - min: 2, - dflt: 2, - role: 'style', - editType: 'legend', - description: [ - 'Sets the max height ratio (layout / ratio) of the visible legend when horizontaly aligned.', - 'Default value is 2; the legend will take up to 50% of the layout height before displaying a scrollbar', - ].join(' ') - }, hmaxheight: { valType: 'number', min: 0, + dflt: 0.5, role: 'style', editType: 'legend', - description: 'Sets the max height (in px) of the horizontaly aligned legend.' + description: [ + 'If greater than one, it sets the max height (in px) of the horizontaly aligned legend.', + 'Otherwise, it sets the max height ratio (layout * ratio) of the visible legend when horizontaly aligned.', + 'Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar' + ].join(' ') }, borderwidth: { valType: 'number', diff --git a/src/components/legend/defaults.js b/src/components/legend/defaults.js index 4f8d79c9720..470f52b45f0 100644 --- a/src/components/legend/defaults.js +++ b/src/components/legend/defaults.js @@ -188,7 +188,6 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) { coerce('xanchor', defaultXAnchor); coerce('yanchor', defaultYAnchor); - coerce('hmaxheightratio'); coerce('hmaxheight'); coerce('valign'); Lib.noneOrAll(containerIn, containerOut, ['x', 'y']); diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 1b5f9e90757..7c7e958d022 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -769,19 +769,25 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var traceGroupGap = legendObj.tracegroupgap; var legendGroupWidths = {}; - // - if below/above plot area, give it the [user defined] maximum potential margin-push value + // - if below/above plot area, give it the user defined maximum potential margin-push value // - otherwise, extend the height of the plot area if (isBelowPlotArea || isAbovePlotArea) { - if (legendObj.hmaxheight !== undefined) { - legendObj._maxHeight = legendObj.hmaxheight; - } else { - legendObj._maxHeight = fullLayout.height / legendObj.hmaxheightratio; - } - } - else { + legendObj._maxHeight = legendObj.hmaxheight > 1 + ? legendObj.hmaxheight + : fullLayout.height * legendObj.hmaxheight; + } else { legendObj._maxHeight = Math.max(gs.h, 30); } + console.log({ + isBelowPlotArea, + isAbovePlotArea, + hmaxheight: legendObj.hmaxheight, + fullLayout_height: fullLayout.height, + gs_h: gs.h, + legendObj_maxHeight: legendObj._maxHeight + }) + var toggleRectWidth = 0; legendObj._width = 0; legendObj._height = 0; From 17b86d13b61abc6b1e459c7524cdb52404d3616c Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Sat, 8 Feb 2025 09:37:51 -0700 Subject: [PATCH 03/11] Update plot schema --- src/components/legend/attributes.js | 2 +- test/plot-schema.json | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index ce1af5b1cac..655847a859c 100644 --- a/src/components/legend/attributes.js +++ b/src/components/legend/attributes.js @@ -42,7 +42,7 @@ module.exports = { description: [ 'If greater than one, it sets the max height (in px) of the horizontaly aligned legend.', 'Otherwise, it sets the max height ratio (layout * ratio) of the visible legend when horizontaly aligned.', - 'Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar' + 'Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar.' ].join(' ') }, borderwidth: { diff --git a/test/plot-schema.json b/test/plot-schema.json index 6aa77cf3338..39cef040a4e 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -3396,6 +3396,14 @@ "valType": "integer" } }, + "hmaxheight": { + "description": "If greater than one, it sets the max height (in px) of the horizontaly aligned legend. Otherwise, it sets the max height ratio (layout * ratio) of the visible legend when horizontaly aligned. Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar", + "dflt": 0.5, + "editType": "legend", + "min": 0, + "role": "style", + "valType": "number" + }, "indentation": { "description": "Sets the indentation (in px) of the legend entries.", "dflt": 0, From 4cbdc3613d99254bff9070386fb01754f74eff06 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Sat, 8 Feb 2025 10:00:26 -0700 Subject: [PATCH 04/11] Add draft log --- draftlogs/7359_add.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/7359_add.md diff --git a/draftlogs/7359_add.md b/draftlogs/7359_add.md new file mode 100644 index 00000000000..4096e99d0fa --- /dev/null +++ b/draftlogs/7359_add.md @@ -0,0 +1 @@ + - Allow configuration of horizontal legend max height [[#7359](https://github.com/plotly/plotly.js/pull/7359)] From c4b46a25869cc25d82ac819da3906e25b9284d69 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Wed, 12 Feb 2025 18:37:18 -0700 Subject: [PATCH 05/11] Remove debug code --- src/components/legend/draw.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 7c7e958d022..9fdf3587760 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -779,15 +779,6 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { legendObj._maxHeight = Math.max(gs.h, 30); } - console.log({ - isBelowPlotArea, - isAbovePlotArea, - hmaxheight: legendObj.hmaxheight, - fullLayout_height: fullLayout.height, - gs_h: gs.h, - legendObj_maxHeight: legendObj._maxHeight - }) - var toggleRectWidth = 0; legendObj._width = 0; legendObj._height = 0; From 1bc52127dbd690e324aac000690260bf53af7864 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Wed, 12 Feb 2025 18:37:29 -0700 Subject: [PATCH 06/11] Update schema --- test/plot-schema.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/plot-schema.json b/test/plot-schema.json index 39cef040a4e..3a7e6c8e157 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -3397,7 +3397,7 @@ } }, "hmaxheight": { - "description": "If greater than one, it sets the max height (in px) of the horizontaly aligned legend. Otherwise, it sets the max height ratio (layout * ratio) of the visible legend when horizontaly aligned. Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar", + "description": "If greater than one, it sets the max height (in px) of the horizontaly aligned legend. Otherwise, it sets the max height ratio (layout * ratio) of the visible legend when horizontaly aligned. Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar.", "dflt": 0.5, "editType": "legend", "min": 0, From 6387eab81517d058cf7c4bed453aa02151aa605f Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Wed, 12 Feb 2025 20:31:50 -0700 Subject: [PATCH 07/11] Remove obsolete role from attribute --- src/components/legend/attributes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index 655847a859c..f48ce0fdf50 100644 --- a/src/components/legend/attributes.js +++ b/src/components/legend/attributes.js @@ -37,7 +37,6 @@ module.exports = { valType: 'number', min: 0, dflt: 0.5, - role: 'style', editType: 'legend', description: [ 'If greater than one, it sets the max height (in px) of the horizontaly aligned legend.', From b61970fcc7f2f826c24ef0c3cca79a42930dfd6e Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Wed, 12 Feb 2025 20:32:56 -0700 Subject: [PATCH 08/11] Update schema --- test/plot-schema.json | 1 - 1 file changed, 1 deletion(-) diff --git a/test/plot-schema.json b/test/plot-schema.json index 3a7e6c8e157..fb2ab338186 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -3401,7 +3401,6 @@ "dflt": 0.5, "editType": "legend", "min": 0, - "role": "style", "valType": "number" }, "indentation": { From 1f55078191cd88937acb2ee6c5eaa21d7594cdb0 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Fri, 21 Feb 2025 06:10:30 -0700 Subject: [PATCH 09/11] Make maxheight apply to horizontal and vertical legends --- src/components/legend/attributes.js | 11 ++++++----- src/components/legend/defaults.js | 2 +- src/components/legend/draw.js | 12 +++--------- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index f48ce0fdf50..bd897937339 100644 --- a/src/components/legend/attributes.js +++ b/src/components/legend/attributes.js @@ -33,15 +33,16 @@ module.exports = { editType: 'legend', description: 'Sets the color of the border enclosing the legend.' }, - hmaxheight: { + maxheight: { valType: 'number', min: 0, - dflt: 0.5, editType: 'legend', description: [ - 'If greater than one, it sets the max height (in px) of the horizontaly aligned legend.', - 'Otherwise, it sets the max height ratio (layout * ratio) of the visible legend when horizontaly aligned.', - 'Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar.' + 'Sets the max height (in px) of the legend, or max height ratio (reference height * ratio) if less than one.', + 'Default value is: 0.5 for horizontal legends; 1 for vertical legends. The minimum allowed height is 30px.', + 'For a ratio of 0.5, the legend will take up to 50% of the reference height before displaying a scrollbar.', + 'The reference height is the full layout height except for vertically oriented legends with', + 'a `yref` of `"paper"`, where the reference height is the plot height.' ].join(' ') }, borderwidth: { diff --git a/src/components/legend/defaults.js b/src/components/legend/defaults.js index 470f52b45f0..fa292be02e7 100644 --- a/src/components/legend/defaults.js +++ b/src/components/legend/defaults.js @@ -188,7 +188,7 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) { coerce('xanchor', defaultXAnchor); coerce('yanchor', defaultYAnchor); - coerce('hmaxheight'); + coerce('maxheight', isHorizontal ? 0.5 : 1); coerce('valign'); Lib.noneOrAll(containerIn, containerOut, ['x', 'y']); diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 9fdf3587760..d29dd859f44 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -769,15 +769,9 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var traceGroupGap = legendObj.tracegroupgap; var legendGroupWidths = {}; - // - if below/above plot area, give it the user defined maximum potential margin-push value - // - otherwise, extend the height of the plot area - if (isBelowPlotArea || isAbovePlotArea) { - legendObj._maxHeight = legendObj.hmaxheight > 1 - ? legendObj.hmaxheight - : fullLayout.height * legendObj.hmaxheight; - } else { - legendObj._maxHeight = Math.max(gs.h, 30); - } + var { maxheight, orientation, yref } = legendObj; + var heightToBeScaled = orientation === "v" && yref === "paper" ? gs.h : fullLayout.height; + legendObj._maxHeight = Math.max(maxheight > 1 ? maxheight : maxheight * heightToBeScaled, 30); var toggleRectWidth = 0; legendObj._width = 0; From 2ad5ed5039e37b88478f4edf86b9430f2c17868e Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Fri, 21 Feb 2025 06:10:49 -0700 Subject: [PATCH 10/11] Update schema --- test/plot-schema.json | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/test/plot-schema.json b/test/plot-schema.json index fb2ab338186..c67fbb21eb2 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -3396,13 +3396,6 @@ "valType": "integer" } }, - "hmaxheight": { - "description": "If greater than one, it sets the max height (in px) of the horizontaly aligned legend. Otherwise, it sets the max height ratio (layout * ratio) of the visible legend when horizontaly aligned. Default value is 0.5; the legend will take up to 50% of the layout height before displaying a scrollbar.", - "dflt": 0.5, - "editType": "legend", - "min": 0, - "valType": "number" - }, "indentation": { "description": "Sets the indentation (in px) of the legend entries.", "dflt": 0, @@ -3449,6 +3442,12 @@ "min": 30, "valType": "number" }, + "maxheight": { + "description": "Sets the max height (in px) of the legend, or max height ratio (reference height * ratio) if less than one. Default value is: 0.5 for horizontal legends; 1 for vertical legends. The minimum allowed height is 30px. For a ratio of 0.5, the legend will take up to 50% of the reference height before displaying a scrollbar. The reference height is the full layout height except for vertically oriented legends with a \"paper\" yref, where the reference height is the plot height.", + "editType": "legend", + "min": 0, + "valType": "number" + }, "orientation": { "description": "Sets the orientation of the legend.", "dflt": "v", From 6a2abc513f1b41c2c2f512e1cc0520610baf7688 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Tue, 25 Feb 2025 12:27:12 -0700 Subject: [PATCH 11/11] Update schema --- test/plot-schema.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/plot-schema.json b/test/plot-schema.json index c67fbb21eb2..25532360b03 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -3443,7 +3443,7 @@ "valType": "number" }, "maxheight": { - "description": "Sets the max height (in px) of the legend, or max height ratio (reference height * ratio) if less than one. Default value is: 0.5 for horizontal legends; 1 for vertical legends. The minimum allowed height is 30px. For a ratio of 0.5, the legend will take up to 50% of the reference height before displaying a scrollbar. The reference height is the full layout height except for vertically oriented legends with a \"paper\" yref, where the reference height is the plot height.", + "description": "Sets the max height (in px) of the legend, or max height ratio (reference height * ratio) if less than one. Default value is: 0.5 for horizontal legends; 1 for vertical legends. The minimum allowed height is 30px. For a ratio of 0.5, the legend will take up to 50% of the reference height before displaying a scrollbar. The reference height is the full layout height except for vertically oriented legends with a `yref` of `\"paper\"`, where the reference height is the plot height.", "editType": "legend", "min": 0, "valType": "number"