diff --git a/draftlogs/8104_fix.md b/draftlogs/8104_fix.md new file mode 100644 index 00000000000..f37635a93d4 --- /dev/null +++ b/draftlogs/8104_fix.md @@ -0,0 +1 @@ + - Fix `hoverlabel.align` so that it aligns the item text in `x unified` and `y unified` hover labels [[#8104](https://github.com/plotly/plotly.js/pull/8104)], with thanks to @MannXo for the contribution! diff --git a/src/components/fx/layout_attributes.js b/src/components/fx/layout_attributes.js index 963ad29a9c9..fd7fae8dbb1 100644 --- a/src/components/fx/layout_attributes.js +++ b/src/components/fx/layout_attributes.js @@ -188,7 +188,7 @@ module.exports = { editType: 'none', description: [ 'Sets the horizontal alignment of the text content within hover label box.', - 'Has an effect only if the hover label text spans more two or more lines' + 'Has an effect only if the hover label text spans two or more lines' ].join(' ') }, namelength: { diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index d0e89e7fbd0..8fdc5b5afc2 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -1066,6 +1066,17 @@ function computeLegendDimensions(gd, groups, traces, legendObj, scrollBox) { Drawing.setRect(traceToggle, 0, -h / 2, w, h); }); + if (legendObj._inHover) { + const textRight = legendObj._width - bw2 - itemGap - titleSize[0]; + traces.each(function (d) { + if (d[0].textAlign !== 'right') return; + d3.select(this) + .select('.' + legendId + 'text') + .attr('text-anchor', 'end') + .call(svgTextUtils.positionText, textRight); + }); + } + // align legend title horizontally var titleEl = scrollBox.select('.' + legendId + 'titletext'); if(titleEl.node()) { diff --git a/src/types/generated/schema.d.ts b/src/types/generated/schema.d.ts index 7f79211f57a..c2bf6edb0a8 100644 --- a/src/types/generated/schema.d.ts +++ b/src/types/generated/schema.d.ts @@ -438,7 +438,7 @@ export interface ColorBar { export interface HoverLabel { /** - * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines + * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines * @default 'auto' */ align?: 'left' | 'right' | 'auto' | ('left' | 'right' | 'auto')[]; @@ -1577,7 +1577,7 @@ export interface CandlestickData { hoverinfo?: 'x' | 'y' | 'z' | 'text' | 'name' | 'all' | 'none' | 'skip' | (string & {}) | ('x' | 'y' | 'z' | 'text' | 'name' | 'all' | 'none' | 'skip' | (string & {}))[]; hoverlabel?: { /** - * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines + * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines * @default 'auto' */ align?: 'left' | 'right' | 'auto' | ('left' | 'right' | 'auto')[]; @@ -6074,7 +6074,7 @@ export interface OhlcData { hoverinfo?: 'x' | 'y' | 'z' | 'text' | 'name' | 'all' | 'none' | 'skip' | (string & {}) | ('x' | 'y' | 'z' | 'text' | 'name' | 'all' | 'none' | 'skip' | (string & {}))[]; hoverlabel?: { /** - * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines + * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines * @default 'auto' */ align?: 'left' | 'right' | 'auto' | ('left' | 'right' | 'auto')[]; @@ -16182,7 +16182,7 @@ export interface Layout { hoverdistance?: number; hoverlabel?: { /** - * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines + * Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines * @default 'auto' */ align?: 'left' | 'right' | 'auto'; diff --git a/test/jasmine/tests/hover_test.js b/test/jasmine/tests/hover_test.js index 544bf2f0e29..bf80831cab6 100644 --- a/test/jasmine/tests/hover_test.js +++ b/test/jasmine/tests/hover_test.js @@ -7395,6 +7395,61 @@ describe('hovermode: (x|y)unified', function () { .then(done, done.fail); }); + it('should align item text with hoverlabel.align', (done) => { + const getItems = () => { + const items = []; + getHoverLabel() + .selectAll('g.traces text.legendtext') + .each(function () { + const { left, right } = this.getBoundingClientRect(); + items.push({ + anchor: this.getAttribute('text-anchor'), + left, + right, + x: this.getAttribute('x') + }); + }); + return items; + }; + let rightAlignedShort; + + Plotly.newPlot(gd, [{ y: [1, 2, 3] }, { y: [1000000, 2000000, 3000000] }], { + hovermode: 'x unified', + hoverlabel: { align: 'right' }, + showlegend: false, + width: 500, + height: 500 + }) + .then(() => { + _hover(gd, { xval: 1 }); + const [short, long] = getItems(); + expect([short.anchor, long.anchor]).toEqual(['end', 'end']); + // Compare anchor positions because the text rect can extend past the anchor by a font-dependent amount + expect(short.x).toBe(long.x); + expect(short.left).toBeGreaterThan(long.left); + rightAlignedShort = short; + + return Plotly.relayout(gd, 'hoverlabel.align', 'left'); + }) + .then(() => { + _hover(gd, { xval: 1 }); + const [short, long] = getItems(); + expect([short.anchor, long.anchor]).toEqual(['start', 'start']); + expect(short.left).toBeCloseTo(long.left, 0); + + return Plotly.restyle(gd, 'hoverlabel.align', 'right', [0]); + }) + .then(() => { + _hover(gd, { xval: 1 }); + const [short, long] = getItems(); + expect([short.anchor, long.anchor]).toEqual(['end', 'start']); + // Same text and box as the first step, so the right-aligned item must not move + expect(short.x).toBe(rightAlignedShort.x); + expect(short.right).toBeCloseTo(rightAlignedShort.right, 0); + }) + .then(done, done.fail); + }); + it('should work with hovertemplate', function (done) { var mockCopy = Lib.extendDeep({}, mock); mockCopy.data[0].hovertemplate = 'hovertemplate: %{y:0.2f}'; diff --git a/test/plot-schema.json b/test/plot-schema.json index 3f5dde569b4..b192045aeca 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -2830,7 +2830,7 @@ }, "hoverlabel": { "align": { - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -16042,7 +16042,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -17911,7 +17911,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -19307,7 +19307,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -20677,7 +20677,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -23512,7 +23512,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -24652,7 +24652,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -25821,7 +25821,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -27236,7 +27236,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -29866,7 +29866,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -30404,7 +30404,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -32147,7 +32147,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -33663,7 +33663,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -34688,7 +34688,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -37150,7 +37150,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -38720,7 +38720,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -39535,7 +39535,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -41266,7 +41266,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -43628,7 +43628,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -45013,7 +45013,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -45683,7 +45683,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -48920,7 +48920,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -49968,7 +49968,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -51401,7 +51401,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "calc", "valType": "enumerated", @@ -51756,7 +51756,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "calc", "valType": "enumerated", @@ -52028,7 +52028,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "calc", "valType": "enumerated", @@ -52751,7 +52751,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -55244,7 +55244,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -57479,7 +57479,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -59558,7 +59558,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -61765,7 +61765,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -63873,7 +63873,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -65205,7 +65205,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -67300,7 +67300,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -69249,7 +69249,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -71328,7 +71328,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -73428,7 +73428,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -75864,7 +75864,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -76533,7 +76533,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -79013,7 +79013,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -80021,7 +80021,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -80439,7 +80439,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -82245,7 +82245,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -84233,7 +84233,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated", @@ -85042,7 +85042,7 @@ "hoverlabel": { "align": { "arrayOk": true, - "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans more two or more lines", + "description": "Sets the horizontal alignment of the text content within hover label box. Has an effect only if the hover label text spans two or more lines", "dflt": "auto", "editType": "none", "valType": "enumerated",