Skip to content
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.

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

[Lens] Options to trim axis labels/ticks for long text field values #100231

Open
shahzad31 opened this issue May 17, 2021 · 12 comments
Open

[Lens] Options to trim axis labels/ticks for long text field values #100231

shahzad31 opened this issue May 17, 2021 · 12 comments
Labels
enhancement New value added to drive a business result Feature:ElasticCharts Issues related to the elastic-charts library Feature:Lens impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@shahzad31
Copy link
Contributor

Describe the feature:
When you are doing top values on a field for example url, it takes all the width in the chart

for example

image

Describe a specific use case for the feature:

We should provide a feature in lens, so that we can trim the axis labels, by truncating the value, perhaps user can specify the width that can be consumed by a label. User should be able to see the full value on hovering the truncated value in a tool tip.

@botelastic botelastic bot added the needs-team Issues missing a team label label May 17, 2021
@shahzad31 shahzad31 added the Team:Visualizations Visualization editors, elastic-charts and infrastructure label May 17, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@botelastic botelastic bot removed the needs-team Issues missing a team label label May 17, 2021
@ghudgins
Copy link
Contributor

relates to #41418 as well

@flash1293 flash1293 added the enhancement New value added to drive a business result label May 18, 2021
@flash1293
Copy link
Contributor

cc @markov00 Do you see a good short term solution for this issue?

@markov00
Copy link
Member

@flash1293 not a very short term, but if you can open an issue on our repo we can push it in our roadmap with higher priority.
Can be somehow fixed with something like elastic/elastic-charts#313 + adding a limit for the label width to a max % of the chart.

Probably in the meantime you can fix this in lens by:

  • manually truncating the x values to a specific number of chars
  • and change the tooltip header to render fully the x value instead of the truncated one.
    a possible way to do that is to create an object for the X value, one with the full title, one with the truncated one, using the truncated as the accessor and using the full one on the tooltip
    Truncation should happen a few chars before the end like http://www.elasti......cs/mappings, as usually the ending part of the text has more information (but it really depends on the context)

@flash1293
Copy link
Contributor

@ghudgins what do you think about a quick fix like Marco suggested? We can implement this on the Lens side, but I guess we should make it configurable because it's probably not always the right behavior.

@shahzad31
Copy link
Contributor Author

in UI it ends up displaying something like this
image

@ghudgins
Copy link
Contributor

@flash1293 @markov00 I think the extra axis formatting option for this sounds okay...enabled by default on new visualizations as I feel it's the most flexible/versatile option (strong hypothesis: truncating middle/end is better than not truncating in most cases). Only argument I can come up with against making it configurable is if we think future legend controls will have a completely different scheme and we'll have to "tow" this extra setting along...seems unlikely.

@flash1293
Copy link
Contributor

flash1293 commented May 20, 2021

When do we start truncating? It feels like the thing we want to optimize is label to chart ratio, but that would require font size and chart width information - not sure whether we can reliably get the first one.

Although, as it's possible to turn off the behavior, we could also just go with a fixed number of characters.

@ghudgins
Copy link
Contributor

ghudgins commented Jun 4, 2021

deleted my previous comment....had legends on the brain. I think we'd have to find a length that just mitigates this issue. Legends today chop at 30 characters when configured on the left/right size. We could consider doing a similar length here or go a bit longer since, at least on horiz bar, we have the space. Definitely like the ... in the middle somewhere if possible

@ghudgins
Copy link
Contributor

+1 " truncate X bars names/wrapping would be even better. I had to drop lens just because the label names are too large I dont have a way to show it vertically and truncate"

@Heenawter
Copy link
Contributor

Encountered issues with this during 8.7 testing week so ++ to adding the ability to truncate long labels.

For reference, attaching one of the wacky charts I was able to make because of the super long agent labels in the sample Logs data 👀

image

@stratoula stratoula added the impact:needs-assessment Product and/or Engineering needs to evaluate the impact of the change. label Feb 15, 2023
@markov00
Copy link
Member

Yes, we are on it elastic/elastic-charts#1490 but this is a tricky problem, in particular with angled labels. We will add a bit more constraints on the layout in the future to allow simplified handling of those cases.

@stratoula stratoula added impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. and removed impact:needs-assessment Product and/or Engineering needs to evaluate the impact of the change. labels Jun 1, 2023
@markov00 markov00 added the Feature:ElasticCharts Issues related to the elastic-charts library label Jul 27, 2023
@jb1b84 jb1b84 removed the vis:axis label Aug 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:ElasticCharts Issues related to the elastic-charts library Feature:Lens impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Development

No branches or pull requests

8 participants