8000 Consistent text mode for bar-like & pie-like traces and feature to control text orientation inside pie/sunburst slices by archmoj · Pull Request #4420 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Consistent text mode for bar-like & pie-like traces and feature to control text orientation inside pie/sunburst slices #4420

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 20 commits into from
Dec 23, 2019
Merged

Consistent text mode for bar-like & pie-like traces and feature to control text orientation inside pie/sunburst slices #4420

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
0d3e289
add uniformtext attributes to layout
archmoj Dec 12, 2019
c095271
simplify transform function and expand to reuse in pie and sunburst
archmoj Dec 12, 2019
b234d7a
implement uniformtext for bar-like traces as well as funnelarea and t…
archmoj Dec 12, 2019
f0ac957
implement uniformtext and insidetext-orientation for pie and sunburst
archmoj Dec 12, 2019
4d5fb3d
add new mocks to test insidetextorientation and uniformtext
archmoj Dec 12, 2019
a27dc29
Consider first review
archmoj Dec 13, 2019
1479943
make tangential go towards noon and 6 and make radial go towards 3 and 9
archmoj Dec 16, 2019
eab205a
rewrite uniform text style
archmoj Dec 16, 2019
5348c58
add new mocks cases by Nicolas
archmoj Dec 18, 2019
15ce24d
apply zero scale for hiding text elements
archmoj Dec 19, 2019
0840d82
add new mocks using both inside-text-orientation and uniformtext
archmoj Dec 19, 2019
328ffd0
move reposition logic outside pie transformInsideText function
archmoj Dec 19, 2019
2a31685
apply next text position when it is not at the center
archmoj Dec 19, 2019
d1b50b1
Apply polar coordinates to move text inside the slice during sunburst…
archmoj Dec 19, 2019
2cb5687
sunburst handle no text when using various inside-text-orientation op…
archmoj Dec 20, 2019
beed042
add react tests for treemap and pie uniform text as well as inside te…
archmoj Dec 20, 2019
51d7e1b
add tests for updating text positions using different inside-text-pos…
archmoj Dec 20, 2019
603e0cc
wip
etpinard Dec 20, 2019
8784274
first attempt at fixing tests on etpinard's laptop
etpinard Dec 23, 2019
2686c46
Fix funnelarea, pie, sunburst and treemap tests
archmoj Dec 23, 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
Prev Previous commit
Next Next commit
Apply polar coordinates to move text inside the slice during sunburst… 
… transitions

- rename pxtxt to textPosAngle and other cleanups
- keep textPosAngle inside transform
  • Loading branch information
@archmoj
archmoj committed Dec 19, 2019
commit d1b50b1e7f83a69c4ac961444fb591d94527b4bb
31 changes: 16 additions & 15 deletions src/traces/pie/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,16 +175,12 @@ function plot(gd, cdModule) {

transform = transformOutsideText(textBB, pt);
}

if(transform.pxtxt) {
// copy text position if not at the middle
pt.pxtxt = transform.pxtxt;
}
}

var pxtxt = pt.pxtxt || pt.pxmid;
transform.targetX = cx + pxtxt[0] * transform.rCenter + (transform.x || 0);
transform.targetY = cy + pxtxt[1] * transform.rCenter + (transform.y || 0);
var textPosAngle = transform.textPosAngle;
var textXY = textPosAngle === undefined ? pt.pxmid : getCoords(cd0.r, textPosAngle);
transform.targetX = cx + textXY[0] * transform.rCenter + (transform.x || 0);
transform.targetY = cy + textXY[1] * transform.rCenter + (transform.y || 0);
computeTransform(transform, textBB);

// save some stuff to use later ensure no labels overlap
Expand Down Expand Up @@ -572,6 +568,7 @@ function transformInsideText(textBB, pt, cd0) {
var isAuto = orientation === 'auto';
var isCircle = (ring === 1) && (Math.abs(pt.startangle - pt.stopangle) === Math.PI * 2);
var allTransforms = [];
var newT;

if(!isAuto) {
// max size if text is placed (horizontally) at the top or bottom of the arc
Expand All @@ -583,13 +580,12 @@ function transformInsideText(textBB, pt, cd0) {

var closestEdge = dStart < dStop ? dStart : dStop;

var newT;
if(key === 'tan') {
newT = calcTanTransform(textBB, r, ring, closestEdge, 0);
} else { // case of 'rad'
newT = calcRadTransform(textBB, r, ring, closestEdge, Math.PI / 2);
}
newT.pxtxt = getCoords(r, angle);
newT.textPosAngle = angle;

allTransforms.push(newT);
}
Expand All @@ -616,25 + 10000 612,30 @@ function transformInsideText(textBB, pt, cd0) {
// this inscribes the text rectangle in a circle, which is then inscribed
// in the slice, so it will be an underestimate, which some day we may want
// to improve so this case can get more use
var transform = {
newT = {
scale: rInscribed * r * 2 / textDiameter,

// and the center position and rotation in this case
rCenter: 1 - rInscribed,
rotate: 0
};

if(transform.scale >= 1) return transform;
newT.textPosAngle = (pt.startangle + pt.stopangle) / 2;
if(newT.scale >= 1) return newT;

allTransforms.push(transform);
allTransforms.push(newT);
}

if(isAuto || isRadial) {
allTransforms.push(calcRadTransform(textBB, r, ring, halfAngle, midAngle));
newT = calcRadTransform(textBB, r, ring, halfAngle, midAngle);
newT.textPosAngle = (pt.startangle + pt.stopangle) / 2;
allTransforms.push(newT);
}

if(isAuto || isTangential) {
allTransforms.push(calcTanTransform(textBB, r, ring, halfAngle, midAngle));
newT = calcTanTransform(textBB, r, ring, halfAngle, midAngle);
newT.textPosAngle = (pt.startangle + pt.stopangle) / 2;
allTransforms.push(newT);
}

var id = 0;
Expand Down
24 changes: 15 additions & 9 deletions src/traces/sunburst/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,8 @@ function plotOne(gd, cd, element, transitionOpts) {
var pathSlice = function(d) { return Lib.pathAnnulus(d.rpx0, d.rpx1, d.x0, d.x1, cx, cy); };
// slice text translate x/y

var getTargetX = function(d) { return cx + (d.pxtxt || d.pxmid)[0] * d.transform.rCenter + (d.transform.x || 0); };
var getTargetY = function(d) { return cy + (d.pxtxt || d.pxmid)[1] * d.transform.rCenter + (d.transform.y || 0); };
var getTargetX = function(d) { return cx + getTextXY(d)[0] * d.transform.rCenter + (d.transform.x || 0); };
var getTargetY = function(d) { return cy + getTextXY(d)[1] * d.transform.rCenter + (d.transform.y || 0); };

slices = slices.data(sliceData, helpers.getPtId);

Expand Down Expand Up @@ -264,11 +264,6 @@ function plotOne(gd, cd, element, transitionOpts) {
// position the text relative to the slice
var textBB = Drawing.bBox(sliceText.node());
pt.transform = transformInsideText(textBB, pt, cd0);
if(pt.transform.pxtxt) {
// copy text position if not at the middle
pt.pxtxt = pt.transform.pxtxt;
}

pt.transform.targetX = getTargetX(pt);
pt.transform.targetY = getTargetY(pt);

Expand Down Expand Up @@ -382,6 +377,7 @@ function plotOne(gd, cd, element, transitionOpts) {
prev = {
rpx1: pt.rpx1,
transform: {
textPosAngle: transform.textPosAngle,
scale: 0,
rotate: transform.rotate,
rCenter: transform.rCenter,
Expand Down Expand Up @@ -414,6 +410,7 @@ function plotOne(gd, cd, element, transitionOpts) {
}
}

var textPosAngleFn = d3.interpolate(prev.transform.textPosAngle, pt.transform.textPosAngle);
var rpx1Fn = d3.interpolate(prev.rpx1, pt.rpx1);
var x0Fn = d3.interpolate(prev.x0, pt.x0);
var x1Fn = d3.interpolate(prev.x1, pt.x1);
Expand All @@ -434,11 +431,13 @@ function plotOne(gd, cd, element, transitionOpts) {
var x1 = x1Fn(t);
var rCenter = rCenterFn(t);
var pxmid = rx2px(rpx1, (x0 + x1) / 2);
var textPosAngle = textPosAngleFn(t);

var d = {
pxtxt: pt.pxtxt || pxmid,
pxmid: pxmid,
rpx1: rpx1,
transform: {
textPosAngle: textPosAngle,
rCenter: rCenter,
x: transform.x,
y: transform.y
Expand All @@ -447,7 +446,6 @@ function plotOne(gd, cd, element, transitionOpts) {

recordMinTextSize(trace.type, transform, fullLayout);
return {
rpx1: rpx1Fn(t),
transform: {
targetX: getTargetX(d),
targetY: getTargetY(d),
Expand Down Expand Up @@ -613,3 +611,11 @@ function getInscribedRadiusFraction(pt) {
));
}
}

function getTextXY(d) {
return getCoords(d.rpx1, d.transform.textPosAngle);
}

function getCoords(r, angle) {
return [r * Math.sin(angle), -r * Math.cos(angle)];
}
0