Skip to content
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

DRAFT: add legend.groupclick option #5849

Closed
wants to merge 1 commit into from
Closed

DRAFT: add legend.groupclick option #5849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 14 additions & 5 deletions src/components/legend/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ module.exports = {
editType: 'legend',
description: 'Sets the width (in px) of the legend item symbols (the part other than the title.text).',
},

itemclick: {
valType: 'enumerated',
values: ['toggle', 'toggleothers', false],
Expand All @@ -94,7 +93,7 @@ module.exports = {
'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* disable legend item click interactions.'
'*false* disables legend item click interactions.'
].join(' ')
},
itemdoubleclick: {
Expand All @@ -106,10 +105,21 @@ module.exports = {
'Determines the behavior on legend item double-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* disable legend item double-click interactions.'
'*false* disables legend item double-click interactions.'
].join(' ')
},
groupclick: {
valType: 'enumerated',
values: ['toggleitem', 'togglegroup', false],
dflt: 'togglegroup',
editType: 'legend',
description: [
'Determines the behavior on legend group item click.',
'*toggleitem* toggles the visibility of the individual item clicked on the graph.',
'*togglegroup* toggles the visibility of all items in the same legendgroup as the item clicked on the graph.',
'*false* disables legend group click interactions.'
Copy link
Collaborator

Choose a reason for hiding this comment

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

What's the use case for groupclick: false that isn't covered by itemclick: false? I guess you have some traces in a group and others ungrouped, and you want to allow clicks on the ungrouped traces but not on the groups? That feels weird. Unless I'm missing something, can we remove false as an option here?

Copy link
Contributor

Choose a reason for hiding this comment

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

I tend to agree that false is not a valid option here, and that groupclick should only determine what happens when you click on a grouped item AND itemclick is not false

Copy link
Contributor Author

Choose a reason for hiding this comment

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

A better way to 'lock' certain traces/legendgroups would be with a dedicated feature, so I agree to remove the "false" option here.

].join(' ')
},

x: {
valType: 'number',
min: -2,
Expand Down Expand Up @@ -208,6 +218,5 @@ module.exports = {
},
editType: 'legend',
},

editType: 'legend'
};
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 @@ -110,6 +110,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {

coerce('itemclick');
coerce('itemdoubleclick');
coerce('groupclick');

coerce('x', defaultX);
coerce('xanchor');
Expand Down
20 changes: 15 additions & 5 deletions src/components/legend/handle_click.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ module.exports = function handleClick(g, gd, numClicks) {

var itemClick = fullLayout.legend.itemclick;
var itemDoubleClick = fullLayout.legend.itemdoubleclick;
var groupClick = fullLayout.legend.groupclick;

if(numClicks === 1 && itemClick === 'toggle' && itemDoubleClick === 'toggleothers' &&
SHOWISOLATETIP && gd.data && gd._context.showTips
Expand All @@ -27,6 +28,8 @@ module.exports = function handleClick(g, gd, numClicks) {
else if(numClicks === 2) mode = itemDoubleClick;
if(!mode) return;

var toggleGroup = groupClick === undefined || groupClick === 'togglegroup';
Copy link
Collaborator

Choose a reason for hiding this comment

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

groupclick has a dflt value, so is there ever a case where we still get undefined?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No defined case indeed. (So only if it is possible to change this value manually or in case of a bug.)


var hiddenSlices = fullLayout.hiddenlabels ?
fullLayout.hiddenlabels.slice() :
[];
Expand Down Expand Up @@ -148,10 +151,16 @@ module.exports = function handleClick(g, gd, numClicks) {
}

if(hasLegendgroup) {
for(i = 0; i < fullData.length; i++) {
if(fullData[i].visible !== false && fullData[i].legendgroup === legendgroup) {
setVisibility(fullData[i], nextVisibility);
if(groupClick === false) return;

if(toggleGroup) {
for(i = 0; i < fullData.length; i++) {
if(fullData[i].visible !== false && fullData[i].legendgroup === legendgroup) {
setVisibility(fullData[i], nextVisibility);
}
}
} else {
setVisibility(fullTrace, nextVisibility);
}
} else {
setVisibility(fullTrace, nextVisibility);
Expand Down Expand Up @@ -192,7 +201,8 @@ module.exports = function handleClick(g, gd, numClicks) {
// N.B. consider traces that have a set legendgroup as toggleable
notInLegend = (fullData[i].showlegend !== true && !fullData[i].legendgroup);
isInGroup = isClicked || (hasLegendgroup && fullData[i].legendgroup === legendgroup);
setVisibility(fullData[i], (isInGroup || notInLegend) ? true : otherState);
if(isInGroup && groupClick === false) continue;
setVisibility(fullData[i], ((isInGroup && toggleGroup) || notInLegend) ? true : otherState);
break;
}
}
Expand All @@ -219,7 +229,7 @@ module.exports = function handleClick(g, gd, numClicks) {
for(i = 0; i < keys.length; i++) {
key = keys[i];
for(j = 0; j < attrIndices.length; j++) {
// Use hasOwnPropety to protect against falsey values:
// Use hasOwnProperty to protect against falsy values:
if(!attrUpdate[key].hasOwnProperty(j)) {
attrUpdate[key][j] = undefined;
}
Expand Down
15 changes: 13 additions & 2 deletions test/plot-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2683,8 +2683,19 @@
"valType": "number"
}
},
"groupclick": {
"description": "Determines the behavior on legend group item click. *toggleitem* toggles the visibility of the individual item clicked on the graph. *togglegroup* toggles the visibility of all items in the same legendgroup as the item clicked on the graph. *false* disables legend group click interactions.",
"dflt": "togglegroup",
"editType": "legend",
"valType": "enumerated",
"values": [
"toggleitem",
"togglegroup",
false
]
},
"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* disable legend item click interactions.",
"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",
"editType": "legend",
"valType": "enumerated",
Expand All @@ -2695,7 +2706,7 @@
]
},
"itemdoubleclick": {
"description": "Determines the behavior on legend item double-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* disable legend item double-click interactions.",
"description": "Determines the behavior on legend item double-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 double-click interactions.",
"dflt": "toggleothers",
"editType": "legend",
"valType": "enumerated",
Expand Down