add global layout defaults step for layout.hoverlabel

- and use coerced values for trace and annotation hoverlabel
  defaults.

Author: etpinard

src/components/annotations/annotation_defaults.js

@@ -11,7 +11,6 @@
 
 var Lib = require('../../lib');
 var Color = require('../color');
-var Fx = require('../fx');
 var Axes = require('../../plots/cartesian/axes');
 
 var attributes = require('./attributes');
@@ -113,14 +112,21 @@ module.exports = function handleAnnotationDefaults(annIn, annOut, fullLayout, op
     }
 
     var hoverText = coerce('hovertext');
+    var globalHoverLabel = fullLayout.hoverlabel || {};
+
     if(hoverText) {
-        var hoverBG = coerce('hoverlabel.bgcolor',
-            Color.opacity(bgColor) ? Color.rgb(bgColor) : Color.defaultLine);
-        var hoverBorder = coerce('hoverlabel.bordercolor', Color.contrast(hoverBG));
+        var hoverBG = coerce('hoverlabel.bgcolor', globalHoverLabel.bgcolor ||
+            (Color.opacity(bgColor) ? Color.rgb(bgColor) : Color.defaultLine)
+        );
+
+        var hoverBorder = coerce('hoverlabel.bordercolor', globalHoverLabel.bordercolor ||
+            Color.contrast(hoverBG)
+        );
+
         Lib.coerceFont(coerce, 'hoverlabel.font', {
-            family: Fx.constants.HOVERFONT,
-            size: Fx.constants.HOVERFONTSIZE,
-            color: hoverBorder
+            family: globalHoverLabel.font.family,
+            size: globalHoverLabel.font.size,
+            color: globalHoverLabel.font.color || hoverBorder
         });
     }
     coerce('captureevents', !!hoverText);

src/components/fx/index.js

@@ -25,6 +25,8 @@ module.exports = {
 
     attributes: require('./attributes'),
     layoutAttributes: layoutAttributes,
+
+    supplyLayoutGlobalDefaults: require('./layout_global_defaults'),
     supplyDefaults: require('./defaults'),
     supplyLayoutDefaults: require('./layout_defaults'),
 

src/components/fx/layout_attributes.js

@@ -8,6 +8,10 @@
 
 'use strict';
 
+var extendFlat = require('../../lib/extend').extendFlat;
+var fontAttrs = require('../../plots/font_attributes');
+var constants = require('./constants');
+
 module.exports = {
     dragmode: {
         valType: 'enumerated',
@@ -26,5 +30,31 @@ module.exports = {
         role: 'info',
         values: ['x', 'y', 'closest', false],
         description: 'Determines the mode of hover interactions.'
+    },
+
+    hoverlabel: {
+        bgcolor: {
+            valType: 'color',
+            role: 'style',
+            description: [
+                'Sets the background color of all hover labels on graph'
+            ].join(' ')
+        },
+        bordercolor: {
+            valType: 'color',
+            role: 'style',
+            description: [
+                'Sets the border color of all hover labels on graph.'
+            ].join(' ')
+        },
+        font: {
+            family: extendFlat({}, fontAttrs.family, {
+                dflt: constants.HOVERFONT
+            }),
+            size: extendFlat({}, fontAttrs.size, {
+                dflt: constants.HOVERFONTSIZE
+            }),
+            color: extendFlat({}, fontAttrs.color)
+        }
     }
 };

src/components/fx/layout_global_defaults.js

@@ -0,0 +1,21 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var Lib = require('../../lib');
+var handleHoverLabelDefaults = require('./hoverlabel_defaults');
+var layoutAttributes = require('./layout_attributes');
+
+module.exports = function supplyLayoutGlobalDefaults(layoutIn, layoutOut) {
+    function coerce(attr, dflt) {
+        return Lib.coerce(layoutIn, layoutOut, layoutAttributes, attr, dflt);
+    }
+
+    handleHoverLabelDefaults(layoutIn, layoutOut, coerce);
+};

src/plots/attributes.js

@@ -8,9 +8,7 @@
 
 'use strict';
 
-var constants = require('../components/fx/constants');
-var fontAttrs = require('./font_attributes');
-var extendFlat = require('../lib/extend').extendFlat;
+var fxAttrs = require('../components/fx/attributes');
 
 module.exports = {
     type: {
@@ -83,37 +81,7 @@ module.exports = {
             'But, if `none` is set, click and hover events are still fired.'
         ].join(' ')
     },
-    hoverlabel: {
-        bgcolor: {
-            valType: 'color',
-            role: 'style',
-            arrayOk: true,
-            description: [
-                'Sets the background color of the hover label.'
-            ].join(' ')
-        },
-        bordercolor: {
-            valType: 'color',
-            role: 'style',
-            arrayOk: true,
-            description: [
-                'Sets the border color of the hover label.'
-            ].join(' ')
-        },
-        font: {
-            family: extendFlat({}, fontAttrs.family, {
-                arrayOk: true,
-                dflt: constants.HOVERFONT
-            }),
-            size: extendFlat({}, fontAttrs.size, {
-                arrayOk: true,
-                dflt: constants.HOVERFONTSIZE
-            }),
-            color: extendFlat({}, fontAttrs.color, {
-                arrayOk: true
-            })
-        }
-    },
+    hoverlabel: fxAttrs.hoverlabel,
     stream: {
         token: {
             valType: 'string',

src/plots/plots.js

@@ -979,6 +979,10 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut) {
         'handleDefaults'
     )(layoutIn, layoutOut, 'calendar');
 
+    Registry.getComponentMethod(
+        'fx',
+        'supplyLayoutGlobalDefaults'
+    )(layoutIn, layoutOut, coerce);
 };
 
 plots.plotAutoSize = function plotAutoSize(gd, layout, fullLayout) {

test/jasmine/tests/fx_test.js

@@ -94,6 +94,93 @@ describe('Fx defaults', function() {
         expect(layoutOut.hovermode).toBe('x', 'hovermode to x');
         expect(layoutOut.dragmode).toBe('zoom', 'dragmode to zoom');
     });
+
+    it('should coerce trace and annotations hoverlabel using global as defaults', function() {
+        var out = _supply([{
+            type: 'bar',
+            y: [1, 2, 1],
+            hoverlabel: {
+                bgcolor: ['red', 'blue', 'black'],
+                font: { size: 40 }
+            }
+        }, {
+            type: 'scatter3d',
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            z: [1, 2, 1],
+            hoverlabel: {
+                bordercolor: 'yellow',
+                font: { color: 'red' }
+            }
+        }], {
+            annotations: [{
+                x: 0,
+                y: 1,
+                text: '1',
+                hovertext: '1'
+            }, {
+                x: 2,
+                y: 1,
+                text: '2',
+                hovertext: '2',
+                hoverlabel: {
+                    bgcolor: 'red',
+                    font: {
+                        family: 'Gravitas'
+                    }
+                }
+            }],
+            hoverlabel: {
+                bgcolor: 'white',
+                bordercolor: 'black',
+                font: {
+                    family: 'Roboto',
+                    size: 20,
+                    color: 'pink'
+                }
+            }
+        });
+
+        expect(out.data[0].hoverlabel).toEqual({
+            bgcolor: ['red', 'blue', 'black'],
+            bordercolor: 'black',
+            font: {
+                family: 'Roboto',
+                size: 40,
+                color: 'pink'
+            }
+        });
+
+        expect(out.data[1].hoverlabel).toEqual({
+            bgcolor: 'white',
+            bordercolor: 'yellow',
+            font: {
+                family: 'Roboto',
+                size: 20,
+                color: 'red'
+            }
+        });
+
+        expect(out.layout.annotations[0].hoverlabel).toEqual({
+            bgcolor: 'white',
+            bordercolor: 'black',
+            font: {
+                family: 'Roboto',
+                size: 20,
+                color: 'pink'
+            }
+        });
+
+        expect(out.layout.annotations[1].hoverlabel).toEqual({
+            bgcolor: 'red',
+            bordercolor: 'black',
+            font: {
+                family: 'Gravitas',
+                size: 20,
+                color: 'pink'
+            }
+        });
+    });
 });
 
 describe('relayout', function() {