Rework groupby styles into array of objects

rreusser · rreusser · commit 67058c919777 · 2017-03-10T12:11:42.000-05:00
diff --git a/src/transforms/groupby.js b/src/transforms/groupby.js
@@ -35,14 +35,24 @@ exports.attributes = {
         ].join(' ')
     },
     style: {
-        valType: 'any',
-        dflt: {},
-        description: [
-            'Sets each group style.',
-            'For example, with `groups` set to *[\'a\', \'b\', \'a\', \'b\']*',
-            'and `style` set to *{ a: { marker: { color: \'red\' } }}',
-            'marker points in group *\'a\'* will be drawn in red.'
-        ].join(' ')
+        target: {
+            valType: 'any',
+            role: 'info',
+            description: [
+                'The group value which receives these styles.'
+            ].join(' ')
+        },
+        value: {
+            valType: 'any',
+            role: 'info',
+            dflt: {},
+            description: [
+                'Sets each group style.',
+                'For example, with `groups` set to *[\'a\', \'b\', \'a\', \'b\']*',
+                'and `style` set to *{ a: { marker: { color: \'red\' } }}',
+                'marker points in group *\'a\'* will be drawn in red.'
+            ].join(' ')
+        },
     }
 };
 
@@ -71,11 +81,27 @@ exports.supplyDefaults = function(transformIn) {
     if(!enabled) return transformOut;
 
     coerce('groups');
-    coerce('style');
+
+    var styleIn = transformIn.style;
+    var styleOut = transformOut.style = [];
+
+    if(Array.isArray(styleIn)) {
+        // If styles are an array, then sanitize them against the schema:
+        for(var i = 0; i < styleIn.length; i++) {
+            styleOut[i] = {};
+            Lib.coerce(styleIn[i], styleOut[i], exports.attributes.style, 'target');
+            Lib.coerce(styleIn[i], styleOut[i], exports.attributes.style, 'value');
+        }
+    } else {
+        // Otherwise, this is deprecated keyed-object-style styles and we
+        // just pass the object through as the index itself:
+        transformOut.style = transformIn.style;
+    }
 
     return transformOut;
 };
 
+
 /**
  * Apply transform !!!
  *
@@ -115,6 +141,7 @@ function pasteArray(newTrace, trace, j, a) {
 }
 
 function transformOne(trace, state) {
+    var i;
     var opts = state.transform;
     var groups = trace.transforms[state.transformIndex].groups;
 
@@ -128,9 +155,20 @@ function transformOne(trace, state) {
 
     var arrayAttrs = PlotSchema.findArrayAttributes(trace);
 
-    var style = opts.style || {};
+    var style = opts.style || [];
+    var styleIndex = style;
+
+    // If the styles are an array, then translate it into an index keyed on the
+    // target. Otherwise just use the object provided for the sake of backward
+    // compatibility.
+    if(Array.isArray(style)) {
+        styleIndex = {};
+        for(i = 0; i < style.length; i++) {
+            styleIndex[style[i].target] = style[i].value;
+        }
+    }
 
-    for(var i = 0; i < groupNames.length; i++) {
+    for(i = 0; i < groupNames.length; i++) {
         var groupName = groupNames[i];
 
         var newTrace = newData[i] = Lib.extendDeepNoArrays({}, trace);
@@ -145,9 +183,9 @@ function transformOne(trace, state) {
 
         newTrace.name = groupName;
 
-        // there's no need to coerce style[groupName] here
+        // there's no need to coerce styleIndex[groupName] here
         // as another round of supplyDefaults is done on the transformed traces
-        newTrace = Lib.extendDeepNoArrays(newTrace, style[groupName] || {});
+        newTrace = Lib.extendDeepNoArrays(newTrace, styleIndex[groupName] || {});
     }
 
     return newData;
diff --git a/test/jasmine/tests/transform_groupby_test.js b/test/jasmine/tests/transform_groupby_test.js
@@ -64,6 +64,69 @@ describe('groupby', function() {
             });
         });
 
+        it('Accepts deprecated object notation for styles', function(done) {
+            var oldStyleMockData = [{
+                mode: 'markers',
+                x: [1, -1, -2, 0, 1, 2, 3],
+                y: [1, 2, 3, 1, 2, 3, 1],
+                transforms: [{
+                    type: 'groupby',
+                    groups: ['a', 'a', 'b', 'a', 'b', 'b', 'a'],
+                    style: {
+                        a: {marker: {color: 'red'}},
+                        b: {marker: {color: 'blue'}}
+                    }
+                }]
+            }];
+            var data = Lib.extendDeep([], oldStyleMockData);
+            data[0].marker = { size: 20 };
+
+            var gd = createGraphDiv();
+            var dims = [4, 3];
+
+            Plotly.plot(gd, data).then(function() {
+                assertStyle(dims,
+                    ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
+                    [1, 1]
+                );
+
+                return Plotly.restyle(gd, 'marker.opacity', 0.4);
+            }).then(function() {
+                assertStyle(dims,
+                    ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
+                    [0.4, 0.4]
+                );
+
+                expect(gd._fullData[0].marker.opacity).toEqual(0.4);
+                expect(gd._fullData[1].marker.opacity).toEqual(0.4);
+
+                return Plotly.restyle(gd, 'marker.opacity', 1);
+            }).then(function() {
+                assertStyle(dims,
+                    ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
+                    [1, 1]
+                );
+
+                expect(gd._fullData[0].marker.opacity).toEqual(1);
+                expect(gd._fullData[1].marker.opacity).toEqual(1);
+
+                return Plotly.restyle(gd, {
+                    'transforms[0].style': {
+                        a: {marker: {color: 'green'}},
+                        b: {marker: {color: 'red'}}
+                    },
+                    'marker.opacity': 0.4
+                });
+            }).then(function() {
+                assertStyle(dims,
+                    ['rgb(0, 128, 0)', 'rgb(255, 0, 0)'],
+                    [0.4, 0.4]
+                );
+
+                done();
+            });
+        });
+
         it('Plotly.restyle should work', function(done) {
             var data = Lib.extendDeep([], mockData0);
             data[0].marker = { size: 20 };
@@ -98,10 +161,10 @@ describe('groupby', function() {
                 expect(gd._fullData[1].marker.opacity).toEqual(1);
 
                 return Plotly.restyle(gd, {
-                    'transforms[0].style': [
+                    'transforms[0].style': [[
                         {target: 'a', value: {marker: {color: 'green'}}},
                         {target: 'b', value: {marker: {color: 'red'}}}
-                    ],
+                    ]],
                     'marker.opacity': 0.4
                 });
             }).then(function() {
@@ -401,7 +464,7 @@ describe('groupby', function() {
                 groups: ['a', 'a', 'b', 'a', 'b', 'b', 'a'],
                 style: [
                     {target: 'a', value: {marker: {color: 'red'}}},
-                    {taret: 'b', value: {marker: {color: 'blue'}}}
+                    {target: 'b', value: {marker: {color: 'blue'}}}
                 ]
             }]
         }];
