Feature Request: Allow for flashing colors as well as Static

[jammiemil]

As well as being able to set static colors based on thresholds it would be useful to have an option on each thresholds so that we can make a component 'flash' between two colors when a threshold is breached.

[andymchugh]

This sounds outside of scope in that I don't know of a way that's implemented in html in the majority of browsers; or implemented in any dashboard panel plugins that I've used.

But that could be my ignorance. Can you give any examples of where you've seen this? Otherwise I'll close as out of scope on performance grounds.

[jammiemil]

Heres an example using CSS, Not sure if this translates to React/Plugins though (Theres a reason i dont develop my own Plugins :\ )

https://jsfiddle.net/4w2o0brz/

There are also some examples in the Canvas plugin of components being 'animated' or flashing:

https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/canvas/

[andymchugh]

They both appear to be using animations. We don't have general support for animations. I exposed the draw.io flow animation as it's a click-select on draw.io. If there's a similar way to setup blinking animations via the draw.io widget properties I'd be open to looking at it. But adding general purpose support for animations doesn't seem worth it today. If that's what's wanted canvas would be the more natural panel to use. It's all about animations.

[andymchugh]

Closing this one out as 'will not do' for now.

[HaveF]

If there's a similar way to setup blinking animations via the draw.io widget properties I'd be open to looking at it.

@andymchugh Although you said 'will not do' before, I want to leave some of my thoughts here for future reference. 😄

If used well, animation is obviously a way to improve people's perception of the system. This morning I was thinking about this problem, wondering if there is any simple way to accomplish it.

• Looking at SVG.js, maybe we can use cell-id to achieve this function, but this feels a bit complicated, which is equivalent to us needing another configuration input to place our javascript animation code for those cell-id.
• Another solution is the css solution. For each cell we need, we can set the css, which should have limited performance impact.
• Another solution is svg's animate, which I think is also good. insert animate to the target cell.

  <svg width="320" height="320" viewBox="0 0 320 320">
      <path
      fill="#FFFFFF" stroke="#000"
      d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">
      <animate
          attributeType="XML"
          attributeName="fill"
          values="#800;#f00;#800;#800"
          dur="0.8s"
          repeatCount="indefinite"/>
      </path>
  </svg>

for css and svg's animate solution, I believe it can be put in our panelConfig.yaml

By the way, I almost missed ❤️ fillLevel, this is not mentioned in the documentation