texttemplate: add support for scatter(carpet|geo|polar|ternary)

Author: antoinerg

src/components/drawing/index.js

@@ -700,7 +700,10 @@ drawing.textPointStyle = function(s, trace, gd) {
         }
 
         if(template) {
-            text = Lib.texttemplateString(text, {}, gd._fullLayout._d3locale, d, trace._meta || {}, {customdata: d.data});
+            var extra = {};
+            if(d.tx) extra.text = d.tx;
+            if(d.data) extra.customdata = d.data;
+            text = Lib.texttemplateString(text, {}, gd._fullLayout._d3locale, d, trace._meta || {}, extra);
         }
 
         var pos = d.tp || trace.textposition;

src/traces/scattercarpet/attributes.js

@@ -11,6 +11,7 @@
 var scatterAttrs = require('../scatter/attributes');
 var plotAttrs = require('../../plots/attributes');
 var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
+var texttemplateAttrs = require('../../plots/texttemplate_attributes');
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -52,6 +53,9 @@ module.exports = {
             'these elements will be seen in the hover labels.'
         ].join(' ')
     }),
+    texttemplate: texttemplateAttrs({editType: 'plot'}, {
+        keys: ['a', 'b', 'text']
+    }),
     hovertext: extendFlat({}, scatterAttrs.hovertext, {
         description: [
             'Sets hover text elements associated with each (a,b) point.',

src/traces/scattercarpet/defaults.js

@@ -44,6 +44,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     traceOut._length = len;
 
     coerce('text');
+    coerce('texttemplate');
     coerce('hovertext');
 
     var defaultMode = len < constants.PTS_LINESONLY ? 'lines+markers' : 'lines';

src/traces/scattergeo/attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
+var texttemplateAttrs = require('../../plots/texttemplate_attributes');
 var scatterAttrs = require('../scatter/attributes');
 var plotAttrs = require('../../plots/attributes');
 var colorAttributes = require('../../components/colorscale/attributes');
@@ -64,6 +65,9 @@ module.exports = overrideAll({
             'these elements will be seen in the hover labels.'
         ].join(' ')
     }),
+    texttemplate: texttemplateAttrs({editType: 'plot'}, {
+        keys: ['latlon', 'text']
+    }),
     hovertext: extendFlat({}, scatterAttrs.hovertext, {
         description: [
             'Sets hover text elements associated with each (lon,lat) pair',

src/traces/scattergeo/defaults.js

@@ -32,6 +32,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('text');
+    coerce('texttemplate');
     coerce('hovertext');
     coerce('hovertemplate');
     coerce('mode');

src/traces/scatterpolar/attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
+var texttemplateAttrs = require('../../plots/texttemplate_attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 var scatterAttrs = require('../scatter/attributes');
 var plotAttrs = require('../../plots/attributes');
@@ -85,6 +86,9 @@ module.exports = {
     },
 
     text: scatterAttrs.text,
+    texttemplate: texttemplateAttrs({editType: 'plot'}, {
+        keys: ['r', 'theta', 'text']
+    }),
     hovertext: scatterAttrs.hovertext,
 
     line: {

src/traces/scatterpolar/defaults.js

@@ -34,6 +34,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     coerce('thetaunit');
     coerce('mode', len < PTS_LINESONLY ? 'lines+markers' : 'lines');
     coerce('text');
+    coerce('texttemplate');
     coerce('hovertext');
     if(traceOut.hoveron !== 'fills') coerce('hovertemplate');
 

src/traces/scatterternary/attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
+var texttemplateAttrs = require('../../plots/texttemplate_attributes');
 var scatterAttrs = require('../scatter/attributes');
 var plotAttrs = require('../../plots/attributes');
 var colorScaleAttrs = require('../../components/colorscale/attributes');
@@ -80,6 +81,9 @@ module.exports = {
             'these elements will be seen in the hover labels.'
         ].join(' ')
     }),
+    texttemplate: texttemplateAttrs({editType: 'plot'}, {
+        keys: ['a', 'b', 'c', 'text']
+    }),
     hovertext: extendFlat({}, scatterAttrs.hovertext, {
         description: [
             'Sets hover text elements associated with each (a,b,c) point.',

src/traces/scatterternary/defaults.js

@@ -58,6 +58,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('sum');
 
     coerce('text');
+    coerce('texttemplate');
     coerce('hovertext');
     if(traceOut.hoveron !== 'fills') coerce('hovertemplate');
 

test/image/baselines/texttemplate_scatter.png

@@ -0,0 +1,140 @@
+{
+  "data": [{
+      "type": "scattergeo",
+      "mode": "markers+text",
+      "lon": [
+        -73.57,
+        -79.24,
+        -123.06
+      ],
+      "lat": [
+        45.5,
+        43.4,
+        49.13
+      ],
+      "text": [
+        "Montreal",
+        "Toronto",
+        "Vancouver"
+      ],
+      "texttemplate": "%{text}: (%{lonlat[0]:.0f}, %{lonlat[1]:0.f}): %{customdata:.2s}",
+      "textposition": "top center",
+      "customdata": [1780000, 2930000, 675218],
+      "geo": "geo"
+    }, {
+      "type": "carpet",
+      "carpet": "carpet1",
+      "a": [0.1, 0.2, 0.3],
+      "b": [1, 2, 3],
+      "y": [
+        [1, 2.2, 3],
+        [1.5, 2.7, 3.5],
+        [1.7, 2.9, 3.7]
+      ],
+      "cheaterslope": 1,
+
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "type": "scattercarpet",
+      "carpet": "carpet1",
+      "name": "b = 1.5",
+      "mode": "markers+text",
+      "a": [0.1, 0.15, 0.25, 0.3],
+      "b": [1.5, 1.5, 1.5, 1.5],
+
+      "text": ["a", "b", "c", "d"],
+      "texttemplate": "%{text}: (%{a}, %{b})",
+      "textposition": "top center",
+      "xaxis": "x2",
+      "yaxis": "y2"
+    }, {
+      "type": "scatterpolar",
+      "mode": "markers+text",
+      "text": ["A", "B", "C", "D"],
+      "texttemplate": "%{text}: (%{r:0.2f},%{theta:0.2f})",
+      "textposition": "top center",
+      "r": [1, 0.5, 1, 1.5],
+      "theta": [0, 90, 180, 270],
+      "showgrid": false
+  }, {
+      "type": "scatterternary",
+      "a": [
+          3,
+          2,
+          5
+      ],
+      "b": [
+          2,
+          5,
+          2
+      ],
+      "c": [
+          5,
+          2,
+          2
+      ],
+      "mode": "markers+text",
+      "text": ["A", "B", "C"],
+      "texttemplate": "%{text}<br>(%{a:.2f}, %{b:.2f}, %{c:.2f})",
+      "textposition": "bottom center"
+  }
+  ],
+  "layout": {
+    "showlegend": false,
+    "width": 800,
+    "height": 800,
+    "margin": {
+      "t": 50,
+      "b": 50,
+      "l": 50,
+      "r": 50
+    },
+    "geo": {
+      "scope": "north america",
+      "domain": {
+        "row": 1,
+        "column": 0
+      },
+      "lonaxis": {
+        "range": [
+          -130,
+          -55
+        ]
+      },
+      "lataxis": {
+        "range": [
+          40,
+          70
+        ]
+      },
+      "center": {
+        "lat": 57
+      }
+    },
+    "polar": {
+      "radialaxis": {
+        "showline": false,
+        "linewidth": 0,
+        "tickwidth": 2,
+        "gridcolor": "white",
+        "gridwidth": 0
+      }
+    },
+    "ternary": {
+        "sum": 10,
+        "domain": {
+            "row": 1,
+            "column": 1
+        }
+    },
+    "grid": {
+      "rows": 2,
+      "columns": 2,
+      "pattern": "independent",
+      "xgap": 5,
+      "ygap": 5
+    }
+  }
+}

test/image/mocks/texttemplate_scatter.json

@@ -13,6 +13,7 @@ var failTest = require('../assets/fail_test');
 
 var mouseEvent = require('../assets/mouse_event');
 var assertHoverLabelContent = require('../assets/custom_assertions').assertHoverLabelContent;
+var checkTextTemplate = require('../assets/check_texttemplate');
 
 var supplyAllDefaults = require('../assets/supply_defaults');
 
@@ -714,6 +715,24 @@ describe('scattercarpet hover labels', function() {
     });
 });
 
+describe('scattercarpet texttemplates', function() {
+    checkTextTemplate([{
+        'type': 'scattercarpet',
+        'carpet': 'carpet1',
+        'mode': 'markers+text',
+        'a': [0.1, 0.15, 0.25],
+        'b': [1.5, 1.5, 1.5],
+        'text': ['A', 'B', 'C']
+    }, {
+        'type': 'carpet',
+        'carpet': 'carpet1',
+        'a': [0.1, 0.2, 0.3],
+        'b': [1, 2, 3],
+        'y': [[1, 2.2, 3], [1.5, 2.7, 3.5], [1.7, 2.9, 3.7]]
+    }], 'g.textpoint', [
+        ['%{text}: %{a:0.1f}, %{b:0.1f}', ['A: 0.1, 1.5', 'B: 0.1, 1.5', 'C: 0.3, 1.5']]
+    ]);
+});
 describe('contourcarpet plotting & editing', function() {
     var gd;
 

test/jasmine/tests/carpet_test.js

@@ -12,6 +12,7 @@ var mouseEvent = require('../assets/mouse_event');
 var customAssertions = require('../assets/custom_assertions');
 var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
 var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
+var checkTextTemplate = require('../assets/check_texttemplate');
 var failTest = require('../assets/fail_test');
 var supplyAllDefaults = require('../assets/supply_defaults');
 
@@ -436,3 +437,15 @@ describe('scattergeo drawing', function() {
         .then(done);
     });
 });
+
+describe('Test scattergeo texttemplate:', function() {
+    checkTextTemplate([{
+        'type': 'scattergeo',
+        'mode': 'markers+text',
+        'lon': [-73.57, -79.24, -123.06],
+        'lat': [45.5, 43.4, 49.13],
+        'text': ['Montreal', 'Toronto', 'Vancouver']
+    }], '.scattergeo text', [
+        ['%{text}: %{lonlat[0]}, %{lonlat[1]}', ['Montreal: -73.57, 45.5', 'Toronto: -79.24, 43.4', 'Vancouver: -123.06, 49.13']]
+    ]);
+});

test/jasmine/tests/scattergeo_test.js

@@ -9,6 +9,7 @@ var mouseEvent = require('../assets/mouse_event');
 
 var customAssertions = require('../assets/custom_assertions');
 var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
+var checkTextTemplate = require('../assets/check_texttemplate');
 
 describe('Test scatterpolar trace defaults:', function() {
     var traceOut;
@@ -198,3 +199,17 @@ describe('Test scatterpolar hover:', function() {
         });
     });
 });
+
+describe('Test scatterpolar texttemplate:', function() {
+    checkTextTemplate([{
+        'type': 'scatterpolar',
+        'mode': 'markers+text',
+        'text': ['A', 'B', 'C'],
+        'textposition': 'top center',
+        'r': [1, 0.5, 1],
+        'theta': [0, 90, 180],
+    }], 'g.textpoint', [
+        ['%{text}: (%{r:0.2f}, %{theta:0.2f})', ['A: (1.00, 0.00)', 'B: (0.50, 1.57)', 'C: (1.00, 3.14)']],
+        [['', '', '%{theta:0.2f}'], ['', '', '3.14']]
+    ]);
+});

test/jasmine/tests/scatterpolar_test.js

@@ -11,6 +11,7 @@ var supplyAllDefaults = require('../assets/supply_defaults');
 
 var mouseEvent = require('../assets/mouse_event');
 var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
+var checkTextTemplate = require('../assets/check_texttemplate');
 
 var assertClip = customAssertions.assertClip;
 var assertNodeDisplay = customAssertions.assertNodeDisplay;
@@ -554,3 +555,16 @@ describe('Test scatterternary *cliponaxis*', function() {
         .then(done);
     });
 });
+
+describe('Test scattergeo texttemplate:', function() {
+    checkTextTemplate([{
+        'type': 'scatterternary',
+        'a': [3, 2, 5],
+        'b': [2, 5, 2],
+        'c': [5, 2, 2 ],
+        'mode': 'markers+text',
+        'text': ['A', 'B', 'C']
+    }], 'g.textpoint', [
+        ['%{text} (%{a:.2f}, %{b:.2f}, %{c:.2f})', ['A (0.30, 0.20, 0.50)', 'B (0.22, 0.56, 0.22)', 'C (0.56, 0.22, 0.22)']]
+    ]);
+});