Skip to content

Revise hierarchy referencing and fixup parent percentage at the root node of treemap and sunburst #4219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 30, 2019
Merged

Revise hierarchy referencing and fixup parent percentage at the root node of treemap and sunburst #4219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7a1c0e5
Correct percentages at root
archmoj Sep 26, 2019
422d5d3
copy one of the treemap baselines from the CI which started failing t…
archmoj Sep 26, 2019
df5e121
only return label from the helper - set the label of dummy root to blank
archmoj Sep 28, 2019
54360be
handle parent of root special case - combine two treemap hovertemplat…
archmoj Sep 28, 2019
7155917
dont show parent and percent of parent in the template
archmoj Sep 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/traces/sunburst/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@ exports.calc = function(gd, trace) {
cd.unshift({
hasMultipleRoots: true,
id: dummyId,
pid: ''
pid: '',
label: ''
});
}

Expand Down
29 changes: 11 additions & 18 deletions src/traces/sunburst/fx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,6 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
var cd0 = cd[0];
var trace = cd0.trace;
var hierarchy = cd0.hierarchy;
var rootLabel = hierarchy.data.data.pid;
var readLabel = function(refPt) {
var l = helpers.getPtLabel(refPt);
return l === undefined ? rootLabel : l;
};

var isSunburst = trace.type === 'sunburst';
var isTreemap = trace.type === 'treemap';
Expand All @@ -53,7 +48,7 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
var isRoot = helpers.isHierarchyRoot(pt);
var parent = helpers.getParent(hierarchy, pt);

var val = helpers.getVal(pt);
var val = helpers.getValue(pt);

var _cast = function(astr) {
return Lib.castOption(traceNow, ptNumber, astr);
Expand Down Expand Up @@ -109,24 +104,22 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
}
};

if(parent) {
hoverPt.percentParent = pt.percentParent = val / helpers.getVal(parent);
hoverPt.parent = pt.parentString = readLabel(parent);
if(hasFlag('percent parent')) {
tx = helpers.formatPercent(hoverPt.percentParent, separators) + ' of ' + hoverPt.parent;
insertPercent();
}
hoverPt.percentParent = pt.percentParent = val / helpers.getValue(parent);
hoverPt.parent = pt.parentString = helpers.getPtLabel(parent);
if(hasFlag('percent parent')) {
tx = helpers.formatPercent(hoverPt.percentParent, separators) + ' of ' + hoverPt.parent;
insertPercent();
}

hoverPt.percentEntry = pt.percentEntry = val / helpers.getVal(entry);
hoverPt.entry = pt.entry = readLabel(entry);
hoverPt.percentEntry = pt.percentEntry = val / helpers.getValue(entry);
hoverPt.entry = pt.entry = helpers.getPtLabel(entry);
if(hasFlag('percent entry') && !isRoot && !pt.onPathbar) {
tx = helpers.formatPercent(hoverPt.percentEntry, separators) + ' of ' + hoverPt.entry;
insertPercent();
}

hoverPt.percentRoot = pt.percentRoot = val / helpers.getVal(hierarchy);
hoverPt.root = pt.root = readLabel(hierarchy);
hoverPt.percentRoot = pt.percentRoot = val / helpers.getValue(hierarchy);
hoverPt.root = pt.root = helpers.getPtLabel(hierarchy);
if(hasFlag('percent root') && !isRoot) {
tx = helpers.formatPercent(hoverPt.percentRoot, separators) + ' of ' + hoverPt.root;
insertPercent();
Expand Down Expand Up @@ -307,7 +300,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('parentString' in pt && !helpers.isHierarchyRoot(pt)) out.parent = pt.parentString;

appendArrayPointValue(out, trace, cdi.i);

Expand Down
7 changes: 2 additions & 5 deletions src/traces/sunburst/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ exports.getPtLabel = function(pt) {
return pt.data.data.label;
};

exports.getVal = function(d) {
exports.getValue = function(d) {
return d.value;
};

Expand Down Expand Up @@ -152,10 +152,7 @@ function getParentId(pt) {
}

exports.getParent = function(hierarchy, pt) {
var parentId = getParentId(pt);
return parentId === '' ?
undefined :
exports.findEntryWithLevel(hierarchy, parentId);
return exports.findEntryWithLevel(hierarchy, getParentId(pt));
};

exports.listPath = function(d, keyStr) {
Expand Down
30 changes: 12 additions & 18 deletions src/traces/sunburst/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -488,15 +488,9 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
var cd0 = cd[0];
var cdi = pt.data.data;
var hierarchy = cd0.hierarchy;
var rootLabel = hierarchy.data.data.pid;
var readLabel = function(refPt) {
var l = helpers.getPtLabel(refPt);
return l === undefined ? rootLabel : l;
};

var isRoot = helpers.isHierarchyRoot(pt);
var parent = helpers.getParent(hierarchy, pt);
var val = helpers.getVal(pt);
var val = helpers.getValue(pt);

if(!texttemplate) {
var parts = textinfo.split('+');
Expand Down Expand Up @@ -532,16 +526,16 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
thisText.push(tx);
};

if(hasFlag('percent parent') && parent) {
percent = val / helpers.getVal(parent);
if(hasFlag('percent parent') && !isRoot) {
percent = val / helpers.getValue(parent);
addPercent('parent');
}
if(hasFlag('percent entry')) {
percent = val / helpers.getVal(entry);
percent = val / helpers.getValue(entry);
addPercent('entry');
}
if(hasFlag('percent root')) {
percent = val / helpers.getVal(hierarchy);
percent = val / helpers.getValue(hierarchy);
addPercent('root');
}
}
Expand All @@ -566,25 +560,25 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {

obj.currentPath = helpers.getPath(pt.data);

if(parent) {
obj.percentParent = val / helpers.getVal(parent);
if(!isRoot) {
obj.percentParent = val / helpers.getValue(parent);
obj.percentParentLabel = helpers.formatPercent(
obj.percentParent, separators
);
obj.parent = readLabel(parent);
obj.parent = helpers.getPtLabel(parent);
}

obj.percentEntry = val / helpers.getVal(entry);
obj.percentEntry = val / helpers.getValue(entry);
obj.percentEntryLabel = helpers.formatPercent(
obj.percentEntry, separators
);
obj.entry = readLabel(entry);
obj.entry = helpers.getPtLabel(entry);

obj.percentRoot = val / helpers.getVal(hierarchy);
obj.percentRoot = val / helpers.getValue(hierarchy);
obj.percentRootLabel = helpers.formatPercent(
obj.percentRoot, separators
);
obj.root = readLabel(hierarchy);
obj.root = helpers.getPtLabel(hierarchy);

if(cdi.hasOwnProperty('color')) {
obj.color = cdi.color;
Expand Down
Binary file modified test/image/baselines/treemap_textposition.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion test/jasmine/tests/sunburst_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ describe('Test sunburst calc:', function() {

expect(extract('id')).toEqual(['dummy', 'A', 'B', 'b']);
expect(extract('pid')).toEqual(['', 'dummy', 'dummy', 'B']);
expect(extract('label')).toEqual([undefined, 'A', 'B', 'b']);
expect(extract('label')).toEqual(['', 'A', 'B', 'b']);
});

it('should compute hierarchy values', function() {
Expand Down
144 changes: 143 additions & 1 deletion test/jasmine/tests/treemap_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ describe('Test treemap calc:', function() {

expect(extract('id')).toEqual(['dummy', 'A', 'B', 'b']);
expect(extract('pid')).toEqual(['', 'dummy', 'dummy', 'B']);
expect(extract('label')).toEqual([undefined, 'A', 'B', 'b']);
expect(extract('label')).toEqual(['', 'A', 'B', 'b']);
});

it('should compute hierarchy values', function() {
Expand Down Expand Up @@ -629,6 +629,148 @@ describe('Test treemap hover:', function() {
});
});

describe('Test treemap hover with and without levels', function() {
var gd;

var labels0 = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India', 'Juliet', 'Kilo', 'Lima', 'Mike', 'November', 'Oscar', 'Papa', 'Quebec', 'Romeo', 'Sierra', 'Tango', 'Uniform', 'Victor', 'Whiskey', 'X ray', 'Yankee', 'Zulu'];
var parents0 = ['', 'Alpha', 'Alpha', 'Charlie', 'Charlie', 'Charlie', 'Foxtrot', 'Foxtrot', 'Foxtrot', 'Foxtrot', 'Juliet', 'Juliet', 'Juliet', 'Juliet', 'Juliet', 'Oscar', 'Oscar', 'Oscar', 'Oscar', 'Oscar', 'Oscar', 'Uniform', 'Uniform', 'Uniform', 'Uniform', 'Uniform', 'Uniform'];
var values0 = [40, 2, 38, 1.5, 2.5, 34, 1, 2, 3, 28, 1.25, 1.75, 2.25, 2.75, 20, 1, 1.5, 2, 2.5, 3, 10, 1, 1.5, 2, 2.5, 3];
var text0 = ['forty', 'two', 'thirty-eight', 'one and a half', 'two and a half', 'thirty-four', 'one', 'two', 'three', 'twenty-eight', 'one and twenty-five hundredths', 'one and seventy-five hundredths', 'two and twenty-five hundredths', 'two and seventy-five hundredths', 'twenty', 'one', 'one and a half', 'two', 'two and a half', 'three', 'ten', 'one', 'one and a half', 'two', 'two and a half', 'three'];

afterEach(destroyGraphDiv);

function run(spec) {
gd = createGraphDiv();

var data = (spec.traces || [{}]).map(function(t) {
t.type = 'treemap';
t.text = text0;
t.values = values0;
t.level = spec.level;
t.branchvalues = 'total';
t.hovertemplate = 'path = %{currentPath}<br>label = %{label}<br>text = %{text}<br>value = %{value}<br>ratio to %{parent} = %{percentParent}<br>ratio to %{entry} = %{percentEntry}<br>ratio to %{root} = %{percentRoot}';

if(!t.labels) t.labels = labels0.slice();
if(!t.parents) t.parents = parents0.slice();
return t;
});

var layout = Lib.extendFlat({
width: 500,
height: 500,
margin: {t: 0, b: 0, l: 0, r: 0, pad: 0}
}, spec.layout || {});

var exp = spec.exp || {};
var ptData = null;

return Plotly.plot(gd, data, layout)
.then(function() {
gd.once('plotly_hover', function(d) { ptData = d.points[0]; });
})
.then(hover(gd, spec.pos))
.then(function() {
assertHoverLabelContent(exp.label);

for(var k in exp.ptData) {
expect(ptData[k]).toBe(exp.ptData[k], 'pt event data key ' + k);
}

if(exp.style) {
var gd3 = d3.select(gd);
assertHoverLabelStyle(gd3.select('.hovertext'), exp.style);
}
});
}

[{
desc: 'entry',
level: 'X ray',
pos: 0,
exp: {
label: {
name: 'trace 0',
nums: 'path = Alpha/Charlie/Foxtrot/Juliet/Oscar/Uniform/\nlabel = X ray\ntext = two\nvalue = 2\nratio to Uniform = 0.2\nratio to X ray = 1\nratio to Alpha = 0.05',
},
ptData: {
curveNumber: 0,
pointNumber: 23,
label: 'X ray',
parent: 'Uniform'
}
}
}, {
desc: 'entry',
level: 'Oscar',
pos: 0,
exp: {
label: {
name: 'trace 0',
nums: 'path = Alpha/Charlie/Foxtrot/Juliet/\nlabel = Oscar\ntext = twenty\nvalue = 20\nratio to Juliet = 0.7142857142857143\nratio to Oscar = 1\nratio to Alpha = 0.5',
},
ptData: {
curveNumber: 0,
pointNumber: 14,
label: 'Oscar',
parent: 'Juliet'
}
}
}, {
desc: 'leaf',
level: 'Oscar',
pos: 10,
exp: {
label: {
name: 'trace 0',
nums: 'path = Alpha/Charlie/Foxtrot/Juliet/Oscar/Uniform/\nlabel = X ray\ntext = two\nvalue = 2\nratio to Uniform = 0.2\nratio to Oscar = 0.1\nratio to Alpha = 0.05',
},
ptData: {
curveNumber: 0,
pointNumber: 23,
label: 'X ray',
parent: 'Uniform'
}
}
}, {
desc: 'entry',
level: undefined, // root
pos: 0,
exp: {
label: {
name: 'trace 0',
nums: 'path = /\nlabel = Alpha\ntext = forty\nvalue = 40\nratio to = 1\nratio to Alpha = 1\nratio to Alpha = 1',
},
ptData: {
curveNumber: 0,
pointNumber: 0,
label: 'Alpha',
parent: ''
}
}
}, {
desc: 'leaf',
level: undefined, // root
pos: 10,
exp: {
label: {
name: 'trace 0',
nums: 'path = Alpha/Charlie/Foxtrot/\nlabel = Golf\ntext = one\nvalue = 1\nratio to Foxtrot = 0.029411764705882353\nratio to Alpha = 0.025\nratio to Alpha = 0.025',
},
ptData: {
curveNumber: 0,
pointNumber: 6,
label: 'Golf',
parent: 'Foxtrot'
}
}
}]
.forEach(function(spec) {
it('should generate correct hover labels and event data - ' + spec.desc + ' with level:' + spec.level, function(done) {
run(spec).catch(failTest).then(done);
});
});
});

describe('Test treemap hover lifecycle:', function() {
var gd;
var hoverData;
Expand Down