add legend.groupclick option

toggle individual items in a legendgroup or the legendgroup as a whole

Author: Paul Brussee

src/components/legend/attributes.js

@@ -94,7 +94,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: {
@@ -106,7 +106,19 @@ 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.'
         ].join(' ')
     },
 

src/components/legend/defaults.js

@@ -110,6 +110,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 
     coerce('itemclick');
     coerce('itemdoubleclick');
+    coerce('groupclick');
 
     coerce('x', defaultX);
     coerce('xanchor');

src/components/legend/handle_click.js

@@ -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
@@ -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";
+
     var hiddenSlices = fullLayout.hiddenlabels ?
         fullLayout.hiddenlabels.slice() :
         [];
@@ -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);
@@ -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;
                 }
             }
@@ -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;
                 }