add legend.groupclick option

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

Author: Paul Brussee

src/components/legend/attributes.js

@@ -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],
@@ -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: {
@@ -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.'
         ].join(' ')
     },
-
     x: {
         valType: 'number',
         min: -2,
@@ -208,6 +218,5 @@ module.exports = {
         },
         editType: 'legend',
     },
-
     editType: 'legend'
 };

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;
                 }

test/plot-schema.json

@@ -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",
@@ -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",