add support for per-point hoverlabel setting in 2d z traces

Author: etpinard

src/components/fx/calc.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var Lib = require('../../lib');
+var Registry = require('../../registry');
 
 module.exports = function calc(gd) {
     var calcdata = gd.calcdata;
@@ -17,12 +18,20 @@ module.exports = function calc(gd) {
         var cd = calcdata[i];
         var trace = cd[0].trace;
 
-        if(trace.hoverlabel) {
-            Lib.mergeArray(trace.hoverlabel.bgcolor, cd, 'hbg');
-            Lib.mergeArray(trace.hoverlabel.bordercolor, cd, 'hbc');
-            Lib.mergeArray(trace.hoverlabel.font.size, cd, 'hts');
-            Lib.mergeArray(trace.hoverlabel.font.color, cd, 'htc');
-            Lib.mergeArray(trace.hoverlabel.font.family, cd, 'htf');
-        }
+        if(!trace.hoverlabel) continue;
+
+        var mergeFn = Registry.traceIs(trace, '2dMap') ? paste : Lib.mergeArray;
+
+        mergeFn(trace.hoverlabel.bgcolor, cd, 'hbg');
+        mergeFn(trace.hoverlabel.bordercolor, cd, 'hbc');
+        mergeFn(trace.hoverlabel.font.size, cd, 'hts');
+        mergeFn(trace.hoverlabel.font.color, cd, 'htc');
+        mergeFn(trace.hoverlabel.font.family, cd, 'htf');
     }
 };
+
+function paste(traceAttr, cd, cdAttr) {
+    if(Array.isArray(traceAttr)) {
+        cd[0][cdAttr] = traceAttr;
+    }
+}

src/components/fx/hover.js

@@ -1053,6 +1053,7 @@ function alignHoverText(hoverLabels, rotateLabels) {
 
 function cleanPoint(d, hovermode) {
     var trace = d.trace || {};
+    var cd0 = d.cd[0];
     var cd = d.cd[d.index] || {};
 
     d.posref = hovermode === 'y' ? (d.x0 + d.x1) / 2 : (d.y0 + d.y1) / 2;
@@ -1133,10 +1134,20 @@ function cleanPoint(d, hovermode) {
     }
 
     function fill(key, calcKey, traceKey) {
-        if(cd[calcKey]) return d[key] = cd[calcKey];
+        var val;
+
+        if(cd[calcKey]) {
+            val = cd[calcKey];
+        } else if(cd0[calcKey]) {
+            var arr = cd0[calcKey];
+            if(Array.isArray(arr) && Array.isArray(arr[d.index[0]])) {
+                val = arr[d.index[0]][d.index[1]];
+            }
+        } else {
+            val = Lib.nestedProperty(trace, traceKey).get();
+        }
 
-        var traceVal = Lib.nestedProperty(trace, traceKey).get();
-        if(traceVal) return d[key] = traceVal;
+        d[key] = val;
     }
 
     fill('color', 'hbg', 'hoverlabel.bgcolor');

test/jasmine/tests/hover_label_test.js

@@ -1069,4 +1069,60 @@ describe('Test hover label custom styling:', function() {
         .catch(fail)
         .then(done);
     });
+
+    it('should work for 2d z cartesian traces', function(done) {
+        var gd = createGraphDiv();
+
+        Plotly.plot(gd, [{
+            type: 'heatmap',
+            x: [1, 2],
+            y: [1, 2],
+            z: [[1, 2], [2, 3]],
+            hoverlabel: {
+                font: {
+                    color: 'red',
+                    size: [[10, 20], [21, 11]]
+                }
+            }
+        }], {
+            hoverlabel: {
+                bordercolor: 'blue',
+                font: { family: 'Gravitas'}
+            }
+        })
+        .then(function() {
+            _hover(gd, { xval: 1, yval: 1 });
+
+            assertPtLabel({
+                path: ['rgb(68, 68, 68)', 'rgb(0, 0, 255)'],
+                text: [10, 'Gravitas', 'rgb(255, 0, 0)']
+            });
+        })
+        .then(function() {
+            _hover(gd, { xval: 2, yval: 1 });
+
+            assertPtLabel({
+                path: ['rgb(68, 68, 68)', 'rgb(0, 0, 255)'],
+                text: [20, 'Gravitas', 'rgb(255, 0, 0)']
+            });
+        })
+        .then(function() {
+            _hover(gd, { xval: 1, yval: 2 });
+
+            assertPtLabel({
+                path: ['rgb(68, 68, 68)', 'rgb(0, 0, 255)'],
+                text: [21, 'Gravitas', 'rgb(255, 0, 0)']
+            });
+        })
+        .then(function() {
+            _hover(gd, { xval: 2, yval: 2 });
+
+            assertPtLabel({
+                path: ['rgb(68, 68, 68)', 'rgb(0, 0, 255)'],
+                text: [11, 'Gravitas', 'rgb(255, 0, 0)']
+            });
+        })
+        .catch(fail)
+        .then(done);
+    });
 });