fix texttemplate formatting for scattergl and scatterpolargl

... by adding a formatLabels method. The result is a bit hackier
    than for the SVG trace types as we have to juggle with calcdata
    mocks. Note also that text templates are formatting during the
    calc step for scattergl and scatterpolargl which may cause
    some issues down the road. I didn't notice anything in this
    iteration, but we should probably move the text templates
    formatting down to the plot step down the road.

Author: etpinard

src/traces/scattergl/calc.js

@@ -36,8 +36,8 @@ module.exports = function calc(gd, trace) {
     var stash = {};
     var i, xx, yy;
 
-    var x = xa.makeCalcdata(trace, 'x');
-    var y = ya.makeCalcdata(trace, 'y');
+    var x = trace._x = xa.makeCalcdata(trace, 'x');
+    var y = trace._y = ya.makeCalcdata(trace, 'y');
 
     // we need hi-precision for scatter2d,
     // regl-scatter2d uses NaNs for bad/missing values

src/traces/scattergl/convert.js

@@ -49,9 +49,9 @@ function convertStyle(gd, trace) {
     if(trace.visible !== true) return opts;
 
     if(subTypes.hasText(trace)) {
-        opts.text = convertTextStyle(trace, gd);
-        opts.textSel = convertTextSelection(trace, trace.selected);
-        opts.textUnsel = convertTextSelection(trace, trace.unselected);
+        opts.text = convertTextStyle(gd, trace);
+        opts.textSel = convertTextSelection(gd, trace, trace.selected);
+        opts.textUnsel = convertTextSelection(gd, trace, trace.unselected);
     }
 
     if(subTypes.hasMarkers(trace)) {
@@ -102,7 +102,8 @@ function convertStyle(gd, trace) {
     return opts;
 }
 
-function convertTextStyle(trace, gd) {
+function convertTextStyle(gd, trace) {
+    var fullLayout = gd._fullLayout;
     var count = trace._length;
     var textfontIn = trace.textfont;
     var textpositionIn = trace.textposition;
@@ -116,14 +117,21 @@ function convertTextStyle(trace, gd) {
     var texttemplate = trace.texttemplate;
     if(texttemplate) {
         optsOut.text = [];
+
+        var d3locale = fullLayout._d3locale;
         var isArray = Array.isArray(texttemplate);
         var N = isArray ? Math.min(texttemplate.length, count) : count;
-        var txt = isArray ? function(i) {return texttemplate[i];} : function() { return texttemplate;};
-        var d3locale = gd._fullLayout._d3locale;
+        var txt = isArray ?
+            function(i) { return texttemplate[i]; } :
+            function() { return texttemplate; };
+
         for(i = 0; i < N; i++) {
-            var pt = {};
-            appendArrayPointValue(pt, trace, i);
-            optsOut.text.push(Lib.texttemplateString(txt(i), pt, d3locale, pt, trace._meta || {}));
+            var d = {i: i};
+            var labels = trace._module.formatLabels(d, trace, fullLayout);
+            var pointValues = {};
+            appendArrayPointValue(pointValues, trace, i);
+            var meta = trace._meta || {};
+            optsOut.text.push(Lib.texttemplateString(txt(i), labels, d3locale, pointValues, d, meta));
         }
     } else {
         if(Array.isArray(trace.text) && trace.text.length < count) {
@@ -339,7 +347,7 @@ function convertMarkerSelection(trace, target) {
     return optsOut;
 }
 
-function convertTextSelection(trace, target) {
+function convertTextSelection(gd, trace, target) {
     var optsOut = {};
 
     if(!target) return optsOut;
@@ -348,13 +356,14 @@ function convertTextSelection(trace, target) {
         var optsIn = {
             opacity: 1,
             text: trace.text,
+            texttemplate: trace.texttemplate,
             textposition: trace.textposition,
             textfont: Lib.extendFlat({}, trace.textfont)
         };
         if(target.textfont) {
             Lib.extendFlat(optsIn.textfont, target.textfont);
         }
-        optsOut = convertTextStyle(optsIn);
+        optsOut = convertTextStyle(gd, optsIn);
     }
 
     return optsOut;

src/traces/scattergl/format_labels.js

@@ -0,0 +1,18 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var scatterFormatLabels = require('../scatter/format_labels');
+
+module.exports = function formatLabels(cdi, trace, fullLayout) {
+    var i = cdi.i;
+    if(!('x' in cdi)) cdi.x = trace._x[i];
+    if(!('y' in cdi)) cdi.y = trace._y[i];
+    return scatterFormatLabels(cdi, trace, fullLayout);
+};

src/traces/scattergl/index.js

@@ -20,6 +20,7 @@ module.exports = {
     supplyDefaults: require('./defaults'),
     crossTraceDefaults: require('../scatter/cross_trace_defaults'),
     colorbar: require('../scatter/marker_colorbar'),
+    formatLabels: require('./format_labels'),
     calc: require('./calc'),
     plot: require('./plot'),
     hoverPoints: hover.hoverPoints,

src/traces/scatterpolargl/calc.js

@@ -19,8 +19,8 @@ module.exports = function calc(gd, trace) {
     var subplotId = trace.subplot;
     var radialAxis = fullLayout[subplotId].radialaxis;
     var angularAxis = fullLayout[subplotId].angularaxis;
-    var rArray = radialAxis.makeCalcdata(trace, 'r');
-    var thetaArray = angularAxis.makeCalcdata(trace, 'theta');
+    var rArray = trace._r = radialAxis.makeCalcdata(trace, 'r');
+    var thetaArray = trace._theta = angularAxis.makeCalcdata(trace, 'theta');
     var len = trace._length;
     var stash = {};
 

src/traces/scatterpolargl/format_labels.js

@@ -0,0 +1,18 @@
+/**
+* Copyright 2012-2019, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var scatterPolarFormatLabels = require('../scatterpolar/format_labels');
+
+module.exports = function formatLabels(cdi, trace, fullLayout) {
+    var i = cdi.i;
+    if(!('r' in cdi)) cdi.r = trace._r[i];
+    if(!('theta' in cdi)) cdi.theta = trace._theta[i];
+    return scatterPolarFormatLabels(cdi, trace, fullLayout);
+};

src/traces/scatterpolargl/index.js

@@ -17,6 +17,7 @@ module.exports = {
     attributes: require('./attributes'),
     supplyDefaults: require('./defaults'),
     colorbar: require('../scatter/marker_colorbar'),
+    formatLabels: require('./format_labels'),
 
     calc: require('./calc'),
     plot: require('./plot'),

test/jasmine/tests/scattergl_test.js

@@ -39,17 +39,6 @@ describe('end-to-end scattergl tests', function() {
         }).catch(failTest).then(done);
     });
 
-    checkTextTemplate([{
-        type: 'scattergl',
-        mode: 'text+lines',
-        x: [1, 2, 3, 4],
-        y: [2, 3, 4, 5],
-        text: ['A', 'B', 'C', 'D'],
-    }], '@gl', [
-        ['%{text}: %{x}, %{y}', ['A: 1, 2', 'B: 2, 3', 'C: 3, 4', 'D: 4, 5']],
-        [['%{x}', '%{x}', '%{text}', '%{y}'], ['1', '2', 'C', '5']]
-    ]);
-
     it('@gl should update a plot with text labels', function(done) {
         Plotly.react(gd, [{
             type: 'scattergl',
@@ -761,3 +750,45 @@ describe('Test scattergl autorange:', function() {
         });
     });
 });
+
+describe('Test texttemplate for scattergl', function() {
+    checkTextTemplate([{
+        type: 'scattergl',
+        mode: 'text+lines',
+        x: [1, 2, 3, 4],
+        y: [2, 3, 4, 5],
+        text: ['A', 'B', 'C', 'D'],
+    }], '@gl', [
+        ['%{text}: %{x}, %{y}', ['A: 1, 2', 'B: 2, 3', 'C: 3, 4', 'D: 4, 5']],
+        [['%{x}', '%{x}', '%{text}', '%{y}'], ['1', '2', 'C', '5']]
+    ]);
+
+    checkTextTemplate({
+        data: [{
+            type: 'scattergl',
+            mode: 'text',
+            x: ['a', 'b'],
+            y: ['1000', '1200']
+        }],
+        layout: {
+            xaxis: { tickprefix: '*', ticksuffix: '*' },
+            yaxis: { tickprefix: '$', ticksuffix: ' !', tickformat: '.2f'}
+        }
+    }, '@gl', [
+        ['%{x} is %{y}', ['*a* is $1000.00 !', '*b* is $1200.00 !']]
+    ]);
+
+    checkTextTemplate({
+        data: [{
+            type: 'scattergl',
+            mode: 'text',
+            y: ['1000', '1200']
+        }],
+        layout: {
+            xaxis: { tickprefix: '*', ticksuffix: '*' },
+            yaxis: { tickprefix: '$', ticksuffix: ' !', tickformat: '.2f'}
+        }
+    }, '@gl', [
+        ['%{x} is %{y}', ['*0* is $1000.00 !', '*1* is $1200.00 !']]
+    ]);
+});

test/jasmine/tests/scatterpolargl_test.js

@@ -391,4 +391,21 @@ describe('Test scatterpolargl texttemplate:', function() {
         ['%{text}: (%{r:0.2f}, %{theta:0.1f})', ['A: (1.00, 0.0)', 'B: (0.50, 90.0)', 'C: (1.00, 180.0)']],
         [['', 'b%{theta:0.2f}', '%{theta:0.2f}'], ['', 'b90.00', '180.00']]
     ]);
+
+    checkTextTemplate({
+        data: [{
+            type: 'scatterpolargl',
+            mode: 'text',
+            theta: ['a', 'b'],
+            r: ['1000', '1200']
+        }],
+        layout: {
+            polar: {
+                radialaxis: { tickprefix: '$', ticksuffix: ' !', tickformat: '.2f'},
+                angularaxis: { tickprefix: '*', ticksuffix: '*' }
+            }
+        }
+    }, '.textpoint', [
+        ['%{theta} is %{r}', ['*a* is $1000.00 !', '*b* is $1200.00 !']]
+    ]);
 });