Merge branch 'master' into legend-positioning

Author: hannahker

draftlogs/6574_change.md

@@ -0,0 +1 @@
+ - Improve heatmap rendering performance when `zsmooth` is set to false [[#6574](https://github.com/plotly/plotly.js/pull/6574)], with thanks to @lvlte for the contribution!

draftlogs/6593_add.md

@@ -0,0 +1 @@
+- Add `colorbar.xref` and `colorbar.yref` to enable container-referenced positioning for plot colorbars [[#6593](https://github.com/plotly/plotly.js/pull/6593)], with thanks to [Gamma Technologies](https://www.gtisoft.com/) for sponsoring the related development.

src/components/colorbar/attributes.js

@@ -57,12 +57,25 @@ module.exports = overrideAll({
     },
     x: {
         valType: 'number',
-        min: -2,
-        max: 3,
         description: [
-            'Sets the x position of the color bar (in plot fraction).',
-            'Defaults to 1.02 when `orientation` is *v* and',
-            '0.5 when `orientation` is *h*.'
+            'Sets the x position with respect to `xref` of the color bar (in plot fraction).',
+            'When `xref` is *paper*, defaults to 1.02 when `orientation` is *v* and',
+            '0.5 when `orientation` is *h*.',
+            'When `xref` is *container*, defaults to *1* when `orientation` is *v* and',
+            '0.5 when `orientation` is *h*.',
+            'Must be between *0* and *1* if `xref` is *container*',
+            'and between *-2* and *3* if `xref` is *paper*.'
+        ].join(' ')
+    },
+    xref: {
+        valType: 'enumerated',
+        dflt: 'paper',
+        values: ['container', 'paper'],
+        editType: 'layoutstyle',
+        description: [
+            'Sets the container `x` refers to.',
+            '*container* spans the entire `width` of the plot.',
+            '*paper* refers to the width of the plotting area only.'
         ].join(' ')
     },
     xanchor: {
@@ -84,14 +97,27 @@ module.exports = overrideAll({
     },
     y: {
         valType: 'number',
-        min: -2,
-        max: 3,
         description: [
-            'Sets the y position of the color bar (in plot fraction).',
-            'Defaults to 0.5 when `orientation` is *v* and',
-            '1.02 when `orientation` is *h*.'
+            'Sets the y position with respect to `yref` of the color bar (in plot fraction).',
+            'When `yref` is *paper*, defaults to 0.5 when `orientation` is *v* and',
+            '1.02 when `orientation` is *h*.',
+            'When `yref` is *container*, defaults to 0.5 when `orientation` is *v* and',
+            '1 when `orientation` is *h*.',
+            'Must be between *0* and *1* if `yref` is *container*',
+            'and between *-2* and *3* if `yref` is *paper*.'
         ].join(' ')
     },
+    yref: {
+        valType: 'enumerated',
+        dflt: 'paper',
+        values: ['container', 'paper'],
+        editType: 'layoutstyle',
+        description: [
+            'Sets the container `y` refers to.',
+            '*container* spans the entire `height` of the plot.',
+            '*paper* refers to the height of the plotting area only.'
+        ].join(' '),
+    },
     yanchor: {
         valType: 'enumerated',
         values: ['top', 'middle', 'bottom'],

src/components/colorbar/defaults.js

@@ -37,11 +37,48 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
         isVertical ? h : w
     );
 
-    coerce('x', isVertical ? 1.02 : 0.5);
-    coerce('xanchor', isVertical ? 'left' : 'center');
+    var yref = coerce('yref');
+    var xref = coerce('xref');
+
+    var isPaperY = yref === 'paper';
+    var isPaperX = xref === 'paper';
+
+    var defaultX, defaultY, defaultYAnchor;
+    var defaultXAnchor = 'left';
+
+    if(isVertical) {
+        defaultYAnchor = 'middle';
+        defaultXAnchor = isPaperX ? 'left' : 'right';
+        defaultX = isPaperX ? 1.02 : 1;
+        defaultY = 0.5;
+    } else {
+        defaultYAnchor = isPaperY ? 'bottom' : 'top';
+        defaultXAnchor = 'center';
+        defaultX = 0.5;
+        defaultY = isPaperY ? 1.02 : 1;
+    }
+
+    Lib.coerce(colorbarIn, colorbarOut, {
+        x: {
+            valType: 'number',
+            min: isPaperX ? -2 : 0,
+            max: isPaperX ? 3 : 1,
+            dflt: defaultX,
+        }
+    }, 'x');
+
+    Lib.coerce(colorbarIn, colorbarOut, {
+        y: {
+            valType: 'number',
+            min: isPaperY ? -2 : 0,
+            max: isPaperY ? 3 : 1,
+            dflt: defaultY,
+        }
+    }, 'y');
+
+    coerce('xanchor', defaultXAnchor);
     coerce('xpad');
-    coerce('y', isVertical ? 0.5 : 1.02);
-    coerce('yanchor', isVertical ? 'middle' : 'bottom');
+    coerce('yanchor', defaultYAnchor);
     coerce('ypad');
     Lib.noneOrAll(colorbarIn, colorbarOut, ['x', 'y']);
 

src/components/colorbar/draw.js

@@ -182,6 +182,9 @@ function drawColorBar(g, opts, gd) {
     var optsX = opts.x;
     var optsY = isVertical ? opts.y : 1 - opts.y;
 
+    var isPaperY = opts.yref === 'paper';
+    var isPaperX = opts.xref === 'paper';
+
     var fullLayout = gd._fullLayout;
     var gs = fullLayout._size;
 
@@ -216,11 +219,14 @@ function drawColorBar(g, opts, gd) {
     var lenPx = Math.round(len * (lenmode === 'fraction' ? (isVertical ? gs.h : gs.w) : 1));
     var lenFrac = lenPx / (isVertical ? gs.h : gs.w);
 
+    var posW = isPaperX ? gs.w : gd._fullLayout.width;
+    var posH = isPaperY ? gs.h : gd._fullLayout.height;
+
     // x positioning: do it initially just for left anchor,
     // then fix at the end (since we don't know the width yet)
     var uPx = Math.round(isVertical ?
-        optsX * gs.w + xpad :
-        optsY * gs.h + ypad
+        optsX * posW + xpad :
+        optsY * posH + ypad
     );
 
     var xRatio = {center: 0.5, right: 1}[xanchor] || 0;
@@ -237,8 +243,8 @@ function drawColorBar(g, opts, gd) {
         optsX - xRatio * lenFrac;
 
     var vPx = Math.round(isVertical ?
-        gs.h * (1 - vFrac) :
-        gs.w * vFrac
+        posH * (1 - vFrac) :
+        posW * vFrac
     );
 
     // stash a few things for makeEditable
@@ -351,18 +357,18 @@ function drawColorBar(g, opts, gd) {
             var x, y;
 
             if(titleSide === 'top') {
-                x = xpad + gs.l + gs.w * optsX;
-                y = ypad + gs.t + gs.h * (1 - vFrac - lenFrac) + 3 + titleFontSize * 0.75;
+                x = xpad + gs.l + posW * optsX;
+                y = ypad + gs.t + posH * (1 - vFrac - lenFrac) + 3 + titleFontSize * 0.75;
             }
 
             if(titleSide === 'bottom') {
-                x = xpad + gs.l + gs.w * optsX;
-                y = ypad + gs.t + gs.h * (1 - vFrac) - 3 - titleFontSize * 0.25;
+                x = xpad + gs.l + posW * optsX;
+                y = ypad + gs.t + posH * (1 - vFrac) - 3 - titleFontSize * 0.25;
             }
 
             if(titleSide === 'right') {
-                y = ypad + gs.t + gs.h * optsY + 3 + titleFontSize * 0.75;
-                x = xpad + gs.l + gs.w * vFrac;
+                y = ypad + gs.t + posH * optsY + 3 + titleFontSize * 0.75;
+                x = xpad + gs.l + posW * vFrac;
             }
 
             drawTitle(ax._id + 'title', {
@@ -382,14 +388,14 @@ function drawColorBar(g, opts, gd) {
 
             if(titleSide === 'right') {
                 y = mid;
-                x = gs.l + gs.w * pos + 10 + titleFontSize * (
+                x = gs.l + posW * pos + 10 + titleFontSize * (
                     ax.showticklabels ? 1 : 0.5
                 );
             } else {
                 x = mid;
 
                 if(titleSide === 'bottom') {
-                    y = gs.t + gs.h * pos + 10 + (
+                    y = gs.t + posH * pos + 10 + (
                         ticklabelposition.indexOf('inside') === -1 ?
                             ax.tickfont.size :
                             0
@@ -402,7 +408,7 @@ function drawColorBar(g, opts, gd) {
 
                 if(titleSide === 'top') {
                     var nlines = title.text.split('<br>').length;
-                    y = gs.t + gs.h * pos + 10 - thickPx - LINE_SPACING * titleFontSize * nlines;
+                    y = gs.t + posH * pos + 10 - thickPx - LINE_SPACING * titleFontSize * nlines;
                 }
             }
 
@@ -668,9 +674,13 @@ function drawColorBar(g, opts, gd) {
 
         var extraW = borderwidth + outlinewidth;
 
+        // TODO - are these the correct positions?
+        var lx = (isVertical ? uPx : vPx) - extraW / 2 - (isVertical ? xpad : 0);
+        var ly = (isVertical ? vPx : uPx) - (isVertical ? lenPx : ypad + moveY - hColorbarMoveTitle);
+
         g.select('.' + cn.cbbg)
-        .attr('x', (isVertical ? uPx : vPx) - extraW / 2 - (isVertical ? xpad : 0))
-        .attr('y', (isVertical ? vPx : uPx) - (isVertical ? lenPx : ypad + moveY - hColorbarMoveTitle))
+        .attr('x', lx)
+        .attr('y', ly)
         .attr(isVertical ? 'width' : 'height', Math.max(outerThickness - hColorbarMoveTitle, 2))
         .attr(isVertical ? 'height' : 'width', Math.max(lenPx + extraW, 2))
         .call(Color.fill, bgcolor)
@@ -693,9 +703,14 @@ function drawColorBar(g, opts, gd) {
             'stroke-width': outlinewidth
         });
 
+        var xShift = ((isVertical ? xRatio * outerThickness : 0));
+        var yShift = ((isVertical ? 0 : (1 - yRatio) * outerThickness - moveY));
+        xShift = isPaperX ? gs.l - xShift : -xShift;
+        yShift = isPaperY ? gs.t - yShift : -yShift;
+
         g.attr('transform', strTranslate(
-            gs.l - (isVertical ? xRatio * outerThickness : 0),
-            gs.t - (isVertical ? 0 : (1 - yRatio) * outerThickness - moveY)
+            xShift,
+            yShift
         ));
 
         if(!isVertical && (
@@ -802,8 +817,30 @@ function drawColorBar(g, opts, gd) {
                 marginOpts.yb = optsY + thickness * bFrac;
             }
         }
+        var sideY = opts.y < 0.5 ? 'b' : 't';
+        var sideX = opts.x < 0.5 ? 'l' : 'r';
+
+        gd._fullLayout._reservedMargin[opts._id] = {};
+        var possibleReservedMargins = {
+            r: (fullLayout.width - lx - xShift),
+            l: lx + marginOpts.r,
+            b: (fullLayout.height - ly - yShift),
+            t: ly + marginOpts.b
+        };
 
-        Plots.autoMargin(gd, opts._id, marginOpts);
+        if(isPaperX && isPaperY) {
+            Plots.autoMargin(gd, opts._id, marginOpts);
+        } else if(isPaperX) {
+            gd._fullLayout._reservedMargin[opts._id][sideY] = possibleReservedMargins[sideY];
+        } else if(isPaperY) {
+            gd._fullLayout._reservedMargin[opts._id][sideX] = possibleReservedMargins[sideX];
+        } else {
+            if(isVertical) {
+                gd._fullLayout._reservedMargin[opts._id][sideX] = possibleReservedMargins[sideX];
+            } else {
+                gd._fullLayout._reservedMargin[opts._id][sideY] = possibleReservedMargins[sideY];
+            }
+        }
     }
 
     return Lib.syncOrAsync([

src/constants/pixelated_image.js

@@ -0,0 +1,22 @@
+'use strict';
+
+// Pixelated image rendering
+// The actual CSS declaration is prepended with fallbacks for older browsers.
+// NB. IE's `-ms-interpolation-mode` works only with <img> not with SVG <image>
+// https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+// https://caniuse.com/?search=image-rendering
+// http://phrogz.net/tmp/canvas_image_zoom.html
+
+exports.CSS_DECLARATIONS = [
+    ['image-rendering', 'optimizeSpeed'],
+    ['image-rendering', '-moz-crisp-edges'],
+    ['image-rendering', '-o-crisp-edges'],
+    ['image-rendering', '-webkit-optimize-contrast'],
+    ['image-rendering', 'optimize-contrast'],
+    ['image-rendering', 'crisp-edges'],
+    ['image-rendering', 'pixelated']
+];
+
+exports.STYLE = exports.CSS_DECLARATIONS.map(function(d) {
+    return d.join(': ') + '; ';
+}).join('');

src/lib/supports_pixelated_image.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var constants = require('../constants/pixelated_image');
+var Drawing = require('../components/drawing');
+var Lib = require('../lib');
+
+var _supportsPixelated = null;
+
+/**
+ * Check browser support for pixelated image rendering
+ *
+ * @return {boolean}
+ */
+function supportsPixelatedImage() {
+    if(_supportsPixelated !== null) { // only run the feature detection once
+        return _supportsPixelated;
+    }
+    if(Lib.isIE()) {
+        _supportsPixelated = false;
+    } else {
+        var declarations = Array.from(constants.CSS_DECLARATIONS).reverse();
+        var supports = window.CSS && window.CSS.supports || window.supportsCSS;
+        if(typeof supports === 'function') {
+            _supportsPixelated = declarations.some(function(d) {
+                return supports.apply(null, d);
+            });
+        } else {
+            var image3 = Drawing.tester.append('image');
+            var cStyles = window.getComputedStyle(image3.node());
+            image3.attr('style', constants.STYLE);
+            _supportsPixelated = declarations.some(function(d) {
+                var value = d[1];
+                return cStyles.imageRendering === value ||
+                       cStyles.imageRendering === value.toLowerCase();
+            });
+            image3.remove();
+        }
+    }
+    return _supportsPixelated;
+}
+
+module.exports = supportsPixelatedImage;

src/traces/heatmap/calc.js

@@ -90,32 +90,31 @@ module.exports = function calc(gd, trace) {
         Lib.warn('cannot use zsmooth: "fast": ' + msg);
     }
 
-    // check whether we really can smooth (ie all boxes are about the same size)
-    if(zsmooth === 'fast') {
-        if(xa.type === 'log' || ya.type === 'log') {
-            noZsmooth('log axis found');
-        } else if(!isHist) {
-            if(x.length) {
-                var avgdx = (x[x.length - 1] - x[0]) / (x.length - 1);
-                var maxErrX = Math.abs(avgdx / 100);
-                for(i = 0; i < x.length - 1; i++) {
-                    if(Math.abs(x[i + 1] - x[i] - avgdx) > maxErrX) {
-                        noZsmooth('x scale is not linear');
-                        break;
-                    }
-                }
-            }
-            if(y.length && zsmooth === 'fast') {
-                var avgdy = (y[y.length - 1] - y[0]) / (y.length - 1);
-                var maxErrY = Math.abs(avgdy / 100);
-                for(i = 0; i < y.length - 1; i++) {
-                    if(Math.abs(y[i + 1] - y[i] - avgdy) > maxErrY) {
-                        noZsmooth('y scale is not linear');
-                        break;
-                    }
+    function scaleIsLinear(s) {
+        if(s.length > 1) {
+            var avgdx = (s[s.length - 1] - s[0]) / (s.length - 1);
+            var maxErrX = Math.abs(avgdx / 100);
+            for(i = 0; i < s.length - 1; i++) {
+                if(Math.abs(s[i + 1] - s[i] - avgdx) > maxErrX) {
+                    return false;
                 }
             }
         }
+        return true;
+    }
+
+    // Check whether all brick are uniform
+    trace._islinear = false;
+    if(xa.type === 'log' || ya.type === 'log') {
+        if(zsmooth === 'fast') {
+            noZsmooth('log axis found');
+        }
+    } else if(!scaleIsLinear(x)) {
+        if(zsmooth === 'fast') noZsmooth('x scale is not linear');
+    } else if(!scaleIsLinear(y)) {
+        if(zsmooth === 'fast') noZsmooth('y scale is not linear');
+    } else {
+        trace._islinear = true;
     }
 
     // create arrays of brick boundaries, to be used by autorange and heatmap.plot