8000 legend indentation by my-tien · Pull Request #6874 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

legend indentation #6874

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 10 commits into from
Feb 27, 2024
Merged

legend indentation #6874

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e313945
layout.legend.indentation property for indenting the legend entries r…
my-tien Jan 31, 2024
c394b5a
legend indentation draftlog file
my-tien Jan 31, 2024
9af4c90
Add indentation to textGap as well
my-tien Jan 31, 2024
fcae366
Fix layout title property (title as string prop is deprecated)
my-tien Jan 31, 2024
5afa75c
Let baseline image be generated from CI
my-tien Jan 31, 2024
a3263f1
Add baseline image generated by CI
my-tien Jan 31, 2024
3a6fc9c
Set indentation min to -(min itemwidth / 2)
my-tien Feb 2, 2024
f628b36
Update indentation mock json and ensure it's created last.
my-tien Feb 2, 2024
6b38837
Remove legend_indentation.png baseline image (renamed zz-legend_inden…
my-tien Feb 2, 2024
cedc0c6
Add generated zz-legend_indentation baseline image from CI
my-tien Feb 2, 2024
File filter

Filter by extension

Filter by extension 8000
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
layout.legend.indentation property for indenting the legend entries r… 
…elative to the title
  • Loading branch information
@my-tien
my-tien committed Jan 31, 2024
commit e31394563fce9cf395598ccdbd2138dccf11ea31
7 changes: 7 additions & 0 deletions src/components/legend/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,13 @@ module.exports = {
editType: 'legend',
description: 'Determines what entrywidth means.',
},
indentation: {
valType: 'number',
min: 0,
Copy link
Collaborator

Choose a reason for hiding this comment

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

I could see us allowing negative indentation, to remove or reduce the padding to the left of many of the symbols. Many if not most legend symbols don't use the full itemwidth. The risk here is allowing symbols to bleed off the edge of the legend if you go too far, but I think that's acceptable if you have explicitly set a negative indentation. Maybe min: -15, ie half the minimum itemwidth?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes the bleeding off the left edge was my concern as well. I have adapted the test image to showcase how it looks to indent with -15 for a line and a bar legend entry.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Oh cool, we clip at the edge of the legend, that's perfect.

dflt: 0,
editType: 'legend',
description: 'Sets the indentation (in px) of the legend entries.',
},
itemsizing: {
valType: 'enumerated',
values: ['trace', 'constant'],
Expand Down
1 change: 1 addition & 0 deletions src/components/legend/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) {

coerce('entrywidth');
coerce('entrywidthmode');
coerce('indentation');
coerce('itemsizing');
coerce('itemwidth');

Expand Down
6 changes: 3 additions & 3 deletions src/components/legend/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,7 +541,7 @@ function drawTexts(g, gd, legendObj) {
.call(Drawing.font, font)
.text(isEditable ? ensureLength(name, maxNameLength) : name);

var textGap = legendObj.itemwidth + constants.itemGap * 2;
var textGap = legendObj.indentation + legendObj.itemwidth + constants.itemGap * 2;
svgTextUtils.positionText(textEl, textGap, 0);

if(isEditable) {
Expand Down Expand Up @@ -700,10 +700,10 @@ function computeTextDimensions(g, gd, legendObj, aTitle) {
bw + lineHeight
10000 );
} else { // legend item
var x = constants.itemGap * 2 + legendObj.itemwidth;
var x = constants.itemGap * 2 + legendObj.indentation + legendObj.itemwidth;
if(legendItem.groupTitle) {
x = constants.itemGap;
width -= legendObj.itemwidth;
width -= legendObj.indentation + legendObj.itemwidth;
}

svgTextUtils.positionText(textEl,
Expand Down
9 changes: 5 additions & 4 deletions src/components/legend/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,17 @@ module.exports = function style(s, gd, legend) {
var layers = Lib.ensureSingle(traceGroup, 'g', 'layers');
layers.style('opacity', d[0].trace.opacity);

var indentation = legend.indentation;
var valign = legend.valign;
var lineHeight = d[0].lineHeight;
var height = d[0].height;

if(valign === 'middle' || !lineHeight || !height) {
if((valign === 'middle' && indentation === 0) || !lineHeight || !height) {
layers.attr('transform', null);
} else {
var factor = {top: 1, bottom: -1}[valign];
var markerOffsetY = factor * (0.5 * (lineHeight - height + 3));
layers.attr('transform', strTranslate(0, markerOffsetY));
var markerOffsetY = (factor * (0.5 * (lineHeight - height + 3))) || 0;
var markerOffsetX = legend.indentation;
layers.attr('transform', strTranslate(markerOffsetX, markerOffsetY));
}

var fill = layers
Expand Down
Binary file added test/image/baselines/legend_indentation.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.
58 changes: 58 additions & 0 deletions test/image/mocks/legend_indentation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
{
"data": [{
"y": [1, 5, 3, 4, 5],
"name": "Scatter",
"type&quo F872 t;: "scatter",
"showlegend": true
},
{
"y": [3, 2, 5, 1, 5],
"name": "Scatter2",
"type": "scatter",
"showlegend": true
},
{
"type": "pie",
"labels": ["a", "b", "c", "d"],
"values": [10, 15, 13, 17],
"domain": {"x": [0.5, 1]}
},
{
"y": [1, 3, 2, 5, 5],
"name": "Scatter 3",
"type": "scatter",
"showlegend": true,
"legend": "legend2"
},
{
"y": [1, 2, 3, 4, 5],
"name": "Bar",
"type": "bar",
"showlegend": true,
"legend": "legend2"
}
],
"layout": {
"title": "Legend Indentation",
"width": 800,
"xaxis": {"domain": [0, 0.5]},
"legend": {
"bgcolor": "lightblue",
"y": 1,
"indentation": 0,
"title": { "text": "No indent" },
"font": {
"size": 10
}
},
"legend2": {
"bgcolor": "lightgreen",
"y": 0,
"indentation": 30,
"title": { "text": "indent 30" },
"font": {
"size": 10
}
}
}
}
7 changes: 7 additions & 0 deletions test/plot-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2848,6 +2848,13 @@
"valType": "number"
}
},
"indentation": {
"description": "Sets the indentation (in px) of the legend entries.",
"dflt": 0,
"editType": "legend",
"min": 0,
"valType": "number"
},
"itemclick": {
"description": "Determines the behavior on legend item click. *toggle* toggles the visibility of the item clicked on the graph. *toggleothers* makes the clicked item the sole visible item on the graph. *false* disables legend item click interactions.",
"dflt": "toggle",
Expand Down
0