Elements Rotation (Arrow) based on Conditions in Canvas (ELK Stack)

[ksaimohan2k (Sai Mohan Kesapragada)]

How do I rotate an arrow based on certain conditions in Canvas? I just want to integrate the CSS rotate function based on certain conditions. Can anyone suggest what functions we should use to rotate the axis?

Below is the code that can help you understand the rotation in general.

shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| essql query="SELECT Quantity FROM my_ec_demo_index WHERE Quantity < 0"
| switch case={getCell "Quantity"} "when" 0 "then" "180deg" "else" "0deg"
| shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render css=".canvasRenderEl{
transform: rotate(180deg);
}"

[ppisljar (Peter Pisljar)]

use if function and then two render functions under each branch

... | if condition={...} then={render css="..."} else={render css="..."}

[ksaimohan2k (Sai Mohan Kesapragada)]

Thanks, @ppisljar, for your time and solution. I just wanted to let you know that I modified the code as per your suggestions, but I am getting an output as a table showing the first row with a negative number (only one negative number in the index sample data) in the same direction as the element added (arrow), and it's not rotated. Below is the code I modified for your reference.

shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| essql query="SELECT Quantity FROM my_ec_demo_index WHERE Quantity < 0"
| if condition={getCell "Quantity"} less_than 0 then={render css=".canvasRenderEl { transform: rotate(180deg); }"} else={render css=".canvasRenderEl { transform: rotate(0deg); }"}
| render 

[ppisljar (Peter Pisljar)]

can you try this:

essql query="SELECT Quantity FROM my_ec_demo_index WHERE Quantity < 0"
| if condition={getCell "Quantity"} less_than 0 
then={shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| render css=".canvasRenderEl { transform: rotate(180deg); }"} 
else={shape "arrow" fill="#4cbce4" border="rgba(255,255,255,0)" borderWidth=8 maintainAspect=false
| render css=".canvasRenderEl { transform: rotate(0deg); }"}

[ksaimohan2k (Sai Mohan Kesapragada)]

Thank You @ppisljar for the solution, It Worked Just need to know few things
1]

@ppisljar

less_than

As I am new to Canvas, I just want to know if less_than is a function because I didn't see this in the Canvas Reference Docs. Can I use "lt" instead of that?

[2] Will the previously stated arrow rotational solution apply to time series data as well?

[ppisljar (Peter Pisljar)]

sorry, i was copy pasting from your post.

less_than does not exist, its simply ignored as are all nonexistend function arguments ("0" as well)
if you would typoe less_than=0 it would complain about non existent argument

the condition in your if statement is supposed to return true or false.

[ksaimohan2k (Sai Mohan Kesapragada)]

Got it ! , Thank you so much for the info and the solution.