Merge pull request #6625 from lvlte/fix-contour-colorscale-6623

Fix contour plot colorscale domain

Author: archmoj

draftlogs/6625_fix.md

@@ -0,0 +1 @@
+ - Fix contour plot colorscale domain (take account of [zmin, zmax] and [cmin, cmax]) [[#6625](https://github.com/plotly/plotly.js/pull/6625)], with thanks to @lvlte for the contribution!

src/components/colorbar/draw.js

@@ -512,7 +512,7 @@ function drawColorBar(g, opts, gd) {
             .data(fillLevels);
         fills.enter().append('rect')
             .classed(cn.cbfill, true)
-            .style('stroke', 'none');
+            .attr('style', '');
         fills.exit().remove();
 
         var zBounds = zrange

src/traces/contour/make_color_map.js

@@ -29,10 +29,10 @@ module.exports = function makeColorMap(trace) {
 
     var si, i;
 
-    if(contours.coloring === 'heatmap') {
-        var zmin0 = cOpts.min;
-        var zmax0 = cOpts.max;
+    var zmin0 = cOpts.min;
+    var zmax0 = cOpts.max;
 
+    if(contours.coloring === 'heatmap') {
         for(i = 0; i < len; i++) {
             si = scl[i];
             domain[i] = si[0] * (zmax0 - zmin0) + zmin0;
@@ -60,11 +60,37 @@ module.exports = function makeColorMap(trace) {
             range.push(range[range.length - 1]);
         }
     } else {
+        var zRangeInput = trace._input && (
+            typeof trace._input.zmin === 'number' && typeof trace._input.zmax === 'number'
+        );
+
+        // If zmin/zmax are explicitly set, consider case where user specifies a
+        // narrower z range than that of the contours start/end.
+        if(zRangeInput && (start <= zmin0 || end >= zmax0)) {
+            if(start <= zmin0) start = zmin0;
+            if(end >= zmax0) end = zmax0;
+            nc = Math.floor((end - start) / cs) + 1;
+            extra = 0;
+        }
+
         for(i = 0; i < len; i++) {
             si = scl[i];
             domain[i] = (si[0] * (nc + extra - 1) - (extra / 2)) * cs + start;
             range[i] = si[1];
         }
+
+        // Make the colorscale fit the z range except if contours are explicitly
+        // set BUT NOT zmin/zmax.
+        if(zRangeInput || trace.autocontour) {
+            if(domain[0] > zmin0) {
+                domain.unshift(zmin0);
+                range.unshift(range[0]);
+            }
+            if(domain[domain.length - 1] < zmax0) {
+                domain.push(zmax0);
+                range.push(range[range.length - 1]);
+            }
+        }
     }
 
     return Colorscale.makeColorScaleFunc(

test/image/baselines/25.png

@@ -529,19 +529,19 @@ describe('Test colorbar:', function() {
                 return attrs;
             }
 
-            var z = [[1, 10], [100, 1000]];
+            var mock = require('../../image/mocks/contour_transposed');
+            var z = mock.data[0].z;
 
             var expectedAttrs;
             var actualAttrs;
 
-            Plotly.newPlot(gd, [{type: 'contour', z: z}])
+            Plotly.newPlot(gd, mock)
             .then(function() {
                 expectedAttrs = getCBFillAttributes();
-
-                return Plotly.newPlot(gd, [{type: 'heatmap', z: z}])
-                .then(function() {
-                    return Plotly.react(gd, [{type: 'contour', z: z}]);
-                });
+                return Plotly.newPlot(gd, [{type: 'heatmap', z: z}]);
+            })
+            .then(function() {
+                return Plotly.react(gd, mock);
             })
             .then(function() {
                 actualAttrs = getCBFillAttributes();

test/image/baselines/airfoil.png

@@ -120,7 +120,22 @@ describe('contour defaults', function() {
 describe('contour makeColorMap', function() {
     'use strict';
 
-    it('should make correct color map function (\'fill\' coloring case)', function() {
+    function _makeColorMap(trace) {
+        trace.type = 'contour';
+        if(trace.z === undefined) {
+            trace.z = [[0]]; // dummy data for calc to work properly
+        }
+        var gd = { data: [trace] };
+        supplyAllDefaults(gd);
+
+        var fullTrace = gd._fullData[0];
+        fullTrace._extremes = {};
+        Contour.calc(gd, fullTrace);
+
+        return makeColorMap(fullTrace);
+    }
+
+    it('should make correct color map function (\'fill\' coloring case 1)', function() {
         var trace = {
             contours: {
                 coloring: 'fill',
@@ -141,7 +156,7 @@ describe('contour makeColorMap', function() {
             ]]
         };
 
-        var colorMap = makeColorMap(trace);
+        var colorMap = _makeColorMap(trace);
 
         expect(colorMap.domain()).toEqual(
             [-1.75, -0.75, 0.25, 1.25, 2.25]
@@ -151,6 +166,56 @@ describe('contour makeColorMap', function() {
             'rgb(12,51,131)', 'rgb(10,136,186)', 'rgb(242,211,56)',
             'rgb(242,143,56)', 'rgb(217,30,30)'
         ]);
+
+        // Set lower/upper bounds of the color domain via zmin/zmax
+        trace.zmin = -5;
+        trace.zmax = 5;
+
+        colorMap = _makeColorMap(trace);
+
+        expect(colorMap.domain()).toEqual(
+            [-5, -1.75, -0.75, 0.25, 1.25, 2.25, 5]
+        );
+
+        expect(colorMap.range()).toEqual([
+            'rgb(12,51,131)', 'rgb(12,51,131)', 'rgb(10,136,186)', 'rgb(242,211,56)',
+            'rgb(242,143,56)', 'rgb(217,30,30)', 'rgb(217,30,30)'
+        ]);
+    });
+
+    it('should make correct color map function (\'fill\' coloring case 2)', function() {
+        var trace = {
+            z: [[0, 1]],
+            autocontour: true,
+            contours: {
+                coloring: 'fill'
+            },
+            colorscale: colorScales.RdBu,
+        };
+
+        var colorMap = _makeColorMap(trace);
+        var domain = colorMap.domain();
+        var range = colorMap.range();
+
+        expect(domain[0]).toBe(0);
+        expect(domain[domain.length - 1]).toBe(1);
+
+        expect(range[0]).toBe('rgb(5,10,172)');
+        expect(range[range.length - 1]).toBe('rgb(178,10,28)');
+
+        // Set lower/upper bounds of the color domain via zmin/zmax
+        trace.zmin = -1;
+        trace.zmax = 2;
+
+        colorMap = _makeColorMap(trace);
+        domain = colorMap.domain();
+        range = colorMap.range();
+
+        expect(domain[0]).toBe(trace.zmin);
+        expect(domain[domain.length - 1]).toBe(trace.zmax);
+
+        expect(range[0]).toBe('rgb(5,10,172)');
+        expect(range[range.length - 1]).toBe('rgb(178,10,28)');
     });
 
     it('should make correct color map function (\'heatmap\' coloring case)', function() {
@@ -166,7 +231,7 @@ describe('contour makeColorMap', function() {
             zmax: 6
         };
 
-        var colorMap = makeColorMap(trace);
+        var colorMap = _makeColorMap(trace);
 
         expect(colorMap.domain()).toEqual(
            [1, 2.75, 3.5, 4, 4.5, 6]
@@ -189,7 +254,7 @@ describe('contour makeColorMap', function() {
             colorscale: colorScales.RdBu
         };
 
-        var colorMap = makeColorMap(trace);
+        var colorMap = _makeColorMap(trace);
 
         expect(colorMap.domain()).toEqual(
             [1.5, 2.9, 3.5, 3.9, 4.3, 5.5]