Merge pull request #4953 from plotly/fix4924-discrete-heatmap2d

Discrete heatmapgl

Author: archmoj

package-lock.json

@@ -77,7 +77,7 @@
     "gl-cone3d": "^1.5.2",
     "gl-contour2d": "^1.1.7",
     "gl-error3d": "^1.0.16",
-    "gl-heatmap2d": "^1.0.6",
+    "gl-heatmap2d": "^1.1.0",
     "gl-line3d": "1.2.1",
     "gl-mat4": "^1.2.0",
     "gl-mesh3d": "^2.3.1",

package.json

@@ -29,6 +29,15 @@ for(var i = 0; i < commonList.length; i++) {
     attrs[k] = heatmapAttrs[k];
 }
 
+attrs.zsmooth = {
+    valType: 'enumerated',
+    values: ['fast', false],
+    dflt: 'fast',
+    role: 'style',
+    editType: 'calc',
+    description: 'Picks a smoothing algorithm use to smooth `z` data.'
+};
+
 extendFlat(
     attrs,
     colorScaleAttrs('', {cLetter: 'z', autoColorDflt: false})

src/traces/heatmapgl/attributes.js

@@ -31,6 +31,7 @@ function Heatmap(scene, uid) {
     this.bounds = [0, 0, 0, 0];
 
     this.options = {
+        zsmooth: 'fast',
         z: [],
         x: [],
         y: [],
@@ -85,6 +86,7 @@ proto.update = function(fullTrace, calcTrace) {
 
     this.options.x = calcPt.x;
     this.options.y = calcPt.y;
+    this.options.zsmooth = fullTrace.zsmooth;
 
     var colorOptions = convertColorscale(fullTrace);
     this.options.colorLevels = colorOptions.colorLevels;
@@ -97,8 +99,16 @@ proto.update = function(fullTrace, calcTrace) {
 
     var xa = this.scene.xaxis;
     var ya = this.scene.yaxis;
-    fullTrace._extremes[xa._id] = Axes.findExtremes(xa, calcPt.x);
-    fullTrace._extremes[ya._id] = Axes.findExtremes(ya, calcPt.y);
+
+    var xOpts, yOpts;
+    if(fullTrace.zsmooth === false) {
+        // increase padding for discretised heatmap as suggested by Louise Ord
+        xOpts = { ppad: calcPt.x[1] - calcPt.x[0] };
+        yOpts = { ppad: calcPt.y[1] - calcPt.y[0] };
+    }
+
+    fullTrace._extremes[xa._id] = Axes.findExtremes(xa, calcPt.x, xOpts);
+    fullTrace._extremes[ya._id] = Axes.findExtremes(ya, calcPt.y, yOpts);
 };
 
 proto.dispose = function() {

src/traces/heatmapgl/convert.js

@@ -28,6 +28,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('text');
+    coerce('zsmooth');
 
     colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'});
 };

src/traces/heatmapgl/defaults.js

@@ -0,0 +1,135 @@
+{
+  "data": [
+    {
+      "type": "heatmapgl",
+      "zsmooth": false,
+      "z": [
+        [
+          125,
+          106,
+          89,
+          74,
+          61,
+          50,
+          41,
+          34,
+          29,
+          26
+        ],
+        [
+          116,
+          97,
+          80,
+          65,
+          52,
+          41,
+          32,
+          25,
+          20,
+          17
+        ],
+        [
+          109,
+          90,
+          73,
+          58,
+          45,
+          34,
+          25,
+          18,
+          13,
+          10
+        ],
+        [
+          104,
+          85,
+          68,
+          53,
+          40,
+          29,
+          20,
+          13,
+          8,
+          5
+        ],
+        [
+          101,
+          82,
+          65,
+          50,
+          37,
+          26,
+          17,
+          10,
+          5,
+          2
+        ],
+        [
+          100,
+          81,
+          64,
+          49,
+          36,
+          25,
+          16,
+          9,
+          4,
+          1
+        ],
+        [
+          101,
+          82,
+          65,
+          50,
+          37,
+          26,
+          17,
+          10,
+          5,
+          2
+        ],
+        [
+          104,
+          85,
+          68,
+          53,
+          40,
+          29,
+          20,
+          13,
+          8,
+          5
+        ],
+        [
+          109,
+          90,
+          73,
+          58,
+          45,
+          34,
+          25,
+          18,
+          13,
+          10
+        ],
+        [
+          116,
+          97,
+          80,
+          65,
+          52,
+          41,
+          32,
+          25,
+          20,
+          17
+        ]
+      ],
+      "colorscale": "Viridis"
+    }
+  ],
+  "layout": {
+    "height": 450,
+    "width": 550
+  }
+}

test/image/baselines/gl2d_heatmapgl_discrete.png

@@ -376,6 +376,7 @@ var list = [
     'gl2d_fill-ordering',
     'gl2d_fonts',
     'gl2d_heatmapgl',
+    'gl2d_heatmapgl_discrete',
     'gl2d_horiz-lines',
     'gl2d_layout_image',
     'gl2d_line_aligned',
@@ -1420,6 +1421,7 @@ figs['gl2d_error_bars_log'] = require('@mocks/gl2d_error_bars_log');
 figs['gl2d_fill-ordering'] = require('@mocks/gl2d_fill-ordering');
 // figs['gl2d_fonts'] = require('@mocks/gl2d_fonts');
 figs['gl2d_heatmapgl'] = require('@mocks/gl2d_heatmapgl');
+figs['gl2d_heatmapgl_discrete'] = require('@mocks/gl2d_heatmapgl_discrete');
 figs['gl2d_horiz-lines'] = require('@mocks/gl2d_horiz-lines');
 // figs['gl2d_layout_image'] = require('@mocks/gl2d_layout_image');
 figs['gl2d_line_aligned'] = require('@mocks/gl2d_line_aligned');