[Lens][Metric] Metric has strong white border when using dark-mode

[matthiasledergerber]

Elastic-Stack: 8.5.1
Seems like the metric has some intensive white bordering. With a lot of data this looks very unclean and noisy. Not sure if it is an new introduced change, but the old version without borders was much cleaner when working with lots of data. I wouldn't make up an issue about something this small, but we've already had independent feedback from our customers about this.

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[stratoula]

@matthiasledergerber thanx for pinging us here. The new metric is still on technical preview but we actually have planned a diiferent color for the dark mode. Check this screenshot and how it will look:

We are going to fix this on 8.6!

[matthiasledergerber]

@stratoula This looks very nice. Accordingly to your screenshot, text is wrapped on new line if it exceeds to the border. Currently on 8.5.1 it is cut of faster than in 8.4 like in this screenshot:

extending the height of the overall visualization, it wraps correctly again. Maybe the space could be used more efficient and word wrap could be done faster without cutting off too fast. We have some very information-dense dashboards.

[drewdaemon]

Hi @matthiasledergerber — thanks for the feedback on the dark-mode borders. This was a bug and I'm putting together a fix for 8.6.

We've had some iteration on the title clipping (see elastic/elastic-charts#1787 for example). It could be that we're being too aggressive here. However, I also think that a table could make most sense for the visualization you shared. There are no constraints on the length of the text in table cells and you can add cell coloring so you wouldn't miss out on those visual queues.

Here's an example with some unrelated data:

Turn on text wrap

Turn on dynamic coloring

cc @markov00

[gvnmagni]

thank you so much @matthiasledergerber for this input, it's a very interesting point that I want to consider in a potential refinement. Let me just explain why that text doesn't go full width, we have two reasons:

• Aesthetic value. In order to have better looking dashboard, we have to reduce clutter of elements and information among charts, this new layout give the Metric component a little bit of fresh air and empty space that could make it look lighter and less dense. While people use the component I will keep track of these feedback to see how customers/users react to this new style approach

• We need space for a potential icon, as you can see in the following image. Obviously we can say "if we don't have an icon let's use the whole space" but in that case metrics will look different among each other and I'm pushing a lot for consistency, alignments across element has a big role in this

I'm not sure these answer could make you happy, I just wanted to share a little bit of the background and I also wanted to say thank you for reaching out, it's wonderful to see the new component used this way and it's crucial to gather feedback about that 🚀

[matthiasledergerber]

@gvnmagni Many thanks for this detailed explantation. Now, it makes totally sense to me that it behaves like this.
I think I just explain our use-case so maybe it makes more sense that You could decide on this:

We use the metrics overview to create a summarized overview about Windows event.codes with a meaningful description as remembering the individual event.codes values is not a good solution

Here we add a meaningful description in the labels field

In this use-case, we don't require the secondary field or the icon. However i think it's ok to behave the same with or without the icon. Maybe the text could still break over and be displayed in it's full lenght.

I've created a somewhat photoshopped view of the metrics visualization: I've removed some whitespace between the description and value. This would be a good information density for our use-case but I understand that there are certain design aspect that could be prioritized more than having a good information-density to make things a bit more lightweight

[gvnmagni]

Very interesting, thank you for getting into details. There is only one thing that I'm still missing, please bear with me for a second.

Why the panel shown in your last image needed to be photoshopped? I would expect it to behave exactly like that once you resize the panel and reduce its overall height. Since there are no secondary values and the title is empty, I would expect to obtain exactly what we see. I'm afraid I'm missing something

[drewdaemon]

@gvnmagni good point. This had me noticing another thing. We don't currently offer a way to build a multi-metric visualization without a subtitle. In other words, if a breakdown-by dimension is added, the name of the primary metric dimension becomes the subtitle for each cell.

@matthiasledergerber are you changing the name of your breakdown-by primary metric dimension to a space (' ') to effectively turn this subtitle off?

If so, that would also explain technically why the title clipping is happening more aggressively than expected: the subtitle is still present and accounted for in the vertical layout even though it isn't visible.

[matthiasledergerber]

@andrewctate @gvnmagni Yes I can conform it is the ' '. I'm using this to turn of the subtitle (count of records). This is actually an use-case for us because having just the number and value is clear that this means "count of records" :)

Space

No Space

[gvnmagni]

This is great, thank you! The plan is to automatically move the title and subtitle above the grid of metrics and to leave only the break-down-by category within the metric itself. We still have to implement this though, but it's coming 😊