Merge pull request #4289 from plotly/pr-image

image trace type

lib/image.js

@@ -0,0 +1,11 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = require('../src/traces/image');

lib/index-cartesian.js

@@ -17,6 +17,7 @@ Plotly.register([
     require('./histogram'),
     require('./histogram2d'),
     require('./histogram2dcontour'),
+    require('./image'),
     require('./pie'),
     require('./contour'),
     require('./scatterternary'),

lib/index.js

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

src/plots/cartesian/constants.js

@@ -63,6 +63,7 @@ module.exports = {
     // Layers to keep trace types in the right order
     // N.B. each  'unique' plot method must have its own layer
     traceLayerClasses: [
+        'imagelayer',
         'heatmaplayer',
         'contourcarpetlayer', 'contourlayer',
         'funnellayer', 'waterfalllayer', 'barlayer',

src/plots/cartesian/layout_defaults.js

@@ -87,6 +87,11 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
             if(!traceIs(trace, 'carpet') || (trace.type === 'carpet' && !trace._cheater)) {
                 if(xaName) xaMustDisplay[xaName] = true;
             }
+
+            if(trace.type === 'image') {
+                if(yaName) yaMustForward[yaName] = false;
+                if(yaName) yaMayBackward[yaName] = true;
+            }
         }
 
         // Two things trigger axis visibility:

src/traces/carpet/index.js

@@ -19,7 +19,7 @@ module.exports = {
     moduleType: 'trace',
     name: 'carpet',
     basePlotModule: require('../../plots/cartesian'),
-    categories: ['cartesian', 'svg', 'carpet', 'carpetAxis', 'notLegendIsolatable', 'noMultiCategory', 'noHover'],
+    categories: ['cartesian', 'svg', 'carpet', 'carpetAxis', 'notLegendIsolatable', 'noMultiCategory', 'noHover', 'noSortingByValue'],
     meta: {
         description: [
             'The data describing carpet axis layout is set in `y` and (optionally)',

src/traces/contourcarpet/index.js

@@ -19,7 +19,7 @@ module.exports = {
     moduleType: 'trace',
     name: 'contourcarpet',
     basePlotModule: require('../../plots/cartesian'),
-    categories: ['cartesian', 'svg', 'carpet', 'contour', 'symbols', 'showLegend', 'hasLines', 'carpetDependent', 'noHover'],
+    categories: ['cartesian', 'svg', 'carpet', 'contour', 'symbols', 'showLegend', 'hasLines', 'carpetDependent', 'noHover', 'noSortingByValue'],
     meta: {
         hrName: 'contour_carpet',
         description: [

src/traces/image/attributes.js

@@ -0,0 +1,118 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+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: {
+        valType: 'data_array',
+        role: 'info',
+        editType: 'calc',
+        description: [
+            'A 2-dimensional array in which each element is an array of 3 or 4 numbers representing a color.',
+        ].join(' ')
+    },
+    colormodel: {
+        valType: 'enumerated',
+        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: 'info_array',
+        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.',
+            'Note that the default value will depend on the colormodel.',
+            zminDesc.join(' ')
+        ].join(' ')
+    },
+    zmax: {
+        valType: 'info_array',
+        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.',
+            'Note that the default value will depend on the colormodel.',
+            zmaxDesc.join(' ')
+        ].join(' ')
+    },
+    x0: {
+        valType: 'any',
+        dflt: 0,
+        role: 'info',
+        editType: 'calc+clearAxisTypes',
+        description: 'Set the image\'s x position.'
+    },
+    y0: {
+        valType: 'any',
+        dflt: 0,
+        role: 'info',
+        editType: 'calc+clearAxisTypes',
+        description: 'Set the image\'s y position.'
+    },
+    dx: {
+        valType: 'number',
+        dflt: 1,
+        role: 'info',
+        editType: 'calc',
+        description: 'Set the pixel\'s horizontal size.'
+    },
+    dy: {
+        valType: 'number',
+        dflt: 1,
+        role: 'info',
+        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', 'text'],
+        dflt: 'x+y+z+text+name'
+    }),
+    hovertemplate: hovertemplateAttrs({}, {
+        keys: ['z', 'color', 'colormodel']
+    })
+});

src/traces/image/calc.js

@@ -0,0 +1,40 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var Axes = require('../../plots/cartesian/axes');
+var maxRowLength = require('../../lib').maxRowLength;
+
+module.exports = function calc(gd, trace) {
+    var xa = Axes.getFromId(gd, trace.xaxis || 'x');
+    var ya = Axes.getFromId(gd, trace.yaxis || 'y');
+
+    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);
+
+    // 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,
+        y0: y0,
+        z: trace.z,
+        w: w,
+        h: h
+    };
+    return [cd0];
+};

src/traces/image/constants.js

@@ -0,0 +1,49 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+module.exports = {
+    colormodel: {
+        rgb: {
+            min: [0, 0, 0],
+            max: [255, 255, 255],
+            fmt: function(c) {return c.slice(0, 3);},
+            suffix: ['', '', '']
+        },
+        rgba: {
+            min: [0, 0, 0, 0],
+            max: [255, 255, 255, 1],
+            fmt: function(c) {return c.slice(0, 4);},
+            suffix: ['', '', '', '']
+        },
+        hsl: {
+            min: [0, 0, 0],
+            max: [360, 100, 100],
+            fmt: function(c) {
+                var p = c.slice(0, 3);
+                p[1] = p[1] + '%';
+                p[2] = p[2] + '%';
+                return p;
+            },
+            suffix: ['°', '%', '%']
+        },
+        hsla: {
+            min: [0, 0, 0, 0],
+            max: [360, 100, 100, 1],
+            fmt: function(c) {
+                var p = c.slice(0, 4);
+                p[1] = p[1] + '%';
+                p[2] = p[2] + '%';
+                return p;
+            },
+            suffix: ['°', '%', '%', '']
+        }
+    }
+};

src/traces/image/defaults.js

@@ -0,0 +1,38 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var Lib = require('../../lib');
+var attributes = require('./attributes');
+var constants = require('./constants');
+
+module.exports = function supplyDefaults(traceIn, traceOut) {
+    function coerce(attr, dflt) {
+        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
+    }
+    var z = coerce('z');
+    if(z === undefined || !z.length || !z[0] || !z[0].length) {
+        traceOut.visible = false;
+        return;
+    }
+
+    coerce('x0');
+    coerce('y0');
+    coerce('dx');
+    coerce('dy');
+    var colormodel = coerce('colormodel');
+
+    coerce('zmin', constants.colormodel[colormodel].min);
+    coerce('zmax', constants.colormodel[colormodel].max);
+
+    coerce('text');
+    coerce('hovertext');
+    coerce('hovertemplate');
+};

src/traces/image/event_data.js

@@ -0,0 +1,19 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = function eventData(out, pt) {
+    if('xVal' in pt) out.x = pt.xVal;
+    if('yVal' in pt) out.y = pt.yVal;
+    if(pt.xa) out.xaxis = pt.xa;
+    if(pt.ya) out.yaxis = pt.ya;
+    out.color = pt.color;
+    out.colormodel = pt.trace.colormodel;
+    return out;
+};