image: fix style, update attribute's valType and description

Author: antoinerg

lib/index.js

@@ -23,6 +23,7 @@ Plotly.register([
     require('./violin'),
     require('./funnel'),
     require('./waterfall'),
+    require('./image'),
 
     require('./pie'),
     require('./sunburst'),
@@ -56,7 +57,6 @@ Plotly.register([
 
     require('./sankey'),
     require('./indicator'),
-    require('./image'),
 
     require('./table'),
 

src/traces/image/attributes.js

@@ -11,6 +11,15 @@
 var plotAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
 var extendFlat = require('../../lib/extend').extendFlat;
+var colormodel = require('./constants').colormodel;
+
+var cm = ['rgb', 'rgba', 'hsl', 'hsla'];
+var zminDesc = [];
+var zmaxDesc = [];
+for(var i = 0; i < cm.length; i++) {
+    zminDesc.push('For the `' + cm[i] + '` colormodel, it is [' + colormodel[cm[i]].min.join(', ') + ']');
+    zmaxDesc.push('For the `' + cm[i] + '` colormodel, it is [' + colormodel[cm[i]].max.join(', ') + ']');
+}
 
 module.exports = extendFlat({
     z: {
@@ -23,29 +32,43 @@ module.exports = extendFlat({
     },
     colormodel: {
         valType: 'enumerated',
-        values: ['rgb', 'rgba', 'hsl', 'hsla'],
+        values: cm,
         dflt: 'rgb',
         role: 'info',
         editType: 'plot',
         description: 'Color model used to map the numerical color components described in `z` into colors.'
     },
     zmin: {
-        valType: 'data_array',
+        valType: 'info_array',
+        dimensions: '1-2',
+        items: [
+            {valType: 'number', editType: 'plot'},
+            {valType: 'number', editType: 'plot'},
+            {valType: 'number', editType: 'plot'},
+            {valType: 'number', editType: 'plot'}
+        ],
         role: 'info',
         editType: 'plot',
         description: [
             'Array defining the lower bound for each color component.',
-            'For example, for the `rgba` colormodel, the default value is [0, 0, 0, 0].'
-        ].join(' ')
+            'Note that the default value will depend on the colormodel.'
+        ].concat(zminDesc).join(' ')
     },
     zmax: {
-        valType: 'data_array',
+        valType: 'info_array',
+        dimensions: '1-2',
+        items: [
+            {valType: 'number', editType: 'plot'},
+            {valType: 'number', editType: 'plot'},
+            {valType: 'number', editType: 'plot'},
+            {valType: 'number', editType: 'plot'}
+        ],
         role: 'info',
         editType: 'plot',
         description: [
             'Array defining the higher bound for each color component.',
-            'For example, for the `rgba` colormodel, the default value is [255, 255, 255, 1].'
-        ].join(' ')
+            'Note that the default value will depend on the colormodel.'
+        ].concat(zmaxDesc).join(' ')
     },
     x0: {
         valType: 'number',

src/traces/image/calc.js

@@ -8,8 +8,6 @@
 
 'use strict';
 
-// var Registry = require('../../registry');
-// var Lib = require('../../lib');
 var Axes = require('../../plots/cartesian/axes');
 
 module.exports = function calc(gd, trace) {

src/traces/image/defaults.js

@@ -18,7 +18,7 @@ module.exports = function supplyDefaults(traceIn, traceOut) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
     var z = coerce('z');
-    if(z === undefined || !z.length) {
+    if(z === undefined || !z.length || !z[0] || !z[0].length) {
         traceOut.visible = false;
         return;
     }

src/traces/image/hover.js

@@ -12,8 +12,6 @@ var Fx = require('../../components/fx');
 var Lib = require('../../lib');
 var constants = require('./constants');
 
-// var Axes = require('../../plots/cartesian/axes');
-
 module.exports = function hoverPoints(pointData, xval, yval) {
     var cd0 = pointData.cd[0];
     var trace = cd0.trace;
@@ -26,7 +24,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
         return;
     }
 
-    // Find nearest pixel's index and pixel center
+    // Find nearest pixel's index
     var nx = Math.floor((xval - cd0.x0) / trace.dx);
     var ny = Math.floor(Math.abs(yval - cd0.y0) / trace.dy);
 
@@ -49,7 +47,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
         if(dims === 4) colorstring.push(', ' + c[3] + s[3]);
         colorstring.push(']');
         colorstring = colorstring.join('');
-        pointData.extraText = '<span style="text-transform:uppercase">' + colormodel + '</span>: ' + colorstring;
+        pointData.extraText = colormodel.toUpperCase() + ': ' + colorstring;
     }
 
     var py = ya.c2p(cd0.y0 + (ny + 0.5) * trace.dy);

src/traces/image/plot.js

@@ -15,7 +15,7 @@ var constants = require('./constants');
 module.exports = {};
 
 // Generate a function to scale color components according to zmin/zmax and the colormodel
-module.exports.scaler = function(trace) {
+var scaler = function(trace) {
     var colormodel = trace.colormodel;
     var n = colormodel.length;
     var cr = constants.colormodel[colormodel];
@@ -114,7 +114,7 @@ module.exports.plot = function(gd, plotinfo, cdimage, imageLayer) {
         var ipx = function(i) {return Lib.constrain(Math.round(xa.c2p(x0 + i * dx) - left), 0, imageWidth);};
         var jpx = function(j) {return Lib.constrain(Math.round(ya.c2p(y0 + j * dy) - top), 0, imageHeight);};
 
-        trace._scaler = module.exports.scaler(trace);
+        trace._scaler = scaler(trace);
         var fmt = constants.colormodel[trace.colormodel].fmt;
         var c;
         for(var i = 0; i < cd0.w; i++) {

test/jasmine/tests/image_test.js

@@ -298,7 +298,7 @@ describe('image hover:', function() {
             .then(function() {_hover(205, 125);})
             .then(function() {
                 assertHoverLabelContent({
-                    nums: 'x: 25.5\ny: 14.5\nz: [54, 136, 153]\n<tspan style="text-transform:uppercase">rgb</tspan>: [54, 136, 153]',
+                    nums: 'x: 25.5\ny: 14.5\nz: [54, 136, 153]\nRGB: [54, 136, 153]',
                     name: ''
                 });
             })
@@ -312,7 +312,7 @@ describe('image hover:', function() {
             .then(function() {_hover(255, 295);})
             .then(function() {
                 assertHoverLabelContent({
-                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 254]\n<tspan style="text-transform:uppercase">rgba</tspan>: [128, 77, 54, 1]',
+                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 254]\nRGBA: [128, 77, 54, 1]',
                     name: ''
                 });
             })
@@ -327,7 +327,7 @@ describe('image hover:', function() {
             .then(function() {_hover(255, 295);})
             .then(function() {
                 assertHoverLabelContent({
-                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54]\n<tspan style="text-transform:uppercase">hsl</tspan>: [128°, 77%, 54%]',
+                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54]\nHSL: [128°, 77%, 54%]',
                     name: ''
                 });
             })
@@ -342,7 +342,7 @@ describe('image hover:', function() {
             .then(function() {_hover(255, 295);})
             .then(function() {
                 assertHoverLabelContent({
-                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 254]\n<tspan style="text-transform:uppercase">hsla</tspan>: [128°, 77%, 54%, 1]',
+                    nums: 'x: 31.5\ny: 35.5\nz: [128, 77, 54, 254]\nHSLA: [128°, 77%, 54%, 1]',
                     name: ''
                 });
             })