Skip to content

Improve text fit in treemap trace #4469

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.

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 2 commits into from
Jan 7, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
13 changes: 11 additions & 2 deletions src/traces/bar/plot.js
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,9 @@ function toMoveInsideBar(x0, x1, y0, y1, textBB, opts) {
var anchor = opts.anchor || 'end';
var isEnd = anchor === 'end';
var isStart = anchor === 'start';
var leftToRight = opts.leftToRight || 0; // left: -1, center: 0, right: 1
var toRight = (leftToRight + 1) / 2;
var toLeft = 1 - toRight;

var textWidth = textBB.width;
var textHeight = textBB.height;
Expand Down Expand Up @@ -479,9 +482,15 @@ function toMoveInsideBar(x0, x1, y0, y1, textBB, opts) {
}

// compute text and target positions
var textX = (textBB.left + textBB.right) / 2;
var textX = (
textBB.left * toLeft +
textBB.right * toRight
);
var textY = (textBB.top + textBB.bottom) / 2;
var targetX = (x0 + x1) / 2;
var targetX = (
(x0 + TEXTPAD) * toLeft +
(x1 - TEXTPAD) * toRight
);
var targetY = (y0 + y1) / 2;
var anchorX = 0;
var anchorY = 0;
Expand Down
67 changes: 31 additions & 36 deletions src/traces/treemap/plot.js
Original file line number Diff line number Diff line change
Expand Up @@ -299,16 +299,6 @@ function plotOne(gd, cd, element, transitionOpts) {
var y1 = pt.y1;
var textBB = pt.textBB;

if(x0 === x1) {
x0 -= TEXTPAD;
x1 += TEXTPAD;
}

if(y0 === y1) {
y0 -= TEXTPAD;
y1 += TEXTPAD;
}

var hasFlag = function(f) { return trace.textposition.indexOf(f) !== -1; };

var hasBottom = hasFlag('bottom');
Expand All @@ -321,23 +311,18 @@ function plotOne(gd, cd, element, transitionOpts) {
var hasRight = hasFlag('right');
var hasLeft = hasFlag('left') || opts.onPathbar;

var offsetDir =
hasLeft ? 'left' :
hasRight ? 'right' : 'center';

if(opts.onPathbar || !opts.isHeader) {
x0 += hasLeft ? TEXTPAD : 0;
x1 -= hasRight ? TEXTPAD : 0;
}
var leftToRight =
hasLeft ? -1 :
hasRight ? 1 : 0;

var pad = trace.marker.pad;
if(opts.isHeader) {
x0 += pad.l - TEXTPAD;
x1 -= pad.r - TEXTPAD;
if(x0 >= x1) {
var mid = (x0 + x1) / 2;
x0 = mid - TEXTPAD;
x1 = mid + TEXTPAD;
x0 = mid;
x1 = mid;
}

// limit the drawing area for headers
Expand All @@ -356,33 +341,29 @@ function plotOne(gd, cd, element, transitionOpts) {
isHorizontal: false,
constrained: true,
angle: 0,
anchor: anchor
anchor: anchor,
leftToRight: leftToRight
});
transform.fontSize = opts.fontSize;

if(offsetDir !== 'center') {
var deltaX = (x1 - x0) / 2 - transform.scale * (textBB.right - textBB.left) / 2;
if(opts.isHeader) deltaX -= TEXTPAD;

if(offsetDir === 'left') transform.targetX -= deltaX;
else if(offsetDir === 'right') transform.targetX += deltaX;
}

transform.targetX = viewMapX(transform.targetX - transform.anchorX * transform.scale);
transform.targetY = viewMapY(transform.targetY - transform.anchorY * transform.scale);
transform.anchorX = 0;
transform.anchorY = 0;
transform.targetX = viewMapX(transform.targetX);
transform.targetY = viewMapY(transform.targetY);

if(isNaN(transform.targetX) || isNaN(transform.targetY)) {
return {};
}

recordMinTextSize(trace.type, transform, fullLayout);
if(x0 !== x1 && y0 !== y1) {
recordMinTextSize(trace.type, transform, fullLayout);
}

return {
scale: transform.scale,
rotate: transform.rotate,
textX: transform.textX,
textY: transform.textY,
anchorX: transform.anchorX,
anchorY: transform.anchorY,
targetX: transform.targetX,
targetY: transform.targetY
};
Expand Down Expand Up @@ -495,13 +476,18 @@ function plotOne(gd, cd, element, transitionOpts) {
}

var transform = pt.transform;
recordMinTextSize(trace.type, transform, fullLayout);
if(pt.x0 !== pt.x1 && pt.y0 !== pt.y1) {
recordMinTextSize(trace.type, transform, fullLayout);
}

return d3.interpolate(prev, {
transform: {
scale: transform.scale,
rotate: transform.rotate,
textX: transform.textX,
textY: transform.textY,
anchorX: transform.anchorX,
anchorY: transform.anchorY,
targetX: transform.targetX,
targetY: transform.targetY
}
Expand Down Expand Up @@ -534,11 +520,16 @@ function plotOne(gd, cd, element, transitionOpts) {

var strTransform = function(d) {
var transform = d.transform;
recordMinTextSize(trace.type, transform, fullLayout);

if(d.x0 !== d.x1 && d.y0 !== d.y1) {
recordMinTextSize(trace.type, transform, fullLayout);
}

return Lib.getTextTransform({
textX: transform.textX,
textY: transform.textY,
anchorX: transform.anchorX,
anchorY: transform.anchorY,
targetX: transform.targetX,
targetY: transform.targetY,
scale: transform.scale,
Expand All @@ -561,6 +552,8 @@ function plotOne(gd, cd, element, transitionOpts) {
prevLookupPathbar[getKey(pt)].transform = {
textX: pt.transform.textX,
textY: pt.transform.textY,
anchorX: pt.transform.anchorX,
anchorY: pt.transform.anchorY,
targetX: pt.transform.targetX,
targetY: pt.transform.targetY,
scale: pt.transform.scale,
Expand All @@ -581,6 +574,8 @@ function plotOne(gd, cd, element, transitionOpts) {
prevLookupSlices[getKey(pt)].transform = {
textX: pt.transform.textX,
textY: pt.transform.textY,
anchorX: pt.transform.anchorX,
anchorY: pt.transform.anchorY,
targetX: pt.transform.targetX,
targetY: pt.transform.targetY,
scale: pt.transform.scale,
Expand Down
Binary file modified test/image/baselines/treemap_coffee.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_flare.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_level-depth.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_packages_colorscale_allone.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_packages_colorscale_novalue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_packings.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_pad_mirror.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_pad_transpose.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_sunburst_marker_colors.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_textfit.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_textposition.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_values.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_values_colorscale.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_with-without_values.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/treemap_with-without_values_template.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/uniformtext_sunburst_treemap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/uniformtext_treemap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading