Merge pull request #2816 from plotly/legendonly-arrayok-marker-symbol

Fix legend item for 'legendonly' traces with array 'marker.symbol'

Author: etpinard

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

test/image/baselines/legend_visibility.png

@@ -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"
+    }
+  }
 }