however with Grafana I had to modify it and ending up to have something like this:
SELECT *
FROM crosstab(
$$SELECT
((row_number() over (order by added_date desc) + 4) / 5)::int as modulo,
((row_number() over (order by added_date desc) + 4) % 5)::int as category,
'<div class="product"><div class="product-image"><a href="' || link || '" target="_blank"><img style="background-image:url('|| COALESCE(image, 'public/img/as/no-image.png') ||');" /></a></div><div class="product-description"><h1>'|| case when name = 'Untitled' then substring(trim(both '/' from link), '[^/]*$') else name end ||'</h1><div class="brand-wrapper"><span class="brand">(' || INITCAP(store) || ')' || '</span><span class="id">ID ' || id || '</span></div></div>'
'<a href="javascript:launch(''https://testing.com'',''popup'',''no-refresh'')"><img src="public/img/as/' || case when visible = 'no' then 'restore2.png' else 'trash.png' end || '" height=15" /></a>' || '</div>' as Item
FROM store_items
where 1=1
and initcap(store) in ($stores)
and name in ($products)
and (lower(store) like lower('%$search%') or lower(name) like lower('%$search%') or id::varchar(255) like lower('%$search%') or lower(link) like lower('%$search%'))
and visible in ('$visible')
ORDER BY 1, 2$$
) AS ct ("Section" int, "1" text, "2" text, "3" text, "4" text, "5" text)
as you can see I do have a CSS file ready that would make it pretty but my problem is that I do not know how I am able to import and use the needed CSS values to make my Grafana more pretty again
One way to do it without messing with Grafana config files is by using the Boom Theme Plugin to add custom CSS to a single dashboard. See my previous post here:
I do believe that the Boom plugin is more supported for just the dashboard and not a panel itself if I read it correctly? basically the pictures I have above is from Dashbaord -> Panel where I edit the Panel through a HTML code and I would like to add CSS inside it but it feels abit too much to do it internal CSS and I dont know if Boom plugin would help me to solve my problem to add external CSS inside a panel?
Any CSS classes you add to the Dashboard via Boom Theme Plugin will be available to all panels within that dashboard. So you use the method to either alter existing Grafana or panel CSS classes or add new CSS classes and then reference those CSS classes within your panel/s.
Oh I see! I will try give it a go. Do you by any chances have an example how I can use a css value from my css into the Grafana “html” code I have posted at the very top?
Basically an example how I can import from Boom plugin my external CSS to my Panel code?
You have to add a Boom Theme panel somewhere to your dashboard which is sort of hidden (it’s just a black top bar) then edit that panel - choose your theme or add a custom theme and then click the Add Custom CSS button and then cut paste any CSS into the Custom Style / CSS Override section. e.g.
.product {
your css here
}
.product-image {
your css here
}
It sounds almost too good to be true! But will it automatically understand that the CSS is “connected” to <div class="product-image> or do I need to add something in the HTML to be able to connect it togeter with the imported CSS through Bolm plugin?
If I am using the Boom theme my other panels know the classes I defined in the CSS, but only the Grafana Default Panels.
I am using the HTML Panl Plugin and for me the class selectors are not working with this.
Did anyone encounter the same problem or has a solution for it?
Does anyone know if this plugin is supposed to work in the latest version. I get an error when I try to add a panel, but theres no indication that it should be working. It seems to have been written for a much older version.
