extend Drawing.gradient and use it for contour legends

alexcjohnson · alexcjohnson · commit 44aa70e0ebe2 · 2018-08-08T22:26:32.000-04:00
diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
@@ -266,43 +266,76 @@ function makePointPath(symbolNumber, r) {
 
 var HORZGRADIENT = {x1: 1, x2: 0, y1: 0, y2: 0};
 var VERTGRADIENT = {x1: 0, x2: 0, y1: 1, y2: 0};
+var stopFormatter = d3.format('~.1f');
+var gradientInfo = {
+    radial: {node: 'radialGradient'},
+    radialreversed: {node: 'radialGradient', reversed: true},
+    horizontal: {node: 'linearGradient', attrs: HORZGRADIENT},
+    horizontalreversed: {node: 'linearGradient', attrs: HORZGRADIENT, reversed: true},
+    vertical: {node: 'linearGradient', attrs: VERTGRADIENT},
+    verticalreversed: {node: 'linearGradient', attrs: VERTGRADIENT, reversed: true}
+};
+
+/**
+ * gradient: create and apply a gradient fill
+ *
+ * @param {object} sel: d3 selection to apply this gradient to
+ *     You can use `selection.call(Drawing.gradient, ...)`
+ * @param {DOM element} gd: the graph div `sel` is part of
+ * @param {string} gradientID: a unique (within this plot) identifier
+ *     for this gradient, so that we don't create unnecessary definitions
+ * @param {string} type: 'radial', 'horizontal', or 'vertical', optionally with
+ *     'reversed' at the end. Normally radial goes center to edge,
+ *     horizontal goes right to left, and vertical goes bottom to top
+ * @param {array} colorscale: as in attribute values, [[fraction, color], ...]
+ * @param {string} prop: the property to apply to, 'fill' or 'stroke'
+ */
+drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
+    var len = colorscale.length;
+    var info = gradientInfo[type];
+    var colorStops = new Array(len);
+    for(var i = 0; i < len; i++) {
+        if(info.reversed) {
+            colorStops[len - 1 - i] = [stopFormatter((1 - colorscale[i][0]) * 100), colorscale[i][1]];
+        }
+        else {
+            colorStops[i] = [stopFormatter(colorscale[i][0] * 100), colorscale[i][1]];
+        }
+    }
+
+    var fullID = 'g' + gd._fullLayout._uid + '-' + gradientID;
 
-drawing.gradient = function(sel, gd, gradientID, type, color1, color2) {
     var gradient = gd._fullLayout._defs.select('.gradients')
-        .selectAll('#' + gradientID)
-        .data([type + color1 + color2], Lib.identity);
+        .selectAll('#' + fullID)
+        .data([type + colorStops.join(';')], Lib.identity);
 
     gradient.exit().remove();
 
     gradient.enter()
-        .append(type === 'radial' ? 'radialGradient' : 'linearGradient')
+        .append(info.node)
         .each(function() {
             var el = d3.select(this);
-            if(type === 'horizontal') el.attr(HORZGRADIENT);
-            else if(type === 'vertical') el.attr(VERTGRADIENT);
-
-            el.attr('id', gradientID);
-
-            var tc1 = tinycolor(color1);
-            var tc2 = tinycolor(color2);
-
-            el.append('stop').attr({
-                offset: '0%',
-                'stop-color': Color.tinyRGB(tc2),
-                'stop-opacity': tc2.getAlpha()
-            });
-
-            el.append('stop').attr({
-                offset: '100%',
-                'stop-color': Color.tinyRGB(tc1),
-                'stop-opacity': tc1.getAlpha()
+            if(info.attrs) el.attr(info.attrs);
+
+            el.attr('id', fullID);
+
+            var stops = el.selectAll('stop')
+                .data(colorStops);
+            stops.exit().remove();
+            stops.enter().append('stop');
+
+            stops.each(function(d) {
+                var tc = tinycolor(d[1]);
+                d3.select(this).attr({
+                    offset: d[0] + '%',
+                    'stop-color': Color.tinyRGB(tc),
+                    'stop-opacity': tc.getAlpha()
+                });
             });
         });
 
-    sel.style({
-        fill: 'url(#' + gradientID + ')',
-        'fill-opacity': null
-    });
+    sel.style(prop, 'url(#' + fullID + ')')
+        .style(prop + '-opacity', null);
 };
 
 /*
@@ -425,16 +458,17 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
             if(gradientColor) perPointGradient = true;
             else gradientColor = markerGradient.color;
 
-            var gradientID = 'g' + gd._fullLayout._uid + '-' + trace.uid;
+            var gradientID = trace.uid;
             if(perPointGradient) gradientID += '-' + d.i;
 
-            sel.call(drawing.gradient, gd, gradientID, gradientType, fillColor, gradientColor);
+            drawing.gradient(sel, gd, gradientID, gradientType,
+                [[0, gradientColor], [1, fillColor]], 'fill');
         } else {
-            sel.call(Color.fill, fillColor);
+            Color.fill(sel, fillColor);
         }
 
         if(lineWidth) {
-            sel.call(Color.stroke, lineColor);
+            Color.stroke(sel, lineColor);
         }
     }
 };
diff --git a/src/components/legend/style.js b/src/components/legend/style.js
@@ -61,25 +61,67 @@ module.exports = function style(s, gd) {
         var showFill = trace.visible && trace.fill && trace.fill !== 'none';
         var showLine = subTypes.hasLines(trace);
         var contours = trace.contours;
+        var showGradientLine = false;
+        var showGradientFill = false;
 
-        if(contours && contours.type === 'constraint') {
-            showLine = contours.showlines;
-            showFill = contours._operation !== '=';
+        if(contours) {
+            var coloring = contours.coloring;
+
+            if(coloring === 'lines') {
+                showGradientLine = true;
+            }
+            else {
+                showLine = coloring === 'none' || contours.showlines;
+            }
+
+            if(contours.type === 'constraint') {
+                showFill = contours._operation !== '=';
+            }
+            else if(coloring === 'fill' || coloring === 'heatmap') {
+                showGradientFill = true;
+            }
         }
 
-        var fill = d3.select(this).select('.legendfill').selectAll('path')
-            .data(showFill ? [d] : []);
+        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')
-            .call(Drawing.fillGroupStyle);
+            .call(showFill ? Drawing.fillGroupStyle : fillGradient);
 
-        var line = d3.select(this).select('.legendlines').selectAll('path')
-            .data(showLine ? [d] : []);
-        line.enter().append('path').classed('js-line', true)
-            .attr('d', 'M5,0h30');
+        var line = this3.select('.legendlines').selectAll('path')
+            .data(showLine || showGradientLine ? [d] : []);
+        line.enter().append('path').classed('js-line', true);
         line.exit().remove();
-        line.call(Drawing.lineGroupStyle);
+
+        // this is ugly... but you can't apply a gradient to a perfectly
+        // horizontal or vertical line. Presumably because then
+        // the system doesn't know how to scale vertical variation, even
+        // 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')
+            .call(showLine ? Drawing.lineGroupStyle : lineGradient);
+
+        function fillGradient(s) {
+            if(s.size()) {
+                var gradientID = 'legendfill-' + trace.uid;
+                Drawing.gradient(s, gd, gradientID, 'horizontalreversed',
+                    trace.colorscale, 'fill');
+            }
+        }
+
+        function lineGradient(s) {
+            if(s.size()) {
+                var gradientID = 'legendline-' + trace.uid;
+                Drawing.lineGroupStyle(s);
+                Drawing.gradient(s, gd, gradientID, 'horizontalreversed',
+                    trace.colorscale, 'stroke');
+            }
+        }
+
     }
 
     function stylePoints(d) {
diff --git a/src/traces/contour/defaults.js b/src/traces/contour/defaults.js
@@ -37,9 +37,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     var isConstraint = (coerce('contours.type') === 'constraint');
     coerce('connectgaps', Lib.isArray1D(traceOut.z));
 
-    // trace-level showlegend has already been set, but is only allowed if this is a constraint
-    if(!isConstraint) delete traceOut.showlegend;
-
     if(isConstraint) {
         handleConstraintDefaults(traceIn, traceOut, coerce, layout, defaultColor);
     }
diff --git a/src/traces/contour/style_defaults.js b/src/traces/contour/style_defaults.js
@@ -27,6 +27,10 @@ module.exports = function handleStyleDefaults(traceIn, traceOut, coerce, layout,
     }
 
     if(coloring !== 'none') {
+        // plots/plots always coerces showlegend to true, but in this case
+        // we default to false and (by default) show a colorbar instead
+        if(traceIn.showlegend !== true) traceOut.showlegend = false;
+
         colorscaleDefaults(
             traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'}
         );
diff --git a/src/traces/contourcarpet/defaults.js b/src/traces/contourcarpet/defaults.js
@@ -55,9 +55,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         coerce('text');
         var isConstraint = (coerce('contours.type') === 'constraint');
 
-        // trace-level showlegend has already been set, but is only allowed if this is a constraint
-        if(!isConstraint) delete traceOut.showlegend;
-
         if(isConstraint) {
             handleConstraintDefaults(traceIn, traceOut, coerce, layout, defaultColor, {hasHover: false});
         } else {
diff --git a/test/image/baselines/contour_legend.png b/test/image/baselines/contour_legend.png
diff --git a/test/image/mocks/contour_legend.json b/test/image/mocks/contour_legend.json
@@ -0,0 +1,36 @@
+{
+  "data":[{
+    "type": "contour",
+    "contours":{"coloring":"fills", "showlabels": true},
+    "z":[[1, 2, 1], [2, 4, 1], [3, 4, 4]],
+    "colorscale": "Greys",
+    "showscale": false,
+    "showlegend": true,
+    "name": "fills"
+  }, {
+      "type": "contour",
+      "contours":{"coloring":"lines", "showlabels": true},
+      "z":[[1, 2, 3], [4, 5, 6], [7, 8, 9]],
+      "showscale": false,
+      "showlegend": true,
+      "line": {"width": 2},
+      "name": "lines"
+  }, {
+      "type": "contour",
+      "contours":{"coloring":"none", "showlabels": true},
+      "z":[[1, 4, 7], [2, 5, 8], [3, 6, 9]],
+      "line": {"color": "#0f0"},
+      "name": "none"
+  }, {
+      "type": "contour",
+      "contours": {"type": "constraint", "operation": "[]", "value": [3, 7], "showlabels": true},
+      "z": [[3, 2, 1], [6, 5, 4], [9, 8, 7]],
+      "line": {"color": "#f88"},
+      "name": "constraint"
+  }],
+  "layout":{
+    "autosize":false,
+    "height":400,
+    "width":500
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -37,9 +37,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout`
`37`	`37`	`var isConstraint = (coerce('contours.type') === 'constraint');`
`38`	`38`	`coerce('connectgaps', Lib.isArray1D(traceOut.z));`
`39`	`39`
`40`		`- // trace-level showlegend has already been set, but is only allowed if this is a constraint`
`41`		`- if(!isConstraint) delete traceOut.showlegend;`
`42`		`-`
`43`	`40`	`if(isConstraint) {`
`44`	`41`	`handleConstraintDefaults(traceIn, traceOut, coerce, layout, defaultColor);`
`45`	`42`	`}`