Is there a resize event for panel plugins in Grafana 7?

Question

I have made a panel plugin with React for Grafana 7. I would like to know when the panel is resized in the dashboard (i.e. dragged with mouse to make larger or smaller), so the plugin can react to this. I have searched for some kind of onResize event or similar but can't find anything. Is there a way to detect when a panel is resized?

Answer 1

Here's how I handle resize inside panel plugin:

const panelContainer = document.querySelector('selector_for_element_inside_your_plugin').closest('.panel-wrapper');
const panelContanerResizeObserver = new ResizeObserver(resizeHandler);
panelContanerResizeObserver.observe(panelContainer);

In short, You select your panel wrapper and handle its resize with ResizeObserver