Merge pull request #6924 from plotly/fix6919-heatmap-text-color-on-missing-data

Fix `heatmap` text color and `texttemplate` on cells with missing data

Author: archmoj

draftlogs/6924_fix.md

@@ -0,0 +1 @@
+ - Fix heatmap text color and `texttemplate` on cells with missing data [[#6924](https://github.com/plotly/plotly.js/pull/6924)]

src/lib/index.js

@@ -1219,7 +1219,9 @@ function templateFormatString(string, labels, d3locale) {
             var fmt;
             if(format[0] === ':') {
                 fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
-                value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
+                if(value !== '') { // e.g. skip missing data on heatmap
+                    value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
+                }
             }
 
             if(format[0] === '|') {

src/traces/heatmap/plot.js

@@ -535,6 +535,7 @@ module.exports = function(gd, plotinfo, cdheatmaps, heatmapLayer) {
                     var fontColor = font.color;
                     if(!fontColor || fontColor === 'auto') {
                         fontColor = Color.contrast(
+                            d.z === undefined ? gd._fullLayout.plot_bgcolor :
                             'rgba(' +
                                 sclFunc(d.z).join() +
                             ')'

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

@@ -0,0 +1,60 @@
+{
+    "data": [
+        {
+            "colorscale": "Reds",
+            "text": [
+                [
+                    "One",
+                    "Two",
+                    "Three"
+                ],
+                [
+                    "Four",
+                    "Five",
+                    "Six"
+                ],
+                [
+                    "Seven",
+                    "Eight",
+                    "Nine"
+                ]
+            ],
+            "texttemplate": "%{text}",
+            "x": [
+                0,
+                1,
+                2
+            ],
+            "y": [
+                0,
+                1,
+                2
+            ],
+            "z": [
+                [
+                    null,
+                    2,
+                    3
+                ],
+                [
+                    4,
+                    null,
+                    6
+                ],
+                [
+                    7,
+                    8,
+                    null
+                ]
+            ],
+            "type": "heatmap"
+        }
+    ],
+    "layout": {
+        "title": {
+            "text": "Heatmap text color should contrast with<br>background on cells with missing data"
+        },
+        "width": 400,
+        "height": 400
+    }
+}