Merge pull request #3934 from plotly/contour-label-reversed-xy

Fix contour label rendering for non-monotonically increasing x/y

Author: etpinard

src/traces/carpet/plot.js

@@ -173,20 +173,22 @@ function drawAxisLabels(gd, xaxis, yaxis, trace, t, layer, labels, labelClass) {
 function drawAxisTitles(gd, layer, trace, t, xa, ya, labelOrientationA, labelOrientationB) {
     var a, b, xy, dxy;
 
-    var _a = trace.a.slice().sort(Lib.sorterAsc);
-    var _b = trace.b.slice().sort(Lib.sorterAsc);
+    var aMin = Lib.aggNums(Math.min, null, trace.a);
+    var aMax = Lib.aggNums(Math.max, null, trace.a);
+    var bMin = Lib.aggNums(Math.min, null, trace.b);
+    var bMax = Lib.aggNums(Math.max, null, trace.b);
 
-    a = 0.5 * (_a[0] + _a[_a.length - 1]);
-    b = _b[0];
+    a = 0.5 * (aMin + aMax);
+    b = bMin;
     xy = trace.ab2xy(a, b, true);
     dxy = trace.dxyda_rough(a, b);
     if(labelOrientationA.angle === undefined) {
         Lib.extendFlat(labelOrientationA, orientText(trace, xa, ya, xy, trace.dxydb_rough(a, b)));
     }
     drawAxisTitle(gd, layer, trace, t, xy, dxy, trace.aaxis, xa, ya, labelOrientationA, 'a-title');
 
-    a = _a[0];
-    b = 0.5 * (_b[0] + _b[_b.length - 1]);
+    a = aMin;
+    b = 0.5 * (bMin + bMax);
     xy = trace.ab2xy(a, b, true);
     dxy = trace.dxydb_rough(a, b);
     if(labelOrientationB.angle === undefined) {

src/traces/contour/plot.js

@@ -70,7 +70,7 @@ exports.plot = function plot(gd, plotinfo, cdcontours, contourLayer) {
         // draw everything
         makeBackground(plotGroup, perimeter, contours);
         makeFills(plotGroup, fillPathinfo, perimeter, contours);
-        makeLinesAndLabels(plotGroup, pathinfo, gd, cd0, contours, perimeter);
+        makeLinesAndLabels(plotGroup, pathinfo, gd, cd0, contours);
         clipGaps(plotGroup, plotinfo, gd, cd0, perimeter);
     });
 };
@@ -209,7 +209,7 @@ function joinAllPaths(pi, perimeter) {
     return fullpath;
 }
 
-function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
+function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours) {
     var lineContainer = Lib.ensureSingle(plotgroup, 'g', 'contourlines');
     var showLines = contours.showlines !== false;
     var showLabels = contours.showlabels;
@@ -250,10 +250,14 @@ function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, perimeter) {
         var yLen = ya._length;
         var xRng = xa.range;
         var yRng = ya.range;
-        var x0 = Math.max(perimeter[0][0], 0);
-        var x1 = Math.min(perimeter[2][0], xLen);
-        var y0 = Math.max(perimeter[0][1], 0);
-        var y1 = Math.min(perimeter[2][1], yLen);
+        var xMin = Lib.aggNums(Math.min, null, cd0.x);
+        var xMax = Lib.aggNums(Math.max, null, cd0.x);
+        var yMin = Lib.aggNums(Math.min, null, cd0.y);
+        var yMax = Lib.aggNums(Math.max, null, cd0.y);
+        var x0 = Math.max(xa.c2p(xMin, true), 0);
+        var x1 = Math.min(xa.c2p(xMax, true), xLen);
+        var y0 = Math.max(ya.c2p(yMax, true), 0);
+        var y1 = Math.min(ya.c2p(yMin, true), yLen);
 
         // visible bounds of the contour trace (and the midpoints, to
         // help with cost calculations)

test/image/baselines/contour_label-reversed-xy.png

@@ -0,0 +1,112 @@
+{
+  "data": [
+    {
+      "type": "contour",
+      "name": "▲ x ▲ y",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false
+    },
+    {
+      "type": "contour",
+      "name": "▼ x ▲ y",
+      "x": [4, 3, 2, 1],
+      "y": [1, 2, 3, 4],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "type": "contour",
+      "name": "▲ x ▼ y",
+      "x": [1, 2, 3, 4],
+      "y": [4, 3, 2, 1],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x3",
+      "yaxis": "y3"
+    },
+    {
+      "type": "contour",
+      "name": "▼ x ▼ y",
+      "x": [4, 3, 2, 1],
+      "y": [4, 3, 2, 1],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x4",
+      "yaxis": "y4"
+    },
+
+    {
+      "type": "contour",
+      "name": "▲ x ▲ y (dup)",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x5",
+      "yaxis": "y5"
+    },
+    {
+      "type": "contour",
+      "name": "▼ x (reversed rng) ▲ y",
+      "x": [4, 3, 2, 1],
+      "y": [1, 2, 3, 4],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x6",
+      "yaxis": "y6"
+    },
+    {
+      "type": "contour",
+      "name": "▲ x ▼ y (reversed rng)",
+      "x": [1, 2, 3, 4],
+      "y": [4, 3, 2, 1],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x7",
+      "yaxis": "y7"
+    },
+    {
+      "type": "contour",
+      "name": "▼ x (reversed rng) ▼ y (reversed rng)",
+      "x": [4, 3, 2, 1],
+      "y": [4, 3, 2, 1],
+      "z": [[1, 2, 3, 4], [1, 2, 3, 4], [2, 3, 4, 5], [4, 5, 6, 7]],
+      "contours": {"showlabels": true},
+      "showscale": false,
+      "xaxis": "x8",
+      "yaxis": "y8"
+    }
+  ],
+  "layout": {
+    "grid": {"rows": 4, "columns": 2, "pattern": "independent"},
+
+    "template": {
+      "data": {
+        "contour": [{
+          "hoverlabel": {"namelength": -1}
+        }]
+      }
+    },
+
+    "xaxis6": {"autorange": "reversed"},
+
+    "yaxis7": {"autorange": "reversed"},
+
+    "xaxis8": {"autorange": "reversed"},
+    "yaxis8": {"autorange": "reversed"},
+
+    "width": 500,
+    "height": 800
+  }
+}