better centering of legend items with fill

plotly · Aug 9, 2018 · 7f0db7c · etpinard · Aug 10, 2018 · etpinard
1 parent 597a845
commit 7f0db7c
Show file tree

Hide file tree

Showing 19 changed files with 16 additions and 4 deletions.
diff --git a/src/components/legend/style.js b/src/components/legend/style.js
@@ -83,13 +83,23 @@ module.exports = function style(s, gd) {
             }
         }
 
+        // with fill and no markers or text, move the line and fill up a bit
+        // so it's more centered
+        var markersOrText = subTypes.hasMarkers(trace) || subTypes.hasText(trace);
+        var anyFill = showFill || showGradientFill;
+        var anyLine = showLine || showGradientLine;
+        var pathStart = (markersOrText || !anyFill) ? 'M5,0' :
+            // with a line leave it slightly below center, to leave room for the
+            // line thickness and because the line is usually more prominent
+            anyLine ? 'M5,-2' : 'M5,-3';
+
         var this3 = d3.select(this);
 
         var fill = this3.select('.legendfill').selectAll('path')
             .data(showFill || showGradientFill ? [d] : []);
         fill.enter().append('path').classed('js-fill', true);
         fill.exit().remove();
-        fill.attr('d', 'M5,0h30v6h-30z')
+        fill.attr('d', pathStart + 'h30v6h-30z')
             .call(showFill ? Drawing.fillGroupStyle : fillGradient);
 
         var line = this3.select('.legendlines').selectAll('path')
@@ -103,7 +113,7 @@ module.exports = function style(s, gd) {
         // though there *is* no vertical variation in this case.
         // so add an invisibly small angle to the line
         // This issue (and workaround) exist across (Mac) Chrome, FF, and Safari
-        line.attr('d', showGradientLine ? 'M5,0l30,0.0001' : 'M5,0h30')
+        line.attr('d', pathStart + (showGradientLine ? 'l30,0.0001' : 'h30'))
             .call(showLine ? Drawing.lineGroupStyle : lineGradient);
 
         function fillGradient(s) {

diff --git a/test/image/baselines/15.png b/test/image/baselines/15.png
diff --git a/test/image/baselines/5.png b/test/image/baselines/5.png
diff --git a/test/image/baselines/airfoil.png b/test/image/baselines/airfoil.png
diff --git a/test/image/baselines/cheater.png b/test/image/baselines/cheater.png
diff --git a/test/image/baselines/cheater_constraints.png b/test/image/baselines/cheater_constraints.png
diff --git a/test/image/baselines/cheater_fully_filled.png b/test/image/baselines/cheater_fully_filled.png
diff --git a/test/image/baselines/cheater_smooth.png b/test/image/baselines/cheater_smooth.png
diff --git a/test/image/baselines/connectgaps_2d.png b/test/image/baselines/connectgaps_2d.png
diff --git a/test/image/baselines/contour_constraints.png b/test/image/baselines/contour_constraints.png
diff --git a/test/image/baselines/contour_heatmap_coloring.png b/test/image/baselines/contour_heatmap_coloring.png
diff --git a/test/image/baselines/contour_legend.png b/test/image/baselines/contour_legend.png
diff --git a/test/image/baselines/error_bar_layers.png b/test/image/baselines/error_bar_layers.png
diff --git a/test/image/baselines/range_slider.png b/test/image/baselines/range_slider.png
diff --git a/test/image/baselines/range_slider_initial_expanded.png b/test/image/baselines/range_slider_initial_expanded.png
diff --git a/test/image/baselines/range_slider_initial_valid.png b/test/image/baselines/range_slider_initial_valid.png
diff --git a/test/image/baselines/yaxis-over-yaxis2.png b/test/image/baselines/yaxis-over-yaxis2.png
diff --git a/test/image/mocks/colorscale_opacity.json b/test/image/mocks/colorscale_opacity.json
@@ -567,6 +567,7 @@
         },
         "height": 450,
         "width": 1100,
-        "autosize": true
+        "autosize": true,
+        "showlegend": false
     }
 }
diff --git a/test/image/mocks/contour_scatter.json b/test/image/mocks/contour_scatter.json
@@ -341,7 +341,8 @@
       "line": {
         "color": "black"
       },
-      "type": "scatter"
+      "type": "scatter",
+      "showlegend": false
     }
   ]
 }