image: add (hover)text attributes with test

Author: antoinerg

src/traces/image/attributes.js

@@ -98,8 +98,18 @@ module.exports = extendFlat({
         editType: 'calc',
         description: 'Set the pixel\'s vertical size'
     },
+    text: {
+        valType: 'data_array',
+        editType: 'plot',
+        description: 'Sets the text elements associated with each z value.'
+    },
+    hovertext: {
+        valType: 'data_array',
+        editType: 'plot',
+        description: 'Same as `text`.'
+    },
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
-        flags: ['x', 'y', 'z', 'color', 'name']
+        flags: ['x', 'y', 'z', 'color', 'name', 'text']
     }),
     hovertemplate: hovertemplateAttrs({}, {
         keys: ['z', 'color', 'colormodel']

src/traces/image/defaults.js

@@ -32,5 +32,7 @@ module.exports = function supplyDefaults(traceIn, traceOut) {
     coerce('zmin', constants.colormodel[colormodel].min);
     coerce('zmax', constants.colormodel[colormodel].max);
 
+    coerce('text');
+    coerce('hovertext');
     coerce('hovertemplate');
 };

src/traces/image/event_data.js

@@ -15,5 +15,6 @@ module.exports = function eventData(out, pt) {
     if(pt.ya) out.yaxis = pt.ya;
     out.color = pt.color;
     out.colormodel = pt.trace.colormodel;
+    out.text = pt.text;
     return out;
 };

src/traces/image/hover.js

@@ -53,6 +53,13 @@ module.exports = function hoverPoints(pointData, xval, yval) {
         pointData.extraText = colormodel.toUpperCase() + ': ' + colorstring;
     }
 
+    var text;
+    if(Array.isArray(trace.hovertext) && Array.isArray(trace.hovertext[ny])) {
+        text = trace.hovertext[ny][nx];
+    } else if(Array.isArray(trace.text) && Array.isArray(trace.text[ny])) {
+        text = trace.text[ny][nx];
+    }
+
     var py = ya.c2p(cd0.y0 + (ny + 0.5) * trace.dy);
     var xVal = cd0.x0 + (nx + 0.5) * trace.dx;
     var yVal = cd0.y0 + (ny + 0.5) * trace.dy;
@@ -69,6 +76,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
         yVal: yVal,
         yLabelVal: yVal,
         zLabelVal: zLabel,
+        text: text,
         hovertemplateLabels: {
             'zLabel': zLabel,
             'colorLabel': colorstring,

test/jasmine/tests/image_test.js

@@ -420,5 +420,26 @@ describe('image hover:', function() {
                 .then(done);
             });
         });
+
+        it('should support hovertemplate variable text', function(done) {
+            var mockCopy = {data: [{
+                type: 'image',
+                z: [[[1, 0, 0], [0, 1, 0], [0, 0, 1]], [[0, 0, 1], [1, 0, 0], [0, 1, 0]]],
+                zmax: [1, 1, 1],
+                text: [['A', 'B', 'C'], ['D', 'E', 'F']],
+                hovertemplate: '%{text}<extra></extra>'
+            }], layout: {width: 400, height: 400}};
+
+            Plotly.newPlot(gd, mockCopy)
+            .then(function() {_hover(140, 200);})
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: 'E',
+                    name: ''
+                }, 'variable text should be available!');
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });