image: fix log axis range, add support for categorical axis

Author: antoinerg

src/traces/image/attributes.js

@@ -71,14 +71,14 @@ module.exports = extendFlat({
         ].join(' ')
     },
     x0: {
-        valType: 'number',
+        valType: 'any',
         dflt: 0,
         role: 'info',
         editType: 'calc',
         description: 'Set the image\'s x position.'
     },
     y0: {
-        valType: 'number',
+        valType: 'any',
         dflt: 0,
         role: 'info',
         editType: 'calc',

src/traces/image/calc.js

@@ -15,13 +15,19 @@ module.exports = function calc(gd, trace) {
     var xa = Axes.getFromId(gd, trace.xaxis || 'x');
     var ya = Axes.getFromId(gd, trace.yaxis || 'y');
 
-    var x0 = trace.x0 - trace.dx / 2;
-    var y0 = trace.y0 - trace.dy / 2;
+    var x0 = xa.d2c(trace.x0) - trace.dx / 2;
+    var y0 = ya.d2c(trace.y0) - trace.dy / 2;
     var h = trace.z.length;
     var w = maxRowLength(trace.z);
 
-    trace._extremes[xa._id] = Axes.findExtremes(xa, [x0, x0 + w * trace.dx]);
-    trace._extremes[ya._id] = Axes.findExtremes(ya, [y0, y0 + h * trace.dy]);
+    // Set axis range
+    var i;
+    var xrange = [x0, x0 + w * trace.dx];
+    var yrange = [y0, y0 + h * trace.dy];
+    if(xa && xa.type === 'log') for(i = 0; i < w; i++) xrange.push(x0 + i * trace.dx);
+    if(ya && ya.type === 'log') for(i = 0; i < h; i++) yrange.push(y0 + i * trace.dy);
+    trace._extremes[xa._id] = Axes.findExtremes(xa, xrange);
+    trace._extremes[ya._id] = Axes.findExtremes(ya, yrange);
 
     var cd0 = {
         x0: x0,

src/traces/image/plot.js

@@ -71,12 +71,30 @@ module.exports.plot = function(gd, plotinfo, cdimage, imageLayer) {
         var h = cd0.h;
         var dx = trace.dx;
         var dy = trace.dy;
-        var left = xa.c2p(x0);
-        var right = xa.c2p(x0 + w * dx);
-        var top = ya.c2p(y0);
-        var bottom = ya.c2p(y0 + h * dy);
 
-        var temp;
+        var left, right, temp, top, bottom, i;
+        // in case of log of a negative
+        i = 0;
+        while(left === undefined && i < w) {
+            left = xa.c2p(x0 + i * dx);
+            i++;
+        }
+        i = w;
+        while(right === undefined && i > 0) {
+            right = xa.c2p(x0 + i * dx);
+            i--;
+        }
+        i = 0;
+        while(top === undefined && i < h) {
+            top = ya.c2p(y0 + i * dy);
+            i++;
+        }
+        i = h;
+        while(bottom === undefined && i > 0) {
+            bottom = ya.c2p(y0 + i * dy);
+            i--;
+        }
+
         if(right < left) {
             temp = right;
             right = left;
@@ -117,13 +135,15 @@ module.exports.plot = function(gd, plotinfo, cdimage, imageLayer) {
         trace._scaler = scaler(trace);
         var fmt = constants.colormodel[trace.colormodel].fmt;
         var c;
-        for(var i = 0; i < cd0.w; i++) {
-            if(ipx(i + 1) === ipx(i)) continue;
+        for(i = 0; i < cd0.w; i++) {
+            var ipx0 = ipx(i); var ipx1 = ipx(i + 1);
+            if(ipx1 === ipx0 || isNaN(ipx1) || isNaN(ipx0)) continue;
             for(var j = 0; j < cd0.h; j++) {
-                if(jpx(j + 1) === jpx(j) || !z[j][i]) continue;
+                var jpx0 = jpx(j); var jpx1 = jpx(j + 1);
+                if(jpx1 === jpx0 || isNaN(jpx1) || isNaN(jpx0) || !z[j][i]) continue;
                 c = trace._scaler(z[j][i]);
                 context.fillStyle = trace.colormodel + '(' + fmt(c).join(',') + ')';
-                context.fillRect(ipx(i), jpx(j), ipx(i + 1) - ipx(i), jpx(j + 1) - jpx(j));
+                context.fillRect(ipx0, jpx0, ipx1 - ipx0, jpx1 - jpx0);
             }
         }
 

test/image/baselines/image_axis_type.png

@@ -0,0 +1,33 @@
+{
+  "data": [{
+    "type": "scatter",
+    "y": ["E", "F", "G", "H"],
+    "x": ["A", "B", "C", "D"]
+    }, {
+    "type": "image",
+    "zmax": [1, 1, 1],
+    "x0": "B",
+    "y0": "F",
+    "z": [
+      [[1, 0, 0], [0, 1, 0], [0, 0, 1], [0, 0, 0]],
+      [[0, 1, 0], [0, 0, 1], [1, 0, 0], [0, 0, 0]],
+      [[1, 0, 0], [1, 0, 0], [0, 0, 1], [0, 0, 0]]
+    ]
+  }, {
+  "type": "image",
+  "zmax": [1, 1, 1],
+  "xaxis": "x2",
+  "yaxis": "y2",
+  "z": [
+    [[1, 0, 0], [0, 1, 0], [0, 0, 1], [0, 0, 0]],
+    [[0, 1, 0], [0, 0, 1], [1, 0, 0], [0, 0, 0]],
+    [[1, 0, 0], [1, 0, 0], [0, 0, 1], [0, 0, 0]]
+  ]
+}],
+    "layout": {
+      "width": 400, "height": 600, "title": {"text": "Image on categorical and log axes"},
+      "grid": {"rows": 2, "columns": 1, "pattern": "independent"},
+      "xaxis2": {"type": "log"},
+      "yaxis2": {"type": "log"}
+    }
+}