add options to display text on histogram2d, histogram2dcontour and contour

archmoj · archmoj · commit ce90ced82e5d · 2021-11-19T11:35:06.000-05:00
diff --git a/draftlogs/6028_add.md b/draftlogs/6028_add.md
@@ -1 +1 @@
- - Add `texttemplate` and `textfont` to `heatmap` trace [[#6028](https://github.com/plotly/plotly.js/pull/6028)]
+ - Add `texttemplate` and `textfont` to `heatmap`, `histogram2d`, `histogram2dcontour` and `contour` traces [[#6028](https://github.com/plotly/plotly.js/pull/6028)]
diff --git a/src/traces/contour/attributes.js b/src/traces/contour/attributes.js
@@ -42,6 +42,8 @@ module.exports = extendFlat({
     yhoverformat: axisHoverFormat('y'),
     zhoverformat: axisHoverFormat('z', 1),
     hovertemplate: heatmapAttrs.hovertemplate,
+    texttemplate: heatmapAttrs.texttemplate,
+    textfont: heatmapAttrs.textfont,
     hoverongaps: heatmapAttrs.hoverongaps,
     connectgaps: extendFlat({}, heatmapAttrs.connectgaps, {
         description: [
diff --git a/src/traces/contour/defaults.js b/src/traces/contour/defaults.js
@@ -31,8 +31,13 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     coerce('text');
     coerce('hovertext');
-    coerce('hovertemplate');
     coerce('hoverongaps');
+    coerce('hovertemplate');
+    coerce('texttemplate');
+
+    var fontDflt = Lib.extendFlat({}, layout.font);
+    fontDflt.color = undefined; // color contrast by default
+    Lib.coerceFont(coerce, 'textfont', fontDflt);
 
     var isConstraint = (coerce('contours.type') === 'constraint');
     coerce('connectgaps', Lib.isArray1D(traceOut.z));
diff --git a/src/traces/histogram2d/attributes.js b/src/traces/histogram2d/attributes.js
@@ -6,6 +6,7 @@ var heatmapAttrs = require('../heatmap/attributes');
 var baseAttrs = require('../../plots/attributes');
 var axisHoverFormat = require('../../plots/cartesian/axis_format_attributes').axisHoverFormat;
 var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
+var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -69,6 +70,8 @@ module.exports = extendFlat(
         yhoverformat: axisHoverFormat('y'),
         zhoverformat: axisHoverFormat('z', 1),
         hovertemplate: hovertemplateAttrs({}, {keys: 'z'}),
+        texttemplate: texttemplateAttrs({editType: 'plot'}, {keys: 'z'}),
+        textfont: heatmapAttrs.textfont,
         showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
     },
     colorScaleAttrs('', {cLetter: 'z', autoColorDflt: false})
diff --git a/src/traces/histogram2d/defaults.js b/src/traces/histogram2d/defaults.js
@@ -19,6 +19,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     handleStyleDefaults(traceIn, traceOut, coerce, layout);
     colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'});
     coerce('hovertemplate');
+    coerce('texttemplate');
+
+    var fontDflt = Lib.extendFlat({}, layout.font);
+    fontDflt.color = undefined; // color contrast by default
+    Lib.coerceFont(coerce, 'textfont', fontDflt);
+
     coerce('xhoverformat');
     coerce('yhoverformat');
 };
diff --git a/src/traces/histogram2dcontour/attributes.js b/src/traces/histogram2dcontour/attributes.js
@@ -42,7 +42,9 @@ module.exports = extendFlat({
     xhoverformat: axisHoverFormat('x'),
     yhoverformat: axisHoverFormat('y'),
     zhoverformat: axisHoverFormat('z', 1),
-    hovertemplate: histogram2dAttrs.hovertemplate
+    hovertemplate: histogram2dAttrs.hovertemplate,
+    texttemplate: histogram2dAttrs.texttemplate,
+    textfont: histogram2dAttrs.textfont
 },
     colorScaleAttrs('', {
         cLetter: 'z',
diff --git a/src/traces/histogram2dcontour/defaults.js b/src/traces/histogram2dcontour/defaults.js
@@ -23,6 +23,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     handleContoursDefaults(traceIn, traceOut, coerce, coerce2);
     handleStyleDefaults(traceIn, traceOut, coerce, layout);
     coerce('hovertemplate');
+    coerce('texttemplate');
+
+    var fontDflt = Lib.extendFlat({}, layout.font);
+    fontDflt.color = undefined; // color contrast by default
+    Lib.coerceFont(coerce, 'textfont', fontDflt);
+
     coerce('xhoverformat');
     coerce('yhoverformat');
 };
diff --git a/test/image/baselines/contour_heatmap_coloring_reversescale.png b/test/image/baselines/contour_heatmap_coloring_reversescale.png
diff --git a/test/image/baselines/hist2d_summed.png b/test/image/baselines/hist2d_summed.png
diff --git a/test/image/baselines/histogram2d_bingroup-coloraxis.png b/test/image/baselines/histogram2d_bingroup-coloraxis.png
diff --git a/test/image/baselines/histogram2d_bingroup.png b/test/image/baselines/histogram2d_bingroup.png
diff --git a/test/image/baselines/histogram2d_legend.png b/test/image/baselines/histogram2d_legend.png
diff --git a/test/image/mocks/contour_heatmap_coloring_reversescale.json b/test/image/mocks/contour_heatmap_coloring_reversescale.json
@@ -11,6 +11,7 @@
       "x": [ -9, -6, -5, -3, -1 ],
       "y": [ 0, 1, 4, 5, 7 ],
       "type": "contour",
+      "texttemplate": "%{z}",
       "contours": {
         "coloring": "heatmap"
       },
@@ -33,6 +34,7 @@
       "x": [ -9, -6, -5, -3, -1 ],
       "y": [ 0, 1, 4, 5, 7 ],
       "type": "contour",
+      "texttemplate": "%{z}",
       "contours": {
         "coloring": "heatmap"
       },
diff --git a/test/image/mocks/hist2d_summed.json b/test/image/mocks/hist2d_summed.json
@@ -25,6 +25,7 @@
                 "5",
                 "6"
             ],
+            "texttemplate": "%{z} %{y}<br> %{x}",
             "type": "histogram2d",
             "histfunc": "sum"
         }
diff --git a/test/image/mocks/histogram2d_bingroup-coloraxis.json b/test/image/mocks/histogram2d_bingroup-coloraxis.json
@@ -586,6 +586,13 @@
     }
   ],
   "layout": {
+    "template": {
+      "data": {
+        "histogram2d": [{
+          "texttemplate": "%{z}"
+        }]
+      }
+    },
     "annotations": [
       {
         "showarrow": false,
diff --git a/test/image/mocks/histogram2d_bingroup.json b/test/image/mocks/histogram2d_bingroup.json
@@ -69,6 +69,13 @@
     }
   ],
   "layout": {
+    "template": {
+      "data": {
+        "histogram2d": [{
+          "texttemplate": "%{z}"
+        }]
+      }
+    },
     "grid": {
       "rows": 4,
       "columns": 2,
diff --git a/test/image/mocks/histogram2d_legend.json b/test/image/mocks/histogram2d_legend.json
@@ -28,6 +28,7 @@
             "histfunc": "sum",
             "showlegend": true,
             "showscale": false,
+            "texttemplate": "%{z}",
             "type": "histogram2d",
             "name": "histogram2d"
         },
@@ -62,6 +63,7 @@
             "showlegend": true,
             "showscale": false,
             "reversescale": true,
+            "texttemplate": "%{z}",
             "type": "histogram2d",
             "name": "histogram2d reversed scale"
         },
@@ -95,6 +97,7 @@
             "histfunc": "sum",
             "showlegend": true,
             "showscale": false,
+            "texttemplate": "%{z}",
             "type": "histogram2dcontour",
             "name": "histogram2dcontour"
         },
@@ -129,6 +132,7 @@
             "showlegend": true,
             "showscale": false,
             "reversescale": true,
+            "texttemplate": "%{z}",
             "type": "histogram2dcontour",
             "name": "histogram2dcontour reversed scale"
         }
diff --git a/test/plot-schema.json b/test/plot-schema.json
@@ -21558,11 +21558,63 @@
      "editType": "calc",
      "valType": "data_array"
     },
+    "textfont": {
+     "arrayOk": false,
+     "color": {
+      "arrayOk": true,
+      "editType": "style",
+      "valType": "color"
+     },
+     "colorsrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `color`.",
+      "editType": "none",
+      "valType": "string"
+     },
+     "description": "Sets the text font.",
+     "editType": "calc",
+     "family": {
+      "arrayOk": true,
+      "description": "HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*, *Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*, *PT Sans Narrow*, *Raleway*, *Times New Roman*.",
+      "editType": "calc",
+      "noBlank": true,
+      "strict": true,
+      "valType": "string"
+     },
+     "familysrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `family`.",
+      "editType": "none",
+      "valType": "string"
+     },
+     "role": "object",
+     "size": {
+      "arrayOk": true,
+      "editType": "calc",
+      "min": 1,
+      "valType": "number"
+     },
+     "sizesrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `size`.",
+      "editType": "none",
+      "valType": "string"
+     }
+    },
     "textsrc": {
      "description": "Sets the source reference on Chart Studio Cloud for `text`.",
      "editType": "none",
      "valType": "string"
     },
+    "texttemplate": {
+     "arrayOk": true,
+     "description": "Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example \"y: %{y}\". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example \"Price: %{y:$.2f}\". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example \"Day: %{2019-01-01|%A}\". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. variables `x`, `y`, `z` and `text`.",
+     "dflt": "",
+     "editType": "plot",
+     "valType": "string"
+    },
+    "texttemplatesrc": {
+     "description": "Sets the source reference on Chart Studio Cloud for `texttemplate`.",
+     "editType": "none",
+     "valType": "string"
+    },
     "transforms": {
      "items": {
       "transform": {
@@ -30375,6 +30427,58 @@
       "valType": "string"
      }
     },
+    "textfont": {
+     "arrayOk": false,
+     "color": {
+      "arrayOk": true,
+      "editType": "style",
+      "valType": "color"
+     },
+     "colorsrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `color`.",
+      "editType": "none",
+      "valType": "string"
+     },
+     "description": "Sets the text font.",
+     "editType": "calc",
+     "family": {
+      "arrayOk": true,
+      "description": "HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*, *Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*, *PT Sans Narrow*, *Raleway*, *Times New Roman*.",
+      "editType": "calc",
+      "noBlank": true,
+      "strict": true,
+      "valType": "string"
+     },
+     "familysrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `family`.",
+      "editType": "none",
+      "valType": "string"
+     },
+     "role": "object",
+     "size": {
+      "arrayOk": true,
+      "editType": "calc",
+      "min": 1,
+      "valType": "number"
+     },
+     "sizesrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `size`.",
+      "editType": "none",
+      "valType": "string"
+     }
+    },
+    "texttemplate": {
+     "arrayOk": true,
+     "description": "Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example \"y: %{y}\". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example \"Price: %{y:$.2f}\". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example \"Day: %{2019-01-01|%A}\". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. variable `z`",
+     "dflt": "",
+     "editType": "plot",
+     "valType": "string"
+    },
+    "texttemplatesrc": {
+     "description": "Sets the source reference on Chart Studio Cloud for `texttemplate`.",
+     "editType": "none",
+     "valType": "string"
+    },
     "transforms": {
      "items": {
       "transform": {
@@ -31635,6 +31739,58 @@
       "valType": "string"
      }
     },
+    "textfont": {
+     "arrayOk": false,
+     "color": {
+      "arrayOk": true,
+      "editType": "style",
+      "valType": "color"
+     },
+     "colorsrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `color`.",
+      "editType": "none",
+      "valType": "string"
+     },
+     "description": "Sets the text font.",
+     "editType": "calc",
+     "family": {
+      "arrayOk": true,
+      "description": "HTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*, *Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*, *PT Sans Narrow*, *Raleway*, *Times New Roman*.",
+      "editType": "calc",
+      "noBlank": true,
+      "strict": true,
+      "valType": "string"
+     },
+     "familysrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `family`.",
+      "editType": "none",
+      "valType": "string"
+     },
+     "role": "object",
+     "size": {
+      "arrayOk": true,
+      "editType": "calc",
+      "min": 1,
+      "valType": "number"
+     },
+     "sizesrc": {
+      "description": "Sets the source reference on Chart Studio Cloud for `size`.",
+      "editType": "none",
+      "valType": "string"
+     }
+    },
+    "texttemplate": {
+     "arrayOk": true,
+     "description": "Template string used for rendering the information text that appear on points. Note that this will override `textinfo`. Variables are inserted using %{variable}, for example \"y: %{y}\". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example \"Price: %{y:$.2f}\". https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example \"Day: %{2019-01-01|%A}\". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available. variable `z`",
+     "dflt": "",
+     "editType": "plot",
+     "valType": "string"
+    },
+    "texttemplatesrc": {
+     "description": "Sets the source reference on Chart Studio Cloud for `texttemplate`.",
+     "editType": "none",
+     "valType": "string"
+    },
     "transforms": {
      "items": {
       "transform": {

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		- - Add `texttemplate` and `textfont` to `heatmap` trace [[#6028](https://github.com/plotly/plotly.js/pull/6028)]
	`1`	+ - Add `texttemplate` and `textfont` to `heatmap`, `histogram2d`, `histogram2dcontour` and `contour` traces [[#6028](https://github.com/plotly/plotly.js/pull/6028)]