Repository navigation
Multiple metrics don't fit well in narrow vis #26400
Description
Activity
Pinging @elastic/kibana-app
We are having the same issue in 6.5.1. Multiple metrics are only showing horizontally with a scrollbar for a tall narrow view.
@elastic/kibana-design what would be the correct approach here ?
- historically, we were just having each metric in a and centered. One metric would show in the middle (horizontally, not vertically however), and if you had more than would fit in one line they would wrap into next one.
- now we are using display:flex, which means that all metrics go into one line and you get horizontal scrollbar if there are more than would fit in one line.
probably, we want to go back to wrapping into multiple rows, but i would still like to see metric centered vertically as well. So if you have one (or not enough to wrap) they would be centered vertica;y/horizontally. Once we need to wrap, we wrap .... still center everything.
is there a good solution for vert. centering variable height div inside another div ? even when variable height div can be bigger than container (in which case we need scrollbars).
some help would be appreciated, or at least some design on how it should look.
You can try to just add
flex-wrap: wrap, so that once the panel gets too narrow to fit them all they should start wrapping to the next line.I think something like http://softwarepsychonaut.com/react-fittext/ that dynamically sizes the text to the width would be a good solution. The only negative I can see is that from panel to panel the sizing might differ. As long as it was vertically aligned it should be ok?
This could be something we just add as a prop on
EuiStatThe TSVB metrics already do that so maybe it's about utilizing that renderer instead?
i don't think autosizing of text will work, some users have splits with a lot of metrics (which won't fit into one line even if they use the whole width of the dashboard)
+1 to go back to the previous behavior of wrapping as a bug fix, as the current behavior breaks existing dashboards.
Separately, I'm +1 to explore the autosizing idea in a new issue (which seems like a better default behavior for new visualizations, but would break existing vis).
FYI, the autosizing idea already has an issue for anybody who wants to comment further there: #26401
You can try to just add
flex-wrap: wrap, so that once the panel gets too narrow to fit them all they should start wrapping to the next line.+1 for going back to the old wrapping behaviour. Here's a before and after from one of my dashboards:
Maybe include scaling as an option, but large blocks of colourful numbers has been pretty effective for me.
Reacted by Daniel RunklesProblem is still present - planned to have a fix soon?
Kibana version: 6.5.1
Elasticsearch version: 6.5.1
Server OS version: Elastic Cloud
Browser version: Chrome 70.0.3538.102 (Official Build) (64-bit)
Browser OS version: macOS 10.13.6
Original install method (e.g. download page, yum, from source, etc.): Elastic Cloud
Describe the bug: If you have a metric vis with multiple metrics, and the vis space is narrow but deep (as opposed to wide but shallow), it doesn't put the 2nd/3rd/4th/etc metrics on new lines. Instead you need to scroll to see them all.
Steps to reproduce:
1.
2.
3.
Expected behaviour:
Screenshots (if relevant):
Errors in browser console (if relevant):
Provide logs and/or server output (if relevant):
Any additional context: It didn't do this in previous versions that I can recall.