handle multicategory labels in funnel and waterfall textinfo

Author: archmoj

src/traces/bar/plot.js

@@ -20,11 +20,12 @@ var Drawing = require('../../components/drawing');
 var Registry = require('../../registry');
 var tickText = require('../../plots/cartesian/axes').tickText;
 
+var style = require('./style');
+var helpers = require('./helpers');
 var attributes = require('./attributes');
+
 var attributeText = attributes.text;
 var attributeTextPosition = attributes.textposition;
-var style = require('./style');
-var helpers = require('./helpers');
 
 // padding in pixels around text
 var TEXTPAD = 3;
@@ -513,6 +514,11 @@ function calcTextinfo(calcTrace, index, xa, ya) {
     var trace = calcTrace[0].trace;
     var isHorizontal = (trace.orientation === 'h');
 
+    function formatLabel(u) {
+        var pAxis = isHorizontal ? ya : xa;
+        return tickText(pAxis, u, true).text; // TODO: may pass false here to drop the parent category?
+    }
+
     function formatNumber(v) {
         var sAxis = isHorizontal ? xa : ya;
         return tickText(sAxis, +v, true).text;
@@ -528,12 +534,7 @@ function calcTextinfo(calcTrace, index, xa, ya) {
     var hasFlag = function(flag) { return parts.indexOf(flag) !== -1; };
 
     if(hasFlag('label')) {
-        // TODO: fix me to work with multicategory
-        if(isHorizontal) {
-            text.push(trace.y[index]);
-        } else {
-            text.push(trace.x[index]);
-        }
+        text.push(formatLabel(calcTrace[index].p));
     }
 
     if(hasFlag('text')) {

test/image/baselines/funnel_multicategory.png

@@ -4,8 +4,8 @@
       "type": "funnel", "opacity": 0.8, "offset": -0.5, "width": 0.5, "orientation": "v",
       "cliponaxis": false,
       "textposition": "inside",
-      "textinfo": "value+percent initial",
-      "text": ["winter 2017", "spring 2017", "summer 2017", "autumn 2017", "winter 2018", "spring 2018", "summer 2018", "autumn 2018"],
+      "textinfo": "label+value+percent initial",
+      "text": ["winter", "spring", "summer", "autumn", "winter", "spring", "summer", "autumn"],
       "x": [
         ["2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
         ["q1", "q2", "q3", "q4", "q1", "q2", "q3", "q4"]
@@ -16,8 +16,8 @@
       "type": "funnel", "opacity": 0.8, "offset": -0.5, "width": 0.5, "orientation": "v",
       "cliponaxis": false,
       "textposition": "outside",
-      "textinfo": "text+value+percent initial",
-      "text": ["winter 2017", "spring 2017", "summer 2017", "autumn 2017", "winter 2018", "spring 2018", "summer 2018", "autumn 2018"],
+      "textinfo": "label+text+value+percent initial",
+      "text": ["winter", "spring", "summer", "autumn", "winter", "spring", "summer", "autumn"],
       "x": [
         ["2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
         ["q1", "q2", "q3", "q4", "q1", "q2", "q3", "q4"]
@@ -28,8 +28,8 @@
       "type": "waterfall", "opacity": 0.8, "offset": 0.0, "width": 0.5,
       "cliponaxis": false,
       "textposition": "inside",
-      "textinfo": "text+final",
-      "text": ["winter 2017", "spring 2017", "summer 2017", "autumn 2017", "winter 2018", "spring 2018", "summer 2018", "autumn 2018"],
+      "textinfo": "label+text+final",
+      "text": ["winter", "spring", "summer", "autumn", "winter", "spring", "summer", "autumn"],
       "x": [
         ["2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
         ["q1", "q2", "q3", "q4", "q1", "q2", "q3", "q4"]
@@ -38,6 +38,7 @@
     }
   ],
   "layout": {
+    "hovermode": "closest",
     "width": 1800,
     "height": 600,
     "margin": { "l": 50, "r": 50, "t": 50, "b": 50 },