-
Notifications
You must be signed in to change notification settings - Fork 122
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
Remove the padding in Elastic chart #736
Comments
I think this can be achieved with few options, as also discussed during the roadmap planning:
@AlonaNadler I've a side question for you: how did you achieved that multiline title? I'm pretty sure this can't be done in elastic-charts 😕 |
Hey, @AlonaNadler! I took a look into this and found a few interesting facts. Before diving in though, I believe in your previous example the top visualization is actually one of the older/standard visualizations (not TSVB), but please correct me if I'm wrong. That said, here's what I found. Older/Standard Visualizations
Lens Visualizations
TSVB Visualizations
Based on your comments, it sounds like you'd prefer a consistent 8px of horizontal and vertical padding across all three visualization types. Is this correct? If so I believe that could be easily done by having a singular outer container for the visualizations with the 8px of padding applied. Additionally, in situations where there is a top or bottom legend present, that legend's element receives an additional 8px margining at the appropriate position (top or bottom) in order to offset it from touching the chart. Regarding the extra space on the right-hand side of the Lens chart, I'll leave it to @markov00 to confirm, but I speculate that it's either accounting for the possibility of a right-hand axis and label, or ensuring that the last x-axis label doesn't get cut off when running close to the end of the Thoughts? |
@MichaelMarcialis I think you are correct regarding the screenshot being an old (non-elastic chart) TSVB version based on the legend color size difference.
You are sort of correct, the screenshot @AlonaNadler shared is actually not rendering the last tick (or rather creating the extra space) because the domain end does not exactly align with the tick interval. We have an issue (#397) to fix this via "nicing" the ticks to show better intervals and ending values given the data and domain. However, the image you shared does create extra space to allow for the end value to not be clipped off the edge of the canvas area like you correctly speculated. One thing I'd like to add is that the TSVB chart is using the elastic-charts standard theme, whereas Lens is using the EUI charts theme via this service, which could effect the padding/margin inside the |
Not exactly, I don't care so much about consistency. I focus this on Lens, we want to allow users to user the screen real estate and panel real estate in a more efficient way. Currently Lens has a lot of needed spaces. This is a screenshot I got from @gose yesterday that explain a similar pain point: To summarized:
|
@AlonaNadler: Sounds good! Is this something you'd like me to cut a PR for, or is this something that should be assigned to an engineer on Dashboard or Lens? |
@markov00 can you please point out which team can help which section. I understand it is a combination of EUI, ES-chart and Lens |
Yes exactly, we will take care of the padding caused by the chart axis labels, trying to limit and use it only when strictly necessary. Dashboard team and Lens should take care of their respective styles applied to panels. |
Closing as this should be handled in Kibana and the chart theme could be customized there |
In manty operation driven dashboards, the use of the screen real estate is really important. Users are trying to fit as many metrics in the size of the screen. It came to my attention that when using Lens and in Kibana, in general, there is a big waste of space which limit the number of chart and panel that can fit in.
The text was updated successfully, but these errors were encountered: