Skip to content

Commit e5181ac

Browse files
archmojarchmoj
committed
texttemplate and other fixes for treemap and sunburst
1 parent 4e3b7f3 commit e5181ac

File tree

10 files changed

+63
-42
lines changed

10 files changed

+63
-42
lines changed

‎src/traces/sunburst/constants.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ module.exports = {
1212
CLICK_TRANSITION_TIME: 750,
1313
CLICK_TRANSITION_EASING: 'linear',
1414
eventDataKeys: [
15-
'parentLabel',
16-
'visibleLabel',
17-
'rootLabel',
18-
'percentParent',
19-
'percentVisible',
15+
'currentPath',
2016
'percentRoot',
21-
'currentPath'
17+
'percentVisible',
18+
'percentParent',
19+
'root',
20+
'visible',
21+
'parent'
2222
]
2323
};

‎src/traces/sunburst/fx.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,9 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
8888
if(hasFlag('value')) thisText.push(hoverPt.valueLabel);
8989
}
9090

91-
if(pt.parent) {
92-
hoverPt.currentPath = pt.currentPath = helpers.getPath(pt.parent.data);
93-
if(hasFlag('current path')) {
94-
thisText.push(hoverPt.currentPath);
95-
}
91+
hoverPt.currentPath = pt.currentPath = helpers.getPath(pt.data);
92+
if(hasFlag('current path')) {
93+
thisText.push(hoverPt.currentPath);
9694
}
9795

9896
var tx;
@@ -109,29 +107,29 @@ module.exports = function attachFxHandlers(sliceTop, entry, gd, cd, opts) {
109107
var ref2 = pt.parent;
110108
if(ref2 && getVal(ref2)) {
111109
hoverPt.percentParent = pt.percentParent = val / getVal(ref2);
112-
hoverPt.parentLabel = pt.parentLabel = helpers.getLabelString(ref2.data.data.label);
110+
hoverPt.parent = pt.parent = helpers.getLabelString(ref2.data.data.label);
113111
if(hasFlag('percent parent')) {
114-
tx = formatPercent(hoverPt.percentParent, separators) + ' of ' + hoverPt.parentLabel;
112+
tx = formatPercent(hoverPt.percentParent, separators) + ' of ' + hoverPt.parent;
115113
insertPercent();
116114
}
117115
}
118116

119117
var ref1 = entry;
120118
if(ref1 && getVal(ref1)) {
121119
hoverPt.percentVisible = pt.percentVisible = val / getVal(ref1);
122-
hoverPt.visibleLabel = pt.visibleLabel = helpers.getLabelString(ref1.data.data.label);
120+
hoverPt.visible = pt.visible = helpers.getLabelString(ref1.data.data.label);
123121
if(hasFlag('percent visible')) {
124-
tx = formatPercent(hoverPt.percentVisible, separators) + ' of ' + hoverPt.visibleLabel;
122+
tx = formatPercent(hoverPt.percentVisible, separators) + ' of ' + hoverPt.visible;
125123
insertPercent();
126124
}
127125
}
128126

129127
var ref0 = hierarchy;
130128
if(ref0 && getVal(ref0)) {
131129
hoverPt.percentRoot = pt.percentRoot = val / getVal(ref0);
132-
hoverPt.rootLabel = pt.rootLabel = helpers.getLabelString(ref0.data.data.label);
130+
hoverPt.root = pt.root = helpers.getLabelString(ref0.data.data.label);
133131
if(hasFlag('percent root')) {
134-
tx = formatPercent(hoverPt.percentRoot, separators) + ' of ' + hoverPt.rootLabel;
132+
tx = formatPercent(hoverPt.percentRoot, separators) + ' of ' + hoverPt.root;
135133
insertPercent();
136134
}
137135
}

‎src/traces/sunburst/helpers.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -152,11 +152,12 @@ exports.getLabelString = function(label) { // used in hover to reference to the
152152
};
153153

154154
exports.getPath = function(d) {
155-
var labelStr = exports.getLabelStr(d.data.label) + '/';
156-
return d.parent ? exports.getPath(d.parent) + labelStr : labelStr;
155+
if(!d.parent) return '';
156+
return exports.getLabelStr(d.parent.data.label) + '/';
157157
};
158158

159159
exports.listPath = function(d, keyStr) {
160-
var list = keyStr ? [d.data[keyStr]] : [d];
161-
return d.parent ? exports.listPath(d.parent, keyStr).concat(list) : list;
160+
if(!d.parent) return [];
161+
var list = keyStr ? [d.parent.data[keyStr]] : [d];
162+
return exports.listPath(d.parent, keyStr).concat(list);
162163
};

‎src/traces/sunburst/plot.js

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -483,6 +483,9 @@ function partition(entry) {
483483
exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
484484
var cd0 = cd[0];
485485
var cdi = pt.data.data;
486+
var hierarchy = cd0.hierarchy;
487+
var ref;
488+
var calcPercent = function() { return cdi.hasOwnProperty('v') ? cdi.v / ref.data.data.v : cdi.value / ref.data.data.value; };
486489

487490
if(trace.type === 'treemap' && helpers.isHeader(pt, trace)) {
488491
return helpers.getLabelStr(cdi.label);
@@ -510,6 +513,10 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
510513
thisText.push(formatValue(cdi.v, separators));
511514
}
512515

516+
if(hasFlag('current path')) {
517+
thisText.push(helpers.getPath(pt.data));
518+
}
519+
513520
var nPercent = 0;
514521
if(hasFlag('percent parent')) nPercent++;
515522
if(hasFlag('percent visible')) nPercent++;
@@ -526,23 +533,22 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
526533
thisText.push(tx);
527534
};
528535

529-
var ref;
530-
var calcPercent = function(key) {
531-
percent = cdi.hasOwnProperty('v') ? cdi.v / ref.v : cdi.value / ref.value;
536+
var makePercent = function(key) {
537+
percent = calcPercent();
532538
addPercent(key);
533539
};
534540

535541
if(hasFlag('percent parent') && pt.parent) {
536-
ref = pt.parent.data.data;
537-
calcPercent('parent');
542+
ref = pt.parent;
543+
makePercent('parent');
538544
}
539545
if(hasFlag('percent visible') && pt.parent) {
540-
ref = entry.data.data;
541-
calcPercent('visible');
546+
ref = entry;
547+
makePercent('visible');
542548
}
543549
if(hasFlag('percent root') && (pt.parent || helpers.isLeaf(pt))) {
544-
ref = cd0;
545-
calcPercent('root');
550+
ref = hierarchy;
551+
makePercent('root');
546552
}
547553
}
548554

@@ -562,6 +568,23 @@ exports.formatSliceLabel = function(pt, entry, trace, cd, fullLayout) {
562568
obj.value = cdi.v;
563569
obj.valueLabel = formatValue(cdi.v, separators);
564570
}
571+
572+
obj.currentPath = helpers.getPath(pt.data);
573+
574+
if(pt.parent) {
575+
ref = pt.parent;
576+
obj.percentParent = calcPercent();
577+
obj.parent = ref.data.data.label;
578+
}
579+
580+
ref = entry;
581+
obj.percentVisible = calcPercent();
582+
obj.visible = ref.data.data.label;
583+
584+
ref = hierarchy;
585+
obj.percentRoot = calcPercent();
586+
obj.root = ref.data.data.label;
587+
565588
if(cdi.hasOwnProperty('color')) {
566589
obj.color = cdi.color;
567590
}

‎src/traces/treemap/constants.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ module.exports = {
1616
'percentRoot',
1717
'percentVisible',
1818
'percentParent',
19-
'rootLabel',
20-
'visibleLabel',
21-
'parentLabel'
19+
'root',
20+
'visible',
21+
'parent'
2222
]
2323
};

‎src/traces/treemap/draw_ancestors.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
4646
var eachWidth = opts.width / entryDepth;
4747

4848
var pathIds = helpers.listPath(entry.data, 'id');
49-
pathIds.pop(); // remove last one which is the entry point.
5049

5150
var sliceData = partition(hierarchy.copy(), [width, height], {
5251
packing: 'dice',

‎test/image/baselines/treemap_level-depth.png

-27.5 KB
Loading

‎test/image/baselines/treemap_packages_colorscale_allone.png

52 Bytes
Loading

‎test/image/baselines/treemap_packages_colorscale_novalue.png

7 Bytes
Loading

‎test/image/mocks/treemap_level-depth.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
{
44
"type": "treemap",
55
"maxdepth": 3,
6-
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
7-
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
6+
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
7+
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
88
"text": [
99
"A L P H A",
1010
"B R A V O",
@@ -135,8 +135,8 @@
135135
{
136136
"type": "treemap",
137137
"level": "Victor",
138-
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
139-
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
138+
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
139+
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
140140
"text": [
141141
"A L P H A",
142142
"B R A V O",
@@ -273,8 +273,8 @@
273273
{
274274
"type": "sunburst",
275275
"maxdepth": 3,
276-
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
277-
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
276+
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
277+
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
278278
"text": [
279279
"A L P H A",
280280
"B R A V O",
@@ -405,8 +405,8 @@
405405
{
406406
"type": "sunburst",
407407
"level": "Victor",
408-
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
409-
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parentLabel} <=> %{percentParent}<br>%{visibleLabel} <=> %{percentVisible}<br>%{rootLabel} <=> %{percentRoot}",
408+
"texttemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
409+
"hovertemplate": "%{currentPath}<i>%{label}</i><br><b>%{text}</b><br><sup>%{value}</sup><br>%{parent} <=> %{percentParent}<br>%{visible} <=> %{percentVisible}<br>%{root} <=> %{percentRoot}",
410410
"text": [
411411
"A L P H A",
412412
"B R A V O",

0 commit comments

Comments
 (0)