Ok, I cloned the module, set up a grafana and tried it out.

The console error shows: Refused to display 'https://myname.grafana.net/login' in a frame because it set 'X-Frame-Options' to 'deny'.

Searching for that on Google brought me to the Grafana website:

Embedding Grafana

If you’re embedding Grafana in a frame, iframe, embed or object on a different website it will no longer work due to a new setting that per default instructs the browser to not allow Grafana to be embedded.

There are two topics on that: https://github.com/grafana/grafana/issues/17458, https://github.com/grafana/grafana/issues/15714

Without any further investigation it seems like there are some settings that need to be done when you’re hosting grafana? So maybe it’s not possible to get to these settings on the free hosted versions?

There are two other issues:
If using the free hosted version there’s something about an API key. That might be an issue as well?
And the module config is not asking for the entire grafana URL but wants several parts of the URL, but the actual grafana URL seems to be different to what the module is making out of these parts.

Sorry, at the moment I can’t look any further into this, maybe someone else is interested in grafana and comes up with a solution.

@SvenSommer?

Hi,

looking at the module, it is just an iFrame that displays a grafana graph. So there is not much anyone on here could do. I don’t know anything about graphana, but from what I’ve seen, it seems like graphana is capable of doing “horizontal graphs” (meaning bars vertically stacked and growing horizontally?).

Seems like you’d have to look for help in the grafana community. As I said, it seems like the module here just shows whatever you have in grafana.

Do you have a grafana ready? Or an example of an image what you have and what it should look like?

Regards,
Torben

If you have a git hub account you can fork the module’s repo to your own github account and then install/clone it to your modules folder from your own git. Make the change, push it to your remote repo. When there’s an update, you can merge the update with your changed code on github and update the module afterwards. Or not even bother with updates anymore at all, if you want that.

Vertical-align only works in inline elements and table cells.

Two common css hacks are these: https://jsfiddle.net/02vxofa6/1/

The parent (or a wrapper div container filling the parent) is set to display: table-cell; and vertical-align: middle;

If there’s a reason this cannot be done, there’s also another hack:
Set the parent to position: relative; and the text to position: absolute: top: 50%;
But then it’s not exactly in the middle, as the distance to the top is 50%. Give the text a fixed height (maybe even considering a line break there) and set margin-top to - half the text height. height: 20px; margin-top: -10pxfor example.

See them more like warnings to the developers. ;) As long as it starts and runs, it runs.

A lot of packages give you a warning, mostly about something being deprecated. The used packages and their versions are written in the package.json, sometimes developers have a reason to use a specific version and sometimes there are newer versions available. In that case, npm could warn about the package being deprecated.

I’ve seen in some projects, that updating a package might need updating the context the package is used in, soe usually it’s best to leave this alone, unless you want to open a can of errors.

Another developer once told me “As long as it’s only a warning, ignore it. If npm really wants something from you, it’ll stop and tell you.”

(node.js is the runtime environment, packages are helpers (special functions that make developing easier because you use that shortcut instead of programming something yourself that someone else already provided), npm is the node package manager, package.json is where the dependencies of these packages are declared so npm knows which packages and versions to install)

Weird, I have no problems with Firefox or Chrome but with IE and Edge and I think it’s just that the pop-up message that asks you if you want to continue posting in an old thread is blocked.

There should be a pop-up message: “The topic you are replying to is quite old. Would you like to create a new topic instead, and reference this one in your reply?”

It’s possible that your browser is blocking the pop-up.

I can replicate this error in Internet Explorer and Edge.
Try Chrome or Firefox.

This post shouldn’t be in the “custom css” subforum, it should be in “General Discussion” > “Forum”.

Well, the error information are pretty clear, you just need to look at your code to come to a conclusion. Without seeing the code, we can’t know anything about why these errors occur.

1st says there’s no element by the class name you’re searching for. Either it’s not there or you’re looking in the wrong place.

2nd says you’re trying to append something that is not an element. You can’t append a string, for example.

For example, that’s a string and won’t work:

let parent = document.getElementById("parent");
let element = "<div>lorem ipsum</div>";
parent.appendChild(element);

This will work:

let parent = document.getElementById("parent");
let element = document.createElement("div");
element.innerHTML = "lorem ipsum";
parent.appendChild(element);