Unique colors for expanded traces

src/components/colorscale/color_attributes.js

@@ -23,7 +23,8 @@ module.exports = function makeColorScaleAttributes(context) {
                 ' or an array of numbers that are mapped to the colorscale',
                 ' relative to the max and min values of the array or relative to',
                 ' `cmin` and `cmax` if set.'
-            ].join('')
+            ].join(''),
+            useExpandedTraceDefaultColor: true
         },
         colorscale: extendDeep({}, colorScaleAttributes.colorscale, {
             description: [

src/plots/plots.js

@@ -659,6 +659,41 @@ plots.linkSubplots = function(newFullData, newFullLayout, oldFullData, oldFullLa
     }
 };
 
+// This function clears defaults between the first and second pass of
+// supplyDefaults. It exists because otherwise null attributes are
+// supplyDefault'd and inherited as *colors* instead of an actual null
+// attribute which needs to be supplydefaulted by the individual
+// expanded traces.
+plots.clearExpandedTraceDefaultColors = function(expandedTraces) {
+    var colorAttrs, path, trace, i, j;
+
+    // A better check *might* be to explicitly check for a groupby transform
+    if(expandedTraces.length <= 1) return;
+
+    function locateExpandedTraceAttrs(attr, attrName, attrs, level) {
+        path[level] = attrName;
+        path.length = level + 1;
+        if(attr.useExpandedTraceDefaultColor) {
+            colorAttrs.push(path.join('.'));
+        }
+    }
+
+    for(i = 0; i < expandedTraces.length; i++) {
+        trace = expandedTraces[i];
+        colorAttrs = [];
+        path = [];
+
+        if(!trace || !trace._module) continue;
+
+        PlotSchema.crawl(trace._module.attributes, locateExpandedTraceAttrs);
+
+        for(j = 0; j < colorAttrs.length; j++) {
+            Lib.nestedProperty(trace, colorAttrs[j]).set(null);
+        }
+    }
+};
+
+
 plots.supplyDataDefaults = function(dataIn, dataOut, layout, fullLayout) {
     var i, fullTrace, trace;
     var modules = fullLayout._modules = [],
@@ -693,6 +728,8 @@ plots.supplyDataDefaults = function(dataIn, dataOut, layout, fullLayout) {
         if(fullTrace.transforms && fullTrace.transforms.length) {
             var expandedTraces = applyTransforms(fullTrace, dataOut, layout, fullLayout);
 
+            plots.clearExpandedTraceDefaultColors(expandedTraces);
+
             for(var j = 0; j < expandedTraces.length; j++) {
                 var expandedTrace = expandedTraces[j],
                     fullExpandedTrace = plots.supplyTraceDefaults(expandedTrace, cnt, fullLayout, i);

src/traces/scatter/attributes.js

@@ -124,7 +124,8 @@ module.exports = {
         color: {
             valType: 'color',
             role: 'style',
-            description: 'Sets the line color.'
+            description: 'Sets the line color.',
+            useExpandedTraceDefaultColor: true
         },
         width: {
             valType: 'number',
@@ -203,6 +204,7 @@ module.exports = {
     fillcolor: {
         valType: 'color',
         role: 'style',
+        useExpandedTraceDefaultColor: true,
         description: [
             'Sets the fill color.',
             'Defaults to a half-transparent variant of the line color,',

test/image/mocks/groupby_coloring.json

@@ -0,0 +1,23 @@
+{
+  "data": [{
+    "x": [2, 3, 4, 5, 6, 7],
+    "y": [3, 2, 4, 3, 5, 4],
+    "transforms": [{
+      "type": "groupby",
+      "groups": ["c", "b", "d", "c", "e", "d"]
+    }]
+  }, {
+    "x": [2, 3, 4, 5, 6, 7],
+    "y": [9, 8, 10, 9, 11, 10],
+    "marker": {
+      "symbol": "square"
+    },
+    "transforms": [{
+      "type": "groupby",
+      "groups": ["c", "b", "d", "c", "e", "d"]
+    }]
+  }],
+  "layout": {
+    "title": "Groupby expanded trace coloring"
+  }
+}

test/jasmine/tests/transform_expanded_trace_test.js

@@ -0,0 +1,30 @@
+var Plots = require('@src/plots/plots');
+
+describe('groupby', function() {
+    it('varies the color for each expanded trace', function() {
+        var uniqueColors = {};
+        var dataOut = [];
+        var dataIn = [{
+            y: [1, 2, 3],
+            transforms: [
+                {type: 'filter', operation: '<', value: 4},
+                {type: 'groupby', groups: ['a', 'b', 'c']}
+            ]
+        }, {
+            y: [4, 5, 6],
+            transforms: [
+                {type: 'filter', operation: '<', value: 4},
+                {type: 'groupby', groups: ['a', 'b', 'b']}
+            ]
+        }];
+
+        Plots.supplyDataDefaults(dataIn, dataOut, {}, {});
+
+        for(var i = 0; i < dataOut.length; i++) {
+            uniqueColors[dataOut[i].marker.color] = true;
+        }
+
+        // Confirm that five total colors exist:
+        expect(Object.keys(uniqueColors).length).toEqual(5);
+    });
+});