Show and hide parts of an SVG

[Flipparen]

Hi all!

I am trying to make certain parts of an SVG file to "hide" when a certain value turns up from the data base but i cant get it to work. This might seem fairly simple but im new to javascript and i find this plugin to be quite tricky to understand for a beginner. Thankfull for all the help i cant get.

Thank you!

[ZuperZee]

Hello @Flipparen.

I've made a repo that hides the SVG element when the value is 1.

Datasource used https://grafana.com/grafana/plugins/marcusolsson-static-datasource/

Here's a simplified version:

HTML/SVG

<svg viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect id="orange-rectangle" x="69" y="162" width="181" height="175" fill="#f80"/>
  <rect id="blue-rectangle" x="250" y="162" width="181" height="175" fill="#08f"/>
</svg>

onRender

const getMetricByName = (alias) => {
  const filteredAliasSeries = data.series.filter((series) => series.name == alias);
  if (filteredAliasSeries.length > 0) {
    return filteredAliasSeries[0].fields[1].state.calcs.last;
  }
  return 'No data';
};

htmlNode.getElementById('orange-rectangle').style.display = getMetricByName('orange-metric') ? "none" : "inline";

I highly recommend to use the repo example

[Flipparen]

Can't thank you enough for this. It worked perfectly! Is it the same for everydatabase or do i have to address it in another way? If i use InfluxDB for example.

[ZuperZee]

Since this plugin (gapit-htmlgraphics-panel) doesn't have rules on how the data should be structured, most (maybe not live data) datasources should work.

Some databases might have a different structure, but I found the easiest way to figure out the structure is by logging data in onRender console.log(data); and check the structure that way.

Copying the property path series[0].fields[1].state.calcs.last is how you'd retrieve the value from orange-metric. Since it can be multiple series (metric queries), it would be better to look for the orange-metric name instead.
Like in this code

const getMetricByName = (alias) => {
  // filteredAliasSeries finds the orange-metric series
  const filteredAliasSeries = data.series.filter((series) => series.name == alias);
  // Checks if filteredAliasSeries is not empty (if it's empty it couldn't find the series)
  if (filteredAliasSeries.length > 0) {
    // The path to where the last value is stored
    return filteredAliasSeries[0].fields[1].state.calcs.last;
  }
  return 'No data';
};

htmlNode.getElementById('orange-rectangle').style.display = getMetricByName('orange-metric') ? "none" : "inline";

InfluxDB has the same structure as the static datasource one, and I believe most datasources follow the same structure.

[Flipparen]

Okey. Thank you so much! 😄