Panel developping: How to detect panel resize?

Grafana Plugin Development
1

Hi there,
what is the best way to detect if the panel size has changed? I couldn’t find a event to trigger resizing the panel content. I don’t really like to call resize() on the graph (Plot.ly) on each render or refresh event.

I tried this:

link(scope, elem, attrs, ctrl) {
    elem.on('resize', (evt) => { console.log("ON RESIZE"); });
}

But it seems that “resize” event does not arrive here…
Is the only way to add a watch for the element width?

2

Well… maybe I have to ask in a bit different way: What are the guidelines on resizing panels? This should be done on every render or / and also on every refresh event?

3

Currently when a panel is resized then the span-changed event is emitted:

See code here:
https://github.com/grafana/grafana/blob/master/public/app/features/dashboard/row/row_model.ts#L56

And an example of listening:

https://github.com/grafana/grafana/blob/master/public/app/features/dashboard/row/row_ctrl.ts#L228

Not sure if you can get at that from a plugin though as that is on a row. You might be able to get the dashboard rows with dashboardSrv (here is an example of Zabbix getting the dashboard rows).

In the next major of version, we are switching out the dashboard grid and there will be an an event emitted called panel-size-changed which you can listen to. (Doesn’t really help you now though).

1 Like
4

Hi Daniel
Thank you very much for the detailed hints! Luckily row is inherited by the panel controller class, so it was easy to add a listener like this:

this.row.events.on('span-changed', () => {console.log("span-changed");});

But then I realized that “span-changed” is not consistently emitted. Only when the panel is dragged. But not when the size changes for another reason, as it occurs when switching to fullscreen or edit mode.

I ended up checking the size in each render() call, and if it has changed, I call the resize mechanism of the embedded graph element. This seems to be the most reliable solution for now.

Best regards

1 Like