diff --git a/src/components/legend/style.js b/src/components/legend/style.js index 3c6284d58f8..b57dafb97c9 100644 --- a/src/components/legend/style.js +++ b/src/components/legend/style.js @@ -83,21 +83,21 @@ module.exports = function style(s, gd) { } function stylePoints(d) { - var d0 = d[0], - trace = d0.trace, - showMarkers = subTypes.hasMarkers(trace), - showText = subTypes.hasText(trace), - showLines = subTypes.hasLines(trace); - + var d0 = d[0]; + var trace = d0.trace; + var showMarkers = subTypes.hasMarkers(trace); + var showText = subTypes.hasText(trace); + var showLines = subTypes.hasLines(trace); var dMod, tMod; // 'scatter3d' and 'scattergeo' don't use gd.calcdata yet; // use d0.trace to infer arrayOk attributes function boundVal(attrIn, arrayToValFn, bounds) { - var valIn = Lib.nestedProperty(trace, attrIn).get(), - valToBound = (Array.isArray(valIn) && arrayToValFn) ? - arrayToValFn(valIn) : valIn; + var valIn = Lib.nestedProperty(trace, attrIn).get(); + var valToBound = (Array.isArray(valIn) && arrayToValFn) ? + arrayToValFn(valIn) : + valIn; if(bounds) { if(valToBound < bounds[0]) return bounds[0]; @@ -115,6 +115,7 @@ module.exports = function style(s, gd) { if(showMarkers) { dEdit.mc = boundVal('marker.color', pickFirst); + dEdit.mx = boundVal('marker.symbol', pickFirst); dEdit.mo = boundVal('marker.opacity', Lib.mean, [0.2, 1]); dEdit.ms = boundVal('marker.size', Lib.mean, [2, 16]); dEdit.mlc = boundVal('marker.line.color', pickFirst); diff --git a/test/image/baselines/legend_visibility.png b/test/image/baselines/legend_visibility.png index 5f1e636add9..2c5456f8ec0 100644 Binary files a/test/image/baselines/legend_visibility.png and b/test/image/baselines/legend_visibility.png differ diff --git a/test/image/mocks/legend_visibility.json b/test/image/mocks/legend_visibility.json index 3906f5cd098..665cf7186d5 100644 --- a/test/image/mocks/legend_visibility.json +++ b/test/image/mocks/legend_visibility.json @@ -1,24 +1,90 @@ { - "data":[ - {"name":"bar A","type":"bar","y":["2","3","5","4","1"]}, - {"name":"bar B","type":"bar","visible":"legendonly","y":["3","5","7","6","8"]}, - {"name":"bar C","type":"bar","y":["2","4","6","3","8"]}, - {"name":"line A","yaxis":"y2","y":["2","3","5","4","1"]}, - {"name":"line B","yaxis":"y2","visible":"legendonly","y":["3","5","7","6","8"]}, - {"name":"line C","yaxis":"y2","y":["2","4","6","3","8"]}, - {"name":"box A","type":"box","xaxis":"x2","yaxis":"y3","y":[1,2,3,4,5,6,7,8,9]}, - {"name":"box B","type":"box","xaxis":"x2","yaxis":"y3","visible":"legendonly","y":[2,3,3,4,4,4,5,5,6]}, - {"name":"box C","type":"box","xaxis":"x2","yaxis":"y3","y":[1,4,6,7,7,8,8,8,9]} - ], - "layout": { - "showlegend":true, - "height":400, - "width":600, - "barnorm":"fraction", - "barmode":"stack", - "xaxis":{"domain":[0,0.45]}, - "xaxis2":{"anchor":"y3","domain":[0.55,1]}, - "yaxis2":{"overlaying":"y","side":"right"}, - "yaxis3":{"anchor":"x2"} + "data": [ + { + "name": "bar A", + "type": "bar", + "y": ["2", "3", "5", "4", "1"] + }, + { + "name": "bar B", + "type": "bar", + "visible": "legendonly", + "y": ["3", "5", "7", "6", "8"] + }, + { + "name": "bar C", + "type": "bar", + "y": ["2", "4", "6", "3", "8"] + }, + { + "name": "line A", + "yaxis": "y2", + "y": ["2", "3", "5", "4", "1"] + }, + { + "name": "line B", + "yaxis": "y2", + "visible": "legendonly", + "y": ["3", "5", "7", "6", "8"] + }, + { + "name": "line C", + "yaxis": "y2", + "y": ["2", "4", "6", "3", "8"] + }, + { + "name": "box A", + "type": "box", + "xaxis": "x2", + "yaxis": "y3", + "y": [1, 2, 3, 4, 5, 6, 7, 8, 9] + }, + { + "name": "box B", + "type": "box", + "xaxis": "x2", + "yaxis": "y3", + "visible": "legendonly", + "y": [2, 3, 3, 4, 4, 4, 5, 5, 6] + }, + { + "name": "box C", + "type": "box", + "xaxis": "x2", + "yaxis": "y3", + "y": [1, 4, 6, 7, 7, 8, 8, 8, 9] + }, + { + "name": "marker A", + "mode": "markers", + "visible": "legendonly", + "y": [1, 4, 6, 3, 2, 8, 8, 8, 4], + "yaxis": "y2", + "marker": { + "size": 15, + "symbol": ["square", "square", "square", "square", "square", "square", "square", "square", "square"] + } } + ], + "layout": { + "showlegend": true, + "height": 400, + "width": 600, + "barnorm": "fraction", + "barmode": "stack", + "xaxis": { + "domain": [0, 0.45] + }, + "xaxis2": { + "anchor": "y3", + "domain": [0.55, 1] + }, + "yaxis2": { + "overlaying": "y", + "side": "right" + }, + "yaxis3": { + "anchor": "x2" + } + } }