Add hoverlabel.zformat attribute

Author: jdugge

src/components/fx/attributes.js

@@ -50,6 +50,17 @@ 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,6 +42,7 @@ 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,6 +1054,7 @@ 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;
 
@@ -1095,7 +1096,13 @@ function cleanPoint(d, hovermode) {
         d.yVal = d.ya.c2d(d.yLabelVal);
     }
 
-    if(d.zLabelVal !== undefined) d.zLabel = String(d.zLabelVal);
+    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);
+        }
+    }
 
     // for box means and error bars, add the range to the label
     if(!isNaN(d.xerr) && !(d.xa.type === 'log' && d.xerr <= 0)) {

src/components/fx/hoverlabel_defaults.js

@@ -16,5 +16,6 @@ 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/components/fx/layout_attributes.js

@@ -72,6 +72,17 @@ 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: 'none'
     }
 };

test/image/mocks/heatmap_hoverlabel.json

@@ -0,0 +1,39 @@
+{
+  "data": [
+    {
+      "z": [
+        [
+          0.123456789,
+          10.123456789,
+          20.123456789
+        ]
+      ],
+      "type": "heatmap"
+    },
+    {
+      "x": [0,1,2],
+      "y": [2, 2, 2],
+      "z": [
+          1.123456789,
+          2.123456789,
+          3.123456789
+        ],
+      "type": "heatmap",
+      "hoverlabel": {
+        "zformat": "undefined"
+      },
+      "zmin": 0,
+      "zmax": 20,
+      "showscale": false
+    }
+  ],
+  "layout": {
+    "title": "XXX",
+    "xaxis": {
+      "hoverformat": ".1f"
+    },
+    "hoverlabel": {
+      "zformat": ".2f"
+    }
+  }
+}