Move property out of hoverlabel, use Axis.tickText for formatting, write tests

Author: jdugge

src/components/fx/attributes.js

@@ -50,17 +50,6 @@ module.exports = {
                 '`namelength - 3` characters and add an ellipsis.'
             ].join(' ')
         },
-        zformat: {
-            valType: 'string',
-            dflt: '',
-            role: 'style',
-            editType: 'none',
-            description: [
-                'Sets the hover text formatting rule using d3 formatting mini-languages',
-                'which are very similar to those in Python. See:',
-                'https://github.com/d3/d3-format/blob/master/README.md#locale_format'
-            ].join(' ')
-        },
         editType: 'calc'
     }
 };

src/components/fx/calc.js

@@ -42,7 +42,6 @@ module.exports = function calc(gd) {
         fillFn(trace.hoverlabel.font.color, cd, 'htc');
         fillFn(trace.hoverlabel.font.family, cd, 'htf');
         fillFn(trace.hoverlabel.namelength, cd, 'hnl');
-        fillFn(trace.hoverlabel.zformat, cd, 'hzf');
     }
 };
 

src/components/fx/hover.js

@@ -1054,7 +1054,6 @@ function cleanPoint(d, hovermode) {
     fill('fontSize', 'hts', 'hoverlabel.font.size');
     fill('fontColor', 'htc', 'hoverlabel.font.color');
     fill('nameLength', 'hnl', 'hoverlabel.namelength');
-    fill('zformat', 'hzf', 'hoverlabel.zformat');
 
     d.posref = hovermode === 'y' ? (d.x0 + d.x1) / 2 : (d.y0 + d.y1) / 2;
 
@@ -1096,12 +1095,8 @@ function cleanPoint(d, hovermode) {
         d.yVal = d.ya.c2d(d.yLabelVal);
     }
 
-    if(d.zLabelVal !== undefined) {
-        if(d.zformat !== undefined) {
-            d.zLabel = d3.format(d.zformat)(d.zLabelVal).replace(/-/g, constants.MINUS_SIGN);
-        } else {
-            d.zLabel = String(d.zLabelVal);
-        }
+    if(d.zLabelVal !== undefined && d.zLabel === undefined) { // Traces like heatmaps generate the zLabel in their hoverPoints function
+        d.zLabel = String(d.zLabelVal);
     }
 
     // for box means and error bars, add the range to the label

src/components/fx/hoverlabel_defaults.js

@@ -16,6 +16,5 @@ module.exports = function handleHoverLabelDefaults(contIn, contOut, coerce, opts
     coerce('hoverlabel.bgcolor', opts.bgcolor);
     coerce('hoverlabel.bordercolor', opts.bordercolor);
     coerce('hoverlabel.namelength', opts.namelength);
-    coerce('hoverlabel.zformat', opts.zformat);
     Lib.coerceFont(coerce, 'hoverlabel.font', opts.font);
 };

src/traces/heatmap/attributes.js

@@ -100,6 +100,17 @@ module.exports = extendFlat({}, {
         editType: 'plot',
         description: 'Sets the vertical gap (in pixels) between bricks.'
     },
+    zhoverformat: {
+        valType: 'string',
+        dflt: '',
+        role: 'style',
+        editType: 'none',
+        description: [
+            'Sets the hover text formatting rule using d3 formatting mini-languages',
+            'which are very similar to those in Python. See:',
+            'https://github.com/d3/d3-format/blob/master/README.md#locale_format'
+        ].join(' ')
+    },
 },
     colorscaleAttrs,
     { autocolorscale: extendFlat({}, colorscaleAttrs.autocolorscale, {dflt: false}) },

src/traces/heatmap/defaults.js

@@ -40,4 +40,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('connectgaps', hasColumns(traceOut) && (traceOut.zsmooth !== false));
 
     colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'});
+
+    coerce('zhoverformat');
+    traceOut._separators = layout.separators; // Needed for formatting of hoverlabel if format is not explicitly specified
 };

src/traces/heatmap/hover.js

@@ -11,6 +11,7 @@
 
 var Fx = require('../../components/fx');
 var Lib = require('../../lib');
+var Axes = require('../../plots/cartesian/axes');
 
 var MAXDIST = Fx.constants.MAXDIST;
 
@@ -26,6 +27,10 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, contour)
         y = cd0.y,
         z = cd0.z,
         zmask = cd0.zmask,
+        zmin = trace.zmin,
+        zmax = trace.zmax,
+        zhoverformat = trace.zhoverformat,
+        _separators = trace._separators,
         x2 = x,
         y2 = y,
         xl,
@@ -99,6 +104,16 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, contour)
         text = cd0.text[ny][nx];
     }
 
+    var zLabel;
+    var dummyAx = { // dummy axis for formatting the z value
+        type: 'linear',
+        range: [zmin, zmax],
+        hoverformat: zhoverformat,
+        _separators: _separators
+    };
+    var zLabelObj = Axes.tickText(dummyAx, zVal, 'hover');
+    zLabel = zLabelObj.text;
+
     return [Lib.extendFlat(pointData, {
         index: [ny, nx],
         // never let a 2D override 1D type as closest point
@@ -110,6 +125,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, contour)
         xLabelVal: xl,
         yLabelVal: yl,
         zLabelVal: zVal,
+        zLabel: zLabel,
         text: text
     })];
 };

test/image/mocks/heatmap_hoverlabel.json

@@ -616,10 +616,11 @@ describe('heatmap hover', function() {
         return hoverData;
     }
 
-    function assertLabels(hoverPoint, xLabel, yLabel, zLabel, text) {
-        expect(hoverPoint.xLabelVal).toEqual(xLabel, 'have correct x label');
-        expect(hoverPoint.yLabelVal).toEqual(yLabel, 'have correct y label');
-        expect(hoverPoint.zLabelVal).toEqual(zLabel, 'have correct z label');
+    function assertLabels(hoverPoint, xLabelVal, yLabelVal, zLabelVal, zLabel, text) {
+        expect(hoverPoint.xLabelVal).toEqual(xLabelVal, 'have correct x label value');
+        expect(hoverPoint.yLabelVal).toEqual(yLabelVal, 'have correct y label value');
+        expect(hoverPoint.zLabelVal).toEqual(zLabelVal, 'have correct z label value');
+        expect(hoverPoint.zLabel).toEqual(zLabel, 'have correct z label');
         expect(hoverPoint.text).toEqual(text, 'have correct text label');
     }
 
@@ -640,14 +641,14 @@ describe('heatmap hover', function() {
             var pt = _hover(gd, 0.5, 0.5)[0];
 
             expect(pt.index).toEqual([1, 0], 'have correct index');
-            assertLabels(pt, 1, 1, 4);
+            assertLabels(pt, 1, 1, 4, '4');
         });
 
         it('should find closest point (case 2) and should', function() {
             var pt = _hover(gd, 1.5, 0.5)[0];
 
             expect(pt.index).toEqual([0, 0], 'have correct index');
-            assertLabels(pt, 2, 0.2, 6);
+            assertLabels(pt, 2, 0.2, 6, '6');
         });
     });
 
@@ -673,13 +674,47 @@ describe('heatmap hover', function() {
             var pt = _hover(gd, 0.5, 0.5)[0];
 
             expect(pt.index).toEqual([0, 0], 'have correct index');
-            assertLabels(pt, 1, 1, 10, 'a');
+            assertLabels(pt, 1, 1, 10, '10', 'a');
 
             Plotly.relayout(gd, 'xaxis.range', [1, 2]).then(function() {
                 var pt2 = _hover(gd, 1.5, 0.5)[0];
 
                 expect(pt2.index).toEqual([0, 1], 'have correct index');
-                assertLabels(pt2, 2, 1, 4, 'b');
+                assertLabels(pt2, 2, 1, 4, '4', 'b');
+            })
+            .then(done);
+        });
+
+    });
+
+    describe('for hovering with specific number format', function() {
+
+        beforeAll(function(done) {
+            gd = createGraphDiv();
+
+            Plotly.plot(gd, [{
+                type: 'heatmap',
+                x: [1, 2, 3],
+                y: [1, 1, 1],
+                z: [0.123456789, 2.9999, 4],
+                zhoverformat: '.2f'
+            }])
+            .then(done);
+        });
+
+        afterAll(destroyGraphDiv);
+
+        it('should find closest point and should', function(done) {
+            var pt = _hover(gd, 0.5, 0.5)[0];
+
+            expect(pt.index).toEqual([0, 0], 'have correct index');
+            assertLabels(pt, 1, 1, 0.123456789, '0.12');
+
+            Plotly.relayout(gd, 'xaxis.range', [1, 2]).then(function() {
+                var pt2 = _hover(gd, 1.5, 0.5)[0];
+
+                expect(pt2.index).toEqual([0, 1], 'have correct index');
+                assertLabels(pt2, 2, 1, 2.9999, '3.00');
             })
             .then(done);
         });

test/jasmine/tests/heatmap_test.js

@@ -499,6 +499,43 @@ describe('hover info', function() {
             .catch(fail)
             .then(done);
         });
+
+        it('should display correct label content with specified format', function(done) {
+            var gd = createGraphDiv();
+
+            Plotly.plot(gd, [{
+                type: 'heatmap',
+                y: [0, 1],
+                z: [[1.11111, 2.2222, 3.33333], [4.44444, 5.55555, 6.66666]],
+                name: 'one',
+                zhoverformat: '.2f'
+            }, {
+                type: 'heatmap',
+                y: [2, 3],
+                z: [[1, 2, 3], [2, 2, 1]],
+                name: 'two'
+            }], {
+                width: 500,
+                height: 400,
+                margin: {l: 0, t: 0, r: 0, b: 0}
+            })
+            .then(function() {
+                _hover(gd, 250, 100);
+                assertHoverLabelContent({
+                    nums: 'x: 1\ny: 3\nz: 2',
+                    name: 'two'
+                });
+            })
+            .then(function() {
+                _hover(gd, 250, 300);
+                assertHoverLabelContent({
+                    nums: 'x: 1\ny: 1\nz: 5.56',
+                    name: 'one'
+                });
+            })
+            .catch(fail)
+            .then(done);
+        });
     });
 
     describe('hoverformat', function() {