auto size heatmap text

Author: archmoj

src/plots/font_attributes.js

@@ -53,6 +53,9 @@ module.exports = function(opts) {
         description: '' + (opts.description || '') + ''
     };
 
+    if(opts.autoSize) attrs.size.dflt = 'auto';
+    if(opts.autoColor) attrs.color.dflt = 'auto';
+
     if(opts.arrayOk) {
         attrs.family.arrayOk = true;
         attrs.size.arrayOk = true;

src/traces/heatmap/attributes.js

@@ -126,6 +126,8 @@ module.exports = extendFlat({
     }),
     textfont: fontAttrs({
         editType: 'plot',
+        autoSize: true,
+        autoColor: true,
         colorEditType: 'style',
         description: 'Sets the text font.'
     }),

src/traces/heatmap/label_defaults.js

@@ -5,7 +5,9 @@ var Lib = require('../../lib');
 module.exports = function handleHeatmapLabelDefaults(coerce, layout) {
     coerce('texttemplate');
 
-    var fontDflt = Lib.extendFlat({}, layout.font);
-    fontDflt.color = undefined; // color contrast by default
+    var fontDflt = Lib.extendFlat({}, layout.font, {
+        color: 'auto',
+        size: 'auto'
+    });
     Lib.coerceFont(coerce, 'textfont', fontDflt);
 };

src/traces/heatmap/plot.js

@@ -34,6 +34,8 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
         var plotGroup = d3.select(this);
         var cd0 = cd[0];
         var trace = cd0.trace;
+        var xGap = trace.xgap || 0;
+        var yGap = trace.ygap || 0;
 
         var z = cd0.z;
         var x = cd0.x;
@@ -49,7 +51,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
         var xrev = false;
         var yrev = false;
 
-        var left, right, temp, top, bottom, i, j;
+        var left, right, temp, top, bottom, i, j, k;
 
         // TODO: if there are multiple overlapping categorical heatmaps,
         // or if we allow category sorting, then the categories may not be
@@ -298,8 +300,6 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
         } else { // zsmooth = false -> filling potentially large bricks works fastest with fillRect
             // gaps do not need to be exact integers, but if they *are* we will get
             // cleaner edges by rounding at least one edge
-            var xGap = trace.xgap;
-            var yGap = trace.ygap;
             var xGapLeft = Math.floor(xGap / 2);
             var yGapTop = Math.floor(yGap / 2);
 
@@ -432,8 +432,17 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
                     var _t = Lib.texttemplateString(texttemplate, obj, gd._fullLayout._d3locale, obj, trace._meta || {});
                     if(!_t) continue;
 
+                    var lines = _t.split('<br>');
+                    var nL = lines.length;
+                    var nC = 0;
+                    for(k = 0; k < nL; k++) {
+                        nC = Math.max(nC, lines[k].length);
+                    }
+
                     textData.push({
-                        t: _t,
+                        l: nL, // number of lines
+                        c: nC, // maximum number of chars in a line
+                        t: _t, // text
                         x: _x,
                         y: _y,
                         z: zVal
@@ -444,10 +453,54 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
             var font = trace.textfont;
             var fontFamily = font.family;
             var fontSize = font.size;
+
+            if(!fontSize || fontSize === 'auto') {
+                var minW = Infinity;
+                var minH = Infinity;
+                var maxL = 0;
+                var maxC = 0;
+
+                for(k = 0; k < textData.length; k++) {
+                    var d = textData[k];
+                    maxL = Math.max(maxL, d.l);
+                    maxC = Math.max(maxC, d.c);
+
+                    if(k < textData.length - 1) {
+                        var nextD = textData[k + 1];
+                        var dx = Math.abs(nextD.x - d.x);
+                        var dy = Math.abs(nextD.y - d.y);
+
+                        if(dx) minW = Math.min(minW, dx);
+                        if(dy) minH = Math.min(minH, dy);
+                    }
+                }
+
+                if(
+                    !isFinite(minW) ||
+                    !isFinite(minH)
+                ) {
+                    fontSize = 12;
+                } else {
+                    minW -= xGap;
+                    minH -= yGap;
+
+                    minW /= maxC;
+                    minH /= maxL;
+
+                    minW /= LINE_SPACING / 2;
+                    minH /= LINE_SPACING;
+
+                    fontSize = Math.min(
+                        Math.floor(minW),
+                        Math.floor(minH)
+                    );
+                }
+            }
+            if(fontSize <= 0 || !isFinite(fontSize)) return;
+
             var xFn = function(d) { return d.x; };
             var yFn = function(d) {
-                var nlines = d.t.split('<br>').length;
-                return d.y - fontSize * ((nlines * LINE_SPACING) / 2 - 1);
+                return d.y - fontSize * ((d.l * LINE_SPACING) / 2 - 1);
             };
 
             var labels = selectLabels(plotGroup).data(textData);
@@ -462,7 +515,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
                     var thisLabel = d3.select(this);
 
                     var fontColor = font.color;
-                    if(!fontColor) {
+                    if(!fontColor || fontColor === 'auto') {
                         fontColor = Color.contrast(
                             'rgba(' +
                                 sclFunc(d.z).join() +

test/image/baselines/4.png

@@ -2,6 +2,7 @@
     "data": [
         {
             "texttemplate": "%{z}",
+            "textfont": { "family": "Times New Roman" },
             "z": [
                 [
                     1,

test/image/baselines/contour_heatmap_coloring_reversescale.png

@@ -1,6 +1,7 @@
 {
   "data": [
     {
+      "texttemplate": "%{z}",
       "z": [
         [1, 2, 3, 4, 5],
         [3, 4, 5, 6, 7],

test/image/baselines/heatmap_brick_padding.png

@@ -14,9 +14,6 @@
   "data": [{
     "type": "heatmap",
     "texttemplate": "x: %{x}<br>y: %{y}<br>z: %{z}",
-    "textfont": {
-      "size": 14
-    },
 
     "x": ["z", "y", "x", "w"],
     "y": ["d", "c", "b", "a"],

test/image/baselines/heatmap_columnar.png

@@ -7,7 +7,6 @@
     "text": ["zero", "fifty", "one hundred", "fifty", "zero", "two hundred<br>and fifty-five", "one hundred", "five hundred<br>and ten", "one thousand ten"],
     "texttemplate": "%{text}",
     "textfont": {
-      "size": 20,
       "color": "rgba(255,255,255,0.5)"
     }
   }],

test/image/baselines/heatmap_xyz-gaps-on-sides.png

@@ -21560,6 +21560,7 @@
     },
     "textfont": {
      "color": {
+      "dflt": "auto",
       "editType": "style",
       "valType": "color"
      },
@@ -21574,6 +21575,7 @@
      },
      "role": "object",
      "size": {
+      "dflt": "auto",
       "editType": "plot",
       "min": 1,
       "valType": "number"
@@ -26659,6 +26661,7 @@
     },
     "textfont": {
      "color": {
+      "dflt": "auto",
       "editType": "style",
       "valType": "color"
      },
@@ -26673,6 +26676,7 @@
      },
      "role": "object",
      "size": {
+      "dflt": "auto",
       "editType": "plot",
       "min": 1,
       "valType": "number"
@@ -30379,6 +30383,7 @@
     },
     "textfont": {
      "color": {
+      "dflt": "auto",
       "editType": "style",
       "valType": "color"
      },
@@ -30393,6 +30398,7 @@
      },
      "role": "object",
      "size": {
+      "dflt": "auto",
       "editType": "plot",
       "min": 1,
       "valType": "number"
@@ -31666,6 +31672,7 @@
     },
     "textfont": {
      "color": {
+      "dflt": "auto",
       "editType": "style",
       "valType": "color"
      },
@@ -31680,6 +31687,7 @@
      },
      "role": "object",
      "size": {
+      "dflt": "auto",
       "editType": "plot",
       "min": 1,
       "valType": "number"