For one of our clients, we’re using Grafana to display charts for the device data. These charts (panels) are embedded in a React app as iframes.
Recently we noticed a strange issue with one of the embedded charts. The bar chart values were updated, but not their colouring.
If one would reload the iframe URL, the update is there, it just doesn’t come via the WebSockets…
Strangely enough, this didn’t happen when we open the embedded panel from the Grafana dashboard itself.
The issue is that the colouring is part of the bar chart configuration, which is not being updated via the WebSocket messages if the panel is embedded in their recommended way (URL/d-solo/CHART_PARAMS).
If you embed the panel by just copying the Grafana panel URL (URL/d/CHART_PARAMS) it works but with a catch – the iframe does not take 100% of the container width and height.
In the end, we were forced to re-render the iframe (by providing a different key prop) each time we did an action from our UI that would result in a change to this specific chart.
Super hacky, but hey – it works 🥲