[Legend] Improved readability on long legend values

[ghudgins]

Problem with long values
When my data is long and varies mostly at the end of the value
I need to be able to see the ends of long values
So I can see the differences in my legend values from the front and the back of the values

Describe the solution you'd like
Many options:

• Option that lets you choose to middle ... instead of at the end (as it is today)?
• Selected approach: Option multi-line legends

There are other solutions we shouldn't look into in the scope of this issue: #963 Focus on a responsive solution (we should still do the resize issue too as that satisfies interactivity cases...just not as a solution to this issue)

Describe alternatives you've considered
There are none, makes lines with multiple series hard to read

Additional context
Screenshots on this issue: elastic/kibana#41418
TSVB related issue: elastic/kibana#102327
Related problem on dropdowns: elastic/kibana#103701

Checklist

Delete any items that are not applicable to this feature request.

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[ghudgins]

we selected multi-line legends as the approach because it 1) works really well with resizing #963 2) it works very well on horizontal legends (right / left) and 3) it enables future table legends. We also found issues with middle ... - the most notable was the copy/paste not working correctly which was an original requirement

[nickofthyme]

Testing for center ... solution...

Option 1 - demo

separates legend labels at an index

Causes line breaks when copying.

cloudfla
re.com - direct-cdn - y2
cloudfla
re.com - indirect-cdn - y1

Option 2 - demo

The same as option 1 with separating legend labels at an arbitrary index and uses user-select: none on split strings with a separate adjacent full string element. Thus the copied text is the full invisible text.

Note: the blue text is the full untruncated label that will be invisible (i.e. color: transparent) while the red will be the center-truncated visible text.

Resulting copy is like this...

cloudflare.com - direct-cdn - y2
cloudflare.com - indirect-cdn - y1
cloudflare.com - indirect-cdn - y2

I'm not sure if this trick works in all browsers but Chrome supposedly had a related bug for this as mentioned here