Dynamically Resize Panel #158

psheehymn · 2023-09-22T17:10:34Z

psheehymn
Sep 22, 2023

I have a set of queries that generate data lists of variable length based on a user selection. I am building an HTML table dynamically to accommodate the list (and to work around shortcomings of the Table visualization for my needs). I'd prefer the user not have to scroll the list, but sizing the panel to accommodate the largest potential list makes the panel size too big for the typical situation.

After copying the Dynamic height and width example, I modified it to try to (unsuccessfully thus far) dynamically adjust the panel height based on my table size. I appear to able to add a value to htmlGraphics.height based on alerts outputting the value before and after in a function which does that addition, but it doesn't have any apparent effect on the panel. Is what I am trying possible and I'm missing a step or don't have the right switch flipped, or am I out of luck? I've included my test panel details below (it's a lightly modified version of the example, with the addition of a button and code in the onRender):

CSS - same as example

* {
  font-family: Open Sans;
}

div {
  text-align: center;
}

HTML/SVG

<div>
  <p><span>Height: </span><span class="value-field" /></p>
  <p><span>Width: </span><span class="value-field" /></p>
  <br>
  <button type="button" id="sizeit">Resize Panel</button>
</div>

onRender

function resizePanel() {
  alert("Height: "+htmlGraphics.height);
  htmlGraphics.height = htmlGraphics.height + 38; // Add the apparent height of a vertical increment
  alert("New Height: "+htmlGraphics.height);
};

// React when the button is clicked
htmlNode.getElementById("sizeit").addEventListener("click",resizePanel);

onInit - same as example

// REMEMBER TO TURN DYNAMIC HTMLGRAPHICS AND TRIGGER ONINIT ON RESIZE TO TRUE

const [heightValueElt, widthValueElt] = htmlNode.querySelectorAll('.value-field');

const updateValueText = () => {
  heightValueElt.textContent = htmlGraphics.height;
  widthValueElt.textContent = htmlGraphics.width;
};

updateValueText();

ZuperZee · 2023-09-22T20:02:43Z

ZuperZee
Sep 22, 2023
Maintainer

Unfortunately, there isn't a Grafana function to do this (that I could find), but you can manipulate the panel element directly.

CSS

* {
  font-family: Open Sans;
}

div {
  text-align: center;
}

HTML/SVG

<div style="border: solid 4px white; box-sizing: border-box;">
  <p><span>Height: </span><span class="value-field" /></p>
  <p><span>Width: </span><span class="value-field" /></p>
  <br>
  <button type="button" id="sizeit">Resize Panel</button>
</div>

onInit

const [heightValueElt, widthValueElt] = htmlNode.querySelectorAll('.value-field');

const panelElt = document.querySelector(`[data-panelid="${htmlGraphics.props.id}"]`)
const panelContentElt = panelElt.querySelector(".panel-content");

function getPanelSize() {
  const height = Number(panelContentElt.children.item(0).style.height.slice(0, -2));
  const width = Number(panelContentElt.children.item(0).style.width.slice(0, -2));
  
  return { height, width };
}

function setDragSize(outerHeight, outerWidth) {
  panelElt.parentElement.style.height = outerHeight + "px";
  panelElt.parentElement.style.width = outerWidth + "px";

  panelElt.style.height = outerHeight + "px";
  panelElt.style.width = outerWidth + "px";
}

function setPanelSize(height, width) {
  const outerHeight = height + 50;
  const outerWidth = width + 18;

  panelElt.children.item(0).style.height = outerHeight + "px";
  panelElt.children.item(0).style.width = outerWidth + "px";

  panelContentElt.children.item(0).style.height = height + "px";
  panelContentElt.children.item(0).style.width = width + "px";

  // Sets the draggable elt size.
  // Try it out. I found it annoying when this was set.
  // setDragSize(outerHeight, outerWidth);
}
1
function updateValueText() {
  const { height, width } = getPanelSize();
  heightValueElt.textContent = height;
  widthValueElt.textContent = width;
}


function resizePanel() {
  const {height, width} = getPanelSize();
  const newHeight = height + 38;
  setPanelSize(newHeight, width);
  updateValueText();
};

htmlNode.getElementById("sizeit").addEventListener("click", resizePanel);
updateValueText();

Panel options

{
    "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\ndiv {\n  text-align: center;\n}",
    "html": "<div style=\"border: solid 4px white; box-sizing: border-box;\">\n  <p><span>Height: </span><span class=\"value-field\" /></p>\n  <p><span>Width: </span><span class=\"value-field\" /></p>\n  <br>\n  <button type=\"button\" id=\"sizeit\">Resize Panel</button>\n</div>",
    "renderOnMount": true,
    "onRender": "",
    "panelupdateOnMount": true,
    "dynamicHtmlGraphics": false,
    "dynamicData": false,
    "dynamicFieldDisplayValues": false,
    "dynamicProps": false,
    "onInitOnResize": false,
    "onInit": "const [heightValueElt, widthValueElt] = htmlNode.querySelectorAll('.value-field');\n\nconst panelElt = document.querySelector(`[data-panelid=\"${htmlGraphics.props.id}\"]`)\nconst panelContentElt = panelElt.querySelector(\".panel-content\");\n\nfunction getPanelSize() {\n  const height = Number(panelContentElt.children.item(0).style.height.slice(0, -2));\n  const width = Number(panelContentElt.children.item(0).style.width.slice(0, -2));\n  \n  return { height, width };\n}\n\nfunction setDragSize(outerHeight, outerWidth) {\n  panelElt.parentElement.style.height = outerHeight + \"px\";\n  panelElt.parentElement.style.width = outerWidth + \"px\";\n\n  panelElt.style.height = outerHeight + \"px\";\n  panelElt.style.width = outerWidth + \"px\";\n}\n\nfunction setPanelSize(height, width) {\n  const outerHeight = height + 50;\n  const outerWidth = width + 18;\n\n  panelElt.children.item(0).style.height = outerHeight + \"px\";\n  panelElt.children.item(0).style.width = outerWidth + \"px\";\n\n  panelContentElt.children.item(0).style.height = height + \"px\";\n  panelContentElt.children.item(0).style.width = width + \"px\";\n\n  // Sets the draggable elt size.\n  // Try it out. I found it annoying when this was set.\n  // setDragSize(outerHeight, outerWidth);\n}\n1\nfunction updateValueText() {\n  const { height, width } = getPanelSize();\n  heightValueElt.textContent = height;\n  widthValueElt.textContent = width;\n}\n\n\nfunction resizePanel() {\n  const {height, width} = getPanelSize();\n  const newHeight = height + 38;\n  setPanelSize(newHeight, width);\n  updateValueText();\n};\n\nhtmlNode.getElementById(\"sizeit\").addEventListener(\"click\", resizePanel);\nupdateValueText();\n"
}

4 replies

psheehymn Sep 22, 2023
Author

I imported all of your source elements and am getting a JS error "Error executing onInit - Cannot read properties of null (reading 'children')."

Do I need to add something else to my dashboard definition?

ZuperZee Sep 22, 2023
Maintainer

Which Grafana version are you using?

ZuperZee Sep 22, 2023
Maintainer

If you check the elements in the dev tools (ctrl+shift+i) and look for the elements outlined in the image below.
Red outline around data-panelid and panel-content class (the code looks for those elements).
The elements with a red line beside are the ones the code changes height/width on.

ZuperZee Sep 22, 2023
Maintainer

Seems to be some changes to the elements in 9.5.X.
Below is updated onInit code.

onInit

const [heightValueElt, widthValueElt] = htmlNode.querySelectorAll('.value-field');

const panelElt = document.querySelector(`[data-panelid="${htmlGraphics.props.id}"]`)
const panelContentElt = panelElt.querySelector(`[class\$="panel-content"]`);

function getPanelSize() {
  const height = Number(panelContentElt.children.item(0).style.height.slice(0, -2));
  const width = Number(panelContentElt.children.item(0).style.width.slice(0, -2));
  
  return { height, width };
}

function setDragSize(outerHeight, outerWidth) {
  panelElt.parentElement.style.height = outerHeight + "px";
  panelElt.parentElement.style.width = outerWidth + "px";

  panelElt.style.height = outerHeight + "px";
  panelElt.style.width = outerWidth + "px";
}

function setPanelSize(height, width) {
  const outerHeight = height + 50;
  const outerWidth = width + 18;

  const panelEltChild = panelElt.children.item(0);

  panelEltChild.style.height = outerHeight + "px";
  panelEltChild.style.width = outerWidth + "px";

  panelEltChild.children.item(0).style.height = outerHeight + "px";
  panelEltChild.children.item(0).style.width = outerWidth + "px";

  panelContentElt.children.item(0).style.height = height + "px";
  panelContentElt.children.item(0).style.width = width + "px";

  // Sets the draggable elt size.
  // Try it out. I found it annoying when this was set.
  // setDragSize(outerHeight, outerWidth);
}
1
function updateValueText() {
  const { height, width } = getPanelSize();
  heightValueElt.textContent = height;
  widthValueElt.textContent = width;
}


function resizePanel() {
  const {height, width} = getPanelSize();
  const newHeight = height + 38;
  setPanelSize(newHeight, width);
  updateValueText();
};

htmlNode.getElementById("sizeit").addEventListener("click", resizePanel);
updateValueText();

psheehymn · 2023-09-22T20:48:12Z

psheehymn
Sep 22, 2023
Author

v9.5.1 Patrick M. Sheehy | Portal Monitoring Program Management, Optum Digital M (507) 251-9899 ***@***.******@***.***> | www.myuhc.com<http://www.myuhc.com/> Helping People Live Healthier Lives® ■ Integrity ■ Compassion ■ Relationships ■ Innovation ■ Performance From: Ole Kristian (Zee) ***@***.***> Sent: Friday, September 22, 2023 3:41 PM To: gapitio/gapit-htmlgraphics-panel ***@***.***> Cc: Sheehy, Patrick ***@***.***>; Author ***@***.***> Subject: Re: [gapitio/gapit-htmlgraphics-panel] Dynamically Resize Panel (Discussion #158) Which Grafana version are you using? — Reply to this email directly, view it on GitHub<#158 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AWHT4SQ5HAA5Q3MA7RY6AWDX3XZVTANCNFSM6AAAAAA5DMTJ3Q>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>> This e-mail, including attachments, may include confidential and/or proprietary information, and may be used only by the person or entity to which it is addressed. If the reader of this e-mail is not the intended recipient or intended recipient’s authorized agent, the reader is hereby notified that any dissemination, distribution or copying of this e-mail is prohibited. If you have received this e-mail in error, please notify the sender by replying to this message and delete this e-mail immediately.

0 replies

psheehymn · 2023-09-25T19:40:41Z

psheehymn
Sep 25, 2023
Author

Thank you, the new version works! The panel extends, but I notice If there is a panel below the one being resized, the extension goes over or under the other panel (I’ve seen it do both), rather than causing it to move down (like manual resizing would (see attachment). Likewise, when I click the save icon, Grafana does not recognize that there has been any change to the dashboard and the save is disabled. I assume both of these are due to the fact that the size changes are being made “outside” of Grafana, so Grafana is not adjusting the other panel relative to ? Thank you for your help with this, I truly appreciate it! From: Ole Kristian (Zee) ***@***.***> Sent: Friday, September 22, 2023 3:57 PM To: gapitio/gapit-htmlgraphics-panel ***@***.***> Cc: Sheehy, Patrick ***@***.***>; Author ***@***.***> Subject: Re: [gapitio/gapit-htmlgraphics-panel] Dynamically Resize Panel (Discussion #158) Seems to be some changes to the elements in 9.5.X. Below is updated onInit code. onInit const [heightValueElt, widthValueElt] = htmlNode.querySelectorAll('.value-field'); const panelElt = document.querySelector(`[data-panelid="${htmlGraphics.props.id}"]`) const panelContentElt = panelElt.querySelector(`[class\$="panel-content"]`); function getPanelSize() { const height = Number(panelContentElt.children.item(0).style.height.slice(0, -2)); const width = Number(panelContentElt.children.item(0).style.width.slice(0, -2)); return { height, width }; } function setDragSize(outerHeight, outerWidth) { panelElt.parentElement.style.height = outerHeight + "px"; panelElt.parentElement.style.width = outerWidth + "px"; panelElt.style.height = outerHeight + "px"; panelElt.style.width = outerWidth + "px"; } function setPanelSize(height, width) { const outerHeight = height + 50; const outerWidth = width + 18; const panelEltChild = panelElt.children.item(0); panelEltChild.style.height = outerHeight + "px"; panelEltChild.style.width = outerWidth + "px"; panelEltChild.children.item(0).style.height = outerHeight + "px"; panelEltChild.children.item(0).style.width = outerWidth + "px"; panelContentElt.children.item(0).style.height = height + "px"; panelContentElt.children.item(0).style.width = width + "px"; // Sets the draggable elt size. // Try it out. I found it annoying when this was set. // setDragSize(outerHeight, outerWidth); } 1 function updateValueText() { const { height, width } = getPanelSize(); heightValueElt.textContent = height; widthValueElt.textContent = width; } function resizePanel() { const {height, width} = getPanelSize(); const newHeight = height + 38; setPanelSize(newHeight, width); updateValueText(); }; htmlNode.getElementById("sizeit").addEventListener("click", resizePanel); updateValueText(); — Reply to this email directly, view it on GitHub<#158 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AWHT4SU3OTX2KO7AOLYW55TX3X3SLANCNFSM6AAAAAA5DMTJ3Q>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>> This e-mail, including attachments, may include confidential and/or proprietary information, and may be used only by the person or entity to which it is addressed. If the reader of this e-mail is not the intended recipient or intended recipient’s authorized agent, the reader is hereby notified that any dissemination, distribution or copying of this e-mail is prohibited. If you have received this e-mail in error, please notify the sender by replying to this message and delete this e-mail immediately.

2 replies

ZuperZee Sep 28, 2023
Maintainer

Perhaps making an API call to the Grafana dashboard endpoint https://grafana.com/docs/grafana/latest/developers/http_api/dashboard/#create--update-dashboard could work. This would mean the change would happen immediately and require the user to have edit permissions.

I don't know any way to change the grid positions and make the dashboard see it as a change.

psheehymn Sep 28, 2023
Author

Thank you for the suggestion; unfortunately, the majority of our users won't have edit authority, so I don't think that's a possibility; oh, well.

I actually have an enhancement request into Grafana to allow for a panel to be marked dynamic and then grow with it's content (according to what I read, that was a feature at one time early on); we'll see where that goes. Thank you for all your effort on this one, but it's probably not worth more for now.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamically Resize Panel #158

{{title}}

Replies: 3 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Dynamically Resize Panel #158

psheehymn Sep 22, 2023

Replies: 3 comments · 6 replies

ZuperZee Sep 22, 2023 Maintainer

psheehymn Sep 22, 2023 Author

ZuperZee Sep 22, 2023 Maintainer

ZuperZee Sep 22, 2023 Maintainer

ZuperZee Sep 22, 2023 Maintainer

psheehymn Sep 22, 2023 Author

psheehymn Sep 25, 2023 Author

ZuperZee Sep 28, 2023 Maintainer

psheehymn Sep 28, 2023 Author

psheehymn
Sep 22, 2023

Replies: 3 comments 6 replies

ZuperZee
Sep 22, 2023
Maintainer

psheehymn Sep 22, 2023
Author

ZuperZee Sep 22, 2023
Maintainer

ZuperZee Sep 22, 2023
Maintainer

ZuperZee Sep 22, 2023
Maintainer

psheehymn
Sep 22, 2023
Author

psheehymn
Sep 25, 2023
Author

ZuperZee Sep 28, 2023
Maintainer

psheehymn Sep 28, 2023
Author