correct texttemplate and hover

Author: archmoj

src/traces/sunburst/constants.js

@@ -13,19 +13,14 @@ module.exports = {
     CLICK_TRANSITION_EASING: 'linear',
     eventDataKeys: [
         // string
+        'currentPath',
         'root',
         'entry',
-        // 'parent', // no need to add parent here which is added somewhere else!
-        'currentPath',
+        // no need to add 'parent' here
 
         // percentages i.e. ratios
         'percentRoot',
         'percentEntry',
-        'percentParent',
-
-        // sums
-        'sumRoot',
-        'sumEntry',
-        'sumParent'
+        'percentParent'
     ]
 };

src/traces/sunburst/fx.js

@@ -47,6 +47,8 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
         var ptNumber = cdi.i;
         var isRoot = helpers.isHierarchyRoot(pt);
         var isEntry = helpers.isEntry(pt);
+        var parent = isEntry ? pt._parent : pt.parent;
+        var parentLabel = !parent ? '' : (parent.data && parent.data.data) ? parent.data.data.label : parent.label;
 
         var _cast = function(astr) {
             return Lib.castOption(traceNow, ptNumber, astr);
@@ -72,7 +74,10 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
             var parts = [];
             var thisText = [];
             var hasFlag = function(flag) { return parts.indexOf(flag) !== -1; };
-            var getVal = function(d) { return d.hasOwnProperty('v') ? d.v : d.value; };
+            var getVal = function(d) {
+                if(d.hasOwnProperty('hierarchy')) return d.hierarchy.value;
+                return d.hasOwnProperty('v') ? d.v : d.value;
+            };
 
             if(hoverinfo) {
                 parts = hoverinfo === 'all' ?
@@ -105,18 +110,18 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
 
             var val = getVal(cdi);
 
-            var ref2 = isEntry ? pt._parent : pt.parent;
-            if(ref2 && getVal(ref2)) {
+            var ref2 = parent;
+            if(ref2) {
                 hoverPt.percentParent = pt.percentParent = val / getVal(ref2);
-                hoverPt.parent = pt.parentString = helpers.getLabelString(isEntry ? ref2.label : ref2.data.data.label);
+                hoverPt.parent = pt.parent = helpers.getLabelString(parentLabel);
                 if(hasFlag('percent parent')) {
                     tx = helpers.formatPercent(hoverPt.percentParent, separators) + ' of ' + hoverPt.parent;
                     insertPercent();
                 }
             }
 
             var ref1 = entry;
-            if(ref1 && getVal(ref1)) {
+            if(ref1) {
                 hoverPt.percentEntry = pt.percentEntry = val / getVal(ref1);
                 hoverPt.entry = pt.entry = helpers.getLabelString(ref1.data.data.label);
                 if(hasFlag('percent entry') && !isRoot && !pt.onPathbar) {
@@ -126,7 +131,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
             }
 
             var ref0 = hierarchy;
-            if(ref0 && getVal(ref0)) {
+            if(ref0) {
                 hoverPt.percentRoot = pt.percentRoot = val / getVal(ref0);
                 hoverPt.root = pt.root = helpers.getLabelString(ref0.data.data.label);
                 if(hasFlag('percent root') && !isRoot) {
@@ -310,7 +315,7 @@ function makeEventData(pt, trace, keys) {
         if(key in pt) out[key] = pt[key];
     }
     // handle special case of parent
-    if('parentString' in pt) out.parent = pt.parentString;
+    if('parent' in pt) out.parent = pt.parent;
 
     appendArrayPointValue(out, trace, cdi.i);
 

src/traces/sunburst/helpers.js

@@ -14,7 +14,7 @@ var setCursor = require('../../lib/setcursor');
 var pieHelpers = require('../pie/helpers');
 
 function labelStr(label) {
-    return (label || label === 0) ? label + '' : '';
+    return (label || label === 0) ? String(label) : '';
 }
 
 exports.findEntryWithLevel = function(hierarchy, level) {
@@ -151,7 +151,7 @@ exports.getLabelStr = function(label) {
 
 exports.getLabelString = function(label) { // used in hover to reference to the "root"
     var str = exports.getLabelStr(label);
-    return str ? str : '"root"';
+    return str === '' ? '"root"' : str;
 };
 
 exports.listPath = function(d, keyStr) {

src/traces/sunburst/plot.js

@@ -487,10 +487,31 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
     var cd0 = cd[0];
     var cdi = pt.data.data;
     var hierarchy = cd0.hierarchy;
+    var isRoot = helpers.isHierarchyRoot(pt);
+    var isEntry = helpers.isEntry(pt);
+    var parent = isEntry ? pt._parent : pt.parent;
+
     var ref;
+    var getLabel = function(d) {
+        if(d.hasOwnProperty('hierarchy')) return d.hierarchy.label;
+        if(!(d.data && d.data.data)) return '';
+        var id = helpers.getPtId(d);
+        for(var q = 0; q < cd.length; q++) {
+            if(cd[q].label === id) {
+                return id;
+            }
+        }
+        return '';
+    };
+
+    var getVal = function(d) {
+        if(d.hasOwnProperty('hierarchy')) return d.hierarchy.value;
+        return d.hasOwnProperty('v') ? d.v : d.value;
+    };
 
     var calcPercent = function() {
-        return (trace.branchvalues ? cdi.v : cdi.value) / (ref.value || ref.v);
+        var result = (trace.branchvalues ? cdi.v : cdi.value) / getVal(ref);
+        return isFinite(result) ? result : 1;
     };
 
     if(trace.type === 'treemap' && helpers.isHeader(pt, trace)) {
@@ -510,8 +531,6 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
         var hasFlag = function(flag) { return parts.indexOf(flag) !== -1; };
         var thisText = [];
         var tx;
-        var parent = helpers.isEntry(pt) ? pt._parent : pt.parent;
-        var isRoot = helpers.isHierarchyRoot(pt);
 
         if(hasFlag('label') && cdi.label) {
             thisText.push(cdi.label);
@@ -580,28 +599,26 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
 
     obj.currentPath = helpers.getPath(pt.data);
 
-    if(pt.parent) {
-        ref = pt.parent;
-        obj.percentParent = calcPercent();
-        obj.percentParentLabel = helpers.formatPercent(
-            obj.percentParent, separators
-        );
-        obj.parent = ref.data.data.label;
-    }
+    ref = parent;
+    obj.percentParent = calcPercent();
+    obj.percentParentLabel = helpers.formatPercent(
+        obj.percentParent, separators
+    );
+    obj.parent = helpers.getLabelString(getLabel(ref));
 
     ref = entry;
     obj.percentEntry = calcPercent();
     obj.percentEntryLabel = helpers.formatPercent(
         obj.percentEntry, separators
     );
-    obj.entry = ref.data.data.label;
+    obj.entry = helpers.getLabelString(getLabel(ref));
 
     ref = hierarchy;
     obj.percentRoot = calcPercent();
     obj.percentRootLabel = helpers.formatPercent(
         obj.percentRoot, separators
     );
-    obj.root = ref.data.data.label;
+    obj.root = helpers.getLabelString(getLabel(ref));
 
     if(cdi.hasOwnProperty('color')) {
         obj.color = cdi.color;

src/traces/treemap/constants.js

@@ -13,20 +13,15 @@ module.exports = {
     CLICK_TRANSITION_EASING: 'poly',
     eventDataKeys: [
         // string
+        'currentPath',
         'root',
         'entry',
-        // 'parent', // no need to add parent here which is added somewhere else!
-        'currentPath',
+        // no need to add 'parent' here
 
         // percentages i.e. ratios
         'percentRoot',
         'percentEntry',
-        'percentParent',
-
-        // sums
-        'sumRoot',
-        'sumEntry',
-        'sumParent'
+        'percentParent'
     ],
     gapWithPathbar: 1 // i.e. one pixel
 };

test/image/baselines/treemap_level-depth.png

@@ -507,7 +507,7 @@ describe('Test sunburst hover:', function() {
                 curveNumber: 0,
                 pointNumber: 0,
                 label: 'Eve',
-                parent: ''
+                parent: '"root"'
             }
         }
     }]
@@ -1344,10 +1344,7 @@ describe('Test sunburst texttemplate without `values` should work:', function()
         ['text: %{text}', ['text: sixty-five', 'text: fourteen', 'text: twelve', 'text: ten', 'text: two', 'text: six', 'text: six', 'text: one', 'text: four']],
         ['%{percentRoot} of %{root}', ['100% of Eve', '33% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve']],
         ['%{percentEntry} of %{entry}', ['100% of Eve', '33% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve']],
-        ['%{percentParent} of %{parent}', [
-            '%{percentParent} of %{parent}', // TODO: what should be printed for the parent of root?
-            '100% of Seth', '33% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '50% of Seth', '100% of Awan'
-        ]],
+        ['%{percentParent} of %{parent}', ['100% of "root"', '100% of Seth', '33% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '17% of Eve', '50% of Seth', '100% of Awan']],
         [
             [
                 'label: %{label}',
@@ -1390,10 +1387,7 @@ describe('Test sunburst texttemplate with *total* `values` should work:', functi
         ['text: %{text}', ['text: sixty-five', 'text: fourteen', 'text: twelve', 'text: ten', 'text: two', 'text: six', 'text: six', 'text: one', 'text: four']],
         ['%{percentRoot} of %{root}', ['100% of Eve', '22% of Eve', '18% of Eve', '9% of Eve', '9% of Eve', '6% of Eve', '15% of Eve', '3% of Eve', '2% of Eve']],
         ['%{percentEntry} of %{entry}', ['100% of Eve', '22% of Eve', '18% of Eve', '9% of Eve', '9% of Eve', '6% of Eve', '15% of Eve', '3% of Eve', '2% of Eve']],
-        ['%{percentParent} of %{parent}', [
-            '%{percentParent} of %{parent}', // TODO: what should be printed for the parent of root?
-            '22% of Eve', '18% of Eve', '9% of Eve', '9% of Eve', '6% of Eve', '83% of Seth', '17% of Seth', '17% of Awan'
-        ]],
+        ['%{percentParent} of %{parent}', ['100% of "root"', '22% of Eve', '18% of Eve', '9% of Eve', '9% of Eve', '6% of Eve', '83% of Seth', '17% of Seth', '17% of Awan']],
         [
             [
                 'label: %{label}',
@@ -1436,10 +1430,7 @@ describe('Test sunburst texttemplate with *remainder* `values` should work:', fu
         ['text: %{text}', ['text: sixty-five', 'text: fourteen', 'text: twelve', 'text: ten', 'text: two', 'text: six', 'text: six', 'text: one', 'text: four']],
         ['%{percentRoot} of %{root}', ['54% of Eve', '10% of Eve', '12% of Eve', '5% of Eve', '5% of Eve', '3% of Eve', '8% of Eve', '2% of Eve', '1% of Eve']],
         ['%{percentEntry} of %{entry}', ['54% of Eve', '10% of Eve', '12% of Eve', '5% of Eve', '5% of Eve', '3% of Eve', '8% of Eve', '2% of Eve', '1% of Eve']],
-        ['%{percentParent} of %{parent}', [
-            '%{percentParent} of %{parent}', // TODO: what should be printed for the parent of root?
-            '10% of Eve', '12% of Eve', '5% of Eve', '5% of Eve', '3% of Eve', '42% of Seth', '8% of Seth', '14% of Awan'
-        ]],
+        ['%{percentParent} of %{parent}', ['100% of "root"', '10% of Eve', '12% of Eve', '5% of Eve', '5% of Eve', '3% of Eve', '42% of Seth', '8% of Seth', '14% of Awan']],
         [
             [
                 'label: %{label}',

test/jasmine/tests/sunburst_test.js

@@ -616,7 +616,7 @@ describe('Test treemap hover:', function() {
                 curveNumber: 0,
                 pointNumber: 0,
                 label: 'Eve',
-                parent: ''
+                parent: '"root"'
             }
         }
     }]