Change the shape of markdown

[syedsfayaz (fayaz)]

Hi

I want to use markdown to show custom data on kibana probably in canvas or my dashboard.
But I see it only in rectangular shape. Is there a way can change the shape to like the above in image. Or any shape.

Do we have the flexibility to enable different background colour for markdown based on some condition I can specify.

If yes, Can you guide me where I can.

[Catherine_Liu]

You can add a border radius to the element to turn it into a rounded rectangle/square by changing the settings in Container style which you can add under Element style.

If you want a different shape, you could place the markdown element on top of a shape element. You'll have to manually position and resize the text over the shape.

To dynamically change the color of the markdown or the shape element, you can do so with a bit of hacking in the expression using conditional functions.

Here's an example expression using switch, case, and lte functions to assign a different fill color per condition.

math "random()"
| shape "circle" 
  fill={
    switch case={case if={lte .5} then="red"}
    case={case if={lte .75} then="yellow"}
    default="green"
  }
  border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

[syedsfayaz (fayaz)]

@Catherine_Liu

Thanks for your reply.

I was experimenting with Canvas to create a custom dashboard which I am working on. My requirement is little different from monitoring time series data. Since you have replied to my question. I can ask you.

I do not have experience with the front end development. I have very little knowledge of Html and Css.

I want to pull data from a jenkins api and track the status of jobs on kibana.

My software flows through different environments. I want to track it.

This is for different applications.

Dev --> Qa --> UAT --. Prod.

I was thinking If I can use markdown for each stage. and show results as success/failure/inprogress. How easy do you think it is to create it on kibana or canvas.

[Catherine_Liu]

It shouldn't be too difficult to create that visualization in Canvas. The easiest way might be to upload those shapes as images with different images per state (success/failure/progress). You can create one image element per stage and conditionally set the image based on the results for each stage.

Here's an example of an element that conditionally sets the image using the built-in demo data in Canvas. To test out this element, you'll need to upload some images and replace the asset ID's with one's that exist in your workpad.

demodata
| getCell column=state row=1
| image dataurl={switch 
    case={case if={eq "start"} then={asset asset-bc2cab30-fe9a-4d81-8bf7-d71e3db25fd7}}
    case={case if={eq "done"} then={asset asset-a706b613-ef4a-4f1d-80e5-7e34f351d1e8}}
    case={case if={eq "running"} then={asset asset-b197c32a-3f85-4e80-9e68-3b51238ec7e4}}
    default={asset asset-c6b3102c-2658-4e85-9603-14aded4df396}
  } 
  mode="contain"
| render

[syedsfayaz (fayaz)]

@Catherine_Liu Sure its achievable using images per condition. But I want a flashing image for status "running". Is there a way I can accomplish this. If condition met I can set it to flashing?. I know this is not the neat way of doing it.

[Catherine_Liu]

You could upload the flashing image as a GIF, and it would just keep looping the GIF. Then conditionally set the image back to a static image if you wanted it to stop flashing.

[syedsfayaz (fayaz)]

@Catherine_Liu

Thanks for your reply on https://github.com/elastic/kibana/issues/35201.

I was looking for a drill-down option on canvas Marckdown widget. I dont see an option for drill down.
Is it that I can only enable drill down by using Link or I can setup a drill down for an entire panel?