Text Panel JS not working

Grafana Dashboards
1

Hi,

I have the following code in a Text Pane which is partially working. The non working portion is the one relevant the JS. I have disabled: disable_sanitize_html = true , however, the colour of the filling is not changing when I make the variable batt_curr negative or positive.

Are the JS working in theText Panel? Am I doing something wrong in this code to get the filling change colour based on the variable value sign? I am on Grafana 10.x
I would appreciate some help. Thanks for helping

<script>
  var batt_curr = -10;
  var fillColor = batt_curr < 0 ? "red" : "green";
</script>

<svg width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <!-- UPS Box -->
  <rect x="100" y="20" width="200" height="100" fill="grey" />
  <text x="150" y="70" fill="white">UPS</text>

  <!-- Battery Lines -->
  <line x1="150" y1="120" x2="150" y2="220" stroke="white" stroke-dasharray="5,5"><animate attributeName="stroke-dashoffset" from="10" to="0" dur="0.5s" repeatCount="indefinite" />
  </line>
  <rect x="100" y="220" width="100" height="50" fill="grey" />
  <text x="120" y="250" fill="white">Battery</text>
  <!-- Battery Container -->
  <rect x="100" y="220" width="100" height="50" fill="grey" />
  <!-- Battery Fill (Animated) -->
  <rect x="100" y="270" width="100" height="0" fill={fillColor}>
    <animate attributeName="height" from="0" to="50" dur="3s" repeatCount="indefinite" />
    <animate attributeName="y" from="270" to="220" dur="3s" repeatCount="indefinite" />
  </rect>
  <text x="120" y="250" fill="white">Battery</text>
</svg>
3

Thank you a million. It works perfectly

1 Like