revisit textinfo and width defaults - fix and improve tests

Author: archmoj

src/traces/funnel/attributes.js

@@ -47,7 +47,7 @@ module.exports = {
     orientation: barAttrs.orientation,
 
     offset: extendFlat({}, barAttrs.offset, {arrayOk: false}),
-    width: extendFlat({}, barAttrs.width, {arrayOK: false}),
+    width: extendFlat({}, barAttrs.width, {arrayOk: false}),
 
     marker: barAttrs.marker,
 

src/traces/funnel/defaults.js

@@ -31,7 +31,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     coerce('offset');
     coerce('width');
 
-    coerce('text');
+    var text = coerce('text');
 
     coerce('hovertext');
     coerce('hovertemplate');
@@ -40,7 +40,9 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
 
     // TODO: move this block to bar handleText if/when textinfo implimented for bars/histograms
     if(traceOut.textposition !== 'none') {
-        coerce('textinfo');
+        var defaultTextinfo =
+            Lib.isArrayOrTypedArray(text) ? 'text+value' : 'value';
+        coerce('textinfo', defaultTextinfo);
     }
 
     var markerColor = coerce('marker.color', defaultColor);

test/image/baselines/funnel-grouping-vs-defaults.png

@@ -2,6 +2,7 @@
     "data": [
         {
             "type": "funnel",
+            "insidetextanchor": "start",
             "width": 0.6,
             "opacity": 0.8,
             "x": [
@@ -23,6 +24,7 @@
         },
         {
             "type": "funnel",
+            "insidetextanchor": "start",
             "width": 0.6,
             "opacity": 0.8,
             "x": [
@@ -56,6 +58,7 @@
         },
         {
             "type": "funnel",
+            "insidetextanchor": "start",
             "width": 0.6,
             "opacity": 0.8,
             "orientation": "h",
@@ -148,13 +151,12 @@
         }
     ],
     "layout": {
-        "text": {
-            "title": "Should not see axis lines by default when there are only funnels!"
+        "title": {
+            "text": "Should not see axis lines by default when there are only funnels!"
         },
         "width": 800,
         "height": 800,
         "dragmode": "pan",
-        "funnelmode": "overlay",
         "xaxis": {
             "domain": [
                 0,
@@ -197,13 +199,15 @@
         },
         "yaxis3": {
             "anchor": "x3",
+            "autorange": "reversed",
             "domain": [
                 0.52,
                 1
             ]
         },
         "yaxis4": {
             "anchor": "x4",
+            "autorange": "reversed",
             "domain": [
                 0,
                 0.48

test/image/baselines/funnel-offsetgroups.png

@@ -6,6 +6,7 @@
       "x": ["apple", "banana", "clementine"],
       "y": [3.8, 4, 4.2],
       "text": ["apple", "banana", "x"],
+      "textinfo": "text",
       "textposition": "outside",
       "cliponaxis": false,
       "textfont": {
@@ -18,6 +19,7 @@
       "x": ["apple", "banana", "clementine"],
       "y": [3.8, 4, 4.2],
       "text": ["apple", "banana", "clementine"],
+      "textinfo": "text",
       "textposition": "outside",
       "cliponaxis": true,
       "textfont": {
@@ -32,6 +34,7 @@
       "x": ["banana"],
       "y": [4],
       "text": ["X"],
+      "textinfo": "text",
       "textposition": "outside",
       "cliponaxis": true,
       "textfont": {"size": [20]},
@@ -43,6 +46,7 @@
       "x": ["banana"],
       "y": [2],
       "text": ["banana"],
+      "textinfo": "text",
       "textposition": "outside",
       "cliponaxis": false,
       "textfont": {"size": [20]},

test/image/baselines/funnel_11.png

@@ -21,6 +21,7 @@
         }
     }],
     "layout": {
+        "margin": { "l": 100, "r": 20, "t": 20, "b": 20 },
         "yaxis": {
             "autorange": "reversed"
         },

test/image/baselines/funnel_attrs.png

@@ -2,38 +2,38 @@
   "data": [
     {
       "x": [
-        "giraffes",
-        "orangutans",
-        "monkeys"
+        "Lead",
+        "Proposal",
+        "Finalize"
       ],
       "y": [
-        20,
-        14,
-        23
+        20.0020,
+        10.001001,
+        "05.0005"
       ],
       "name": "SF Zoo",
-      "type": "funnel"
+      "type": "funnel",
+      "textfont": { "size": 18 }
     }
   ],
   "layout": {
+    "margin": { "l": 20, "r": 20, "t": 20, "b": 50 },
     "funnelgap": 0,
     "xaxis": {
       "type": "category",
       "range": [
         -0.5,
         2.5
       ],
-      "autorange": true
+      "tickfont": { "size": 24 }
     },
     "yaxis": {
       "type": "linear",
-      "range": [
-        0,
-        24.210526315789473
-      ],
-      "autorange": true
+      "tickprefix": "$",
+      "ticksuffix": " million"
+
     },
-    "height": 300,
+    "height": 260,
     "width": 900,
     "autosize": false
   }

test/image/baselines/funnel_axis_with_other_traces.png

@@ -1,7 +1,7 @@
 {
   "data": [
     {
-      "type": "funnel", "opacity": 0.8, "offset": -0.25, "width": 0.5,
+      "type": "funnel", "opacity": 0.8, "offset": -0.5, "width": 0.5,
       "cliponaxis": false,
       "textposition": "inside",
       "textinfo": "value+percent initial",
@@ -13,7 +13,7 @@
       "y": [4000.004, 3000.003, 2000.002, 1000.001, 4000.004, 2000.002, 1000.001, 500.0005]
     },
     {
-      "type": "funnel", "opacity": 0.8, "offset": -0.25, "width": 0.5,
+      "type": "funnel", "opacity": 0.8, "offset": -0.5, "width": 0.5,
       "cliponaxis": false,
       "textposition": "outside",
       "textinfo": "text+value+percent initial",
@@ -25,7 +25,7 @@
       "y": [5000.005, 4000.004, 3000.003, 2000.002, 8000.008, 4000.004, 2000.002, 1000.001]
     },
     {
-      "type": "waterfall", "opacity": 0.8, "offset": 0.25, "width": 0.5,
+      "type": "waterfall", "opacity": 0.8, "offset": 0.0, "width": 0.5,
       "cliponaxis": false,
       "textposition": "inside",
       "insidetextrotate": "none",
@@ -41,7 +41,7 @@
   "layout": {
     "width": 1800,
     "height": 600,
-    "margin": { "l": 150 },
+    "margin": { "l": 50, "r": 50, "t": 50, "b": 50 },
     "xaxis": {
       "title": "MULTI-CATEGORY two stacked funnels with arrayOK text and one waterfall with textinfo",
       "tickfont": {"size": 16},

test/image/baselines/funnel_custom.png

@@ -13,11 +13,16 @@
         1,
         null,
         "nonsense",
-        14,
+        2,
         0,
         1
       ],
       "type": "funnel"
     }
-  ]
+  ],
+  "layout": {
+    "margin": { "l": 20, "r": 20, "t": 20, "b": 50 },
+    "width": 600,
+    "height": 200
+  }
 }

test/image/baselines/funnel_date-axes.png

@@ -19,13 +19,6 @@
                 1
             ],
             "textposition": "outside",
-            "text": [
-                "3756",
-                "1580",
-                "663",
-                "343",
-                "1"
-            ],
             "connector": {
                 "fillcolor": "rgba(0, 0, 0, 0)",
                 "line": {
@@ -59,14 +52,7 @@
                         0
                     ]
                 }
-            },
-            "width": [
-                0.85,
-                0.70,
-                0.55,
-                0.30,
-                0.15
-            ]
+            }
         },
         {
             "name": "orca",
@@ -122,7 +108,7 @@
         "yaxis": {
             "type": "linear"
         },
-        "margin": { "l": 150 },
+        "margin": { "l": 0 },
         "height": 800,
         "width": 800,
         "funnelmode": "overlay",

test/image/baselines/funnel_gap0.png

@@ -754,7 +754,6 @@ describe('A funnel plot', function() {
         y: [20, 14, 23, 10, 59, 15],
         text: [20, 14, 23, 10, 59, 15],
         type: 'funnel',
-        textposition: 'auto',
         marker: {
             color: ['#ee1', '#eee', '#333', '#9467bd', '#dda', '#922'],
         }
@@ -792,28 +791,30 @@ describe('A funnel plot', function() {
             data: [
                 {
                     text: [1, 2, 3333333333, 4],
+                    textinfo: 'text',
                     textposition: 'outside',
                     y: [1, 2, 3, 4],
                     x: [1, 2, 3, 4],
                     type: 'funnel'
                 }, {
                     width: 0.4,
                     text: ['Three', 2, 'inside text', 0],
-                    textposition: 'auto',
+                    textinfo: 'text',
                     textfont: { size: [10] },
                     y: [3, 2, 1, 0],
                     x: [1, 2, 3, 4],
                     type: 'funnel'
                 }, {
                     width: 1,
                     text: [4, 3, 2, 1],
+                    textinfo: 'text',
                     textposition: 'inside',
                     y: [4, 3, 2, 1],
                     x: [1, 2, 3, 4],
                     type: 'funnel'
                 }, {
                     text: [0, 'outside text', 3, 2],
-                    textposition: 'auto',
+                    textinfo: 'text',
                     y: [0, 0.25, 3, 2],
                     x: [1, 2, 3, 4],
                     type: 'funnel'
@@ -1088,7 +1089,8 @@ describe('A funnel plot', function() {
             y: [10, 20, 30, 40],
             type: 'funnel',
             text: ['T1P1', 'T1P2', 13, 14],
-            textposition: ['inside', 'outside', 'auto', 'BADVALUE'],
+            textinfo: 'text',
+            textposition: ['inside', 'outside', 'auto', 'none', 'BADVALUE'],
             textfont: {
                 family: ['"comic sans"'],
                 color: ['red', 'green'],
@@ -1178,7 +1180,7 @@ describe('A funnel plot', function() {
             x: ['Product A', 'Product B', 'Product C'],
             y: [20, 14, 23],
             text: [20, 14, 23],
-            textposition: 'auto'
+            textinfo: 'none'
         }])
         .then(function() {
             _assertNumberOfFunnelTextNodes(3);