Replies: 2 comments 16 replies
-
panelupdate and onRender are very similar as they trigger for the same reason. Having panelupdate inside onRender would cause panelupdate event to be added to the eventlistener every time onRender runs. <div>
<div>Render count: <span id="render-count" data-render-count="0">0</span></div>
<div>PanelUpdate thing: <span id="thing" style="word-break: break-word;"></span></div>
</div>
const rendersCountElt = htmlNode.querySelector("#render-count");
const thingElt = htmlNode.querySelector("#thing");
const renderCount = Number(rendersCountElt.textContent);
rendersCountElt.textContent = renderCount + 1;
console.log("ONRENDER");
thingElt.textContent += " ";
htmlNode.addEventListener("panelupdate", () => {
thingElt.textContent += "!";
console.log("PANELUPDATE");
});
{
"calcsMutation": "standard",
"reduceOptions": {
"calcs": [
"lastNotNull",
"last",
"firstNotNull",
"first",
"min",
"max",
"mean",
"sum",
"count",
"range",
"delta",
"step",
"diff",
"logmin",
"allIsZero",
"allIsNull",
"diffperc"
]
},
"add100Percentage": true,
"centerAlignContent": true,
"overflow": "visible",
"useGrafanaScrollbar": true,
"SVGBaseFix": true,
"codeData": "{\n \"text\": \"Random text\"\n}",
"rootCSS": "",
"css": "* {\n font-family: Open Sans;\n}\n",
"html": "<div>\n <div>Render count: <span id=\"render-count\" data-render-count=\"0\">0</span></div>\n <div>PanelUpdate thing: <span id=\"thing\" style=\"word-break: break-word;\"></span></div>\n</div>",
"renderOnMount": true,
"onRender": "const rendersCountElt = htmlNode.querySelector(\"#render-count\");\nconst thingElt = htmlNode.querySelector(\"#thing\");\n\nconst renderCount = Number(rendersCountElt.textContent);\nrendersCountElt.textContent = renderCount + 1;\n\nconsole.log(\"ONRENDER\");\nthingElt.textContent += \" \";\nhtmlNode.addEventListener(\"panelupdate\", () => {\n thingElt.textContent += \"!\";\n console.log(\"PANELUPDATE\");\n});\n",
"panelupdateOnMount": true,
"dynamicHtmlGraphics": false,
"dynamicData": false,
"dynamicFieldDisplayValues": false,
"dynamicProps": false,
"onInitOnResize": false,
"onInit": ""
} Updating/changing Grafana variables will trigger the panelupdate event and the onRender code. You can track the variables and check if they update. Here's a discussion about it: #148. If you're going to track Grafana variable changes I would have the code in onInit and use the panelupdate event. You could do it in onRender, but you would have to store the previous Grafana variable value in the dom/htmlNode or the global window element. |
Beta Was this translation helpful? Give feedback.
-
Thank you, that was the trick. And after you pointed it out, it was blindingly obvious, I just couldn’t see it.
Now I need to morph the trick in #148 to skip running an update for variable changes this panel made, but process any others.
Thank you again!
Pat
|
Beta Was this translation helpful? Give feedback.
-
I have an HTML Graphics panel that contains several queries that I am processing in the JavaScript and combining into an HTML table. At the end of the process, I need to update several variables based on the table data that are used by other panels on the page.
The table panel also needs to be aware of user changes to the dashboard time range, so the last line in my onRender section is to set a listener for the panel update:
htmlNode.addEventListener('panelupdate', refreshTable);
All of the work is being done in the onRender section (i.e. the onInit is empty) because the table needs to fully refresh on a time range change. The issue I am encountering is that the panel is also triggering on the variable updates it is doing itself and ends up continuously refreshing. I am setting the listener on the very last line, but it still seems to detect the preceding variable changes retroactively.
Do I need to use a different type of listener or is there another work around to avoid the loop?
--- Addendum ---
After some additional experimentation, I am unsure if the "panelupdate" is being triggered by setting the variables, or the changes they trigger in other visualizations on the dashboard. I am leaning toward the latter as the cause and wonder if there is any way to work around that? Would moving the panel refresh to the onInit section and either or both of the Dynamic htmlGraphics (onInit) or Dynamic data object (onInit) options solve the issue?
Beta Was this translation helpful? Give feedback.
All reactions