finish and test hoverlabel.namelength

- -1 for no constraint
- more complete description
- complete arrayOk support
- tests

Author: alexcjohnson

src/components/fx/attributes.js

@@ -35,12 +35,18 @@ module.exports = {
             color: extendFlat({}, fontAttrs.color, { arrayOk: true })
         },
         namelength: {
-            valType: 'number',
-            min: 0,
-            dflt: 15,
+            valType: 'integer',
+            min: -1,
             arrayOk: true,
             role: 'style',
-            description: 'Sets the length (in number of characters) of the hover labels for this trace'
+            description: [
+                'Sets the length (in number of characters) of the trace name in',
+                'the hover labels for this trace. -1 shows the whole name',
+                'regardless of length. 0-3 shows the first 0-3 characters, and',
+                'an integer >3 will show the whole name if it is less than that',
+                'many characters, but if it is longer, will truncate to',
+                '`namelength - 3` characters and add an ellipsis.'
+            ].join(' ')
         }
     }
 };

src/components/fx/calc.js

@@ -41,6 +41,7 @@ module.exports = function calc(gd) {
         fillFn(trace.hoverlabel.font.size, cd, 'hts');
         fillFn(trace.hoverlabel.font.color, cd, 'htc');
         fillFn(trace.hoverlabel.font.family, cd, 'htf');
+        fillFn(trace.hoverlabel.namelength, cd, 'hnl');
     }
 };
 

src/components/fx/hover.js

@@ -689,8 +689,11 @@ function createHoverText(hoverData, opts, gd) {
             // strip out our pseudo-html elements from d.name (if it exists at all)
             name = svgTextUtils.plainText(d.name || '');
 
-            if(commonLabelOpts.namelength > 0 && name.length > commonLabelOpts.namelength) {
-                name = name.substr(0, commonLabelOpts.namelength - 3) + '...';
+            var nameLength = Math.round(d.nameLength);
+
+            if(nameLength > -1 && name.length > nameLength) {
+                if(nameLength > 3) name = name.substr(0, nameLength - 3) + '...';
+                else name = name.substr(0, nameLength);
             }
         }
 
@@ -1063,6 +1066,7 @@ function cleanPoint(d, hovermode) {
     fill('fontFamily', 'htf', 'hoverlabel.font.family');
     fill('fontSize', 'hts', 'hoverlabel.font.size');
     fill('fontColor', 'htc', 'hoverlabel.font.color');
+    fill('nameLength', 'hnl', 'hoverlabel.namelength');
 
     d.posref = hovermode === 'y' ? (d.x0 + d.x1) / 2 : (d.y0 + d.y1) / 2;
 

src/components/fx/layout_attributes.js

@@ -57,11 +57,18 @@ module.exports = {
             color: extendFlat({}, fontAttrs.color)
         },
         namelength: {
-            valType: 'number',
-            min: 0,
+            valType: 'integer',
+            min: -1,
             dflt: 15,
             role: 'style',
-            description: 'Sets the length (in number of characters) of the hover labels for this trace'
+            description: [
+                'Sets the default length (in number of characters) of the trace name in',
+                'the hover labels for all traces. -1 shows the whole name',
+                'regardless of length. 0-3 shows the first 0-3 characters, and',
+                'an integer >3 will show the whole name if it is less than that',
+                'many characters, but if it is longer, will truncate to',
+                '`namelength - 3` characters and add an ellipsis.'
+            ].join(' ')
         }
     }
 };

test/jasmine/tests/hover_label_test.js

@@ -683,7 +683,13 @@ describe('hover info on stacked subplots', function() {
     });
 
     describe('hover info on stacked subplots with shared y-axis', function() {
-        var mock = require('@mocks/stacked_subplots_shared_yaxis.json');
+        var mock = Lib.extendDeep(require('@mocks/stacked_subplots_shared_yaxis.json'));
+        mock.data[0].name = 'Who put the bomp in the bomp bah bomp bah bomp';
+        mock.data[0].hoverlabel = {namelength: -1};
+        mock.data[1].name = 'Who put the ram in the rama lama ding dong';
+        mock.data[1].hoverlabel = {namelength: [2, 4]};
+        mock.data[2].name = 'Who put the bop in the bop shoo bop shoo bop';
+        mock.layout.hoverlabel = {namelength: 10};
 
         beforeEach(function(done) {
             Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(done);
@@ -727,11 +733,11 @@ describe('hover info on stacked subplots', function() {
             expect(d3.selectAll('g.hovertext').size()).toEqual(3);
             var textNodes = d3.selectAll('g.hovertext').selectAll('text');
 
-            expect(textNodes[0][0].innerHTML).toEqual('trace 0');
+            expect(textNodes[0][0].innerHTML).toEqual('Who put the bomp in the bomp bah bomp bah bomp');
             expect(textNodes[0][1].innerHTML).toEqual('1');
-            expect(textNodes[1][0].innerHTML).toEqual('trace 1');
+            expect(textNodes[1][0].innerHTML).toEqual('Wh');
             expect(textNodes[1][1].innerHTML).toEqual('2.1');
-            expect(textNodes[2][0].innerHTML).toEqual('trace 2');
+            expect(textNodes[2][0].innerHTML).toEqual('Who put...');
             expect(textNodes[2][1].innerHTML).toEqual('3');
         });
     });