Merge pull request #267 from plotly/bug-hoverformat

Hoverformat bug with showTickLabels

Author: mdtusz

src/plots/cartesian/tick_defaults.js

@@ -29,29 +29,29 @@ module.exports = function handleTickDefaults(containerIn, containerOut, coerce,
         delete containerOut.tickcolor;
     }
 
+    var showAttrDflt = getShowAttrDflt(containerIn);
+
+    var tickPrefix = coerce('tickprefix');
+    if(tickPrefix) coerce('showtickprefix', showAttrDflt);
+
+    var tickSuffix = coerce('ticksuffix');
+    if(tickSuffix) coerce('showticksuffix', showAttrDflt);
+
     var showTickLabels = coerce('showticklabels');
     if(showTickLabels) {
         Lib.coerceFont(coerce, 'tickfont', options.font || {});
         coerce('tickangle');
 
-        var showAttrDflt = getShowAttrDflt(containerIn);
-
-        if(axType !== 'category') {
+        if(axType !== 'category'){
             var tickFormat = coerce('tickformat');
-            if(!options.noHover) coerce('hoverformat');
-
             if(!tickFormat && axType !== 'date') {
                 coerce('showexponent', showAttrDflt);
                 coerce('exponentformat');
             }
         }
-
-        var tickPrefix = coerce('tickprefix');
-        if(tickPrefix) coerce('showtickprefix', showAttrDflt);
-
-        var tickSuffix = coerce('ticksuffix');
-        if(tickSuffix) coerce('showticksuffix', showAttrDflt);
     }
+
+    if(axType !== 'category' && !options.noHover) coerce('hoverformat');
 };
 
 /*

test/jasmine/tests/axes_test.js

@@ -7,6 +7,9 @@ var Color = require('@src/components/color');
 var handleTickValueDefaults = require('@src/plots/cartesian/tick_value_defaults');
 var Axes = PlotlyInternal.Axes;
 
+var createGraph = require('../assets/create_graph_div');
+var destroyGraph = require('../assets/destroy_graph_div');
+
 
 describe('Test axes', function() {
     'use strict';
@@ -252,6 +255,79 @@ describe('Test axes', function() {
         });
     });
 
+    describe('handleTickDefaults', function() {
+        var data = [{ x: [1,2,3], y: [3,4,5] }],
+            gd;
+
+        beforeEach(function() {
+            gd = createGraph();
+        });
+
+        afterEach(destroyGraph);
+
+        it('should set defaults on bad inputs', function() {
+            var layout = {
+                yaxis: {
+                    ticklen: 'invalid',
+                    tickwidth: 'invalid',
+                    tickcolor: 'invalid',
+                    showticklabels: 'invalid',
+                    tickfont: 'invalid',
+                    tickangle: 'invalid'
+                }
+            };
+
+            PlotlyInternal.plot(gd, data, layout);
+
+            var yaxis = gd._fullLayout.yaxis;
+            expect(yaxis.ticklen).toBe(5);
+            expect(yaxis.tickwidth).toBe(1);
+            expect(yaxis.tickcolor).toBe('#444');
+            expect(yaxis.ticks).toBe('outside');
+            expect(yaxis.showticklabels).toBe(true);
+            expect(yaxis.tickfont).toEqual({ family: '"Open Sans", verdana, arial, sans-serif', size: 12, color: '#444' });
+            expect(yaxis.tickangle).toBe('auto');
+        });
+
+        it('should use valid inputs', function() {
+            var layout = {
+                yaxis: {
+                    ticklen: 10,
+                    tickwidth: 5,
+                    tickcolor: '#F00',
+                    showticklabels: true,
+                    tickfont: { family: 'Garamond', size: 72, color: '#0FF' },
+                    tickangle: -20
+                }
+            };
+
+            PlotlyInternal.plot(gd, data, layout);
+
+            var yaxis = gd._fullLayout.yaxis;
+            expect(yaxis.ticklen).toBe(10);
+            expect(yaxis.tickwidth).toBe(5);
+            expect(yaxis.tickcolor).toBe('#F00');
+            expect(yaxis.ticks).toBe('outside');
+            expect(yaxis.showticklabels).toBe(true);
+            expect(yaxis.tickfont).toEqual({ family: 'Garamond', size: 72, color: '#0FF' });
+            expect(yaxis.tickangle).toBe(-20);
+        });
+
+        it('should conditionally coerce based on showticklabels', function() {
+            var layout = {
+                yaxis: {
+                    showticklabels: false,
+                    tickangle: -90
+                }
+            };
+
+            PlotlyInternal.plot(gd, data, layout);
+
+            var yaxis = gd._fullLayout.yaxis;
+            expect(yaxis.tickangle).toBeUndefined();
+        });
+    });
+
     describe('handleTickValueDefaults', function() {
         function mockSupplyDefaults(axIn, axOut, axType) {
             function coerce(attr, dflt) {

test/jasmine/tests/gl_plot_interact_test.js

@@ -153,7 +153,7 @@ describe('Test plot structure', function() {
 
         describe('buttons resetCameraDefault3d and resetCameraLastSave3d', function() {
             // changes in scene objects are not instantaneous
-            var DELAY = 200;
+            var DELAY = 500;
 
             it('should update the scene camera', function(done) {
                 var sceneLayout = gd._fullLayout.scene,

test/jasmine/tests/hover_label_test.js

@@ -6,6 +6,7 @@ var Lib = require('@src/lib');
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var mouseEvent = require('../assets/mouse_event');
 
 describe('hover info', function() {
     'use strict';
@@ -242,4 +243,42 @@ describe('hover info', function() {
             expect(d3.selectAll('g.hovertext').select('text').selectAll('tspan').size()).toEqual(2);
         });
     });
+
+    describe('hoverformat', function() {
+
+        var data = [{
+                x: [1, 2, 3],
+                y: [0.12345, 0.23456, 0.34567]
+            }],
+            layout = {
+                yaxis: { showticklabels: true, hoverformat: ',.2r' },
+                width: 600,
+                height: 400
+            };
+
+        beforeEach(function() {
+            this. gd = createGraphDiv();
+        });
+
+        it('should display the correct format when ticklabels true', function() {
+            Plotly.plot(this.gd, data, layout);
+            mouseEvent('mousemove', 310, 220);
+
+            var hovers = d3.selectAll('g.hovertext');
+
+            expect(hovers.size()).toEqual(1);
+            expect(hovers.select('text')[0][0].textContent).toEqual('0.23');
+        });
+
+        it('should display the correct format when ticklabels false', function() {
+            layout.yaxis.showticklabels = false;
+            Plotly.plot(this.gd, data, layout);
+            mouseEvent('mousemove', 310, 220);
+
+            var hovers = d3.selectAll('g.hovertext');
+
+            expect(hovers.size()).toEqual(1);
+            expect(hovers.select('text')[0][0].textContent).toEqual('0.23');
+        });
+    });
 });