Canvas Kibana metric background color formating

[MTV]

Hi,
I am using canvas where I am trying to color format a metric background : color1 if value=0, color2 if value between 0 and 7, and color3 if value >7 . I looked into several answers here (and also looked at the docs) but the code is not working for me.

What I have:

...
| render 
 containerStyle={containerStyle backgroundColor={
 filters 
|esdocs index="index" 
| alterColumn column="field" type="number" 
| filterrows {getCell "field" | neq 0} 
| math "size(field)" 
| switch 
case={case if={eq 0} then="gray"} 
case={case if={gt 7} then="yellow"} default="blue"} 
padding="16px" overflow="visible"}

The first case always works, the second case is never used and the default kiks in. I tried with exactly the same code as in the docs, and nothing!

Any help will be greatly appreciated. Thanks!

[bhavyarm]

@poff /@corey.robertson /@Catherine_Liu can we get some help please? Thanks!

[poff (Poff Poffenberger)]

Hey there!

I haven't been able to reproduce this issue yet. Here's the expression i've been using to test:

markdown "Hello"
| render containerStyle={containerStyle backgroundColor={
  filters
  | demodata
  | math expression="11"
  | switch case={case if={eq 0} then="red"} case={case if={gt 7} then="yellow"} default="blue"}
} 

I've been manually changing the number returned by the math expression and I see the background change appropriately.

What kibana version are you using? Is it possible there are some filters that are being applied to the expression in the backgroundColor that aren't being applied in the main part of the expression that returns the number?

[MTV]

Hi, thanks for your reply! I am using kibana 7.14, and the only filter I have is a dropdown from which I can select, for instance a country. what I am attempting to do is to have 3 metrics next to each other (as if they were just one bar) with country name, average score and number of observations. Then when I select a country from the dropdown, if the number of observations is less than for instance 7, the background will change to gray, and the average scores and number of observations as well (so the values are hidden). I can't share my data, but the full code looks like this:

filters
| esdocs index="index"
 fields="field"
| alterColumn column="field" type="number"
| filterrows {getCell "field" | neq 0}
| if {rowCount | eq 0} then=0 else={math "mean(field)"}
| metric "field" 
  metricFont={font align="center" color={switch {case if={eq 0} then="#DCDCDC"} {case if={all {gt 0} {lte 7}} then="#72cec3"} default="white"} family="'Open Sans', Helvetica, Arial, sans-serif" italic=false size=14 underline=false weight="bold"} 
  labelFont={font align="left" color={switch {case if={eq 0} then="#DCDCDC"} {case if={all {gt 0} {lte 7}} then="#72cec3"} default="white"} family="'Open Sans', Helvetica, Arial, sans-serif" italic=false size=0 underline=false weight="normal"} metricFormat="0.0a"
| render 
  containerStyle={containerStyle backgroundColor={filters | esdocs index="index" | alterColumn column="field" type="number" | filterrows {getCell "field" | neq 0} | math "size(field)" | switch {case if={eq 0} then="#DCDCDC"} {case if={all {gt 0} {lte 7}} then="#72cec3"} default="#37988d"} padding="14px" overflow="visible" border="3px  #FFFFFF"}

Probably I am doing something wrong, but I just can't see what.
Thanks again for any help!

[Felix_Roessel]

This example shows how to do it.

APM Services overview canvas dashboard at elastic content share

[MTV]

@Felix_Roessel Unfortunately I don't have permission to upload/download anything into kibana. In any case, thank you for your reply.

[MTV]

I was able to find a solution for my original question. The issue is apparently with the 'switch case'. If instead of 'switch case...' I use:

| if condition={gt 0} then={if condition={gt 7} then="#37988d" else="#72cec3"} else="#DCDCDC"} padding="6px" overflow="visible"}

Everything works properly.