texttemplate: add support for scattergl

Author: antoinerg

src/traces/scattergl/attributes.js

@@ -98,3 +98,4 @@ var attrs = module.exports = overrideAll({
 
 attrs.x.editType = attrs.y.editType = attrs.x0.editType = attrs.y0.editType = 'calc+clearAxisTypes';
 attrs.hovertemplate = scatterAttrs.hovertemplate;
+attrs.texttemplate = scatterAttrs.texttemplate;

src/traces/scattergl/convert.js

@@ -28,6 +28,8 @@ var TEXTOFFSETSIGN = {
     start: 1, left: 1, end: -1, right: -1, middle: 0, center: 0, bottom: 1, top: -1
 };
 
+var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPointValue;
+
 function convertStyle(gd, trace) {
     var i;
 
@@ -111,7 +113,26 @@ function convertTextStyle(trace) {
     var optsOut = {};
     var i;
 
-    optsOut.text = trace.text;
+    var texttemplate = trace.texttemplate;
+    if(texttemplate) {
+        optsOut.text = [];
+        var pt;
+        if(Array.isArray(texttemplate)) {
+            for(i = 0; i < texttemplate.length; i++) {
+                pt = {};
+                appendArrayPointValue(pt, trace, i);
+                optsOut.text.push(Lib.texttemplateString(texttemplate[i], pt, function() {}, pt));
+            }
+        } else {
+            for(i = 0; i < trace.x.length; i++) {
+                pt = {};
+                appendArrayPointValue(pt, trace, i);
+                optsOut.text.push(Lib.texttemplateString(texttemplate, pt, function() {}, pt));
+            }
+        }
+    } else {
+        optsOut.text = trace.text;
+    }
     optsOut.opacity = trace.opacity;
     optsOut.font = {};
     optsOut.align = [];

src/traces/scattergl/defaults.js

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

test/jasmine/assets/check_texttemplate.js

@@ -1,4 +1,6 @@
 var Plotly = require('@lib/index');
+var Registry = require('@src/registry');
+
 var Lib = require('@src/lib');
 var failTest = require('../assets/fail_test');
 var createGraphDiv = require('../assets/create_graph_div');
@@ -8,6 +10,8 @@ var supplyAllDefaults = require('../assets/supply_defaults');
 'use strict';
 
 module.exports = function checkTextTemplate(mock, selector, tests) {
+    var isGL = Registry.traceIs(mock[0].type, 'gl');
+
     it('should not coerce textinfo when texttemplate', function() {
         var gd = {};
         gd.data = Lib.extendDeep(mock, {});
@@ -27,17 +31,30 @@ module.exports = function checkTextTemplate(mock, selector, tests) {
     tests.push(['%{customdata}', customdata]);
 
     tests.forEach(function(test) {
-        it('should support texttemplate', function(done) {
+        it(isGL ? '@gl' : '' + 'should support texttemplate', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep(mock, {});
             mockCopy[0].texttemplate = test[0];
             Plotly.newPlot(gd, mockCopy)
                 .then(function() {
-                    var pts = Plotly.d3.selectAll(selector);
-                    expect(pts.size()).toBe(test[1].length);
-                    pts.each(function() {
-                        expect(test[1]).toContain(Plotly.d3.select(this).text());
-                    });
+                    if(isGL) {
+                        var glText = gd._fullLayout._plots.xy._scene.glText;
+                        expect(glText.length).toEqual(1);
+                        expect(glText[0].textOffsets.length).toEqual(test[1].length);
+                        for(var i = 0; i < glText[0].textOffsets.length - 1; i++) {
+                            var from = glText[0].textOffsets[i];
+                            var to = glText[0].textOffsets[i + 1];
+
+                            var text = glText[0].text.slice(from, to);
+                            expect(text).toEqual(test[1][i]);
+                        }
+                    } else {
+                        var pts = Plotly.d3.selectAll(selector);
+                        expect(pts.size()).toBe(test[1].length);
+                        pts.each(function() {
+                            expect(test[1]).toContain(Plotly.d3.select(this).text());
+                        });
+                    }
                 })
                 .catch(failTest)
                 .finally(destroyGraphDiv)

test/jasmine/tests/scattergl_test.js

@@ -8,6 +8,7 @@ var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
 var delay = require('../assets/delay');
 var readPixel = require('../assets/read_pixel');
+var checkTextTemplate = require('../assets/check_texttemplate');
 
 describe('end-to-end scattergl tests', function() {
     var gd;
@@ -37,6 +38,17 @@ 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',