Skip to content

Workarounds for "common" (aka axis) hover label clipping #4298

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 3 commits into from
Oct 25, 2019
Merged

Workarounds for "common" (aka axis) hover label clipping #4298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
68521df
constraint common hovermode:'x' hover labels into graph viewport
etpinard Oct 22, 2019
2c94e5f
mv and clip text in common hovermode:'y' hover label
etpinard Oct 22, 2019
8d79522
shift multi-line <tspan> in common hovermode:'y' hover label
etpinard Oct 24, 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
127 changes: 103 additions & 24 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -772,59 +772,138 @@ function createHoverText(hoverData, opts, gd) {
var commonBgColor = commonLabelOpts.bgcolor || Color.defaultLine;
var commonStroke = commonLabelOpts.bordercolor || Color.contrast(commonBgColor);
var contrastColor = Color.contrast(commonBgColor);
var commonLabelFont = {
family: commonLabelOpts.font.family || fontFamily,
size: commonLabelOpts.font.size || fontSize,
color: commonLabelOpts.font.color || contrastColor
};

lpath.style({
fill: commonBgColor,
stroke: commonStroke
});

ltext.text(t0)
.call(Drawing.font,
commonLabelOpts.font.family || fontFamily,
commonLabelOpts.font.size || fontSize,
commonLabelOpts.font.color || contrastColor
)
.call(Drawing.font, commonLabelFont)
.call(svgTextUtils.positionText, 0, 0)
.call(svgTextUtils.convertToTspans, gd);

label.attr('transform', '');

var tbb = ltext.node().getBoundingClientRect();
var lx, ly;

if(hovermode === 'x') {
var topsign = xa.side === 'top' ? '-' : '';

ltext.attr('text-anchor', 'middle')
.call(svgTextUtils.positionText, 0, (xa.side === 'top' ?
(outerTop - tbb.bottom - HOVERARROWSIZE - HOVERTEXTPAD) :
(outerTop - tbb.top + HOVERARROWSIZE + HOVERTEXTPAD)));

var topsign = xa.side === 'top' ? '-' : '';
lpath.attr('d', 'M0,0' +
'L' + HOVERARROWSIZE + ',' + topsign + HOVERARROWSIZE +
'H' + (HOVERTEXTPAD + tbb.width / 2) +
'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
'H-' + (HOVERTEXTPAD + tbb.width / 2) +
'V' + topsign + HOVERARROWSIZE + 'H-' + HOVERARROWSIZE + 'Z');

label.attr('transform', 'translate(' +
(xa._offset + (c0.x0 + c0.x1) / 2) + ',' +
(ya._offset + (xa.side === 'top' ? 0 : ya._length)) + ')');
lx = xa._offset + (c0.x0 + c0.x1) / 2;
ly = ya._offset + (xa.side === 'top' ? 0 : ya._length);

var halfWidth = tbb.width / 2 + HOVERTEXTPAD;

if(lx < halfWidth) {
lx = halfWidth;

lpath.attr('d', 'M-' + (halfWidth - HOVERARROWSIZE) + ',0' +
'L-' + (halfWidth - HOVERARROWSIZE * 2) + ',' + topsign + HOVERARROWSIZE +
'H' + (HOVERTEXTPAD + tbb.width / 2) +
'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
'H-' + halfWidth +
'V' + topsign + HOVERARROWSIZE +
'Z');
} else if(lx > (fullLayout.width - halfWidth)) {
lx = fullLayout.width - halfWidth;

lpath.attr('d', 'M' + (halfWidth - HOVERARROWSIZE) + ',0' +
'L' + halfWidth + ',' + topsign + HOVERARROWSIZE +
'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
'H-' + halfWidth +
'V' + topsign + HOVERARROWSIZE +
'H' + (halfWidth - HOVERARROWSIZE * 2) + 'Z');
} else {
lpath.attr('d', 'M0,0' +
'L' + HOVERARROWSIZE + ',' + topsign + HOVERARROWSIZE +
'H' + (HOVERTEXTPAD + tbb.width / 2) +
'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
'H-' + (HOVERTEXTPAD + tbb.width / 2) +
'V' + topsign + HOVERARROWSIZE +
'H-' + HOVERARROWSIZE + 'Z');
}
} else {
ltext.attr('text-anchor', ya.side === 'right' ? 'start' : 'end')
.call(svgTextUtils.positionText,
(ya.side === 'right' ? 1 : -1) * (HOVERTEXTPAD + HOVERARROWSIZE),
outerTop - tbb.top - tbb.height / 2);
var anchor;
var sgn;
var leftsign;
if(ya.side === 'right') {
anchor = 'start';
sgn = 1;
leftsign = '';
lx = xa._offset + xa._length;
} else {
anchor = 'end';
sgn = -1;
leftsign = '-';
lx = xa._offset;
}

ly = ya._offset + (c0.y0 + c0.y1) / 2;

ltext.attr('text-anchor', anchor);

var leftsign = ya.side === 'right' ? '' : '-';
lpath.attr('d', 'M0,0' +
'L' + leftsign + HOVERARROWSIZE + ',' + HOVERARROWSIZE +
'V' + (HOVERTEXTPAD + tbb.height / 2) +
'h' + leftsign + (HOVERTEXTPAD * 2 + tbb.width) +
'V-' + (HOVERTEXTPAD + tbb.height / 2) +
'H' + leftsign + HOVERARROWSIZE + 'V-' + HOVERARROWSIZE + 'Z');

label.attr('transform', 'translate(' +
(xa._offset + (ya.side === 'right' ? xa._length : 0)) + ',' +
(ya._offset + (c0.y0 + c0.y1) / 2) + ')');
var halfHeight = tbb.height / 2;
var lty = outerTop - tbb.top - halfHeight;
var clipId = 'clip' + fullLayout._uid + 'commonlabel' + ya._id;
var clipPath;

if(lx < (tbb.width + 2 * HOVERTEXTPAD + HOVERARROWSIZE)) {
Copy link
Contributor Author

@etpinard etpinard Oct 23, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicolaskruchten this used to be:

if(lx < (tbb.width + HOVERTEXTPAD + HOVERARROWSIZE)) { // ...

which may have caused the problem described in #4221 (comment)

New attempt: https://codepen.io/etpinard/pen/qBBrLwx

clipPath = 'M-' + (HOVERARROWSIZE + HOVERTEXTPAD) + '-' + halfHeight +
'h-' + (tbb.width - HOVERTEXTPAD) +
'V' + halfHeight +
'h' + (tbb.width - HOVERTEXTPAD) + 'Z';

var ltx = tbb.width - lx + HOVERTEXTPAD;
svgTextUtils.positionText(ltext, ltx, lty);

// shift each line (except the longest) so that start-of-line
// is always visible
if(anchor === 'end') {
ltext.selectAll('tspan').each(function() {
var s = d3.select(this);
var dummy = Drawing.tester.append('text')
.text(s.text())
.call(Drawing.font, commonLabelFont);
var dummyBB = dummy.node().getBoundingClientRect();
if(dummyBB.width < tbb.width) {
s.attr('x', ltx - dummyBB.width);
}
dummy.remove();
});
}
} else {
svgTextUtils.positionText(ltext, sgn * (HOVERTEXTPAD + HOVERARROWSIZE), lty);
clipPath = null;
}

var textClip = fullLayout._topclips.selectAll('#' + clipId).data(clipPath ? [0] : []);
textClip.enter().append('clipPath').attr('id', clipId).append('path');
textClip.exit().remove();
textClip.select('path').attr('d', clipPath);
Drawing.setClipUrl(ltext, clipPath ? clipId : null, gd);
}

label.attr('transform', 'translate(' + lx + ',' + ly + ')');

// remove the "close but not quite" points
// because of error bars, only take up to a space
hoverData = hoverData.filter(function(d) {
Expand Down
119 changes: 119 additions & 0 deletions test/jasmine/tests/hover_label_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ var d3 = require('d3');
var Plotly = require('@lib/index');
var Fx = require('@src/components/fx');
var Lib = require('@src/lib');
var Drawing = require('@src/components/drawing');

var HOVERMINTIME = require('@src/components/fx').constants.HOVERMINTIME;
var MINUS_SIGN = require('@src/constants/numerical').MINUS_SIGN;

Expand All @@ -14,6 +16,7 @@ var delay = require('../assets/delay');
var doubleClick = require('../assets/double_click');
var failTest = require('../assets/fail_test');
var touchEvent = require('../assets/touch_event');
var negateIf = require('../assets/negate_if');

var customAssertions = require('../assets/custom_assertions');
var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
Expand Down Expand Up @@ -1700,6 +1703,122 @@ describe('hover info', function() {
});
});

describe('constraints info graph viewport', function() {
var gd;

beforeEach(function() { gd = createGraphDiv(); });

it('hovermode:x common label should fit in the graph div width', function(done) {
function _assert(msg, exp) {
return function() {
var label = d3.select('g.axistext');
if(label.node()) {
expect(label.text()).toBe(exp.txt, 'common label text| ' + msg);
expect(Drawing.getTranslate(label).x)
.toBeWithin(exp.lx, 5, 'common label translate-x| ' + msg);

var startOfPath = label.select('path').attr('d').split('L')[0];
expect(startOfPath).not.toBe('M0,0', 'offset start of label path| ' + msg);
} else {
fail('fail to generate common hover label');
}
};
}

function _hoverLeft() { return _hover(gd, 30, 300); }

function _hoverRight() { return _hover(gd, 370, 300); }

Plotly.plot(gd, [{
type: 'bar',
x: ['2019-01-01', '2019-06-01', '2020-01-01'],
y: [2, 5, 10]
}], {
xaxis: {range: ['2019-02-06', '2019-12-01']},
margin: {l: 0, r: 0},
width: 400,
height: 400
})
.then(_hoverLeft)
.then(_assert('left-edge hover', {txt: 'Jan 1, 2019', lx: 37}))
.then(_hoverRight)
.then(_assert('right-edge hover', {txt: 'Jan 1, 2020', lx: 362}))
.then(function() { return Plotly.relayout(gd, 'xaxis.side', 'top'); })
.then(_hoverLeft)
.then(_assert('left-edge hover (side:top)', {txt: 'Jan 1, 2019', lx: 37}))
.then(_hoverRight)
.then(_assert('right-edge hover (side:top)', {txt: 'Jan 1, 2020', lx: 362}))
.catch(failTest)
.then(done);
});

it('hovermode:y common label should shift and clip text start into graph div', function(done) {
function _assert(msg, exp) {
return function() {
var label = d3.select('g.axistext');
if(label.node()) {
var ltext = label.select('text');
expect(ltext.text()).toBe(exp.txt, 'common label text| ' + msg);
expect(ltext.attr('x')).toBeWithin(exp.ltx, 5, 'common label text x| ' + msg);

negateIf(exp.clip, expect(ltext.attr('clip-path'))).toBe(null, 'text clip url| ' + msg);

var fullLayout = gd._fullLayout;
var clipId = 'clip' + fullLayout._uid + 'commonlabely';
var clipPath = d3.select('#' + clipId);
negateIf(exp.clip, expect(clipPath.node())).toBe(null, 'text clip path|' + msg);

if(exp.tspanX) {
var tspans = label.selectAll('tspan');
if(tspans.size()) {
tspans.each(function(d, i) {
var s = d3.select(this);
expect(s.attr('x')).toBeWithin(exp.tspanX[i], 5, i + '- tspan shift| ' + msg);
});
} else {
fail('fail to generate tspans in hover label');
}
}
} else {
fail('fail to generate common hover label');
}
};
}

function _hoverWayLong() { return _hover(gd, 135, 100); }

function _hoverA() { return _hover(gd, 135, 20); }

Plotly.plot(gd, [{
type: 'bar',
orientation: 'h',
y: ['Looong label', 'Loooooger label', 'Waay loooong label', 'a'],
x: [2, 5, 10, 2]
}], {
width: 400,
height: 400
})
.then(_hoverWayLong)
.then(_assert('on way long label', {txt: 'Waay loooong label', clip: true, ltx: 38}))
.then(_hoverA)
.then(_assert('on "a" label', {txt: 'a', clip: false, ltx: -9}))
.then(function() {
return Plotly.restyle(gd, {
y: [['Looong label', 'Loooooger label', 'SHORT!<br>Waay loooong label', 'a']]
});
})
.then(_hoverWayLong)
.then(_assert('on way long label (multi-line case)', {
txt: 'SHORT!Waay loooong label',
clip: true,
ltx: 38,
tspanX: [-11, 38]
}))
.catch(failTest)
.then(done);
});
});

describe('hovertemplate', function() {
var mockCopy;

Expand Down