Align hover label text content with *hoverlabel.align*

[etpinard]

resolves #3726 by adding a new attribute under the hoverlabel trace and layout containers.

See demo: https://codepen.io/etpinard/pen/MRJvLr?editors=1010

I picked align as its behavior reminded me of align in the annotations attributes:

plotly.js/src/components/annotations/attributes.js

Lines 87 to 99 in 1dcee93

	align: {
	valType: 'enumerated',
	values: ['left', 'center', 'right'],
	dflt: 'center',
	role: 'style',
	editType: 'arraydraw',
	description: [
	'Sets the horizontal alignment of the `text` within the box.',
	'Has an effect only if `text` spans more two or more lines',
	'(i.e. `text` contains one or more <br> HTML tags) or if an',
	'explicit width is set to override the text width.'
	].join(' ')
	},

Let me know if you can think of a better name.

cc @plotly/plotly_js @nicolaskruchten

[nicolaskruchten]

The default is center? I would have thought the default would be “auto” to describe the current behaviour

[nicolaskruchten]

Also re the description: this doesn’t just apply to “texts right? It applies to the entire contents of the hoverlabel, even if it’s built with hovertemplate etc?

[antoinerg]

Also re the description: this doesn’t just apply to “texts right? It applies to the entire contents of the hoverlabel, even if it’s built with hovertemplate etc?

hovertemplate was implemented so that it reuses all the existing logic. So yes the hoverlabel.align does apply to the entire content of the hoverlabel even if it's built with hovertemplate!

I think we could replace `text` by text in the description.

The default is center? I would have thought the default would be “auto” to describe the current behaviour

The default is actually auto. However, center is not yet implemented in this PR. @nicolaskruchten is this a requirement?

[etpinard]

The default is center? I would have thought the default would be “auto” to describe the current behaviou

The default is 'auto'.

[etpinard]

Wow. Sorry I made things confusing. The block I pasted in the PR description is in annotations/attributes.js not the new hoverlabel.align attribute declaration which is:

        align: {
            valType: 'enumerated',
            values: ['left', 'right', 'auto'],
            dflt: 'auto',
            role: 'style',
            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'
            ].join(' ')
        },

as found in fx/layout_attributes.js.

[antoinerg]

@etpinard about your #3726 (comment) . Since there are two different things we may want to align, wouldn't it be safer to call this new attribute textalign instead of align. I could see align being used to align with respect to the data points as you pointed out whereas in the current PR we deal with text alignment.

[etpinard]

Since there are two different things we may want to align, wouldn't it be safer to call this new attribute textalign instead of align

Fair. But you could say the same thing about annotations.

[nicolaskruchten]

center is not important to me BTW :)

[etpinard]

center is not important to me BTW :)

🎉 that's what I thought.

[nicolaskruchten]

✨ from me :)

[antoinerg]

💃 once the tests pass!

[etpinard]

Going with hoverlabel.align for consistency with annotations.

[nicolaromano]

Would it be possible to allow center-aligning text as well?