diff --git a/draftlogs/5849_add.md b/draftlogs/5849_add.md new file mode 100644 index 00000000000..68c2ca0aa0e --- /dev/null +++ b/draftlogs/5849_add.md @@ -0,0 +1,2 @@ + - Add `legend.groupclick` options [[#5849](https://github.com/plotly/plotly.js/pull/5849), [#5906](https://github.com/plotly/plotly.js/pull/5906)], + with thanks to @brussee for the contribution! \ No newline at end of file diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index 28a3d00fd25..e5713595d39 100644 --- a/src/components/legend/attributes.js +++ b/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,20 @@ 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'], + 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.' ].join(' ') }, - x: { valType: 'number', min: -2, @@ -208,6 +217,5 @@ module.exports = { }, editType: 'legend', }, - editType: 'legend' }; diff --git a/src/components/legend/defaults.js b/src/components/legend/defaults.js index e74575f45de..7862a631956 100644 --- a/src/components/legend/defaults.js +++ b/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'); diff --git a/src/components/legend/get_legend_data.js b/src/components/legend/get_legend_data.js index 202064202a1..a19d582b536 100644 --- a/src/components/legend/get_legend_data.js +++ b/src/components/legend/get_legend_data.js @@ -152,7 +152,7 @@ module.exports = function getLegendData(calcdata, opts) { trace: { showlegend: firstItemTrace.showlegend, legendgroup: firstItemTrace.legendgroup, - visible: firstItemTrace.visible + visible: opts.groupclick === 'toggleitem' ? true : firstItemTrace.visible } }); } diff --git a/src/components/legend/handle_click.js b/src/components/legend/handle_click.js index f2b21412f04..cdde3ce01ff 100644 --- a/src/components/legend/handle_click.js +++ b/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 === 'togglegroup'; + var hiddenSlices = fullLayout.hiddenlabels ? fullLayout.hiddenlabels.slice() : []; @@ -148,10 +151,14 @@ 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(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 +199,7 @@ 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); + setVisibility(fullData[i], ((isInGroup && toggleGroup) || notInLegend) ? true : otherState); break; } } @@ -219,7 +226,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; } diff --git a/test/jasmine/tests/legend_test.js b/test/jasmine/tests/legend_test.js index 054d2e36b07..f1c71c12bd3 100644 --- a/test/jasmine/tests/legend_test.js +++ b/test/jasmine/tests/legend_test.js @@ -1782,6 +1782,49 @@ describe('legend interaction', function() { }); }); + describe('legendgroup visibility case of groupclick: "toggleitem"', function() { + beforeEach(function(done) { + Plotly.newPlot(gd, [{ + x: [1, 2], + y: [3, 4], + visible: false + }, { + x: [1, 2, 3, 4], + y: [0, 1, 2, 3], + legendgroup: 'foo' + }, { + x: [1, 2, 3, 4], + y: [1, 3, 2, 4], + }, { + x: [1, 2, 3, 4], + y: [1, 3, 2, 4], + legendgroup: 'foo' + }], { + legend: { + groupclick: 'toggleitem' + } + }).then(done); + }); + + it('toggles visibilities', function(done) { + Promise.resolve() + .then(assertVisible([false, true, true, true])) + .then(click(0)) + .then(assertVisible([false, 'legendonly', true, true])) + .then(click(0)) + .then(assertVisible([false, true, true, true])) + .then(click(1)) + .then(assertVisible([false, true, true, 'legendonly'])) + .then(click(1)) + .then(assertVisible([false, true, true, true])) + .then(click(2)) + .then(assertVisible([false, true, 'legendonly', true])) + .then(click(2)) + .then(assertVisible([false, true, true, true])) + .then(done, done.fail); + }); + }); + describe('legend visibility toggles with groupby', function() { beforeEach(function(done) { Plotly.newPlot(gd, [{ diff --git a/test/plot-schema.json b/test/plot-schema.json index 772e34b2e65..5cb02325f61 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -2683,8 +2683,18 @@ "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.", + "dflt": "togglegroup", + "editType": "legend", + "valType": "enumerated", + "values": [ + "toggleitem", + "togglegroup" + ] + }, "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 +2705,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",