Merge pull request #4540 from plotly/contour-label-extra-pad-and-corr…

…ect-minus-sign Contour label extra pad and correct minus sign
plotly · Mar 14, 2020 · fc6486d · fc6486d
2 parents 9c7c398 + fd0b9fb
commit fc6486d
Show file tree

Hide file tree

Showing 19 changed files with 138 additions and 25 deletions.
diff --git a/src/traces/contour/plot.js b/src/traces/contour/plot.js
@@ -394,21 +394,21 @@ exports.labelFormatter = function(gd, cd0) {
     var trace = cd0.trace;
     var contours = trace.contours;
 
+    var formatAxis = {
+        type: 'linear',
+        _id: 'ycontour',
+        showexponent: 'all',
+        exponentformat: 'B'
+    };
+
     if(contours.labelformat) {
-        return fullLayout._d3locale.numberFormat(contours.labelformat);
+        formatAxis.tickformat = contours.labelformat;
+        setConvert(formatAxis, fullLayout);
     } else {
-        var formatAxis;
         var cOpts = Colorscale.extractOpts(trace);
         if(cOpts && cOpts.colorbar && cOpts.colorbar._axis) {
             formatAxis = cOpts.colorbar._axis;
         } else {
-            formatAxis = {
-                type: 'linear',
-                _id: 'ycontour',
-                showexponent: 'all',
-                exponentformat: 'B'
-            };
-
             if(contours.type === 'constraint') {
                 var value = contours.value;
                 if(Array.isArray(value)) {
@@ -429,22 +429,24 @@ exports.labelFormatter = function(gd, cd0) {
             formatAxis._tmin = null;
             formatAxis._tmax = null;
         }
-        return function(v) {
-            return Axes.tickText(formatAxis, v).text;
-        };
     }
+
+    return function(v) { return Axes.tickText(formatAxis, v).text; };
 };
 
 exports.calcTextOpts = function(level, contourFormat, dummyText, gd) {
     var text = contourFormat(level);
     dummyText.text(text)
         .call(svgTextUtils.convertToTspans, gd);
-    var bBox = Drawing.bBox(dummyText.node(), true);
+
+    var el = dummyText.node();
+    var bBox = Drawing.bBox(el, true);
 
     return {
         text: text,
         width: bBox.width,
         height: bBox.height,
+        fontSize: +(el.style['font-size'].replace('px', '')),
         level: level,
         dy: (bBox.top + bBox.bottom) / 2
     };
@@ -544,24 +546,29 @@ function locationCost(loc, textOpts, labelData, bounds) {
 }
 
 exports.addLabelData = function(loc, textOpts, labelData, labelClipPathData) {
-    var halfWidth = textOpts.width / 2;
-    var halfHeight = textOpts.height / 2;
+    var fontSize = textOpts.fontSize;
+    var w = textOpts.width + fontSize / 3;
+    var h = Math.max(0, textOpts.height - fontSize / 3);
 
     var x = loc.x;
     var y = loc.y;
     var theta = loc.theta;
 
     var sin = Math.sin(theta);
     var cos = Math.cos(theta);
-    var dxw = halfWidth * cos;
-    var dxh = halfHeight * sin;
-    var dyw = halfWidth * sin;
-    var dyh = -halfHeight * cos;
+
+    var rotateXY = function(dx, dy) {
+        return [
+            x + dx * cos - dy * sin,
+            y + dx * sin + dy * cos
+        ];
+    };
+
     var bBoxPts = [
-        [x - dxw - dxh, y - dyw - dyh],
-        [x + dxw - dxh, y + dyw - dyh],
-        [x + dxw + dxh, y + dyw + dyh],
-        [x - dxw + dxh, y - dyw + dyh],
+        rotateXY(-w / 2, -h / 2),
+        rotateXY(-w / 2, h / 2),
+        rotateXY(w / 2, h / 2),
+        rotateXY(w / 2, -h / 2)
     ];
 
     labelData.push({
@@ -571,8 +578,8 @@ exports.addLabelData = function(loc, textOpts, labelData, labelClipPathData) {
         dy: textOpts.dy,
         theta: theta,
         level: textOpts.level,
-        width: textOpts.width,
-        height: textOpts.height
+        width: w,
+        height: h
     });
 
     labelClipPathData.push(bBoxPts);

diff --git a/test/image/baselines/cheater.png b/test/image/baselines/cheater.png
diff --git a/test/image/baselines/cheater_contour.png b/test/image/baselines/cheater_contour.png
diff --git a/test/image/baselines/contour_constraints.png b/test/image/baselines/contour_constraints.png
diff --git a/test/image/baselines/contour_constraints_equal_boundary_minmax.png b/test/image/baselines/contour_constraints_equal_boundary_minmax.png
diff --git a/test/image/baselines/contour_edge_cases.png b/test/image/baselines/contour_edge_cases.png
diff --git a/test/image/baselines/contour_label-font-size.png b/test/image/baselines/contour_label-font-size.png
diff --git a/test/image/baselines/contour_label-formatting-via-colorbar.png b/test/image/baselines/contour_label-formatting-via-colorbar.png
diff --git a/test/image/baselines/contour_label-reversed-axes.png b/test/image/baselines/contour_label-reversed-axes.png
diff --git a/test/image/baselines/contour_label-reversed-xy.png b/test/image/baselines/contour_label-reversed-xy.png
diff --git a/test/image/baselines/contour_label-thousands-suffix.png b/test/image/baselines/contour_label-thousands-suffix.png
diff --git a/test/image/baselines/contour_legend.png b/test/image/baselines/contour_legend.png
diff --git a/test/image/baselines/contour_lines_coloring.png b/test/image/baselines/contour_lines_coloring.png
diff --git a/test/image/baselines/contour_nolines.png b/test/image/baselines/contour_nolines.png
diff --git a/test/image/baselines/contour_scatter.png b/test/image/baselines/contour_scatter.png
diff --git a/test/image/baselines/contour_transposed-irregular.png b/test/image/baselines/contour_transposed-irregular.png
diff --git a/test/image/baselines/heatmap_contour_irregular_bricks.png b/test/image/baselines/heatmap_contour_irregular_bricks.png
diff --git a/test/image/baselines/heatmap_multicategory.png b/test/image/baselines/heatmap_multicategory.png
diff --git a/test/image/mocks/contour_label-font-size.json b/test/image/mocks/contour_label-font-size.json
@@ -0,0 +1,106 @@
+{
+  "data": [
+    {
+      "type": "contour",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [
+        [-1, -2, -4, -8],
+        [-2, -4, -8, -1],
+        [-4, -8, -1, -2],
+        [-8, -1, -2, -4]
+      ],
+      "contours": {"showlabels": true, "labelfont": {"size": 4}},
+      "showscale": false
+    },
+    {
+      "type": "contour",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [
+        [-1, -2, -4, -8],
+        [-2, -4, -8, -1],
+        [-4, -8, -1, -2],
+        [-8, -1, -2, -4]
+      ],
+      "contours": {"showlabels": true, "labelfont": {"size": 8}},
+      "showscale": false,
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "type": "contour",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [
+        [-1, -2, -4, -8],
+        [-2, -4, -8, -1],
+        [-4, -8, -1, -2],
+        [-8, -1, -2, -4]
+      ],
+      "contours": {"showlabels": true, "labelfont": {"size": 12}},
+      "showscale": false,
+      "xaxis": "x3",
+      "yaxis": "y3"
+    },
+    {
+      "type": "contour",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [
+        [-1, -2, -4, -8],
+        [-2, -4, -8, -1],
+        [-4, -8, -1, -2],
+        [-8, -1, -2, -4]
+      ],
+      "contours": {"showlabels": true, "labelfont": {"size": 16}},
+      "showscale": false,
+      "xaxis": "x4",
+      "yaxis": "y4"
+    },
+    {
+      "type": "contour",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [
+        [-1, -2, -4, -8],
+        [-2, -4, -8, -1],
+        [-4, -8, -1, -2],
+        [-8, -1, -2, -4]
+      ],
+      "contours": {"showlabels": true, "labelfont": {"size": 20}},
+      "showscale": false,
+      "xaxis": "x5",
+      "yaxis": "y5"
+    },
+    {
+      "type": "contour",
+      "x": [1, 2, 3, 4],
+      "y": [1, 2, 3, 4],
+      "z": [
+        [-1, -2, -4, -8],
+        [-2, -4, -8, -1],
+        [-4, -8, -1, -2],
+        [-8, -1, -2, -4]
+      ],
+      "contours": {"showlabels": true, "labelfont": {"size": 24}},
+      "showscale": false,
+      "xaxis": "x6",
+      "yaxis": "y6"
+    }
+  ],
+  "layout": {
+    "grid": {"rows": 3, "columns": 2, "pattern": "independent"},
+
+    "template": {
+      "data": {
+        "contour": [{
+          "hoverlabel": {"namelength": -1}
+        }]
+      }
+    },
+
+    "width": 800,
+    "height": 1200
+  }
+}