fixes #3100 - make colorscales work from templates

... trace that have `autocolorscale:true` by default

Author: etpinard

src/components/colorscale/defaults.js

@@ -16,29 +16,34 @@ var colorbarDefaults = require('../colorbar/defaults');
 
 var isValidScale = require('./scales').isValid;
 
-module.exports = function colorScaleDefaults(traceIn, traceOut, layout, coerce, opts) {
-    var prefix = opts.prefix,
-        cLetter = opts.cLetter,
-        containerStr = prefix.slice(0, prefix.length - 1),
-        containerIn = prefix ?
-            Lib.nestedProperty(traceIn, containerStr).get() || {} :
-            traceIn,
-        containerOut = prefix ?
-            Lib.nestedProperty(traceOut, containerStr).get() || {} :
-            traceOut,
-        minIn = containerIn[cLetter + 'min'],
-        maxIn = containerIn[cLetter + 'max'],
-        sclIn = containerIn.colorscale;
+function npMaybe(cont, prefix) {
+    var containerStr = prefix.slice(0, prefix.length - 1);
+    return prefix ?
+        Lib.nestedProperty(cont, containerStr).get() || {} :
+        cont;
+}
 
+module.exports = function colorScaleDefaults(traceIn, traceOut, layout, coerce, opts) {
+    var prefix = opts.prefix;
+    var cLetter = opts.cLetter;
+    var containerIn = npMaybe(traceIn, prefix);
+    var containerOut = npMaybe(traceOut, prefix);
+    var template = npMaybe(traceOut._template || {}, prefix) || {};
+
+    var minIn = containerIn[cLetter + 'min'];
+    var maxIn = containerIn[cLetter + 'max'];
     var validMinMax = isNumeric(minIn) && isNumeric(maxIn) && (minIn < maxIn);
     coerce(prefix + cLetter + 'auto', !validMinMax);
     coerce(prefix + cLetter + 'min');
     coerce(prefix + cLetter + 'max');
 
     // handles both the trace case (autocolorscale is false by default) and
     // the marker and marker.line case (autocolorscale is true by default)
+    var sclIn = containerIn.colorscale;
+    var sclTemplate = template.colorscale;
     var autoColorscaleDflt;
     if(sclIn !== undefined) autoColorscaleDflt = !isValidScale(sclIn);
+    if(sclTemplate !== undefined) autoColorscaleDflt = !isValidScale(sclTemplate);
     coerce(prefix + 'autocolorscale', autoColorscaleDflt);
 
     coerce(prefix + 'colorscale');

test/image/baselines/marker_colorscale_template.png

@@ -0,0 +1,33 @@
+{
+  "data": [
+    {
+      "type": "scatter",
+      "y": [1, 2, 3],
+      "marker": {
+        "size": 20,
+        "color": [1, 2, 3],
+        "showscale": true
+      },
+      "mode": "markers"
+    }
+  ],
+  "layout": {
+    "template": {
+      "data": {
+        "scatter": [
+          {
+            "marker": {
+              "symbol": "square",
+              "colorscale": "Viridis",
+              "colorbar": {
+                "ticks": "inside",
+                "ticklen": 10,
+                "tickcolor": "white"
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}

test/image/mocks/marker_colorscale_template.json

@@ -863,4 +863,43 @@ describe('Test colorscale restyle calls:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should work with templates', function(done) {
+        function _assert(msg, exp) {
+            var mcc = [];
+            d3.selectAll('path.point').each(function() {
+                mcc.push(getFill(this));
+            });
+
+            expect(mcc).toEqual(exp.mcc);
+        }
+
+        var template = {
+            data: {
+                scatter: [{
+                    marker: {colorscale: 'Viridis'}
+                }]
+            }
+        };
+
+        Plotly.plot(gd, [{
+            y: [1, 2, 3],
+            marker: {color: [1, 2, 3]}
+        }])
+        .then(function() {
+            _assert('base - no templates', {
+                mcc: ['rgb(220, 220, 220)', 'rgb(234, 135, 92)', 'rgb(178, 10, 28)']
+            });
+        })
+        .then(function() {
+            return Plotly.relayout(gd, 'template', template);
+        })
+        .then(function() {
+            _assert('after relayouting in template', {
+                mcc: ['rgb(68, 1, 84)', 'rgb(33, 145, 140)', 'rgb(253, 231, 37)']
+            });
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });