Available option

[DonatoD]

Hi, is it possible to have some more details on the available options? (Dynamic htmlGraphics, Dynamic htmlGraphics, etc)
The short description is not so clear. Even after spending quite a lot of time trying on several code, actually ist's still unclear to me.
Thanks

[ZuperZee]

Thanks for bringing this up, I'll try to update the docs to be more clear.

There is a thing in docs about dynamic variables, but might not be what's unclear.

Here is a link to all the options (there are some links to which variable/reference it updates, like Dynamic data) https://gapit-htmlgraphics-panel.gapit.io/docs/options

A bit more information about Dynamic htmlGraphics (and the other dynamic stuff) and when to use it (I'll add it to docs later).

When Dynamic htmlGraphics is true

it updates the htmlGraphics object when new data is available. new data mostly happens when a refresh happens.

The console output:

A simple example where dynamic data object is useful.

Both panels have the same code, except that Dynamic data object is false on the top panel and true on the bottom panel.

Panel json (Dynamic data object = false)

{
    "add100Percentage": true,
    "centerAlignContent": true,
    "overflow": "visible",
    "SVGBaseFix": true,
    "codeData": "{\n  \"text\": \"Random text\"\n}",
    "rootCSS": "",
    "css": "* {\n  font-family: Open Sans;\n}\n",
    "html": "<div>\n  <div>Actual value: <strong id=\"actual-value\"></strong></div>\n  <div>onInit Value: <strong id=\"value\"></strong></div>\n</div>\n",
    "renderOnMount": true,
    "onRender": "const actualValueElt = htmlNode.getElementById('actual-value');\n\nconst valueField = data.series[0]?.fields[1];\nconst length = valueField.values.length;\nconst value = valueField.values.get(length - 1)\n\nactualValueElt.textContent = value;\n",
    "dynamicHtmlGraphics": true,
    "dynamicData": false,
    "dynamicFieldDisplayValues": false,
    "dynamicProps": false,
    "panelupdateOnMount": true,
    "onInitOnResize": false,
    "onInit": "const valueElt = htmlNode.getElementById('value');\n\nfunction update() {\n  const valueField = data.series[0]?.fields[1];\n  const length = valueField.values.length;\n  const value = valueField.values.get(length - 1)\n  valueElt.textContent = value;\n}\n\nhtmlNode.addEventListener(\"panelupdate\", update);\n"
}

Panel json (Dynamic data object = true)

{
    "add100Percentage": true,
    "centerAlignContent": true,
    "overflow": "visible",
    "SVGBaseFix": true,
    "codeData": "{\n  \"text\": \"Random text\"\n}",
    "rootCSS": "",
    "css": "* {\n  font-family: Open Sans;\n}\n",
    "html": "<div>\n  <div>Actual value: <strong id=\"actual-value\"></strong></div>\n  <div>onInit Value: <strong id=\"value\"></strong></div>\n</div>\n",
    "renderOnMount": true,
    "onRender": "const actualValueElt = htmlNode.getElementById('actual-value');\n\nconst valueField = data.series[0]?.fields[1];\nconst length = valueField.values.length;\nconst value = valueField.values.get(length - 1)\n\nactualValueElt.textContent = value;\n",
    "dynamicHtmlGraphics": true,
    "dynamicData": false,
    "dynamicFieldDisplayValues": false,
    "dynamicProps": false,
    "panelupdateOnMount": true,
    "onInitOnResize": false,
    "onInit": "const valueElt = htmlNode.getElementById('value');\n\nfunction update() {\n  const valueField = data.series[0]?.fields[1];\n  const length = valueField.values.length;\n  const value = valueField.values.get(length - 1)\n  valueElt.textContent = value;\n}\n\nhtmlNode.addEventListener(\"panelupdate\", update);\n"
}

In general the dynamic stuff is only useful if it's used in an event like panelupdate, onclick, onmouseenter ETC.

Please let me know if this helped :D

[DonatoD]

Thanks so much

[ZuperZee]

Just curious, what made it easier to understand?

[DonatoD]

Honestly I didn't had time to have look at it in detail, but I see you even indicate some more links with more instruction. For sure they will help me more