Merge pull request #3214 from plotly/pie-bar-textcolor-restyle

pie/bar textfont-color restyles

Author: etpinard

src/traces/bar/attributes.js

@@ -18,6 +18,7 @@ var extendFlat = require('../../lib/extend').extendFlat;
 var textFontAttrs = fontAttrs({
     editType: 'calc',
     arrayOk: true,
+    colorEditType: 'style',
     description: ''
 });
 

src/traces/pie/attributes.js

@@ -18,7 +18,7 @@ var extendFlat = require('../../lib/extend').extendFlat;
 var textFontAttrs = fontAttrs({
     editType: 'calc',
     arrayOk: true,
-    colorEditType: 'style',
+    colorEditType: 'plot',
     description: 'Sets the font used for `textinfo`.'
 });
 

test/jasmine/tests/bar_test.js

@@ -1083,6 +1083,7 @@ describe('A bar plot', function() {
         .catch(failTest)
         .then(done);
     });
+
     it('should show bar texts (outside case)', function(done) {
         var data = [{
             y: [10, -20, 30],
@@ -1736,6 +1737,39 @@ describe('A bar plot', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should be able to react with new text colors', function(done) {
+        Plotly.react(gd, [{
+            type: 'bar',
+            y: [1, 2, 3],
+            text: ['A', 'B', 'C'],
+            textposition: 'inside'
+        }])
+        .then(assertTextFontColors(['rgb(255, 255, 255)', 'rgb(255, 255, 255)', 'rgb(255, 255, 255)']))
+        .then(function() {
+            gd.data[0].insidetextfont = {color: 'red'};
+            return Plotly.react(gd, gd.data);
+        })
+        .then(assertTextFontColors(['rgb(255, 0, 0)', 'rgb(255, 0, 0)', 'rgb(255, 0, 0)']))
+        .then(function() {
+            delete gd.data[0].insidetextfont.color;
+            gd.data[0].textfont = {color: 'blue'};
+            return Plotly.react(gd, gd.data);
+        })
+        .then(assertTextFontColors(['rgb(0, 0, 255)', 'rgb(0, 0, 255)', 'rgb(0, 0, 255)']))
+        .then(function() {
+            gd.data[0].textposition = 'outside';
+            return Plotly.react(gd, gd.data);
+        })
+        .then(assertTextFontColors(['rgb(0, 0, 255)', 'rgb(0, 0, 255)', 'rgb(0, 0, 255)']))
+        .then(function() {
+            gd.data[0].outsidetextfont = {color: 'red'};
+            return Plotly.react(gd, gd.data);
+        })
+        .then(assertTextFontColors(['rgb(255, 0, 0)', 'rgb(255, 0, 0)', 'rgb(255, 0, 0)']))
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('bar visibility toggling:', function() {

test/jasmine/tests/pie_test.js

@@ -691,6 +691,62 @@ describe('Pie traces', function() {
               .then(done);
         });
     });
+
+    it('should be able to restyle title color', function(done) {
+        function _assert(msg, exp) {
+            var title = d3.select('.titletext > text').node();
+            expect(title.style.fill).toBe(exp.color, msg);
+        }
+
+        Plotly.plot(gd, [{
+            type: 'pie',
+            values: [1, 2, 3],
+            title: 'yo',
+            titlefont: {color: 'blue'}
+        }])
+        .then(function() {
+            _assert('base', {color: 'rgb(0, 0, 255)'});
+            return Plotly.restyle(gd, 'titlefont.color', 'red');
+        })
+        .then(function() {
+            _assert('base', {color: 'rgb(255, 0, 0)'});
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('should be able to react with new text colors', function(done) {
+        Plotly.plot(gd, [{
+            type: 'pie',
+            values: [1, 2, 3],
+            text: ['A', 'B', 'C'],
+            textposition: 'inside'
+        }])
+        .then(_checkFontColors(['rgb(255, 255, 255)', 'rgb(68, 68, 68)', 'rgb(255, 255, 255)']))
+        .then(function() {
+            gd.data[0].insidetextfont = {color: 'red'};
+            return Plotly.react(gd, gd.data);
+        })
+        .then(_checkFontColors(['rgb(255, 0, 0)', 'rgb(255, 0, 0)', 'rgb(255, 0, 0)']))
+        .then(function() {
+            delete gd.data[0].insidetextfont.color;
+            gd.data[0].textfont = {color: 'blue'};
+            return Plotly.react(gd, gd.data);
+        })
+        .then(_checkFontColors(['rgb(0, 0, 255)', 'rgb(0, 0, 255)', 'rgb(0, 0, 255)']))
+        .then(function() {
+            gd.data[0].textposition = 'outside';
+            return Plotly.react(gd, gd.data);
+        })
+        .then(_checkFontColors(['rgb(0, 0, 255)', 'rgb(0, 0, 255)', 'rgb(0, 0, 255)']))
+        .then(function() {
+            gd.data[0].outsidetextfont = {color: 'red'};
+            return Plotly.react(gd, gd.data);
+        })
+        .then(_checkFontColors(['rgb(255, 0, 0)', 'rgb(255, 0, 0)', 'rgb(255, 0, 0)']))
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('pie hovering', function() {