topic Re: Dashboard in Dashboards & Visualizations

Dashboard

silverKi — Wed, 05 Jun 2024 04:43:04 GMT

I want to fill the table cells with tags. Like multi selector.. How can I make the table contents look like tags?
How to do it without using html elements??

Re: Dashboard

gcusello — Wed, 05 Jun 2024 06:04:18 GMT

Hi @silverKi ,

in my knowledge, it isn't possible!

Ciao.

Giuseppe

Re: Dashboard

ITWhisperer — Wed, 05 Jun 2024 08:05:10 GMT

Your subject is very broad - how would anyone know what this was specifically about especially given that it is already in a Dashboards & Visualizations section!

Having said that, you then restrict your required solution to not include HTML - as @gcusello says, with these restrictions, it isn't possible (with current standard visualization options).

However, if you would be prepared to expand your outlook you could do something along these lines:

Note that this doesn't work if there is only one value in the multivalue field (however, with a bit of extra work, this can be gotten around by inserting an additional value to the field and then hiding this value.

Re: Dashboard

silverKi — Wed, 05 Jun 2024 09:01:13 GMT

Does anybidy konw when I clicked valueo in table cell How I render input btn?

Re: Dashboard

ITWhisperer — Wed, 05 Jun 2024 09:46:03 GMT

Do you mean something like this:

<row> <panel depends="$stayhidden$"> <html> <style> div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) { display: flex !important; } div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell { padding-left: 4px; padding-right: 4px; margin-left: 4px; margin-right: 4px; border: 2px solid white !important; border-radius: 8px !important; color: white !important; box-shadow: inset 0 0 3px 0 rgba(0,0,0,.4), inset 0 0 3px 5px rgba(0,0,0,.05), inset 2px 3px 4px 0 rgba(255,255,255,.6), 2px 2px 4px 0 rgba(0,0,0,.25) !important; } div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell:hover { box-shadow: inset 0 0 3px 0 rgba(0,0,0,.4), inset 0 0 3px 5px rgba(0,0,0,.05), inset 2px 3px 4px 0 rgba(255,255,255,.6), 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important; transform: translateY(-1px) !important; } div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell:active { box-shadow: inset 0 0 3px 0 rgba(0,0,0,.4), inset 0 0 3px 5px rgba(0,0,0,.05), inset 2px 3px 4px 0 rgba(255,255,255,.6), 0 8px 16px 0 rgba(0,0,0,0.24), 0 13px 50px 0 rgba(0,0,0,0.19) !important; transform: translateY(2px) !important; } div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell { background-color: yellow !important; color: black !important; } div[id="states"] tr[data-view$="ResultsTableRow"] td:nth-child(2) .multivalue-subcell[data-mv-index="0"] { display: none !important; } </style> </html> </panel> <panel> <table id="states"> <title>States $state$</title> <search> <query>| makeresults count=10 | eval event=random() % 3 | eval state=mvindex(split("ACTIVE,SLEEP,DEAD",","),random() % 3) | stats values(state) as state by event | eval state=mvappend("extra",state)</query> <earliest>-24h@h</earliest> <latest>now</latest> </search> <option name="drilldown">row</option> <drilldown> <eval token="state">$click.value2$</eval> </drilldown> </table> </panel> </row>